Workflow e2e tests – 1st batch (#9713)

- Clean Playwright's configuration:
  - Remove artificial 500ms delay between each step
- Group all tests under a `chrome` project relying on a `setup` project
to get an authentication state which all tests can reuse
- Changes on the `Sign up with invite link via email` test:
- Generate a new email for each test trial, as previously it was failing
when run many times
- Make deleting the account part of the test; if we write other tests
for account sign-up, we'll prefer to delete the accounts with an HTTP
call to speed up things
- Added some assertions to ensure we reached steps when expected, as we
removed the 500ms delay between each step, and it made some assertions
fail
- Wrote new tests for workflows:
- Created `Create workflow`, a test asserting we can create a workflow
from the record table
- Created `Create simple workflow`, a test asserting we can create a
simple flow; I will add more assertions to this test and write other
tests once this first PR is approved
- I make HTTP calls to delete and destroy workflows after they run to
keep the database clean
- Added a data-testid to ensure we focus elements from the Cmd+K; our
selectors are not strong – see `getByRole('textbox')` – and I preferred
to scope them to a root element
  - Added an `aria-label` to a button

---------

Co-authored-by: prastoin <paul@twenty.com>

packages/twenty-e2e-testing/lib/fixtures/blank-workflow.ts

@@ -0,0 +1,69 @@
+import { test as base, expect, Page } from '@playwright/test';
+import { randomUUID } from 'node:crypto';
+import { createWorkflow } from '../requests/create-workflow';
+import { deleteWorkflow } from '../requests/delete-workflow';
+import { destroyWorkflow } from '../requests/destroy-workflow';
+
+export class WorkflowVisualizerPage {
+  #page: Page;
+
+  workflowId: string;
+  workflowName: string;
+
+  constructor({ page, workflowName }: { page: Page; workflowName: string }) {
+    this.#page = page;
+    this.workflowName = workflowName;
+  }
+
+  async createOneWorkflow() {
+    const id = randomUUID();
+
+    const response = await createWorkflow({
+      page: this.#page,
+      workflowId: id,
+      workflowName: this.workflowName,
+    });
+
+    expect(response.status()).toBe(200);
+
+    const responseBody = await response.json();
+    expect(responseBody.data.createWorkflow.id).toBe(id);
+
+    this.workflowId = id;
+  }
+
+  async goToWorkflowVisualizerPage() {
+    await this.#page.goto(`/object/workflow/${this.workflowId}`);
+
+    const workflowName = this.#page.getByRole('button', {
+      name: this.workflowName,
+    });
+
+    await expect(workflowName).toBeVisible();
+  }
+}
+
+export const test = base.extend<{ workflowVisualizer: WorkflowVisualizerPage }>(
+  {
+    workflowVisualizer: async ({ page }, use) => {
+      const workflowVisualizer = new WorkflowVisualizerPage({
+        page,
+        workflowName: 'Test Workflow',
+      });
+
+      await workflowVisualizer.createOneWorkflow();
+      await workflowVisualizer.goToWorkflowVisualizerPage();
+
+      await use(workflowVisualizer);
+
+      await deleteWorkflow({
+        page,
+        workflowId: workflowVisualizer.workflowId,
+      });
+      await destroyWorkflow({
+        page,
+        workflowId: workflowVisualizer.workflowId,
+      });
+    },
+  },
+);

packages/twenty-e2e-testing/lib/pom/loginPage.ts

@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test';
+import { expect, Locator, Page } from '@playwright/test';
 
 export class LoginPage {
   private readonly loginWithGoogleButton: Locator;
@@ -98,6 +98,8 @@ export class LoginPage {
   }
 
   async typeEmail(email: string) {
+    await expect(this.emailField).toBeVisible();
+
     await this.emailField.fill(email);
   }
 

packages/twenty-e2e-testing/lib/requests/backend.ts

@@ -0,0 +1,4 @@
+export const backendGraphQLUrl = new URL(
+  '/graphql',
+  process.env.BACKEND_BASE_URL,
+).toString();

packages/twenty-e2e-testing/lib/requests/create-workflow.ts

@@ -0,0 +1,32 @@
+import { Page } from '@playwright/test';
+import { getAuthToken } from '../utils/getAuthToken';
+import { backendGraphQLUrl } from './backend';
+
+export const createWorkflow = async ({
+  page,
+  workflowId,
+  workflowName,
+}: {
+  page: Page;
+  workflowId: string;
+  workflowName: string;
+}) => {
+  const { authToken } = await getAuthToken(page);
+
+  return page.request.post(backendGraphQLUrl, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+    data: {
+      operationName: 'CreateOneWorkflow',
+      query:
+        'mutation CreateOneWorkflow($input: WorkflowCreateInput!) {  createWorkflow(data: $input) { __typename id } }',
+      variables: {
+        input: {
+          id: workflowId,
+          name: workflowName,
+        },
+      },
+    },
+  });
+};

packages/twenty-e2e-testing/lib/requests/delete-workflow.ts

@@ -0,0 +1,25 @@
+import { Page } from '@playwright/test';
+import { getAuthToken } from '../utils/getAuthToken';
+import { backendGraphQLUrl } from './backend';
+
+export const deleteWorkflow = async ({
+  page,
+  workflowId,
+}: {
+  page: Page;
+  workflowId: string;
+}) => {
+  const { authToken } = await getAuthToken(page);
+
+  return page.request.post(backendGraphQLUrl, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+    data: {
+      operationName: 'DeleteOneWorkflow',
+      variables: { idToDelete: workflowId },
+      query:
+        'mutation DeleteOneWorkflow($idToDelete: ID!) {\n  deleteWorkflow(id: $idToDelete) {\n    __typename\n    deletedAt\n    id\n  }\n}',
+    },
+  });
+};

packages/twenty-e2e-testing/lib/requests/destroy-workflow.ts

@@ -0,0 +1,25 @@
+import { Page } from '@playwright/test';
+import { getAuthToken } from '../utils/getAuthToken';
+import { backendGraphQLUrl } from './backend';
+
+export const destroyWorkflow = async ({
+  page,
+  workflowId,
+}: {
+  page: Page;
+  workflowId: string;
+}) => {
+  const { authToken } = await getAuthToken(page);
+
+  return page.request.post(backendGraphQLUrl, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+    data: {
+      operationName: 'DestroyOneWorkflow',
+      variables: { idToDestroy: workflowId },
+      query:
+        'mutation DestroyOneWorkflow($idToDestroy: ID!) {\n  destroyWorkflow(id: $idToDestroy) {\n    id\n    __typename\n  }\n}',
+    },
+  });
+};

packages/twenty-e2e-testing/lib/utils/getAuthToken.ts

@@ -0,0 +1,15 @@
+import { Page } from '@playwright/test';
+
+export const getAuthToken = async (page: Page) => {
+  const storageState = await page.context().storageState();
+  const authCookie = storageState.cookies.find(
+    (cookie) => cookie.name === 'tokenPair',
+  );
+  if (!authCookie) {
+    throw new Error('No auth cookie found');
+  }
+  const token = JSON.parse(decodeURIComponent(authCookie.value)).accessToken
+    .token;
+
+  return { authToken: token };
+};