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/tests/authentication/signup_invite_email.e2e-spec.ts

@@ -1,64 +0,0 @@
-import { expect, test } from './fixture';
-
-test.describe('Authentication test', () => {
-  const email = 'test@apple.dev';
-  const firstName = 'John';
-  const lastName = 'Doe';
-  let testCompleted = false;
-
-  test('Sign up with invite link via email', async ({
-    page,
-    loginPage,
-    leftMenu,
-    membersSection,
-    settingsPage,
-  }) => {
-    const inviteLink: string =
-      await test.step('Go to Settings and copy invite link', async () => {
-        await page.goto(process.env.LINK); // skip login page (and redirect) when running on environments with multi-workspace enabled
-        await leftMenu.goToSettings();
-        await settingsPage.goToMembersSection();
-        await membersSection.copyInviteLink();
-        return await page.evaluate('navigator.clipboard.readText()');
-      });
-    await test.step('Go to invite link', async () => {
-      await settingsPage.logout();
-      await page.goto(inviteLink);
-    });
-    await test.step('Create new account', async () => {
-      await loginPage.clickLoginWithEmail();
-      await loginPage.typeEmail(email);
-      await loginPage.clickContinueButton();
-      await loginPage.typePassword(process.env.DEFAULT_PASSWORD);
-      await loginPage.clickSignUpButton();
-      await loginPage.typeFirstName(firstName);
-      await loginPage.typeLastName(lastName);
-      await loginPage.clickContinueButton();
-      await loginPage.noSyncWithGoogle();
-      testCompleted = true;
-    });
-  });
-
-  test.afterEach(
-    async ({
-      page,
-      confirmationModal,
-      leftMenu,
-      profileSection,
-      settingsPage,
-    }) => {
-      if (testCompleted) {
-        // security measurement to clean up only after test is completed,
-        // otherwise default account used for tests may be deleted and resetting database will be necessary
-        await test.step('Cleanup - deleting account', async () => {
-          await leftMenu.goToSettings();
-          await settingsPage.goToProfileSection();
-          await profileSection.deleteAccount();
-          await confirmationModal.typePlaceholderToInput();
-          await confirmationModal.clickConfirmButton();
-          expect(page.url()).toContain('/welcome');
-        });
-      }
-    },
-  );
-});

packages/twenty-e2e-testing/tests/authentication/signup_invite_email.spec.ts

@@ -0,0 +1,60 @@
+import { randomUUID } from 'crypto';
+import { expect, test } from './fixture';
+
+test('Sign up with invite link via email', async ({
+  page,
+  loginPage,
+  leftMenu,
+  membersSection,
+  settingsPage,
+  profileSection,
+  confirmationModal,
+}) => {
+  const email = `test${randomUUID().replaceAll('-', '')}@apple.dev`;
+  const firstName = 'John';
+  const lastName = 'Doe';
+
+  const inviteLink: string =
+    await test.step('Go to Settings and copy invite link', async () => {
+      await page.goto(process.env.LINK); // skip login page (and redirect) when running on environments with multi-workspace enabled
+      await leftMenu.goToSettings();
+      await settingsPage.goToMembersSection();
+      await membersSection.copyInviteLink();
+      return await page.evaluate('navigator.clipboard.readText()');
+    });
+
+  await test.step('Go to invite link', async () => {
+    await settingsPage.logout();
+
+    await Promise.all([
+      expect(page.getByText(/Join .+ team/)).toBeVisible(),
+
+      page.goto(inviteLink),
+    ]);
+  });
+
+  await test.step('Create new account', async () => {
+    await loginPage.clickLoginWithEmail();
+    await loginPage.typeEmail(email);
+    await loginPage.clickContinueButton();
+    await loginPage.typePassword(process.env.DEFAULT_PASSWORD);
+    await loginPage.clickSignUpButton();
+    await loginPage.typeFirstName(firstName);
+    await loginPage.typeLastName(lastName);
+    await loginPage.clickContinueButton();
+    await loginPage.noSyncWithGoogle();
+  });
+
+  await test.step('Delete account from workspace', async () => {
+    await leftMenu.goToSettings();
+    await settingsPage.goToProfileSection();
+    await profileSection.deleteAccount();
+    await confirmationModal.typePlaceholderToInput();
+
+    await Promise.all([
+      page.waitForURL('/welcome'),
+
+      confirmationModal.clickConfirmButton(),
+    ]);
+  });
+});

packages/twenty-e2e-testing/tests/login.setup.ts

@@ -1,6 +1,6 @@
-import { expect, test as base } from '@playwright/test';
-import { LoginPage } from '../lib/pom/loginPage';
+import { test as base, expect } from '@playwright/test';
 import path from 'path';
+import { LoginPage } from '../lib/pom/loginPage';
 
 // fixture
 const test = base.extend<{ loginPage: LoginPage }>({
@@ -29,7 +29,7 @@ test('Login test', async ({ loginPage, page }) => {
       await loginPage.typePassword(process.env.DEFAULT_PASSWORD);
       await page.waitForLoadState('networkidle');
       await loginPage.clickSignInButton();
-      await expect(page.getByText('Welcome to Twenty')).not.toBeVisible();
+      await expect(page.getByText(/Welcome to .+/)).not.toBeVisible();
     },
   );
 

packages/twenty-e2e-testing/tests/workflow-creation.spec.ts

@@ -0,0 +1,67 @@
+import { expect, test } from '@playwright/test';
+import { deleteWorkflow } from '../lib/requests/delete-workflow';
+import { destroyWorkflow } from '../lib/requests/destroy-workflow';
+
+test('Create workflow', async ({ page }) => {
+  const NEW_WORKFLOW_NAME = 'Test Workflow';
+
+  await page.goto('/');
+
+  const workflowsLink = page.getByRole('link', { name: 'Workflows' });
+  await workflowsLink.click();
+
+  const createWorkflowButton = page.getByRole('button', { name: 'New record' });
+
+  const [createWorkflowResponse] = await Promise.all([
+    page.waitForResponse(async (response) => {
+      if (!response.url().endsWith('/graphql')) {
+        return false;
+      }
+
+      const requestBody = response.request().postDataJSON();
+
+      return requestBody.operationName === 'CreateOneWorkflow';
+    }),
+
+    await createWorkflowButton.click(),
+  ]);
+
+  const nameInputClosedState = page.getByText('Name').first();
+  await nameInputClosedState.click();
+
+  const nameInput = page.getByRole('textbox');
+  await nameInput.fill(NEW_WORKFLOW_NAME);
+  await nameInput.press('Enter');
+
+  const body = await createWorkflowResponse.json();
+  const newWorkflowId = body.data.createWorkflow.id;
+
+  try {
+    const newWorkflowRowEntryName = page
+      .getByTestId(`row-id-${newWorkflowId}`)
+      .locator('div')
+      .filter({ hasText: NEW_WORKFLOW_NAME })
+      .nth(2);
+
+    await Promise.all([
+      page.waitForURL(
+        (url) => url.pathname === `/object/workflow/${newWorkflowId}`,
+      ),
+
+      newWorkflowRowEntryName.click(),
+    ]);
+
+    const workflowName = page.getByRole('button', { name: NEW_WORKFLOW_NAME });
+
+    await expect(workflowName).toBeVisible();
+  } finally {
+    await deleteWorkflow({
+      page,
+      workflowId: newWorkflowId,
+    });
+    await destroyWorkflow({
+      page,
+      workflowId: newWorkflowId,
+    });
+  }
+});

packages/twenty-e2e-testing/tests/workflow-visualizer.spec.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { test } from '../lib/fixtures/blank-workflow';
+
+test('Create simple workflow', async ({ workflowVisualizer, page }) => {
+  const addTriggerButton = page.getByText('Add a Trigger');
+  await addTriggerButton.click();
+
+  const triggerOption = page.getByText('Database Event');
+  await triggerOption.click();
+
+  await expect(
+    page.getByTestId('command-menu').getByRole('textbox'),
+  ).toHaveValue('When a Company is Created');
+
+  const triggerNode = page.getByTestId('rf__node-trigger');
+  await expect(triggerNode).toHaveClass(/selected/);
+  await expect(triggerNode).toHaveText(/Company is Created/);
+
+  const addStepButton = page.getByLabel('Add a step');
+  await addStepButton.click();
+
+  const createRecordOption = page.getByText('Create Record');
+
+  await createRecordOption.click();
+
+  await expect(
+    page.getByTestId('command-menu').getByRole('textbox').first(),
+  ).toHaveValue('Create Record');
+
+  const createRecordNode = page
+    .locator('.react-flow__node.selected')
+    .getByText('Create Record');
+  await expect(createRecordNode).toBeVisible();
+  await expect(triggerNode).not.toHaveClass(/selected/);
+});