Added fixtures and projects and fixed logic

Author: BOHEUS

packages/twenty-e2e-testing/.gitignore

@@ -6,4 +6,5 @@ run_results/
 playwright-report/.last-run.json
 results/
 run_results/.playwright-artifacts-0/
-run_results/.playwright-artifacts-1/
+run_results/.playwright-artifacts-1/
+.auth/

packages/twenty-e2e-testing/README.md

@@ -35,3 +35,10 @@ yarn run test:e2e <filename>
 ```
 yarn run test:e2e:debug
 ```
+
+## Q&A
+
+#### Why there's `path.resolve()` everywhere?
+That's thanks to differences in root directory when running tests using commands and using IDE. When running tests with commands, 
+the root directory is `twenty/packages/twenty-e2e-testing`, for IDE it depends on how someone sets the configuration. This way, it
+ensures that no matter which IDE or OS Shell is used, the result will be the same.

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

@@ -0,0 +1,32 @@
+import { test as base } from '@playwright/test';
+import path from 'path';
+
+const date = new Date();
+
+export const test = base.extend<{ screenshotHook: void }>({
+  screenshotHook: [
+    async ({ page, browserName }, use, workerInfo) => {
+      // here everything is the same as beforeEach()
+      // goto is to go to website as login setup saves the cookies of logged-in user, not the state of browser
+      await page.goto('/');
+      await use(); // here is the code of test
+      // here everything is the same as afterEach()
+      // automatic fixture of making screenshot after each test
+      await page.screenshot({
+        path: path.resolve(
+          __dirname,
+          '..',
+          '..',
+          'results',
+          'screenshots',
+          `${workerInfo.project.name}`,
+          browserName,
+          `${date.toISOString()}.png`,
+        ),
+      });
+    },
+    { auto: true }, // automatic fixture runs with every test
+  ],
+});
+
+export { expect } from '@playwright/test';

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

@@ -1,5 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
 import { config } from 'dotenv';
+import path from 'path';
 
 config();
 
@@ -15,7 +16,7 @@ export default defineConfig({
   fullyParallel: true, // false only for specific tests, overwritten in specific projects or global setups of projects
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined, // undefined = amount of projects
+  workers: process.env.CI ? 1 : undefined, // undefined = amount of projects * amount of tests
   timeout: 30 * 1000, // timeout can be changed
   use: {
     baseURL: process.env.CI
@@ -35,13 +36,25 @@ export default defineConfig({
   },
   reporter: [['html', { open: 'never' }]],
   projects: [
+    {
+      name: 'Login setup',
+      testMatch: /login\.setup\.ts/, // finds all tests matching this regex, in this case only 1 test should be found
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: path.resolve(__dirname, '.auth', 'user.json'), // takes saved cookies from directory
+      },
+      dependencies: ['Login setup'], // forces to run login setup before running tests from this project - CASE SENSITIVE
     },
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        ...devices['Desktop Firefox'],
+        storageState: path.resolve(__dirname, '.auth', 'user.json'),
+      },
+      dependencies: ['Login setup'],
     },
 
     //{

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

@@ -1,34 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../lib/fixtures/screenshot';
 import { config } from 'dotenv';
 import path = require('path');
 config({ path: path.resolve(__dirname, '..', '.env') });
 
-const date = new Date();
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-  await page.getByRole('button', { name: 'Continue With Email' }).click();
-  await page.getByPlaceholder('Email').fill(process.env.DEFAULT_LOGIN);
-  await page.getByRole('button', { name: 'Continue', exact: true }).click();
-  await page.getByPlaceholder('Password').fill(process.env.DEFAULT_PASSWORD);
-  await page.getByRole('button', { name: 'Sign in' }).click();
-  await expect(page.getByText('Welcome to Twenty')).not.toBeVisible();
-});
-
-test.afterEach(async ({ page, browserName }, workerInfo) => {
-  await page.screenshot({
-    path: path.resolve(
-      __dirname,
-      '..',
-      'results',
-      'screenshots',
-      browserName,
-      `${workerInfo.project.name}`,
-      `${date.toISOString()}.png`,
-    ),
-  });
-});
-
 test.describe('Basic check', () => {
   test('Checking if table in Companies is visible', async ({ page }) => {
     await expect(page.getByTestId('tooltip').nth(0)).toHaveText('Companies');
@@ -37,4 +11,9 @@ test.describe('Basic check', () => {
     await expect(page.locator('table')).toBeVisible();
     await expect(page.locator('tbody > tr')).toHaveCount(13); // shouldn't be hardcoded in case of tests on demo
   });
+
+  test('', async ({ page }) => {
+    await page.getByRole('link', { name: 'Opportunities' }).click();
+    await expect(page.locator('table')).toBeVisible();
+  });
 });

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

@@ -0,0 +1,18 @@
+import { test as setup, expect } from '@playwright/test';
+import path from 'path';
+
+setup('Login test', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Continue With Email' }).click();
+  await page.getByPlaceholder('Email').fill(process.env.DEFAULT_LOGIN);
+  await page.getByRole('button', { name: 'Continue', exact: true }).click();
+  await page.getByPlaceholder('Password').fill(process.env.DEFAULT_PASSWORD);
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await expect(page.getByText('Welcome to Twenty')).not.toBeVisible();
+
+  // End of authentication steps.
+
+  await page.context().storageState({
+    path: path.resolve(__dirname, '..', '.auth', 'user.json'),
+  });
+});

packages/twenty-e2e-testing/tests/workspaces.spec.ts

@@ -1,22 +1,5 @@
 import { test, expect } from '@playwright/test';
 import { sh } from '../drivers/shell_driver';
-import path from 'path';
-
-const date = new Date();
-
-test.afterEach(async ({ page, browserName }, workerInfo) => {
-  await page.screenshot({
-    path: path.resolve(
-      __dirname,
-      '..',
-      'results',
-      'screenshots',
-      browserName,
-      `${workerInfo.project.name}`,
-      `${date.toISOString()}.png`,
-    ),
-  });
-});
 
 test.describe('', () => {
   test('Testing logging', async ({ page }) => {