TW-1454: [e2e] Playwright set-up (#1149)

* TW-1454: Playwright setup. Init

* TW-1454: Playwright setup. Test 2

* playwright setup changes

* playwright setup stage 3

* page object refactor

* test

* pre-final setup e2e-playwright (refactor all page objects not included)

* package json fix

* path fix

* path fix

* path fix

* ts fix

* ts fix

* ts + PATH fix

* TW-1454: [EVM][E2E] Setup tests. Disable Jest on E2E tests

* TW-1454: [EVM][E2E] Setup tests. + Linting

* fix comments + add new settings

* fix comments + add new settings

* fix alex's comments

* TW-1454: Playwright setup. + TDD syntax

* video recorder test

* video recorder test

* video recorder test 2

* video recorder test 2

* fix pipeline. rerty added

* lint restored

---------

Co-authored-by: Alex <alex.seleznov@gmail.com>

.github/workflows/code-quality-check/action.yml

@@ -25,9 +25,9 @@ runs:
       run: yarn ts
       shell: bash
 
-    # - name: Check E2E TypeScript
-    #   run: yarn ts:e2e
-    #   shell: bash
+    - name: Check E2E TypeScript
+      run: yarn ts:e2e
+      shell: bash
 
     - name: Find deadcode
       run: yarn find-deadcode

.github/workflows/manual-builds.yml

@@ -120,7 +120,7 @@ jobs:
         uses: adrey/slack-file-upload-action@master
         with:
           token: ${{ secrets.SLACK_E2E_VIDEO_UPLOADER_TOKEN }}
-          path: e2e/video-rep/test-runs.mp4
+          path: e2e/test-results/video-result.webm
           channel: temple-test-runs
           initial_comment: <https://github.com/madfish-solutions/templewallet-extension/pull/${{ github.event.number }}|${{ github.event.pull_request.title }}>  (Run <https://github.com/madfish-solutions/templewallet-extension/actions/runs/${{ github.run_id }}|№${{ github.run_number }}>)
 

e2e/.gitignore

@@ -0,0 +1,6 @@
+# dependencies
+node_modules/
+
+.env
+
+test-results/

e2e/package.json

@@ -1,41 +1,20 @@
 {
   "name": "temple-wallet-extension-e2e",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "license": "MIT",
   "scripts": {
-    "start": "./node_modules/.bin/cucumber-js --fail-fast",
-    "start:dev": "yarn start --tags @dev",
-    "start:NFT": "yarn start --tags @collectibles",
-    "start:remove_account": "yarn start --tags @remove_account",
-    "start:create_account": "yarn start --tags @create_account",
-    "start:address_book": "yarn start --tags @address_book",
-    "start:custom_node": "yarn start --tags @custom_node",
-    "start:unlock_screen": "yarn start --tags @unlock_screen",
-    "start:manage_assets": "yarn start --tags @manage_assets",
-    "start:home": "yarn start --tags @home",
-    "start:create_new_wallet": "yarn start --tags @create_new_wallet",
-    "start:delegate": "yarn start --tags @delegate",
-    "start:import_account_mnemonic": "yarn start --tags @import_account_mnemonic",
-    "start:import_account_private_key": "yarn start --tags @import_account_private_key",
-    "start:import_account_public_key": "yarn start --tags @import_account_public_key",
-    "start:import_wallet": "yarn start --tags @import_wallet",
-    "start:reveal_private_key": "yarn start --tags @reveal_private_key",
-    "start:reveal_mnemonic": "yarn start --tags @reveal_mnemonic",
-    "start:send": "yarn start --tags @send",
-    "start:swap": "yarn start --tags @swap",
-    "start:notifications": "yarn start --tags @notifications",
-    "test": "yarn start --exit --tags 'not @dev'",
+    "install": "yarn playwright install chromium",
+    "test": "yarn playwright test",
+    "test-fast": "yarn playwright test --max-failures=1",
     "ts": "tsc --pretty"
   },
   "dependencies": {
-    "@cucumber/cucumber": "^9.4.0",
-    "@types/chai": "^4.3.4",
+    "@playwright/test": "^1.44.0",
+    "@types/node": "^20.12.2",
     "async-retry": "^1.3.3",
-    "chai": "^4.3.7",
     "dotenv": "^16.0.3",
-    "puppeteer": "^19.11.1",
-    "puppeteer-screen-recorder": "^2.1.2",
+    "playwright": "^1.44.0",
     "ts-node": "^10.9.1"
   }
 }

e2e/playwright.config.ts

@@ -0,0 +1,15 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  fullyParallel: false,
+  testDir: './src',
+  workers: 1,
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' }
+    }
+  ]
+};
+
+export default config;

e2e/src/classes/browser-context.class.ts

@@ -1,17 +1,8 @@
-import { Browser, Page } from 'puppeteer';
-import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
+import { BrowserContext, Page } from '@playwright/test';
 
-import { envVars } from '../utils/env.utils';
-
-export class BrowserContext {
-  public static EXTENSION_ID: string;
-  public static browser: Browser;
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class CustomBrowserContext {
+  public static EXTENSION_URL: string;
+  public static browser: BrowserContext;
   public static page: Page;
-  public static seedPhrase = envVars.DEFAULT_HD_ACCOUNT_SEED_PHRASE;
-  public static password = envVars.DEFAULT_PASSWORD;
-  public static recorder: PuppeteerScreenRecorder;
-  public static resetPrivates = () => {
-    BrowserContext.seedPhrase = envVars.DEFAULT_HD_ACCOUNT_SEED_PHRASE;
-    BrowserContext.password = envVars.DEFAULT_PASSWORD;
-  };
 }

e2e/src/classes/page.class.ts

@@ -1,10 +1,10 @@
-import { BrowserContext } from 'e2e/src/classes/browser-context.class';
+import { CustomBrowserContext } from './browser-context.class';
 
 export abstract class Page {
   abstract isVisible(timeout?: number): void;
 
   scrollTo(topPositionPx: number) {
-    return BrowserContext.page.evaluate(top => {
+    return CustomBrowserContext.page.evaluate(top => {
       if (top <= 0 && window.pageYOffset === 0) return Promise.resolve(false);
 
       window.scrollTo({ top, behavior: 'smooth' });