From 197bca57ba56854921ea38c3332bda9343f7fa5f Mon Sep 17 00:00:00 2001
From: Nabhag Motivaras <65061890+Nabhag8848@users.noreply.github.com>
Date: Wed, 14 Aug 2024 20:53:32 +0530
Subject: [PATCH] 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 <bordeau.lucas@gmail.com>
---
 package.json                                  |  3 +-
 packages/twenty-e2e-testing/.env.example      |  2 +
 packages/twenty-e2e-testing/.gitignore        |  5 +++
 packages/twenty-e2e-testing/README.md         | 37 ++++++++++++++++
 .../twenty-e2e-testing/e2e/companies.spec.ts  | 14 ++++++
 packages/twenty-e2e-testing/package.json      | 14 ++++++
 .../twenty-e2e-testing/playwright.config.ts   | 43 +++++++++++++++++++
 yarn.lock                                     | 23 +++++++++-
 8 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 packages/twenty-e2e-testing/.env.example
 create mode 100644 packages/twenty-e2e-testing/.gitignore
 create mode 100644 packages/twenty-e2e-testing/README.md
 create mode 100644 packages/twenty-e2e-testing/e2e/companies.spec.ts
 create mode 100644 packages/twenty-e2e-testing/package.json
 create mode 100644 packages/twenty-e2e-testing/playwright.config.ts

diff --git a/package.json b/package.json
index aa05f761c0f0..0b146a6bb6a8 100644
--- a/package.json
+++ b/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"
     ]
   }
diff --git a/packages/twenty-e2e-testing/.env.example b/packages/twenty-e2e-testing/.env.example
new file mode 100644
index 000000000000..9ff92d0193a7
--- /dev/null
+++ b/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"
diff --git a/packages/twenty-e2e-testing/.gitignore b/packages/twenty-e2e-testing/.gitignore
new file mode 100644
index 000000000000..68c5d18f00dc
--- /dev/null
+++ b/packages/twenty-e2e-testing/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/packages/twenty-e2e-testing/README.md b/packages/twenty-e2e-testing/README.md
new file mode 100644
index 000000000000..222f1d8070db
--- /dev/null
+++ b/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
+```
diff --git a/packages/twenty-e2e-testing/e2e/companies.spec.ts b/packages/twenty-e2e-testing/e2e/companies.spec.ts
new file mode 100644
index 000000000000..48485da04df6
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/twenty-e2e-testing/package.json b/packages/twenty-e2e-testing/package.json
new file mode 100644
index 000000000000..6cef81f80c74
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/packages/twenty-e2e-testing/playwright.config.ts b/packages/twenty-e2e-testing/playwright.config.ts
new file mode 100644
index 000000000000..4b4f081de794
--- /dev/null
+++ b/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' },
+    },
+  ],
+});
diff --git a/yarn.lock b/yarn.lock
index 179058fe4d29..bac1580e3bc0 100644
--- a/yarn.lock
+++ b/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"