feat(e2e): twenty-e2e-testing with playwright (#6539)

## ISSUE (e2e) - Introduces e2e for twenty

 - Closes #6360
 
##  Description

- [x] Create Package. 
- [x] Setup environments such as baseUrl.
- [x] ignore CI configuration for now.
- [x] write a simple test to check if table is visible in companies tab.

### Running test with UI

```
yarn run test:e2e:ui
```

https://github.com/user-attachments/assets/a7b7ae35-8898-461e-8c7c-d3e4e9515aeb

### Running all test and seeing report

```
yarn run test:e2e
yarn run test:e2e:report
```



https://github.com/user-attachments/assets/2558a1f9-97cc-4f06-86f0-806f207eac5a

---------

Co-authored-by: Lucas Bordeau <[email protected]>

package.json

@@ -320,7 +320,7 @@
     "msw": "^2.0.11",
     "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "nx": "18.3.3",
-    "playwright": "^1.40.1",
+    "playwright": "^1.46.0",
     "prettier": "^3.1.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
@@ -369,6 +369,7 @@
       "packages/twenty-utils",
       "packages/twenty-zapier",
       "packages/twenty-website",
+      "packages/twenty-e2e-testing",
       "tools/eslint-rules"
     ]
   }

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

@@ -0,0 +1,2 @@
+# Note that provide always without trailing forward slash to have expected behaviour
+FRONTEND_BASE_URL="http://localhost:3001"

packages/twenty-e2e-testing/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

packages/twenty-e2e-testing/README.md

@@ -0,0 +1,37 @@
+# Twenty e2e Testing
+
+## Install
+
+Don't forget to install the browsers before launching the tests  :
+
+```
+yarn playwright install 
+```
+
+### Run end-to-end tests
+
+```
+yarn run test:e2e
+```
+
+### Start the interactive UI mode
+
+```
+yarn run test:e2e:ui
+```
+
+### Run test only on Desktop Chrome
+
+```
+yarn run test:e2e:chrome
+```
+
+### Run test in specific file
+```
+yarn run test:e2e <filename>
+```
+
+### Runs the tests in debug mode.
+```
+yarn run test:e2e:debug
+```

packages/twenty-e2e-testing/e2e/companies.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('visible table', () => {
+  test('table should be visible on navigation to /objects/companies', async ({
+    page,
+  }) => {
+    // Navigate to the page
+    await page.goto('/objects/companies');
+
+    // Check if the table is visible
+    const table = page.locator('table');
+    await expect(table).toBeVisible();
+  });
+});

packages/twenty-e2e-testing/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "twenty-e2e-testing",
+  "devDependencies": {
+    "@playwright/test": "^1.46.0"
+  },
+  "scripts": {
+    "test:e2e:setup": "yarn playwright install",
+    "test:e2e": "yarn playwright test",
+    "test:e2e:ui": "yarn playwright test --ui",
+    "test:e2e:chrome": "yarn playwright test --project=chromium",
+    "test:e2e:debug": "yarn playwright test --debug",
+    "test:e2e:report": "yarn playwright show-report"
+  }
+}

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

@@ -0,0 +1,43 @@
+import { defineConfig, devices } from '@playwright/test';
+
+import { config } from 'dotenv';
+config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ * See https://playwright.dev/docs/trace-viewer to Collect trace when retrying the failed test
+ */
+export default defineConfig({
+  testDir: 'e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.FRONTEND_BASE_URL ?? 'http://localhost:3001',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+  ],
+});

yarn.lock

@@ -9761,6 +9761,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@playwright/test@npm:^1.46.0":
+  version: 1.46.0
+  resolution: "@playwright/test@npm:1.46.0"
+  dependencies:
+    playwright: "npm:1.46.0"
+  bin:
+    playwright: cli.js
+  checksum: 10c0/dced91081efc8b063267626059b37923f44f98132edba906f30281277d919de27c6acf6de082d390ad263112a983f856e7f4bf37722a33cc42f62c5be308bf87
+  languageName: node
+  linkType: hard
+
 "@pnpm/config.env-replace@npm:^1.1.0":
   version: 1.1.0
   resolution: "@pnpm/config.env-replace@npm:1.1.0"
@@ -40191,7 +40202,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.14.0, playwright@npm:^1.40.1":
+"playwright@npm:1.46.0, playwright@npm:^1.14.0, playwright@npm:^1.46.0":
   version: 1.46.0
   resolution: "playwright@npm:1.46.0"
   dependencies:
@@ -47071,6 +47082,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"twenty-e2e-testing@workspace:packages/twenty-e2e-testing":
+  version: 0.0.0-use.local
+  resolution: "twenty-e2e-testing@workspace:packages/twenty-e2e-testing"
+  dependencies:
+    "@playwright/test": "npm:^1.46.0"
+  languageName: unknown
+  linkType: soft
+
 "twenty-emails@workspace:packages/twenty-emails":
   version: 0.0.0-use.local
   resolution: "twenty-emails@workspace:packages/twenty-emails"
@@ -47440,7 +47459,7 @@ __metadata:
     pg: "npm:^8.11.3"
     pg-boss: "npm:^9.0.3"
     planer: "npm:^1.2.0"
-    playwright: "npm:^1.40.1"
+    playwright: "npm:^1.46.0"
     pluralize: "npm:^8.0.0"
     prettier: "npm:^3.1.1"
     prism-react-renderer: "npm:^2.1.0"