fix: fix onboarding form e2e (#1545)

Because

- fix onboarding form e2e

This commit

- fix onboarding form e2e

apps/console/integration-test/helpers/actions/pipeline.ts

@@ -1,6 +1,7 @@
 import { Page } from "@playwright/test";
 
-import { DataTestID } from "../../data-testid";
+import { DataTestID } from "@instill-ai/toolkit";
+
 import { PipelineBuilderPage } from "../../pages/pipeline-builder.page";
 import { PipelineListPage } from "../../pages/pipeline-list";
 import { PipelineOverviewPage } from "../../pages/pipeline-overview.page";

apps/console/integration-test/pages/onboarding.page.ts

@@ -3,23 +3,26 @@ import { expect, Locator, Page } from "@playwright/test";
 export class OnboardingPage {
   readonly page: Page;
   readonly emailField: Locator;
-  readonly companyField: Locator;
+  readonly displayNameField: Locator;
+  readonly companyNameField: Locator;
   readonly roleField: Locator;
   readonly roleOption: Locator;
   readonly submitButton: Locator;
 
   readonly onboardingPagePath = "/onboarding";
   readonly testEmail = "[email protected]";
+  readonly testDisplayName = "Instill AI";
   readonly testCompany = "Instill AI";
-  readonly testRole = "Product & Design";
+  readonly testRole = "Customer Service";
   readonly pipelinePagePath = "/admin/pipelines";
 
   constructor(page: Page) {
     this.page = page;
-    this.emailField = page.locator("input#email");
-    this.companyField = page.locator("input#org-name");
-    this.roleField = page.locator("button#role");
-    this.roleOption = page.getByRole("option", { name: this.testRole });
+    this.emailField = page.locator('input[name="email"]');
+    this.displayNameField = page.locator('input[name="displayName"]');
+    this.companyNameField = page.locator('input[name="companyName"]');
+    this.roleField = page.getByTestId("onboarding-form-role-field");
+    this.roleOption = page.getByLabel(this.testRole);
     this.submitButton = page.getByRole("button", { name: "Start" });
   }
 
@@ -34,8 +37,10 @@ export class OnboardingPage {
   async fillInOnboardingForm() {
     await this.emailField.fill(this.testEmail);
     expect(this.emailField).toHaveValue(this.testEmail);
-    await this.companyField.fill(this.testCompany);
-    expect(this.companyField).toHaveValue(this.testCompany);
+    await this.displayNameField.fill(this.testDisplayName);
+    expect(this.displayNameField).toHaveValue(this.testDisplayName);
+    await this.companyNameField.fill(this.testCompany);
+    expect(this.companyNameField).toHaveValue(this.testCompany);
     await this.roleField.click();
     await this.roleOption.click();
     expect(this.roleField).toHaveText(this.testRole);

apps/console/integration-test/tests/should-change-component-id.test.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 
-import { DataTestID } from "../data-testid";
+import { DataTestID } from "@instill-ai/toolkit";
+
 import { createPipeline, deletePipeline } from "../helpers/actions/pipeline";
 import { getSelectContent } from "../helpers/component-helpers/select";
 import { PipelineBuilderPage } from "../pages/pipeline-builder.page";

apps/console/src/components/OnboardingForm.tsx

@@ -16,6 +16,7 @@ import {
   useToast,
 } from "@instill-ai/design-system";
 import {
+  DataTestID,
   instillUserRoles,
   toastInstillError,
   useInstillStore,
@@ -197,7 +198,10 @@ export const OnboardingForm = () => {
                       field.onChange(value);
                     }}
                   >
-                    <Select.Trigger className="mt-auto w-full">
+                    <Select.Trigger
+                      data-testid={DataTestID.onboardingFormRoleField}
+                      className="mt-auto w-full"
+                    >
                       <Select.Value />
                     </Select.Trigger>
                     <Select.Content>

packages/toolkit/src/constant/data-testid.ts

@@ -3,4 +3,5 @@ export const DataTestID = {
   setupComponentDialog: "setup-component-dialog",
   createPipelineDialog: "create-pipeline-dialog",
   SelectComponentDialog: "select-component-dialog",
+  onboardingFormRoleField: "onboarding-form-role-field",
 };