e2e tests

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

@@ -1,5 +1,5 @@
-import { Page } from '@playwright/test';
-import { getAuthToken } from '../utils/getAuthToken';
+import { type Page } from '@playwright/test';
+import { getAccessAuthToken } from '../utils/getAccessAuthToken';
 import { backendGraphQLUrl } from './backend';
 
 export const createWorkflow = async ({
@@ -11,7 +11,7 @@ export const createWorkflow = async ({
   workflowId: string;
   workflowName: string;
 }) => {
-  const { authToken } = await getAuthToken(page);
+  const { authToken } = await getAccessAuthToken(page);
 
   return page.request.post(backendGraphQLUrl, {
     headers: {

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

@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { getAuthToken } from '../utils/getAuthToken';
+import { getAuthToken } from '../utils/getAccessAuthToken';
 import { backendGraphQLUrl } from './backend';
 
 export const deleteWorkflow = async ({

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

@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { getAuthToken } from '../utils/getAuthToken';
+import { getAuthToken } from '../utils/getAccessAuthToken';
 import { backendGraphQLUrl } from './backend';
 
 export const destroyWorkflow = async ({

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

@@ -0,0 +1,30 @@
+import { type Page } from '@playwright/test';
+
+const decodeToken = (cookie: any) =>
+  JSON.parse(decodeURIComponent(cookie.value)).accessOrWorkspaceAgnosticToken
+    ?.token;
+
+  const decodePayload = (jwt: string) =>
+    JSON.parse(Buffer.from(jwt.split('.')[1], 'base64url').toString());
+
+
+export const getAccessAuthToken = async (page: Page) => {
+  const storageState = await page.context().storageState();
+  const tokenCookies = storageState.cookies.filter(
+    (cookie) => cookie.name === 'tokenPair',
+  );
+  if (!tokenCookies) {
+    throw new Error('No auth cookie found');
+  }
+  const accessTokenCookie = tokenCookies.find(
+    (cookie) => {
+      const payload = decodePayload(decodeToken(cookie) ?? '');
+      return payload.type === 'ACCESS';
+    }
+  );
+
+  const token = JSON.parse(decodeURIComponent(accessTokenCookie?.value ?? '')).accessOrWorkspaceAgnosticToken
+  .token;
+
+  return { authToken: token };
+};

packages/twenty-e2e-testing/playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   use: {
     baseURL: process.env.FRONTEND_BASE_URL || 'http://localhost:3001',
     trace: 'retain-on-failure', // trace takes EVERYTHING from page source, records every single step, should be used only when normal debugging won't work
-    screenshot: 'on', // either 'on' here or in different method in modules, if 'on' all screenshots are overwritten each time the test is run
+    screenshot: 'off', // disable automatic screenshots to reduce IO and artifacts size
     headless: true, // instead of changing it to false, run 'yarn test:e2e:debug' or 'yarn test:e2e:ui'
     testIdAttribute: 'data-testid', // taken from Twenty source
   },

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

@@ -49,12 +49,12 @@ test('Sign up with invite link via email', async ({
     await leftMenu.goToSettings();
     await settingsPage.goToProfileSection();
     await profileSection.deleteAccount();
+    await expect(page.getByText('Account Deletion')).toBeVisible();
     await confirmationModal.typePlaceholderToInput();
+    await confirmationModal.clickConfirmButton();
 
     await Promise.all([
-      page.waitForURL('/welcome'),
-
-      confirmationModal.clickConfirmButton(),
+      page.waitForURL('**/welcome'),
     ]);
   });
 });

packages/twenty-e2e-testing/tests/create-kanban-view.spec.ts

@@ -0,0 +1,59 @@
+import { expect, test } from '../lib/fixtures/screenshot';
+
+if (process.env.LINK) {
+  const baseURL = new URL(process.env.LINK).origin;
+  test.use({ baseURL });
+}
+test.describe.serial('Create Kanban View', () => {
+test('Create Industry Select Field', async ({ page }) => {
+    await page.getByRole('link', { name: 'Settings' }).click();
+    await page.getByRole('link', { name: 'Data model' }).click();
+    await page.getByRole('link', { name: 'Opportunities' }).click();
+    await page.getByRole('button', { name: 'Add Field' }).click();
+    await page.getByRole('link', { name: 'Select', exact: true }).click();
+    await page.getByRole('textbox', { name: 'Employees' }).click();
+    await page.getByRole('textbox', { name: 'Employees' }).fill('Industry');
+    await page.getByRole('textbox').nth(1).click();
+    await page.getByRole('textbox').nth(1).press('ControlOrMeta+a');
+    await page.getByRole('textbox').nth(1).fill('Food');
+    await page.getByRole('button', { name: 'Add option' }).click();
+    await page.getByRole('button', { name: 'Option 2' }).getByRole('textbox').fill('Tech');
+    await page.getByRole('button', { name: 'Add option' }).click();
+    await page.getByRole('button', { name: 'Option 3' }).getByRole('textbox').fill('Travel');
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.waitForURL('**/objects/opportunities');
+    await page.waitForSelector('text=Industry');
+    await expect(page.getByText('Industry')).toBeVisible();
+});
+
+test('Create Kanban View from Industry Select Field', async ({ page }) => {
+  await page.getByRole('link', { name: 'Opportunities' }).click();
+  await page.getByRole('button', { name: 'All Opportunities ·' }).click();
+  await page.getByText('Add view').click();
+  await page.getByRole('textbox').press('ControlOrMeta+a');
+  await page.getByRole('textbox').fill('By industry');
+  await page.getByRole('button', { name: 'Table', exact: true }).click();
+  await page.getByText('Kanban').click();
+  await page.locator('[aria-controls="view-picker-kanban-field-options"]').click();
+  await page.getByRole('option', { name: 'Industry' }).click();
+  // Use exact: true to ensure we only click the button with the label "Create"
+  await page.getByRole('button', { name: 'Create new view' }).click();
+  await expect(page.getByText('Food')).toBeVisible();
+  await expect(page.getByText('Tech')).toBeVisible();
+  await expect(page.getByText('Travel')).toBeVisible();
+  await expect(page.getByText('No value')).toBeVisible();
+  const byIndustryElements = await page.locator('text=By industry').all();
+  expect(byIndustryElements.length).toBeGreaterThanOrEqual(1);
+  for (const element of byIndustryElements) {
+    await expect(element).toBeVisible();
+  }
+  await page.getByText('Options').click();
+  await page.getByText('Group', { exact: true }).click();
+  await Promise.all([page.getByRole('button', { name: 'Hide group null', exact: true }).click(),
+    page.waitForRequest((req) => {
+    return req.url().includes('/metadata') &&
+           req.method() === 'POST'
+  })]);
+  await expect(page.getByText('No value')).not.toBeVisible();
+});
+})

packages/twenty-e2e-testing/tests/create-record.spec.ts

@@ -0,0 +1,163 @@
+import { expect, test } from '../lib/fixtures/screenshot';
+import { backendGraphQLUrl } from '../lib/requests/backend';
+import { getAccessAuthToken } from '../lib/utils/getAccessAuthToken';
+
+if (process.env.LINK) {
+  const baseURL = new URL(process.env.LINK).origin;
+  test.use({ baseURL });
+}
+
+const query = `query FindOnePerson($objectRecordId: UUID!) {
+  person(
+    filter: {or: [{deletedAt: {is: NULL}}, {deletedAt: {is: NOT_NULL}}], id: {eq: $objectRecordId}}
+  ) {
+    company {
+      name
+    }
+    emails {
+      primaryEmail
+      additionalEmails
+      __typename
+    }
+    id
+    intro
+    jobTitle
+    linkedinLink {
+      primaryLinkUrl
+      primaryLinkLabel
+      secondaryLinks
+      __typename
+    }
+    name {
+      firstName
+      lastName
+      __typename
+    }
+    performanceRating
+    phones {
+      primaryPhoneNumber
+      primaryPhoneCountryCode
+      primaryPhoneCallingCode
+      additionalPhones
+      __typename
+    }
+    position
+    workPreference
+    updatedAt
+  }
+}`
+
+test('Create and update record', async ({ page }) => {
+    await page.getByRole('link', { name: 'People' }).click();
+    await page.getByRole('button', { name: 'Create new record' }).click();
+
+    // Generate a random email for testing
+    const randomEmail = `testuser_${Math.random().toString(36).substring(2, 10)}@example.com`;
+    // Fill first name and last name
+    const firstNameInput = page.getByRole('textbox', { name: 'F‌‌irst name' })
+    await expect(firstNameInput).toBeFocused();
+    await firstNameInput.fill('John');
+    const lastNameInput = page.getByPlaceholder('L‌‌ast name');
+    await expect(lastNameInput).toBeVisible();
+    await lastNameInput.fill('Doe');
+    await lastNameInput.press('Enter');
+
+    // Focus on recordFieldList
+    const recordFieldList = page.locator('div[aria-label="Record fields list"]');
+    await expect(recordFieldList).toBeVisible();
+    await recordFieldList.getByText('Emails').first().click();
+
+    // Fill email
+    const emailInput = recordFieldList.getByText('Emails').nth(1);
+    await expect(emailInput).toBeVisible();
+    await emailInput.click({ force: true });
+    await page.getByPlaceholder('Email').fill(randomEmail);
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Escape');
+    await recordFieldList.getByText('Emails').first().click();
+
+
+    // Fill intro
+    const introInput = recordFieldList.getByText('Intro').nth(1);
+    await expect(introInput).toBeVisible();
+    await introInput.click({ force: true });
+    await introInput.click({ force: true });
+    await page.getByPlaceholder('Intro').fill('This is an intro');
+    await page.getByPlaceholder('Intro').press('Enter');
+
+    // Fill URL
+    const urlInput = recordFieldList.getByText('Linkedin').nth(1);
+    await expect(urlInput).toBeVisible();
+    await urlInput.click({ force: true });
+    await page.getByPlaceholder('URL').fill('linkedin.com/johndoe');
+    await page.getByPlaceholder('URL').press('Enter');
+
+    // Click on 4th star to rate
+    recordFieldList.getByText('Performance Rating').first().click({ force: true });
+    const ratingContainer = recordFieldList.locator('div[aria-label="Rating"]');
+    await ratingContainer.locator('svg').nth(3).click({force: true});
+
+    // Fill phone field
+    const phoneInput = recordFieldList.getByText('Phones').nth(1);
+    await expect(phoneInput).toBeVisible();
+    await phoneInput.click({ force: true });
+    await page.getByPlaceholder('Phone').fill('+336 1 122 3344');
+    await page.getByPlaceholder('Phone').press('Enter');
+
+    // Fill work preference
+    await recordFieldList.getByText('Work Preference').first().click({force: true});
+    await recordFieldList.getByText('Work Preference').nth(1).click({force: true});
+    const options = page.getByRole('listbox');
+    await options.getByText('Hybrid').first().click({force: true});
+    recordFieldList.getByText('Work Preference').first().click({force: true});
+
+    // Fill company relation
+    const companyRelationHeader = page.getByLabel('Company (relation)');
+    await expect(companyRelationHeader).toBeVisible();
+
+    await companyRelationHeader.locator('.tabler-icon-pencil').click();
+    await page.getByRole('textbox', { name: 'Search' }).fill('Goog');
+    await expect(page.getByRole('option', { name: 'Google' })).toBeVisible();
+    const [updatePersonResponse] = await Promise.all([
+      page.waitForResponse(async (response) => {
+        if (!response.url().endsWith('/graphql')) {
+          return false;
+        }
+
+        const requestBody = response.request().postDataJSON();
+
+        return requestBody.operationName === 'UpdateOnePerson';
+      }),
+      await page.getByRole('option', { name: 'Google' }).click({force: true})
+    ]);
+
+    const body = await updatePersonResponse.json()
+    const newPersonId = body.data.updatePerson.id;
+
+    // Check data was saved
+    const { authToken } = await getAccessAuthToken(page);
+    const findOnePersonResponse = await page.request.post(backendGraphQLUrl, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+      data: {
+        operationName: 'FindOnePerson',
+        query,
+        variables: {
+          objectRecordId: newPersonId,
+        }
+      },
+    });
+
+    const findOnePersonReponseBody = await findOnePersonResponse.json();
+
+    expect(findOnePersonReponseBody.data.person.name.firstName).toBe('John');
+    expect(findOnePersonReponseBody.data.person.name.lastName).toBe('Doe');
+    expect(findOnePersonReponseBody.data.person.emails.primaryEmail).toBe(randomEmail);
+    expect(findOnePersonReponseBody.data.person.intro).toBe('This is an intro');
+    expect(findOnePersonReponseBody.data.person.linkedinLink.primaryLinkUrl).toBe('linkedin.com/johndoe');
+    expect(findOnePersonReponseBody.data.person.phones.primaryPhoneNumber).toBe('611223344');
+    expect(findOnePersonReponseBody.data.person.workPreference).toEqual(['HYBRID']);
+    expect(findOnePersonReponseBody.data.person.company.name).toBe('Google');
+
+});

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

@@ -30,13 +30,17 @@
       await page.waitForLoadState('networkidle');
       await loginPage.clickSignInButton();
       await expect(page.getByText(/Welcome to .+/)).not.toBeVisible();
+      await expect(page.getByText('Choose a workspace')).toBeVisible();
+      await page.getByText('Apple', {exact: true}).click();
+      await page.waitForFunction(() => window.location.href.includes('verify'));
+      await page.waitForFunction(() => !window.location.href.includes('verify'));
+      process.env.LINK = page.url();
     },
   );
 
   await test.step('Saved auth state', async () => {
     await page.context().storageState({
       path: path.resolve(__dirname, '..', '.auth', 'user.json'),
     });
-    process.env.LINK = page.url();
   });
 });

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

@@ -1,11 +1,15 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '../lib/fixtures/screenshot';
 import { deleteWorkflow } from '../lib/requests/delete-workflow';
 import { destroyWorkflow } from '../lib/requests/destroy-workflow';
 
+if (process.env.LINK) {
+  const baseURL = new URL(process.env.LINK).origin;
+  test.use({ baseURL });
+}
 test('Create workflow', async ({ page }) => {
   const NEW_WORKFLOW_NAME = 'Test Workflow';
 
-  await page.goto('/');
+  await page.goto(process.env.LINK);
 
   const workflowsLink = page.getByRole('link', { name: 'Workflows' });
   await workflowsLink.click();
@@ -25,7 +29,7 @@ test('Create workflow', async ({ page }) => {
       return requestBody.operationName === 'CreateOneWorkflow';
     }),
 
-    createWorkflowButton.click(),
+    createWorkflowButton.click()
   ]);
 
   const recordName = page.getByTestId('top-bar-title').getByText('Untitled');

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -25,6 +25,7 @@ import {
 import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { getAvailableWorkspacePathAndSearchParams } from '@/auth/utils/availableWorkspacesUtils';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
+import { useCaptcha } from '@/client-config/hooks/useCaptcha';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { isDefined } from 'twenty-shared/utils';
@@ -155,6 +156,7 @@ export const SignInUpGlobalScopeForm = () => {
   const isRequestingCaptchaToken = useRecoilValue(
     isRequestingCaptchaTokenState,
   );
+  const { isCaptchaReady } = useCaptcha();
 
   const [showErrors, setShowErrors] = useState(false);
 
@@ -284,7 +286,9 @@ export const SignInUpGlobalScopeForm = () => {
               )}
               <MainButton
                 disabled={
-                  isRequestingCaptchaToken || form.formState.isSubmitting
+                  isRequestingCaptchaToken ||
+                  form.formState.isSubmitting ||
+                  (signInUpStep !== SignInUpStep.Password && !isCaptchaReady)
                 }
                 title={
                   signInUpStep === SignInUpStep.Password