diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index a214e3f5..6f878150 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -32,6 +32,12 @@ jobs:
 
       - name: Build dashboard
         run: yarn build:dashboard
+        env:
+          VITE_GOOGLE_CLIENT_ID: ${{ secrets.VITE_GOOGLE_CLIENT_ID }}
+          VITE_SERVER_BASE_URL: ${{ secrets.VITE_SERVER_BASE_URL }}
+          VITE_LINK_SURVEY_HOST: ${{ secrets.VITE_LINK_SURVEY_HOST }}
+          VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.VITE_PUBLIC_POSTHOG_KEY }}
+          VITE_PUBLIC_POSTHOG_HOST: ${{ secrets.VITE_PUBLIC_POSTHOG_HOST }}
 
       - name: Start Backend Server
         run: docker compose -f ./docker-compose-test.yml up -d
diff --git a/apps/frontend/.gitignore b/apps/frontend/.gitignore
index b88c8135..2f878a4e 100644
--- a/apps/frontend/.gitignore
+++ b/apps/frontend/.gitignore
@@ -26,3 +26,4 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/playwright/.auth/
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 93317f01..5e312657 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -60,6 +60,7 @@
         "zustand": "^4.4.5"
     },
     "devDependencies": {
+        "@faker-js/faker": "^9.0.1",
         "@graphql-codegen/cli": "^3.3.1",
         "@graphql-codegen/client-preset": "^4.1.0",
         "@graphql-codegen/typescript": "^3.0.4",
diff --git a/apps/frontend/playwright.config.ts b/apps/frontend/playwright.config.ts
index 55c996b3..6a4663f4 100644
--- a/apps/frontend/playwright.config.ts
+++ b/apps/frontend/playwright.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
+import { ONBOARDED_USER_FILE } from "./tests/utils/constants";
 
 /**
  * Read environment variables from file.
@@ -12,14 +13,14 @@ import { defineConfig, devices } from "@playwright/test";
  */
 export default defineConfig({
     testDir: "./tests",
+    timeout: 90000,
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
-    /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
+    retries: 3,
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
+    workers: process.env.CI ? undefined : "80%",
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: "html",
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -33,19 +34,24 @@ export default defineConfig({
 
     /* Configure projects for major browsers */
     projects: [
+        { name: "setup", testMatch: /.*\.setup\.ts/ },
+
         {
             name: "chromium",
-            use: { ...devices["Desktop Chrome"] },
+            use: { ...devices["Desktop Chrome"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         {
             name: "firefox",
-            use: { ...devices["Desktop Firefox"] },
+            use: { ...devices["Desktop Firefox"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         {
             name: "webkit",
-            use: { ...devices["Desktop Safari"] },
+            use: { ...devices["Desktop Safari"], storageState: ONBOARDED_USER_FILE },
+            dependencies: ["setup"],
         },
 
         /* Test against mobile viewports. */
diff --git a/apps/frontend/src/layout/AuthLayout.tsx b/apps/frontend/src/layout/AuthLayout.tsx
index e7ebd192..f54e23aa 100644
--- a/apps/frontend/src/layout/AuthLayout.tsx
+++ b/apps/frontend/src/layout/AuthLayout.tsx
@@ -6,7 +6,7 @@ import Profile2 from "../assets/images/loginScreen/profile-2.png";
 import Profile3 from "../assets/images/loginScreen/profile-3.png";
 import Logo from "../assets/images/logo.png";
 
-const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID ?? "";
 
 export function AuthLayout() {
     return (
diff --git a/apps/frontend/src/layout/partials/Navbar.tsx b/apps/frontend/src/layout/partials/Navbar.tsx
index 20ee6bea..a92084b7 100644
--- a/apps/frontend/src/layout/partials/Navbar.tsx
+++ b/apps/frontend/src/layout/partials/Navbar.tsx
@@ -165,6 +165,7 @@ export const Navbar = () => {
                     </div>
                     <div className="space-y-[27px] pb-[24px]">
                         <button
+                            data-testid="create-survey"
                             onClick={() =>
                                 navigate(
                                     `${ROUTES.SURVEY_LIST}/?create=2`
@@ -247,6 +248,7 @@ export const Navbar = () => {
                             onClick={() => {
                                 setOpenOrganizationInviteModal(true);
                             }}
+                            data-testid="invite-team-btn"
                         >
                             <span>
                                 <CirclePlusIcon />
diff --git a/apps/frontend/src/layout/partials/UserProfile.tsx b/apps/frontend/src/layout/partials/UserProfile.tsx
index 79355458..e7691016 100644
--- a/apps/frontend/src/layout/partials/UserProfile.tsx
+++ b/apps/frontend/src/layout/partials/UserProfile.tsx
@@ -48,7 +48,10 @@ export const UserProfile = () => {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className="flex w-full items-center text-intg-text outline-none">
+            <DropdownMenuTrigger
+                data-testid="profile-btn"
+                className="flex w-full items-center text-intg-text outline-none"
+            >
                 <div className="flex items-center gap-2">
                     <img src={Frame} alt="picture frame" className="h-[31px] w-[31px] rounded object-contain" />
                     <span className="text-sm">Profile</span>
@@ -144,6 +147,7 @@ export const UserProfile = () => {
                     </DropdownMenuSubContent>
                 </DropdownMenuSub>
                 <DropdownMenuItem
+                    data-testid="workspace-settings-btn"
                     className="flex items-center gap-2 px-3 py-2"
                     onClick={() =>
                         navigate(
@@ -174,7 +178,11 @@ export const UserProfile = () => {
                     );
                 })}
                 <DropdownMenuSeparator className="my-3 border-[.5px] border-intg-bg-4" />
-                <DropdownMenuItem className="flex cursor-pointer items-center gap-2 px-3 py-2" onClick={logout}>
+                <DropdownMenuItem
+                    data-testid="logout"
+                    className="flex cursor-pointer items-center gap-2 px-3 py-2"
+                    onClick={logout}
+                >
                     <LogoutIcon />
                     <p className="text-sm text-intg-error-text">Log out</p>
                 </DropdownMenuItem>
diff --git a/apps/frontend/src/modules/surveys/components/SurveyHome/components/SurveyList.tsx b/apps/frontend/src/modules/surveys/components/SurveyHome/components/SurveyList.tsx
index 5a4c9774..4b693d79 100644
--- a/apps/frontend/src/modules/surveys/components/SurveyHome/components/SurveyList.tsx
+++ b/apps/frontend/src/modules/surveys/components/SurveyHome/components/SurveyList.tsx
@@ -100,6 +100,7 @@ export const SurveyList = () => {
                             return (
                                 <TableRow
                                     key={survey.id}
+                                    data-testid={survey.name ?? survey.id}
                                     className="border-intg-bg-4 text-center font-light transition-all duration-300 ease-in hover:bg-intg-bg-8"
                                 >
                                     <TableCell
@@ -152,7 +153,7 @@ export const SurveyList = () => {
                                     </TableCell>
                                     <TableCell className="text-center">
                                         <Popover.Root>
-                                            <Popover.Trigger asChild>
+                                            <Popover.Trigger asChild data-testid="survey-dropdown-menu">
                                                 <button className="w-fit rounded-md px-1 py-1 transition-all duration-300 ease-in hover:cursor-pointer hover:bg-intg-bg-1 data-[state=a]:bg-intg-bg-1">
                                                     <MoreHorizontal color="#AFAAC7" />
                                                 </button>
@@ -252,6 +253,7 @@ export const SurveyList = () => {
                                                                         getSurveyNameOnSelect(survey?.id ?? "", event)
                                                                     }
                                                                     className="flex gap-[6px] rounded-md py-[7px] text-sm font-normal text-intg-text-4 transition-all duration-300 ease-in hover:cursor-pointer hover:bg-intg-bg-1 hover:pl-[8px]"
+                                                                    data-testid="delete-survey"
                                                                 >
                                                                     <Trash2 size="18" color="#AFAAC7" />
                                                                     Delete
@@ -265,6 +267,7 @@ export const SurveyList = () => {
                                                                 className="w-[500px]"
                                                             >
                                                                 <button
+                                                                    data-testid="confirm-delete-survey"
                                                                     disabled={loading}
                                                                     onClick={(e) =>
                                                                         handleSurveyDelete(e, survey as Survey)
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/components/EditorTextInput.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/components/EditorTextInput.tsx
index 3473ad5f..d8012b51 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/components/EditorTextInput.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/components/EditorTextInput.tsx
@@ -22,6 +22,7 @@ export interface EditorTextProps {
     defaultValue?: string;
     showMention?: boolean;
     value?: string;
+    dataTestid?: string;
 }
 
 export const EditorTextInput = ({
@@ -35,6 +36,7 @@ export const EditorTextInput = ({
     placeholder,
     showMention = false,
     value,
+    dataTestid,
 }: EditorTextProps) => {
     const [displayFallbackField, setDisplayFallbackField] = useState(false);
     const [fallbackValue, setFallbackValue] = useState("");
@@ -269,6 +271,7 @@ export const EditorTextInput = ({
                     value={value}
                     defaultValue={defaultValue}
                     placeholder={placeholder}
+                    data-testid={dataTestid}
                     className="rounded-lg border border-transparent bg-[#272138] text-sm text-intg-text-1 placeholder:text-intg-text-3 focus:border-intg-text-3 focus:outline-none"
                     disabled={maxCharacterCount === stripHtmlTags(defaultValue ?? "")?.length}
                     readOnly={survey?.status === SurveyStatusEnum.Active}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/LogicTab.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/LogicTab.tsx
index c4568a7e..53266112 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/LogicTab.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/LogicTab.tsx
@@ -165,6 +165,7 @@ export const LogicTab = ({ questionIndex }: Props) => {
 
                     setIsCreatingLogic(true);
                 }}
+                data-testid="add-new-logic"
             >
                 <p className="text-xs underline">Add new Logic</p>
             </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/QuestionPanel.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/QuestionPanel.tsx
index 7035b5fd..9bf27196 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/QuestionPanel.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/QuestionPanel.tsx
@@ -64,11 +64,12 @@ export const QuestionPanel = ({ questionIndex }: Props) => {
                 </Tabs.List>
 
                 <div className="flex items-center gap-3">
-                    {survey?.status !== SurveyStatusEnum.Active ? (
-                        <Trash2 onClick={() => deleteQuestion(question)} className="cursor-pointer" size={20} />
-                    ) : null}
-
-                    <button onClick={clear}>
+                    <button data-testid="delete-question">
+                        {survey?.status !== SurveyStatusEnum.Active ? (
+                            <Trash2 onClick={() => deleteQuestion(question)} className="cursor-pointer" size={20} />
+                        ) : null}
+                    </button>
+                    <button onClick={clear} name="close-question">
                         <XIcon className="cursor-pointer" />
                     </button>
                 </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/Buttons/TextButton.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/Buttons/TextButton.tsx
index c3f67f69..cfbae4de 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/Buttons/TextButton.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/Buttons/TextButton.tsx
@@ -5,9 +5,10 @@ type Props = {
     onclick?: () => void;
     classname?: string;
     size?: "sm" | "md";
+    dataTestid?: string;
 };
 
-const TextButton = ({ text, onclick, classname, size = "sm" }: Props) => {
+const TextButton = ({ text, onclick, classname, size = "sm", dataTestid }: Props) => {
     return (
         <div
             onClick={onclick && onclick}
@@ -16,6 +17,7 @@ const TextButton = ({ text, onclick, classname, size = "sm" }: Props) => {
                     size === "md" ? "text-sm" : "text-xs"
                 } w-fit cursor-pointer text-intg-text underline transition-colors delay-75 duration-500 ease-in hover:text-white `,
             )}
+            data-testid={dataTestid}
         >
             {text}
         </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/CTAFields.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/CTAFields.tsx
index c51d4f1b..669ee4da 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/CTAFields.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/CTAFields.tsx
@@ -84,6 +84,7 @@ export const CTAFields = () => {
                     classname={`${showDescription ? "hidden" : "block"} mt-2`}
                     text="Add description"
                     onclick={() => setShowDescription(true)}
+                    dataTestid="add-description-btn"
                 />
             ) : null}
         </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/FormFieldList.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/FormFieldList.tsx
index 5ea53f78..00a1d271 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/FormFieldList.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/FormFieldList.tsx
@@ -49,6 +49,7 @@ export const FormFieldList = () => {
                                             options: newOptions,
                                         });
                                     }}
+                                    dataTestid="form-type-indicator"
                                 />
 
                                 <EditorTextInput
@@ -66,6 +67,7 @@ export const FormFieldList = () => {
                                             true,
                                         );
                                     }}
+                                    dataTestid="form-label"
                                 />
                             </div>
 
@@ -99,6 +101,7 @@ export const FormFieldList = () => {
             {survey?.status !== SurveyStatusEnum.Active ? (
                 <TextButton
                     text={"Add next field"}
+                    dataTestid="add-next-field-btn"
                     onclick={() => {
                         const highestOrderNumber = getHighestOrderNumber(question?.options);
                         const newOptions = [...question.options];
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/RatingFields.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/RatingFields.tsx
index ddbf3292..1157bd0d 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/RatingFields.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/EditFields/RatingFields.tsx
@@ -54,6 +54,7 @@ export const RatingFields = () => {
                 <div className="flex gap-2">
                     <div className="flex-1">
                         <ReactSelect
+                            dataTestid="scale-style-indicator"
                             label="Scale Style"
                             options={scaleStyleOptions}
                             defaultValue={scaleStyleOptions.find((option) => option.value === question?.type)}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/DefaultLogicBox.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/DefaultLogicBox.tsx
index 85f533bf..8d4e11f7 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/DefaultLogicBox.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/LogicFields/DefaultLogicBox.tsx
@@ -132,6 +132,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                         value={conditionOptions((question as ParsedQuestion).type!)?.find(
                             (option: Option) => option.value === (logicValues.condition as string),
                         )}
+                        dataTestid="select-condition-indicator"
                     />
                 </div>
             </div>
@@ -174,6 +175,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                                 onOperatorChange={() => {
                                     handleOperatorChange();
                                 }}
+                                dataTestid="value-indicator"
                                 comboBox={true}
                                 options={logicValuesOptions(question!)}
                                 onchange={handleValuesSelection}
@@ -204,6 +206,7 @@ export const DefaultLogicBox: React.FC<Props> = ({
                         <ReactSelect
                             options={destinationOptions(parsedQuestions, question!)}
                             onchange={handleDestinationSelection}
+                            dataTestid="destination-indicator"
                         />
                     </div>
                 </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/MinMaxSelector.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/MinMaxSelector.tsx
index b120f390..e56b2542 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/MinMaxSelector.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/MinMaxSelector.tsx
@@ -46,11 +46,23 @@ const MinMaxSelector = ({ options, maxChange, minChange, minValue, maxValue, max
         <div className="flex gap-4">
             <div className="flex-1">
                 <p className="text-sm">Min</p>
-                <ReactSelect onchange={handleMinChange} options={options} value={min} defaultValue={minDefault} />
+                <ReactSelect
+                    onchange={handleMinChange}
+                    dataTestid={"min-indicator"}
+                    options={options}
+                    value={min}
+                    defaultValue={minDefault}
+                />
             </div>
             <div className="flex-1">
                 <p className="text-sm">Max</p>
-                <ReactSelect onchange={handleMaxChange} options={options} value={max} defaultValue={maxDefault} />
+                <ReactSelect
+                    onchange={handleMaxChange}
+                    dataTestid="max-indicator"
+                    options={options}
+                    value={max}
+                    defaultValue={maxDefault}
+                />
             </div>
         </div>
     );
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/QuestionTypes.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/QuestionTypes.tsx
index 861f7e66..272c05c3 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/QuestionTypes.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/QuestionTypes.tsx
@@ -62,13 +62,14 @@ export const QuestionOptions = () => {
 
     return (
         <Popover open={showQuestionTypes} onOpenChange={(open) => setShowQuestionTypes(open)}>
-            <PopoverTrigger className="w-full">
+            <PopoverTrigger className="w-full" asChild>
                 <Button
                     className="flex items-center justify-center gap-2 px-[12px] py-[12px]"
                     onClick={() => {
                         setShowQuestionTypes(!showQuestionTypes);
                         setShowStudioOverlay(!showStudioOverlay);
                     }}
+                    data-testid="add-question"
                 >
                     <PlusCircle />
                     <span className="w-max text-base font-normal">
@@ -88,6 +89,7 @@ export const QuestionOptions = () => {
                         return (
                             <div
                                 key={questionType.name}
+                                data-testid={questionType.name}
                                 className="flex items-center gap-4 rounded-lg p-2 text-intg-text hover:bg-intg-bg-10"
                                 onClick={() => {
                                     handleCreateQuestion(questionType.type, questionType.id);
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/ReactSelect.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/ReactSelect.tsx
index 46fa8701..96afa743 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/ReactSelect.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/ReactSelect.tsx
@@ -2,8 +2,17 @@ import { SurveyStatusEnum } from "@/generated/graphql";
 import { useSurvey } from "@/modules/surveys/hooks/useSurvey";
 import { LogicOperator } from "@/types";
 import { cn } from "@/utils";
+import { ChevronDown } from "lucide-react";
 import { useState } from "react";
-import Select, { CSSObjectWithLabel, MultiValue, MultiValueGenericProps, SingleValue } from "react-select";
+import Select, {
+    components,
+    CSSObjectWithLabel,
+    DropdownIndicatorProps,
+    GroupBase,
+    MultiValue,
+    MultiValueGenericProps,
+    SingleValue,
+} from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { LogicOperatorBtn } from "./LogicOperator";
 
@@ -19,6 +28,7 @@ type Props = {
     onOperatorChange?: (value: Option) => void;
     logicOperator?: LogicOperator;
     classname?: string;
+    dataTestid?: string;
 };
 
 export interface Option {
@@ -45,6 +55,7 @@ export const ReactSelect = ({
     logicOperator,
     shouldLogicalOperatorChange = false,
     classname,
+    dataTestid,
 }: Props) => {
     const [values, setValue] = useState<Option | Option[]>([]);
     const [userOptions, setUserOptions] = useState<Option[]>([]);
@@ -118,6 +129,16 @@ export const ReactSelect = ({
         }),
     };
 
+    const DropdownIndicator = <Option,>(props: DropdownIndicatorProps<Option, boolean, GroupBase<Option>>) => {
+        return (
+            <components.DropdownIndicator {...props}>
+                <span data-testid={dataTestid}>
+                    <ChevronDown size={20} />
+                </span>
+            </components.DropdownIndicator>
+        );
+    };
+
     const customMultiValue = (props: MultiValueGenericProps<Option>) => {
         return (
             <div className="flex items-center justify-center">
@@ -170,6 +191,7 @@ export const ReactSelect = ({
                         className={classname}
                         isDisabled={survey?.status === SurveyStatusEnum.Active}
                         classNamePrefix={"react-select"}
+                        components={{ DropdownIndicator }}
                     />
                 </div>
             ) : (
@@ -177,7 +199,7 @@ export const ReactSelect = ({
                     {enableUserOptions ? (
                         <CreatableSelect<Option, boolean>
                             closeMenuOnSelect={false}
-                            components={{ MultiValue: customMultiValue }}
+                            components={{ MultiValue: customMultiValue, DropdownIndicator }}
                             onCreateOption={(inputValue) => {
                                 handleCreate(inputValue);
                                 onchange && onchange([...(values as Option[]), createOption(inputValue)]);
@@ -197,7 +219,7 @@ export const ReactSelect = ({
                     ) : (
                         <div>
                             <Select
-                                components={{ MultiValue: customMultiValue }}
+                                components={{ MultiValue: customMultiValue, DropdownIndicator }}
                                 value={value}
                                 options={options}
                                 defaultValue={defaultValue}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/BooleanSettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/BooleanSettings.tsx
index ba50686f..45f5c923 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/BooleanSettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/BooleanSettings.tsx
@@ -26,6 +26,7 @@ export const BooleanSettings = () => {
     return (
         <div className="space-y-6">
             <ReactSelect
+                dataTestid="shape-indicator"
                 label="Shape"
                 options={booleanOptionsShape}
                 defaultValue={booleanOptionsShape.find((option) => option.value === question?.settings?.shape)}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/CTASettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/CTASettings.tsx
index cab9d80a..fc115444 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/CTASettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/CTASettings.tsx
@@ -21,6 +21,7 @@ export const CTASettings = () => {
     return (
         <>
             <EditorTextInput
+                dataTestid="button-label"
                 label="Button label"
                 defaultValue={question?.settings.text}
                 onChange={(e) => {
@@ -34,6 +35,7 @@ export const CTASettings = () => {
                         options={ctaTypeOptions}
                         defaultValue={ctaTypeOptions.find((option) => option.value === question?.settings.type)}
                         label="Button type"
+                        dataTestid="button-type-indicator"
                         onchange={(option) => {
                             const newSettings = {
                                 ...question.settings,
@@ -51,6 +53,7 @@ export const CTASettings = () => {
 
                     {question?.settings.type === CTAType.LINK && (
                         <EditorTextInput
+                            dataTestid="button-link"
                             maxCharacterCount={100}
                             label="Button link"
                             defaultValue={question?.settings.link}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/ChoiceSettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/ChoiceSettings.tsx
index 02f0c9da..2d2c61f8 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/ChoiceSettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/ChoiceSettings.tsx
@@ -76,6 +76,7 @@ export const ChoiceSettings = () => {
                 <>
                     <div className="rounded bg-[#272138]">
                         <Switch
+                            dataTestid="randomize-answers"
                             name="randomizeAnswers"
                             label="Randomize answers"
                             defaultValue={question?.settings?.randomize}
@@ -88,6 +89,7 @@ export const ChoiceSettings = () => {
 
                     <div className="rounded bg-[#272138]">
                         <Switch
+                            dataTestid="randomize-except-last"
                             name="randomizeAnswersExceptLast"
                             label="Randomize except last"
                             defaultValue={question?.settings.randomizeExceptLast}
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/FormSettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/FormSettings.tsx
index c5db987b..70befe26 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/FormSettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/FormSettings.tsx
@@ -33,6 +33,7 @@ export const FormSettings = () => {
                         <Switch
                             name="disclaimer"
                             label="Show Disclaimer"
+                            dataTestid="toggle-disclaimer"
                             defaultValue={question?.settings.disclaimer}
                             onChange={(e) => {
                                 const newSettings = { ...question?.settings };
@@ -65,6 +66,7 @@ export const FormSettings = () => {
                             maxCharacterCount={100}
                             defaultValue={question?.settings.disclaimerText}
                             label={"Disclaimer content"}
+                            dataTestid="disclaimer-content"
                             placeholder="Type in your disclaimer here"
                         />
                     ) : null}
@@ -86,6 +88,7 @@ export const FormSettings = () => {
                                 });
                                 setShowConsent(!showConsent);
                             }}
+                            dataTestid="toggle-consent-box"
                             disabled={survey?.status === SurveyStatusEnum.Active}
                         />
                     </div>
@@ -106,6 +109,7 @@ export const FormSettings = () => {
                             maxCharacterCount={100}
                             defaultValue={question.settings.consentText}
                             placeholder="Type in consent label here"
+                            dataTestid="consent-label"
                         />
                     ) : null}
                 </div>
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/RangeSettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/RangeSettings.tsx
index e0b12327..8bff4131 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/RangeSettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/RangeSettings.tsx
@@ -42,6 +42,7 @@ export const RangeSettings = () => {
                                     updateSettings({ leftText: e.target.value }, true);
                                 }}
                                 maxCharacterCount={100}
+                                dataTestid="left-text"
                             />
                         </div>
                     </div>
@@ -54,6 +55,7 @@ export const RangeSettings = () => {
                                 onChange={(e) => {
                                     updateSettings({ rightText: e.target.value }, true);
                                 }}
+                                dataTestid="right-text"
                             />
                         </div>
                     </div>
@@ -77,6 +79,7 @@ export const RangeSettings = () => {
                         placeholder=""
                         defaultValue={question?.settings.rightText}
                         onChange={(e) => updateSettings({ rightText: e.target.value }, true)}
+                        dataTestid="right-text"
                     />
                     <EditorTextInput
                         label="Left text"
@@ -84,6 +87,7 @@ export const RangeSettings = () => {
                         placeholder=""
                         defaultValue={question?.settings.leftText}
                         onChange={(e) => updateSettings({ leftText: e.target.value })}
+                        dataTestid="left-text"
                     />
 
                     <ReactSelect
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/TextSettings.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/TextSettings.tsx
index e721e05a..6b0d6716 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/TextSettings.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/attributes/SettingsField/TextSettings.tsx
@@ -16,6 +16,7 @@ export const TextSettings = () => {
             <Switch
                 name="Long_answer"
                 label="Long Answer"
+                dataTestid="toggle-answer-length"
                 defaultValue={!question?.settings.singleLine}
                 onChange={(e) => {
                     updateQuestion({
diff --git a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/index.tsx b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/index.tsx
index 7d48dabe..4ae97ddb 100644
--- a/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/index.tsx
+++ b/apps/frontend/src/modules/surveys/components/studio/create/editor-panel/questions/index.tsx
@@ -42,11 +42,16 @@ export default function UpdateQuestion() {
                     >
                         {parsedQuestions?.map((question, index) => {
                             return (
-                                <Accordion.Item value={question.reference ?? ""} key={question.reference}>
+                                <Accordion.Item
+                                    value={question.reference ?? ""}
+                                    key={question.reference}
+                                    data-testid={question.reference}
+                                >
                                     <Accordion.Header>
                                         <Accordion.Trigger
                                             value={question.reference ?? ""}
                                             className="w-full items-center  justify-between gap-2 rounded-lg bg-intg-bg-9 p-4 text-intg-text-7 data-[state=close]:flex data-[state=open]:hidden"
+                                            data-testid="question-trigger"
                                         >
                                             <div className="flex items-center gap-4">
                                                 <div>
@@ -77,7 +82,7 @@ export default function UpdateQuestion() {
                                                             }}
                                                         />
                                                     ) : (
-                                                        <p className="text-sm text-intg-text">
+                                                        <p className="text-sm text-intg-text" data-test-id="question">
                                                             Enter your question here, use '@' to recall information.
                                                         </p>
                                                     )}
diff --git a/apps/frontend/src/modules/workspace/components/invite/WorkspaceInvite.tsx b/apps/frontend/src/modules/workspace/components/invite/WorkspaceInvite.tsx
index 4a3a15ca..efcb69e7 100644
--- a/apps/frontend/src/modules/workspace/components/invite/WorkspaceInvite.tsx
+++ b/apps/frontend/src/modules/workspace/components/invite/WorkspaceInvite.tsx
@@ -1,5 +1,5 @@
 import { Link, LucideMail, RefreshCcwIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { OrganizationErrorCode, OrganizationInvite, OrganizationInviteCreate, User } from "@/generated/graphql";
 import { useAuth } from "@/modules/auth/hooks/useAuth";
@@ -36,6 +36,10 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
         }
     };
 
+    useEffect(() => {
+        handleLinkInvite();
+    }, [onOpenChange]);
+
     const handleEmailInvite = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (!inviteEmail) {
@@ -169,7 +173,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                         </div>
                     </form>
                 ) : (
-                    <div onSubmit={handleLinkInvite} className="mt-3">
+                    <div className="mt-3">
                         <p className="mb-4 text-sm text-intg-text">
                             Invite link will provide a unique URL that allows anyone to join your organization.
                         </p>
@@ -185,6 +189,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                                             size="sm"
                                             disabled={loading}
                                             onClick={handleInviteLinkRefresh}
+                                            data-testid="refresh-invite-link"
                                             icon={
                                                 <RefreshCcwIcon
                                                     size={16}
@@ -193,6 +198,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                                             }
                                         />
                                     }
+                                    data-testid="invite-link"
                                 />
                             </div>
                             <Button
@@ -219,8 +225,8 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                         size="md"
                         onClick={() => {
                             setToggleInviteType(!toggleInviteType);
-                            !toggleInviteType && handleInviteLinkRefresh();
                         }}
+                        data-testid="toggle-invite-type"
                     />
                 </div>
             </DialogContent>
diff --git a/apps/frontend/src/modules/workspace/components/settings/Workspace/General.tsx b/apps/frontend/src/modules/workspace/components/settings/Workspace/General.tsx
index a83d88b8..954bfff3 100644
--- a/apps/frontend/src/modules/workspace/components/settings/Workspace/General.tsx
+++ b/apps/frontend/src/modules/workspace/components/settings/Workspace/General.tsx
@@ -1,7 +1,7 @@
 import { useProject } from "@/modules/projects/hooks/useProject";
 import { useWorkspace } from "@/modules/workspace/hooks/useWorkspace";
 import { ROUTES } from "@/routes";
-import { Button, TextInput } from "@/ui";
+import { Button, GlobalSpinner, TextInput } from "@/ui";
 import { toast } from "@/utils/toast";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
@@ -12,9 +12,9 @@ type WorkspaceData = {
 };
 
 export const General = () => {
-    const navigate = useNavigate();
-    const { workspace, updateWorkspace } = useWorkspace();
     const { project } = useProject();
+    const { workspace, updateWorkspace, loading } = useWorkspace();
+    const navigate = useNavigate();
 
     const {
         register,
@@ -40,18 +40,19 @@ export const General = () => {
             },
             false,
         );
-
-        if (response?.data?.organizationUpdate?.organization?.slug && project?.slug) {
+        if (response?.data?.organizationUpdate) {
             navigate(
                 `${ROUTES.WORKSPACE_SETTINGS}`
-                    .replace(":orgSlug", response.data.organizationUpdate.organization?.slug)
-                    .replace(":projectSlug", project?.slug),
+                    .replace(":orgSlug", response?.data?.organizationUpdate?.organization?.slug!)
+                    .replace(":projectSlug", project?.slug!),
             );
-            toast.success(`Your organization name has been updated`);
-        } else {
-            toast.error(`Your organization failed to update, please try again later`);
         }
+        toast.success(`Your organization name has been updated`);
     };
+
+    if (loading) {
+        return <GlobalSpinner />;
+    }
     return (
         <form className="w-[593px] pt-10" onSubmit={handleSubmit(onSubmit)}>
             <div className="space-y-4">
@@ -75,6 +76,7 @@ export const General = () => {
                     defaultValue={workspace?.name}
                     error={!!errors.workspaceName?.message}
                     errorMessage={errors.workspaceName?.message}
+                    data-testid="workspace-name"
                 />
                 <TextInput
                     prefix="integraflow.app/"
@@ -101,6 +103,7 @@ export const General = () => {
                     })}
                     error={!!errors.workspaceUrl?.message}
                     errorMessage={errors.workspaceUrl?.message}
+                    data-testid="workspace-url"
                 />
                 <div className="w-[114px]">
                     <Button text="Update" type="submit" className="w-[114px]" size="md" />
diff --git a/apps/frontend/src/pages/CreateWorkspace.tsx b/apps/frontend/src/pages/CreateWorkspace.tsx
index 636e649c..577e216d 100644
--- a/apps/frontend/src/pages/CreateWorkspace.tsx
+++ b/apps/frontend/src/pages/CreateWorkspace.tsx
@@ -201,7 +201,7 @@ const CreateWorkspace = () => {
                                     />
                                 </div>
                             </div>
-                            <Button text="Create Workspace" />
+                            <Button text="Create Workspace" data-testid="create-workspace" />
                         </form>
                     </div>
                 </div>
diff --git a/apps/frontend/src/ui/Pagination/index.tsx b/apps/frontend/src/ui/Pagination/index.tsx
index b00d5eba..efa5f8cd 100644
--- a/apps/frontend/src/ui/Pagination/index.tsx
+++ b/apps/frontend/src/ui/Pagination/index.tsx
@@ -23,7 +23,8 @@ export const Pagination = ({
     return (
         <div className={cn("flex items-center justify-between text-intg-text-4", className ?? "")}>
             <p>
-                {totalCount} {itemName}
+                <span data-testid="survey-count">{totalCount}</span>
+                <span>{itemName}</span>
             </p>
 
             <div className="flex gap-4">
diff --git a/apps/frontend/src/ui/Switch/Switch.tsx b/apps/frontend/src/ui/Switch/Switch.tsx
index d05b7533..b6c2b102 100644
--- a/apps/frontend/src/ui/Switch/Switch.tsx
+++ b/apps/frontend/src/ui/Switch/Switch.tsx
@@ -8,10 +8,11 @@ type Props = {
     onChange?: (e: { target: { value: boolean } }) => void;
     defaultValue?: boolean;
     disabled?: boolean;
+    dataTestid?: string;
 };
 
 export const Switch = forwardRef<HTMLButtonElement, Props>(
-    ({ label, value, name, defaultValue, onChange, disabled }, ref) => {
+    ({ label, value, name, defaultValue, dataTestid, onChange, disabled }, ref) => {
         return (
             <div className="flex items-center justify-between rounded-lg bg-intg-bg-15 px-4 py-3">
                 <label className="text-sm capitalize leading-none text-intg-text-1" htmlFor={label}>
@@ -30,6 +31,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(
                     onCheckedChange={(value: boolean) => onChange && onChange({ target: { value } })}
                     defaultChecked={defaultValue}
                     disabled={disabled}
+                    data-testid={dataTestid}
                 >
                     <SwitchPrimitive.Thumb className="block h-[13px] w-[13px] translate-x-1 rounded-full bg-[#6941C6]  transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[15px]" />
                 </SwitchPrimitive.Root>
diff --git a/apps/frontend/tests/auth.setup.ts b/apps/frontend/tests/auth.setup.ts
new file mode 100644
index 00000000..e92497ba
--- /dev/null
+++ b/apps/frontend/tests/auth.setup.ts
@@ -0,0 +1,134 @@
+import { faker } from "@faker-js/faker";
+import { expect, Page, test as setup } from "@playwright/test";
+import {
+    NEW_USER_FILE,
+    NON_ONBOARDED_USER_FILE,
+    ONBOARDED_USER_FILE,
+    ROUTES,
+    SURVEY_MAKER_FILE,
+    userCredentials,
+} from "./utils/constants";
+import { authenticateUser, saveSurveyMakerDetails, saveUserDetails } from "./utils/helper";
+
+setup("authenticate as new user", async ({ page }) => {
+    await authenticateUser(page, userCredentials.NEW_USER_EMAIL);
+
+    await page.waitForURL("/create-workspace");
+    await expect(page).toHaveURL("/create-workspace");
+    await expect(page.locator("h3")).toContainText("Create a new workspace");
+
+    await page.context().storageState({ path: NEW_USER_FILE });
+});
+
+setup("authenticate as survey maker", async ({ page }) => {
+    await authenticateUser(page, userCredentials.SURVEY_MAKER);
+
+    await page.waitForURL((url) => {
+        return ROUTES.PATTERNS.ONBOARDING_URL.test(url.pathname) || url.pathname === ROUTES.WORKSPACE.CREATE;
+    });
+
+    const currentUrl = page.url();
+
+    if (currentUrl.includes(ROUTES.WORKSPACE.CREATE)) {
+        await expect(page).toHaveURL(ROUTES.WORKSPACE.CREATE);
+        await expect(page.locator("h3")).toContainText("Create a new workspace");
+
+        await page.locator('[name="workspaceName"]').fill("survey maker");
+        await page.locator('[name="workspaceUrl"]').fill("survey-maker");
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL(ROUTES.PATTERNS.ONBOARDING_URL);
+        const url = new URL(page.url());
+        await page.getByRole("link", { name: "Surveys" }).click();
+        await saveSurveyMakerDetails(page, SURVEY_MAKER_FILE, url);
+    } else if (ROUTES.PATTERNS.ONBOARDING_URL.test(currentUrl)) {
+        await page.getByRole("link", { name: "Surveys" }).click();
+        const url = new URL(page.url());
+        await saveSurveyMakerDetails(page, SURVEY_MAKER_FILE, url);
+    }
+});
+
+setup("authenticate as onboarded user", async ({ page }) => {
+    await authenticateUser(page, userCredentials.ONBOARDED_USER_EMAIL);
+
+    await page.waitForURL((url) => {
+        return (
+            ROUTES.PATTERNS.ONBOARDING_URL.test(url.pathname) ||
+            url.pathname === ROUTES.WORKSPACE.CREATE ||
+            ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname)
+        );
+    });
+
+    const currentUrl = page.url();
+
+    if (currentUrl.includes(ROUTES.WORKSPACE.CREATE)) {
+        await expect(page).toHaveURL(ROUTES.WORKSPACE.CREATE);
+        await expect(page.locator("h3")).toContainText("Create a new workspace");
+
+        await page.locator('[name="workspaceName"]').fill("onboarded22");
+        await page.locator('[name="workspaceUrl"]').fill("onboarded22");
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL(ROUTES.PATTERNS.ONBOARDING_URL);
+        const url = new URL(page.url());
+        await handleOnboardingSteps(page);
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
+    } else if (ROUTES.PATTERNS.ONBOARDING_URL.test(currentUrl)) {
+        const url = new URL(page.url());
+        await handleOnboardingSteps(page);
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
+    } else if (ROUTES.PATTERNS.SURVEY_LIST_URL.test(currentUrl)) {
+        const url = new URL(page.url());
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
+    } else {
+        throw new Error(`Unexpected URL: ${currentUrl}`);
+    }
+});
+
+setup("authenticate as non onboarded user", async ({ page }) => {
+    await authenticateUser(page, userCredentials.NON_ONBOARDED_USER_EMAIL);
+
+    await page.waitForURL((url) => {
+        return ROUTES.PATTERNS.ONBOARDING_URL.test(url.pathname) || url.pathname === ROUTES.WORKSPACE.CREATE;
+    });
+
+    const currentUrl = page.url();
+
+    if (currentUrl.includes(ROUTES.WORKSPACE.CREATE)) {
+        await expect(page).toHaveURL(ROUTES.WORKSPACE.CREATE);
+        await expect(page.locator("h3")).toContainText("Create a new workspace");
+
+        await page.locator('[name="workspaceName"]').fill(faker.word.words(2));
+        await page.locator('[name="workspaceUrl"]').fill(`${faker.word.words(1)}-${faker.word.words(1)}`);
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL(ROUTES.PATTERNS.ONBOARDING_URL);
+        const url = new URL(page.url());
+
+        await saveUserDetails(page, NON_ONBOARDED_USER_FILE, url);
+    } else if (ROUTES.PATTERNS.ONBOARDING_URL.test(currentUrl)) {
+        const url = new URL(page.url());
+        await saveUserDetails(page, NON_ONBOARDED_USER_FILE, url);
+    } else {
+        throw new Error(`Unexpected URL: ${currentUrl}`);
+    }
+});
+
+async function handleOnboardingSteps(page: Page) {
+    const activeButton = page.locator('button[data-state="active"]');
+
+    const steps = [
+        /integrate sdk/i,
+        /identify your users/i,
+        /track your events/i,
+        /publish your first survey/i,
+        /connect your first integration/i,
+    ];
+
+    for (const step of steps) {
+        await expect(activeButton).toContainText(step);
+        await page.getByRole("button", { name: /skip/i }).click();
+    }
+
+    await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+}
diff --git a/apps/frontend/tests/example.spec.ts b/apps/frontend/tests/example.spec.ts
deleted file mode 100644
index 9aa7c6f8..00000000
--- a/apps/frontend/tests/example.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test("has title", async ({ page }) => {
-    await page.goto("/");
-
-    // Expect a title "to contain" a substring.
-    await expect(page).toHaveTitle(/Integraflow/);
-});
diff --git a/apps/frontend/tests/survey/question/delete-question.spec.ts b/apps/frontend/tests/survey/question/delete-question.spec.ts
new file mode 100644
index 00000000..a0588d7d
--- /dev/null
+++ b/apps/frontend/tests/survey/question/delete-question.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../utils/constants";
+import { gotoSurvey, waitForResponse } from "../../utils/helper";
+import { setupQuestion } from "../../utils/helper/questionSetup";
+import { SurveyQuestionCreateInput } from "./../../../../../packages/client/dist/_generated_documents.d";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("Create questions", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        test.setTimeout(120000);
+
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow user to delete a question", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await page.getByTestId("add-question").click();
+        const parsedPostData = await waitForResponse(page, "SurveyQuestionCreate", async () => {
+            await page.getByTestId("Multiple answer selection").click();
+        });
+        const newQuestionId = (parsedPostData.variables.input as SurveyQuestionCreateInput).id;
+
+        const questionElement = page.locator(`[data-testid="${newQuestionId}"]`);
+
+        await questionElement.locator('[data-testid="delete-question"]').click();
+
+        await expect(questionElement).toBeHidden();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/button-label.spec.ts b/apps/frontend/tests/survey/question/settings/button-label.spec.ts
new file mode 100644
index 00000000..72965a3c
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/button-label.spec.ts
@@ -0,0 +1,36 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("Button label editing in survey questions", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit and update the button label in question settings", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Welcome message"); //01
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("button-label").fill("Next");
+    });
+
+    test("should display the updated button label correctly in the survey preview", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await iframe.getByRole("button", { name: "Next" }).waitFor();
+        await expect(iframe.getByRole("button", { name: "Next" })).toBeVisible();
+        await iframe.getByRole("button", { name: "Next" }).click();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/button-type.spec.ts b/apps/frontend/tests/survey/question/settings/button-type.spec.ts
new file mode 100644
index 00000000..e0454cd8
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/button-type.spec.ts
@@ -0,0 +1,66 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey, waitForResponse } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("Survey button type settings", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow creating and editing the first question to hide the submit button", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Thank you");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("button-type-indicator").click();
+        await page.getByRole("option", { name: "hidden" }).click();
+    });
+
+    test("should hide the submit button when 'button type' is set to hidden", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+
+        await expect(iframe.getByRole("button", { name: "Submit" })).toBeHidden();
+    });
+
+    test("should allow creating and editing the second question to set 'button type' as link", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await page.getByTestId("delete-question").click();
+
+        await createQuestion(page, "Thank you");
+
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("button-type-indicator").click();
+        await page.getByRole("option", { name: "link" }).click();
+        await waitForResponse(page, "SurveyQuestionUpdate", async () => {
+            await page.getByTestId("button-link").fill("https://youtube.com/");
+        });
+    });
+
+    test("should open the correct link when 'button type' is set to link", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+
+        const popupPromise = page.waitForEvent("popup");
+        await iframe.getByRole("button", { name: "Submit" }).click();
+        const popup = await popupPromise;
+        expect(popup.url()).toBe("https://www.youtube.com/");
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/form-settings.spec.ts b/apps/frontend/tests/survey/question/settings/form-settings.spec.ts
new file mode 100644
index 00000000..c63182bd
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/form-settings.spec.ts
@@ -0,0 +1,43 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("Survey question editing and settings update", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to create and edit a question with consent and disclaimer settings", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Contact form");
+        await page.getByTestId("add-next-field-btn").click();
+        await page.getByTestId("form-type-indicator").last().click();
+        await page.getByRole("option", { name: "Email" }).click();
+
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("toggle-disclaimer").click();
+        await page.getByTestId("disclaimer-content").fill("This is a disclaimer");
+        await page.getByTestId("toggle-consent-box").click();
+        await page.getByTestId("consent-label").fill("This is a consent text");
+    });
+
+    test("should display and interact with the consent checkbox in the preview", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await page.getByTestId("add-question").waitFor();
+        await expect(iframe.getByRole("checkbox", { name: "This is a consent text" })).toBeVisible();
+        await iframe.getByRole("checkbox", { name: "This is a consent text" }).click();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/long-answer.spec.ts b/apps/frontend/tests/survey/question/settings/long-answer.spec.ts
new file mode 100644
index 00000000..fd74462a
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/long-answer.spec.ts
@@ -0,0 +1,31 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+test.describe.serial("Text answer length settings ", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to create and edit a text answer question", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+        await createQuestion(page, "Text answer");
+    });
+
+    test("should display the long answer input box for a text answer question", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await iframe.getByTestId("textarea-box").waitFor();
+        await expect(iframe.getByTestId("textarea-box")).toBeVisible();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/randomize-except-last.spec.ts b/apps/frontend/tests/survey/question/settings/randomize-except-last.spec.ts
new file mode 100644
index 00000000..4f3bfa19
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/randomize-except-last.spec.ts
@@ -0,0 +1,60 @@
+import test, { expect, Page } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+async function getAnswersOrder(page: Page) {
+    const iframe = page.frameLocator('iframe[title="Survey preview"]');
+    await iframe.locator("label").first().waitFor();
+    const answers = await iframe.locator("label").allInnerTexts();
+    return answers;
+}
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("Question editing and randomized settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to create a multiple-answer question and randomize answers except last answer", async ({
+        page,
+    }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Multiple answer selection");
+        await page.getByPlaceholder("Answer 1").fill("green");
+        await page.getByPlaceholder("Answer 2").fill("blue");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 3").fill("red");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 4").fill("yellow");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 5").fill("white");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("randomize-except-last").click();
+    });
+
+    test("should randomize answers except the last one", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const firstRunOrder = await getAnswersOrder(page);
+
+        await page.reload();
+
+        const secondRunOrder = await getAnswersOrder(page);
+
+        const firstRunLast = firstRunOrder[firstRunOrder.length - 1];
+        const secondRunLast = secondRunOrder[secondRunOrder.length - 1];
+
+        // Verify that the last answer remains the same
+        expect(firstRunLast).toEqual(secondRunLast);
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/randomize.spec.ts b/apps/frontend/tests/survey/question/settings/randomize.spec.ts
new file mode 100644
index 00000000..8a083db7
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/randomize.spec.ts
@@ -0,0 +1,55 @@
+import test, { expect, Page } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+async function getAnswersOrder(page: Page) {
+    const iframe = page.frameLocator('iframe[title="Survey preview"]');
+
+    await iframe.locator("label").first().waitFor();
+
+    const answers = await iframe.locator("label").allInnerTexts();
+    return answers;
+}
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("should allow full question editing and settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit a single answer selection question and enable randomization", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Single answer selection");
+        await page.getByPlaceholder("Answer 1").fill("green");
+        await page.getByPlaceholder("Answer 2").fill("blue");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 3").fill("red");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 4").fill("yellow");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 5").fill("white");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("randomize-answers").click();
+    });
+
+    test("should randomize answers when 'randomize answers' setting is enabled", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const firstRunOrder = await getAnswersOrder(page);
+
+        await page.reload();
+
+        const secondRunOrder = await getAnswersOrder(page);
+
+        expect(firstRunOrder).not.toEqual(secondRunOrder);
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/right-left-text.spec.ts b/apps/frontend/tests/survey/question/settings/right-left-text.spec.ts
new file mode 100644
index 00000000..23f9d704
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/right-left-text.spec.ts
@@ -0,0 +1,45 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey, waitForResponse } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+test.describe.serial("should allow full question editing and settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit the question", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Smiley scale");
+
+        await page.getByRole("tab", { name: "Settings" }).click();
+
+        await waitForResponse(page, "SurveyQuestionUpdate", async () => {
+            await page.getByTestId("left-text").fill("Negative");
+        });
+
+        await waitForResponse(page, "SurveyQuestionUpdate", async () => {
+            await page.getByTestId("right-text").fill("Positive");
+        });
+    });
+
+    test("should allow users to update question settings: right text and left text", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await iframe.getByText("Positive").waitFor();
+        await expect(iframe.getByText("Positive")).toBeVisible();
+        await expect(iframe.getByText("Negative")).toBeVisible();
+        await iframe.getByText("Positive").click();
+        await iframe.getByText("Negative").click();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/scale-type.spec.ts b/apps/frontend/tests/survey/question/settings/scale-type.spec.ts
new file mode 100644
index 00000000..e59059eb
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/scale-type.spec.ts
@@ -0,0 +1,54 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+test.describe.serial("should allow full question editing and settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit and update question settings", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Rating scale"); //01
+
+        await createQuestion(page, "Rating scale"); //02
+        await page.getByTestId("scale-style-indicator").click();
+        await page.getByRole("option", { name: "numerical" }).click();
+
+        await createQuestion(page, "Rating scale"); //03
+        await page.getByTestId("scale-style-indicator").click();
+        await page.getByRole("option", { name: "classic csat" }).click();
+
+        await createQuestion(page, "Rating scale"); //04
+        await page.getByTestId("scale-style-indicator").click();
+        await page.getByRole("option", { name: "ces" }).click();
+    });
+
+    test("should verify question settings: scale style", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+        await page.getByTestId("add-question").waitFor();
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+
+        await expect(iframe.getByTestId("star").first()).toBeVisible();
+
+        await page.getByTestId("question-trigger").nth(1).click();
+        await expect(iframe.getByText("2")).toBeVisible();
+
+        await page.getByTestId("question-trigger").nth(2).click();
+        await expect(iframe.getByText("Very unsatisfied")).toBeVisible();
+
+        await page.getByTestId("question-trigger").nth(3).click();
+        await expect(iframe.getByText("Strongly disagree")).toBeVisible();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/selection-limit.spec.ts b/apps/frontend/tests/survey/question/settings/selection-limit.spec.ts
new file mode 100644
index 00000000..641d2e39
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/selection-limit.spec.ts
@@ -0,0 +1,68 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+test.describe.serial("should allow full question editing and settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit the question and update question settings", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Multiple answer selection");
+        await page.getByPlaceholder("Answer 1").fill("green");
+        await page.getByPlaceholder("Answer 2").fill("blue");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 3").fill("red");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 4").fill("yellow");
+        await page.getByText("Add an answer at choice").click();
+        await page.getByPlaceholder("Answer 5").fill("white");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("randomize-except-last").click();
+        await page.getByTestId("min-indicator").click();
+        await page.getByRole("option", { name: "2" }).click();
+        await page.getByTestId("max-indicator").click();
+        await page.getByRole("option", { name: "3" }).click();
+    });
+
+    test("should verify question settings: selection limit", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await page.getByTestId("add-question").waitFor();
+
+        // Verify that user cannot submit if they have selected less than 2 options
+        await iframe.locator("label").filter({ hasText: "blue" }).click(); //first option
+
+        // Check that the submit button is disabled when less than 2 options selected
+        const submitButton = iframe.getByRole("button", { name: "Submit" });
+        await expect(submitButton).toBeDisabled();
+
+        // Select a second option to meet the lower limit of 2
+        await iframe.locator("label").filter({ hasText: "white" }).click();
+
+        // Verify that the submit button is now enabled when 2 options are selected
+        await expect(submitButton).toBeEnabled();
+
+        await iframe.locator("label").filter({ hasText: "green" }).click(); // Third option
+
+        // Verify the submit button remains enabled with the valid number of selections
+        await expect(submitButton).toBeEnabled();
+
+        // Attempt to select more than the allowed limit (there is a limit of 3)
+        await iframe.locator("label").filter({ hasText: "red" }).click(); // Fourth option
+
+        // Verify that no more than 3 options can be selected
+        await expect(submitButton).toBeDisabled();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/shape.spec.ts b/apps/frontend/tests/survey/question/settings/shape.spec.ts
new file mode 100644
index 00000000..58a0a35f
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/shape.spec.ts
@@ -0,0 +1,45 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+test.describe.serial("should allow button label edit", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should edit the question and update settings", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Boolean");
+
+        await createQuestion(page, "Boolean");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("shape-indicator").click();
+        await page.getByRole("option", { name: "Button" }).click();
+    });
+
+    test("should verify question settings: shape", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+        await page.getByTestId("add-question").waitFor();
+
+        await iframe.getByTestId("thumbs-up").first().waitFor();
+        await expect(iframe.getByTestId("thumbs-up").first()).toBeVisible();
+        await expect(iframe.getByTestId("thumbs-down").first()).toBeVisible();
+
+        await page.getByTestId("question-trigger").nth(1).click();
+        await iframe.getByText("Good").waitFor();
+        await expect(iframe.getByText("Good")).toBeVisible();
+        await expect(iframe.getByText("Bad")).toBeVisible();
+    });
+});
diff --git a/apps/frontend/tests/survey/question/settings/short-answer.spec.ts b/apps/frontend/tests/survey/question/settings/short-answer.spec.ts
new file mode 100644
index 00000000..912b8505
--- /dev/null
+++ b/apps/frontend/tests/survey/question/settings/short-answer.spec.ts
@@ -0,0 +1,37 @@
+import test, { expect } from "@playwright/test";
+import { SURVEY_MAKER_FILE } from "../../../utils/constants";
+import { createQuestion, gotoSurvey } from "../../../utils/helper";
+import { setupQuestion } from "../../../utils/helper/questionSetup";
+
+test.use({ storageState: SURVEY_MAKER_FILE });
+
+test.describe.serial("should allow full question editing and settings management", () => {
+    let workspaceSlug: string, projectSlug: string, surveySlug: string;
+
+    test.beforeAll(async ({ browser }) => {
+        const setup = await setupQuestion(browser);
+        workspaceSlug = setup.workspaceSlug;
+        projectSlug = setup.projectSlug;
+        surveySlug = setup.surveySlug;
+    });
+
+    test("should allow users to edit the question", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        await page.getByTestId("add-question").waitFor();
+
+        await createQuestion(page, "Text answer");
+        await page.getByRole("tab", { name: "Settings" }).click();
+        await page.getByTestId("toggle-answer-length").click();
+    });
+
+    test("should allow users to update question settings: short answer", async ({ page }) => {
+        await gotoSurvey(page, workspaceSlug, projectSlug, surveySlug);
+
+        const iframe = page.frameLocator('iframe[title="Survey preview"]');
+
+        await iframe.getByTestId("input-box").waitFor();
+
+        await expect(iframe.getByTestId("input-box")).toBeVisible();
+    });
+});
diff --git a/apps/frontend/tests/survey/survey/survey.spec.ts b/apps/frontend/tests/survey/survey/survey.spec.ts
new file mode 100644
index 00000000..5ad6a1e8
--- /dev/null
+++ b/apps/frontend/tests/survey/survey/survey.spec.ts
@@ -0,0 +1,60 @@
+import { faker } from "@faker-js/faker";
+import { expect, test } from "@playwright/test";
+import fs from "fs";
+import { ROUTES, userDetailsFile } from "../../utils/constants";
+import { waitForResponse } from "../../utils/helper";
+
+test.skip("Create survey", () => {
+    let projectSlug;
+    let workspaceSlug;
+    test.beforeEach(async () => {
+        const details = JSON.parse(fs.readFileSync(userDetailsFile, "utf-8"));
+        workspaceSlug = details.workspaceSlug;
+        projectSlug = details.projectSlug;
+    });
+
+    test("should allow user create a survey", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+        await page.getByTestId("create-survey").waitFor();
+        await page.getByTestId("create-survey").click();
+        await page.waitForURL((url) => ROUTES.PATTERNS.SINGLE_SURVEY.test(url.pathname));
+        await page.locator('[name="title"]').waitFor();
+        await page.locator('[name="title"]').fill(faker.word.noun(10));
+
+        await expect(page.getByRole("tab", { name: "Create" })).toBeVisible();
+    });
+
+    test("should allow user to delete a survey", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+        const surveyTitle = faker.word.noun(10);
+
+        await page.getByTestId("create-survey").waitFor();
+        await page.getByTestId("create-survey").click();
+        await page.waitForURL((url) => ROUTES.PATTERNS.SINGLE_SURVEY.test(url.pathname));
+        await page.locator('[name="title"]').waitFor();
+        await page.locator('[name="title"]').fill(surveyTitle);
+
+        await waitForResponse(page, "SurveyUpdate", async () => {
+            await page.locator('[name="title"]').fill(surveyTitle);
+        });
+
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+        await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+
+        await page.getByTestId(surveyTitle).waitFor();
+
+        const surveyElement = page.locator(`[data-testid="${surveyTitle}"]`);
+        await surveyElement.locator('[data-testid="survey-dropdown-menu"]').click();
+
+        await page.getByTestId("delete-survey").click();
+
+        await page.getByTestId("confirm-delete-survey").click();
+
+        await page.getByTestId("create-survey").waitFor();
+
+        await expect(surveyElement).toBeHidden();
+    });
+});
diff --git a/apps/frontend/tests/types/index.ts b/apps/frontend/tests/types/index.ts
new file mode 100644
index 00000000..dd4b1bd5
--- /dev/null
+++ b/apps/frontend/tests/types/index.ts
@@ -0,0 +1,4 @@
+export type UserDetails = {
+    workspaceSlug: string;
+    projectSlug: string;
+};
diff --git a/apps/frontend/tests/utils/constants.ts b/apps/frontend/tests/utils/constants.ts
new file mode 100644
index 00000000..e7dfbd83
--- /dev/null
+++ b/apps/frontend/tests/utils/constants.ts
@@ -0,0 +1,44 @@
+export const NEW_USER_FILE = "playwright/.auth/newUser.json";
+export const ONBOARDED_USER_FILE = "playwright/.auth/onboardedUser.json";
+export const NON_ONBOARDED_USER_FILE = "playwright/.auth/nonOnboardedUser.json";
+export const SURVEY_MAKER_FILE = "playwright/.auth/nonOnboardedUser.json";
+export const userDetailsFile = "playwright/.auth/userDetails.json";
+export const surveyMakerDetailsFile = "playwright/.auth/surveyMakerDetails.json";
+
+export const e2eTestToken = "e2e_test_token";
+
+export const userCredentials = {
+    ONBOARDED_USER_EMAIL: "onboarded@example.com",
+    NEW_USER_EMAIL: "new-user@example.com",
+    NON_ONBOARDED_USER_EMAIL: "nonboarded@example.com",
+    SURVEY_MAKER: "surveymaker@example.com",
+};
+
+export const ROUTES = {
+    WORKSPACE: {
+        CREATE: "/create-workspace",
+        ONBOARDING: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/get-started`,
+    },
+
+    SETTINGS: {
+        PROJECT: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/settings/project`,
+        WORKSPACE: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/settings/workspace`,
+    },
+
+    SURVEY: {
+        LIST: (workspaceSlug: string, projectSlug: string) => `/${workspaceSlug}/projects/${projectSlug}/surveys`,
+        SINGLE: (workspaceSlug: string, projectSlug: string, surveySlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/survey/${surveySlug}`,
+    },
+
+    PATTERNS: {
+        ONBOARDING_URL: /\/[\w-]+\/projects\/[\w-]+\/get-started/,
+        SURVEY_LIST_URL: /\/[\w-]+\/projects\/[\w-]+\/surveys/,
+        SINGLE_SURVEY: /\/[\w-]+\/projects\/[\w-]+\/survey\/[\w-]+/,
+        WORKSPACE_SETTINGS: /\/[\w-]+\/projects\/[\w-]+\/settings\/workspace/,
+        PROJECT_SETTINGS: /\/[\w-]+\/projects\/[\w-]+\/settings\/project/,
+    },
+};
diff --git a/apps/frontend/tests/utils/helper/index.ts b/apps/frontend/tests/utils/helper/index.ts
new file mode 100644
index 00000000..b66ec591
--- /dev/null
+++ b/apps/frontend/tests/utils/helper/index.ts
@@ -0,0 +1,90 @@
+import { Page } from "@playwright/test";
+import fs from "fs";
+import { e2eTestToken, ROUTES, surveyMakerDetailsFile, userDetailsFile } from "../constants";
+
+export const waitForResponse = async (page: Page, operationName: string, actionCallback: () => void) => {
+    const [response] = await Promise.all([
+        page.waitForResponse((response) => {
+            const request = response.request();
+            if (request) {
+                const postData = request.postData();
+                if (postData && postData.includes(operationName)) {
+                    return response.url().includes("/graphql") && response.status() === 200;
+                }
+            }
+            return false;
+        }),
+        actionCallback(),
+    ]);
+
+    const request = response.request();
+    const postData = request?.postData();
+
+    if (postData) {
+        try {
+            const parsedData = JSON.parse(postData);
+            return parsedData;
+        } catch (error) {
+            return null;
+        }
+    }
+    return null;
+};
+
+export async function authenticateUser(page: Page, email: string) {
+    await page.goto("/");
+    await page.getByPlaceholder("Enter your email").fill(email);
+    await page.getByRole("button", { name: /Continue with email/i }).click();
+    await page.waitForURL(`/auth/magic-sign-in/?email=${encodeURIComponent(email)}`);
+    await page.getByRole("button", { name: /enter code manually/i }).click();
+    await page.fill('input[name="code"]', e2eTestToken);
+    await page.getByRole("button", { name: /continue/i }).click();
+    await page.waitForURL((url) => {
+        return (
+            ROUTES.PATTERNS.ONBOARDING_URL.test(url.pathname) ||
+            url.pathname === ROUTES.WORKSPACE.CREATE ||
+            ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname)
+        );
+    });
+}
+
+export function extractWorkspaceAndProjectSlugs(url: string) {
+    const pathname = new URL(url).pathname;
+    const workspaceSlug = pathname.split("/")[1];
+    const projectSlug = pathname.split("/")[3];
+    return { workspaceSlug, projectSlug };
+}
+
+export async function saveUserDetails(page: Page, storageFile: string, url) {
+    const { workspaceSlug, projectSlug } = extractWorkspaceAndProjectSlugs(url);
+    const details = { workspaceSlug, projectSlug };
+    fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
+    await page.context().storageState({ path: storageFile });
+}
+export async function saveSurveyMakerDetails(page: Page, storageFile: string, url) {
+    const { workspaceSlug, projectSlug } = extractWorkspaceAndProjectSlugs(url);
+    const details = { workspaceSlug, projectSlug };
+    fs.writeFileSync(surveyMakerDetailsFile, JSON.stringify(details), "utf-8");
+    await page.context().storageState({ path: storageFile });
+}
+
+export const gotoSurvey = async (page: Page, workspaceSlug: string, projectSlug: string, surveySlug: string) => {
+    await page.goto(ROUTES.SURVEY.SINGLE(workspaceSlug, projectSlug, surveySlug));
+    await page.waitForURL((url) => {
+        return ROUTES.PATTERNS.SINGLE_SURVEY.test(url.pathname);
+    });
+};
+
+export const createQuestion = async (page: Page, questionType: string) => {
+    await page.getByTestId("add-question").click();
+    await waitForResponse(page, "SurveyQuestionCreate", async () => {
+        await page.getByTestId(questionType).click();
+    });
+    await waitForResponse(page, "SurveyQuestionUpdate", async () => {
+        await page.locator(".ql-editor").fill("Hello");
+    });
+    await page.getByTestId("add-description-btn").click();
+    await waitForResponse(page, "SurveyQuestionUpdate", async () => {
+        await page.locator(".ql-editor").last().fill("Hi there");
+    });
+};
diff --git a/apps/frontend/tests/utils/helper/questionSetup.ts b/apps/frontend/tests/utils/helper/questionSetup.ts
new file mode 100644
index 00000000..bc5b6091
--- /dev/null
+++ b/apps/frontend/tests/utils/helper/questionSetup.ts
@@ -0,0 +1,29 @@
+import { Browser } from "@playwright/test";
+import fs from "fs";
+import { URL } from "url";
+import { ROUTES, SURVEY_MAKER_FILE, surveyMakerDetailsFile } from "../constants";
+
+export async function setupQuestion(browser: Browser) {
+    let details = JSON.parse(fs.readFileSync(surveyMakerDetailsFile, "utf-8"));
+    const workspaceSlug = details.workspaceSlug;
+    const projectSlug = details.projectSlug;
+    let surveySlug = "";
+
+    const context = await browser.newContext({
+        storageState: SURVEY_MAKER_FILE,
+    });
+    const page = await context.newPage();
+
+    await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+    await page.waitForURL((url: URL) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+
+    await page.getByTestId("create-survey").waitFor();
+    await page.getByTestId("create-survey").click();
+    await page.waitForURL((url: URL) => ROUTES.PATTERNS.SINGLE_SURVEY.test(url.pathname));
+
+    const url = new URL(page.url());
+    surveySlug = url.pathname.split("/")[5];
+
+    return { workspaceSlug, projectSlug, surveySlug };
+}
diff --git a/apps/frontend/tests/workspace/create-workspace.spec.ts b/apps/frontend/tests/workspace/create-workspace.spec.ts
new file mode 100644
index 00000000..63b050ad
--- /dev/null
+++ b/apps/frontend/tests/workspace/create-workspace.spec.ts
@@ -0,0 +1,66 @@
+import { faker } from "@faker-js/faker";
+import fs from "fs";
+
+import { expect, test } from "@playwright/test";
+import { ROUTES, userDetailsFile } from "../utils/constants";
+
+const word1 = faker.word.words(1);
+const word2 = faker.word.words(1);
+const workspaceUrl = `${word1}-${word2}`;
+
+test.describe("Create workspace", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(ROUTES.WORKSPACE.CREATE);
+        await page.waitForSelector("h3");
+        await expect(page.locator("h3")).toContainText("Create a new workspace");
+    });
+
+    test("should allow user to create a new workspace", async ({ page }) => {
+        await page.locator('[name="workspaceName"]').fill(faker.word.words(2));
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL((url) => {
+            return ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname);
+        });
+
+        const url = new URL(page.url());
+
+        const workspaceSlug = url.pathname.split("/")[1];
+        const projectSlug = url.pathname.split("/")[3];
+        const details = { workspaceSlug, projectSlug };
+
+        fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
+
+        await expect(page.locator("h1").nth(0)).toContainText(/Create your first survey/i);
+    });
+
+    test("should not allow repeating workspace URL", async ({ page }) => {
+        await page.locator('[name="workspaceName"]').fill(faker.word.words(2));
+        await page.locator('[name="workspaceUrl"]').fill(workspaceUrl);
+
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL((url) => {
+            return ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname);
+        });
+
+        const url = new URL(page.url());
+
+        const workspaceSlug = url.pathname.split("/")[1];
+        const projectSlug = url.pathname.split("/")[3];
+        const details = { workspaceSlug, projectSlug };
+
+        fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
+
+        await expect(page.locator("h1").nth(0)).toContainText(/Create your first survey/i);
+
+        await page.goto(ROUTES.WORKSPACE.CREATE);
+        await page.waitForSelector("h3");
+        await page.locator('[name="workspaceName"]').fill(faker.word.words(2));
+        await page.locator('[name="workspaceUrl"]').fill(workspaceUrl);
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.locator(".tremor-TextInput-errorMessage").waitFor({ state: "attached" });
+        await expect(page.locator(".tremor-TextInput-errorMessage")).toBeVisible();
+    });
+});
diff --git a/apps/frontend/tests/workspace/manage-workspace.spec.ts b/apps/frontend/tests/workspace/manage-workspace.spec.ts
new file mode 100644
index 00000000..970b9d5a
--- /dev/null
+++ b/apps/frontend/tests/workspace/manage-workspace.spec.ts
@@ -0,0 +1,33 @@
+import test from "@playwright/test";
+import fs from "fs";
+import { ROUTES, userDetailsFile } from "../utils/constants";
+import { waitForResponse } from "../utils/helper";
+
+test.describe.serial("Manage workspace", () => {
+    let workspaceSlug;
+    let projectSlug;
+
+    test.beforeEach(async () => {
+        const details = JSON.parse(fs.readFileSync(userDetailsFile, "utf-8"));
+        workspaceSlug = details.workspaceSlug;
+        projectSlug = details.projectSlug;
+    });
+    test("should redirect user to new workspace invitation", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+        await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+
+        await page.getByTestId("invite-team-btn").waitFor();
+        await page.getByTestId("invite-team-btn").click();
+
+        await page.getByTestId("toggle-invite-type").click();
+
+        await page.getByTestId("invite-link").waitFor();
+        const url = await page.getByTestId("invite-link").inputValue();
+
+        await waitForResponse(page, "organizationInviteDetails", async () => {
+            await page.goto(url);
+        });
+
+        await page.getByRole("button", { name: "Accept" }).waitFor();
+    });
+});
diff --git a/apps/frontend/tests/workspace/update-workspace.spec.ts b/apps/frontend/tests/workspace/update-workspace.spec.ts
new file mode 100644
index 00000000..d1206022
--- /dev/null
+++ b/apps/frontend/tests/workspace/update-workspace.spec.ts
@@ -0,0 +1,85 @@
+import { faker } from "@faker-js/faker";
+import test, { expect } from "@playwright/test";
+import slugify from "slugify";
+import { ONBOARDED_USER_FILE, ROUTES } from "../utils/constants";
+import { extractWorkspaceAndProjectSlugs, saveUserDetails, waitForResponse } from "../utils/helper";
+
+test.describe("Update workspace", () => {
+    let projectSlug;
+    let workspaceSlug;
+    test.beforeAll(async ({ browser }) => {
+        const context = await browser.newContext();
+        const page = await context.newPage();
+
+        await page.goto(ROUTES.WORKSPACE.CREATE);
+
+        await expect(page.locator("h3")).toContainText("Create a new workspace");
+
+        await page.locator('[name="workspaceName"]').fill(faker.person.firstName("female"));
+        await page.getByRole("button", { name: /Create Workspace/i }).click();
+
+        await page.waitForURL((url) => ROUTES.PATTERNS.SURVEY_LIST_URL.test(url.pathname));
+
+        const { projectSlug: newProjectSlug, workspaceSlug: newWorkspaceSlug } = extractWorkspaceAndProjectSlugs(
+            page.url(),
+        );
+        projectSlug = newProjectSlug;
+        workspaceSlug = newWorkspaceSlug;
+    });
+
+    test("should allow user to refresh workspace invite link", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+        await page.getByTestId("invite-team-btn").waitFor();
+
+        await waitForResponse(page, "OrganizationInviteLinkCreate", async () => {
+            await page.getByTestId("invite-team-btn").click();
+        });
+
+        await page.getByTestId("toggle-invite-type").click();
+
+        await page.getByTestId("invite-link").waitFor();
+        const prevLink = await page.getByTestId("invite-link").inputValue();
+
+        await waitForResponse(page, "organizationInviteLinkReset", async () => {
+            await page.getByTestId("refresh-invite-link").click();
+        });
+
+        const newLink = await page.getByTestId("invite-link").inputValue();
+        expect(prevLink).not.toBe(newLink);
+    });
+
+    test("should allow user to update Workspace fields", async ({ page }) => {
+        await page.goto(ROUTES.SURVEY.LIST(workspaceSlug, projectSlug));
+
+        await page.getByTestId("profile-btn").waitFor();
+        await page.getByTestId("profile-btn").click();
+
+        await page.getByTestId("workspace-settings-btn").click();
+
+        await page.waitForURL((url) => ROUTES.PATTERNS.WORKSPACE_SETTINGS.test(url.pathname));
+
+        const prevName = await page.getByTestId("workspace-name").inputValue();
+        const prevUrl = await page.getByTestId("workspace-url").inputValue();
+
+        await page.getByTestId("workspace-name").fill(faker.company.buzzAdjective());
+        await page.getByTestId("workspace-url").fill(slugify(faker.food.dish()).toLocaleLowerCase());
+
+        await waitForResponse(page, "organizationUpdate", async () => {
+            await page.getByRole("button", { name: "Update" }).click();
+        });
+
+        await page.reload();
+        await page.waitForURL((url) => ROUTES.PATTERNS.WORKSPACE_SETTINGS.test(url.pathname));
+
+        const url = new URL(page.url());
+
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
+        await page.getByTestId("workspace-name").waitFor();
+
+        const newName = await page.getByTestId("workspace-name").inputValue();
+        const newUrl = await page.getByTestId("workspace-url").inputValue();
+        expect(prevName).not.toBe(newName);
+        expect(prevUrl).not.toBe(newUrl);
+    });
+});
diff --git a/packages/web-sdk/src/surveys/components/BooleanResponse.tsx b/packages/web-sdk/src/surveys/components/BooleanResponse.tsx
index 3e96da52..19d0558c 100644
--- a/packages/web-sdk/src/surveys/components/BooleanResponse.tsx
+++ b/packages/web-sdk/src/surveys/components/BooleanResponse.tsx
@@ -65,10 +65,10 @@ export default function BooleanResponse({
                     </Fragment>
                 ) : (
                     <Fragment>
-                        <button onClick={answerNegative}>
+                        <button onClick={answerNegative} data-testid="thumbs-down">
                             <ThumbsDown size={32} color={theme?.answer ?? "#050505"} />
                         </button>
-                        <button onClick={answerPositive}>
+                        <button onClick={answerPositive} data-testid="thumbs-up">
                             <ThumbsUp size={32} color={theme?.answer ?? "#050505"} />
                         </button>
                     </Fragment>
diff --git a/packages/web-sdk/src/surveys/components/ChoiceResponse.tsx b/packages/web-sdk/src/surveys/components/ChoiceResponse.tsx
index 82364e47..2712ed85 100644
--- a/packages/web-sdk/src/surveys/components/ChoiceResponse.tsx
+++ b/packages/web-sdk/src/surveys/components/ChoiceResponse.tsx
@@ -104,6 +104,7 @@ export default function ChoiceResponse({
                                 backgroundColor: theme?.answer ? hexToRgba(theme.answer, 0.1) : "#F0F0F0",
                                 color: theme?.answer ?? "#050505"
                             }}
+                            data-testid={option.label}
                         >
                             <input
                                 style={{
diff --git a/packages/web-sdk/src/surveys/components/RangeResponse.tsx b/packages/web-sdk/src/surveys/components/RangeResponse.tsx
index df45d88a..a43ee8ef 100644
--- a/packages/web-sdk/src/surveys/components/RangeResponse.tsx
+++ b/packages/web-sdk/src/surveys/components/RangeResponse.tsx
@@ -76,7 +76,12 @@ function RangeResponse({ question, label, description, onAnswered, theme }: Rang
             );
         } else if (question.type === AnswerType.RATING) {
             return (
-                <button onClick={handleOptionClick} key={index} onMouseOver={() => setHoveredRatingValue(index + 1)}>
+                <button
+                    onClick={handleOptionClick}
+                    data-testid={(question.settings as RangeSettings).shape}
+                    key={index}
+                    onMouseOver={() => setHoveredRatingValue(index + 1)}
+                >
                     <RatingIcon
                         shape={(question.settings as RangeSettings).shape}
                         color={index + 1 <= hoveredRatingValue ? answerColor : hexToRgba(answerColor, 0.1)}
diff --git a/packages/web-sdk/src/surveys/components/TextResponse.tsx b/packages/web-sdk/src/surveys/components/TextResponse.tsx
index d470ede3..118e5eee 100644
--- a/packages/web-sdk/src/surveys/components/TextResponse.tsx
+++ b/packages/web-sdk/src/surveys/components/TextResponse.tsx
@@ -46,6 +46,7 @@ const TextResponse = ({ theme, question, label, description, submitText, onAnswe
                         onChange={(e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => {
                             setAnswer(e.currentTarget.value);
                         }}
+                        data-testid="input-box"
                     />
                 ) : (
                     <textarea
@@ -60,6 +61,7 @@ const TextResponse = ({ theme, question, label, description, submitText, onAnswe
                         }}
                         className={"w-full h-full mt-3 resize-none border rounded-xl p-4"}
                         style={styles}
+                        data-testid="textarea-box"
                     ></textarea>
                 )}
                 <Button color={theme?.button} type="submit" size="full" classname="mt-3">
diff --git a/yarn.lock b/yarn.lock
index 1f387ce7..3459a710 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1732,6 +1732,11 @@
   dependencies:
     "@f/map-obj" "^1.2.2"
 
+"@faker-js/faker@^9.0.1":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.0.1.tgz#5e201ffc4524d00a200c648d2be55be6e25b3c3e"
+  integrity sha512-4mDeYIgM3By7X6t5E6eYwLAa+2h4DeZDF7thhzIg6XB76jeEvMwadYAMCFJL/R4AnEBcAUO9+gL0vhy3s+qvZA==
+
 "@floating-ui/core@^1.0.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"