e2e tests (#16533)

In this PR, 
- current basic E2E tests are fixed, and some were added, covering some
basic scenarios
- some tests avec been commented out, until we decide whether they are
worth fixing

The next steps are
- evaluate the flakiness of the tests. Once they've proved not to be
flaky, we should add more tests + re-write the current ones not using
aria-label (cf @lucasbordeau indication).
- We will add them back to the development flow

Author: ijreilly

.github/workflows/ci-e2e.yaml

@@ -78,7 +78,7 @@ jobs:
     - name: Setup environment files
       run: |
         cp packages/twenty-front/.env.example packages/twenty-front/.env
-        npx nx reset:env twenty-server
+        npx nx reset:env:e2e-testing-server twenty-server
 
     - name: Build frontend
       run: NODE_ENV=production NODE_OPTIONS="--max-old-space-size=10240" npx nx build twenty-front
@@ -103,7 +103,7 @@ jobs:
         npm_config_yes=true npx serve -s packages/twenty-front/build -l 3001 &
         echo "Waiting for frontend to be ready..."
         timeout 60 bash -c 'until curl -s http://localhost:3001; do sleep 2; done'
-        
+
     - name: Start worker
       run: |
         npx nx run twenty-server:worker &

packages/twenty-e2e-testing/.env.example

@@ -3,4 +3,4 @@ FRONTEND_BASE_URL=http://localhost:3001
 BACKEND_BASE_URL=http://localhost:3000
 DEFAULT_LOGIN=tim@apple.dev
 DEFAULT_PASSWORD=tim@apple.dev
-WEBSITE_URL=https://twenty.com
+WEBSITE_URL=https://twenty.com

packages/twenty-e2e-testing/lib/fixtures/screenshot.ts

@@ -27,6 +27,7 @@ export const test = base.extend<{ screenshotHook: void }>({
     },
     { auto: true },
   ],
+  baseURL: process.env.LINK ? new URL(process.env.LINK).origin : 'http://localhost:3001',
 });
 
 export { expect } from '@playwright/test';

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 { type Page } from '@playwright/test';
+import { getAccessAuthToken } from '../utils/getAccessAuthToken';
 import { backendGraphQLUrl } from './backend';
 
 export const deleteWorkflow = async ({
@@ -9,7 +9,7 @@ export const deleteWorkflow = async ({
   page: Page;
   workflowId: string;
 }) => {
-  const { authToken } = await getAuthToken(page);
+  const { authToken } = await getAccessAuthToken(page);
 
   return page.request.post(backendGraphQLUrl, {
     headers: {

packages/twenty-e2e-testing/lib/requests/destroy-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 destroyWorkflow = async ({
@@ -9,7 +9,7 @@ export const destroyWorkflow = async ({
   page: Page;
   workflowId: string;
 }) => {
-  const { authToken } = await getAuthToken(page);
+  const { authToken } = await getAccessAuthToken(page);
 
   return page.request.post(backendGraphQLUrl, {
     headers: {

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/lib/utils/getAuthToken.ts

@@ -34,7 +34,10 @@ export default defineConfig({
   expect: {
     timeout: 5000,
   },
-  reporter: process.env.CI ? 'github' : 'list',
+  reporter: [
+    [process.env.CI ? 'github' : 'list'],
+    ['./reporters/log-summary-reporter.ts'],
+  ],
   projects: [
     {
       name: 'setup',

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

@@ -0,0 +1,54 @@
+import type {
+  Reporter,
+  TestCase,
+  TestResult,
+} from '@playwright/test/reporter';
+
+class LogSummaryReporter implements Reporter {
+  private passed: string[] = [];
+  private failed: string[] = [];
+
+  onTestEnd(test: TestCase, result: TestResult): void {
+    const name = test.titlePath().join(' › ');
+
+    if (result.status === 'passed') {
+      this.passed.push(name);
+      return;
+    }
+
+    if (result.status === 'failed' || result.status === 'timedOut') {
+      this.failed.push(name);
+    }
+  }
+
+  onEnd(): void {
+    const passedSet = new Set(this.passed);
+    const failedSet = new Set(this.failed);
+    const flaky: string[] = [];
+
+    for (const testName of passedSet) {
+      if (failedSet.has(testName)) {
+        flaky.push(testName);
+      }
+    }
+
+    const uniquePassed = this.passed.filter((testName) => !flaky.includes(testName));
+    const uniqueFailed = this.failed.filter((testName) => !flaky.includes(testName));
+
+    console.log('\n=== Playwright summary ===');
+    if (uniquePassed.length) {
+      console.log('Passed:');
+      uniquePassed.forEach((testName) => console.log(`  ✅ ${testName}`));
+    }
+    if (uniqueFailed.length) {
+      console.log('Failed:');
+      uniqueFailed.forEach((testName) => console.log(`  ❌ ${testName}`));
+    }
+    if (flaky.length) {
+      console.log('Flaky:');
+      flaky.forEach((testName) => console.log(`  ⚠️  ${testName}`));
+    }
+  }
+}
+
+export default LogSummaryReporter;