Playwright Codegen and CI setup

- Improved the Codegen setup
  - Removed the app-launch related boilerplate from tests
  - Enable recording mode by default
  - Option to provide the test file name to save the recording
- Added GitHub workflow to run Playwright tests with Electron in
  Headless mode(mocking display using `xvfb`).

.github/workflows/playwright.yml

@@ -0,0 +1,44 @@
+name: Playwright E2E Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  e2e-test:
+    timeout-minutes: 60
+    runs-on: ubuntu-24.04
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: v22.11.x
+    - name: Install dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get --no-install-recommends install -y \
+          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
+          xvfb
+        npm ci --legacy-peer-deps
+        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+
+    - name: Build libraries
+      run: |
+        npm run build:graphql-docs
+        npm run build:bruno-query
+        npm run build:bruno-common
+        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+        npm run build:bruno-converters
+        npm run build:bruno-requests
+
+    - name: Run Playwright tests
+      run: |
+        xvfb-run npm run test:e2e
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -47,4 +47,7 @@ yarn-error.log*
 #dev editor
 bruno.iml
 .idea
-.vscode
+.vscode
+
+# Playwright
+/blob-report/

e2e-tests/test-app-start.spec.ts

@@ -0,0 +1,5 @@
+import { test, expect } from '../playwright';
+
+test('test-app-start', async ({ page }) => {
+  await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
+});

package-lock.json

@@ -23,8 +23,10 @@
       "devDependencies": {
         "@faker-js/faker": "^7.6.0",
         "@jest/globals": "^29.2.0",
+        "@playwright/test": "^1.51.1",
         "@types/jest": "^29.5.11",
         "@types/lodash-es": "^4.17.12",
+        "@types/node": "^22.14.1",
         "concurrently": "^8.2.2",
         "eslint": "^9.26.0",
         "fs-extra": "^11.1.1",
@@ -33,6 +35,7 @@
         "jest": "^29.2.0",
         "lint-staged": "^15.5.2",
         "lodash-es": "^4.17.21",
+        "playwright": "^1.51.1",
         "pretty-quick": "^3.1.3",
         "randomstring": "^1.2.2",
         "rimraf": "^6.0.1",
@@ -6103,6 +6106,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
+      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -8273,6 +8292,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
@@ -8295,6 +8315,7 @@
       "version": "12.2.3",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
       "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/linkify-it": "*",
@@ -8305,6 +8326,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/ms": {
@@ -8315,13 +8337,13 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.10.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
-      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
+      "version": "22.15.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
+      "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.20.0"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/plist": {
@@ -13246,6 +13268,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -21282,6 +21305,53 @@
       "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
       "license": "MIT"
     },
+    "node_modules/playwright": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
+      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
+      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -26410,7 +26480,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -26436,9 +26506,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "devOptional": true,
       "license": "MIT"
     },

package.json

@@ -20,8 +20,10 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
+    "@playwright/test": "^1.51.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.14.1",
     "concurrently": "^8.2.2",
     "eslint": "^9.26.0",
     "fs-extra": "^11.1.1",
@@ -30,6 +32,7 @@
     "jest": "^29.2.0",
     "lint-staged": "^15.5.2",
     "lodash-es": "^4.17.21",
+    "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
@@ -57,7 +60,8 @@
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
-    "test:codegen": "npm run dev:web & node ./scripts/playwright-codegen.js",
+    "test:codegen": "node playwright/codegen.ts",
+    "test:e2e": "playwright test",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "prepare": "husky install",
     "lint": "npx eslint ./"

playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e-tests',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? undefined : 1,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry'
+  },
+
+  projects: [
+    {
+      name: 'Bruno Electron App'
+    }
+  ],
+
+  webServer: {
+    command: 'npm run dev:web',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI
+  }
+});

playwright/codegen.ts

@@ -0,0 +1,13 @@
+const path = require('path');
+const { startApp } = require('./electron.ts');
+
+async function main() {
+  const { app, context } = await startApp();
+  let outputFile = process.argv[2]?.trim();
+  if (outputFile && !/\.(ts|js)$/.test(outputFile)) {
+    outputFile = path.join(__dirname, '../e2e-tests/', outputFile + '.spec.ts');
+  }
+  await context._enableRecorder({ language: 'playwright-test', mode: 'recording', outputFile });
+}
+
+main();

playwright/electron.ts

@@ -0,0 +1,13 @@
+const path = require('path');
+const { _electron: electron } = require('playwright');
+
+const electronAppPath = path.join(__dirname, '../packages/bruno-electron');
+
+exports.startApp = async () => {
+  const app = await electron.launch({ args: [electronAppPath] });
+  const context = await app.context();
+
+  app.process().stdout.on('data', (data) => console.log(data.toString()));
+  app.process().stderr.on('data', (error) => console.error(error.toString()));
+  return { app, context };
+};

playwright/index.ts

@@ -0,0 +1,23 @@
+import { test as baseTest, ElectronApplication, Page } from '@playwright/test';
+
+const { startApp } = require('./electron.ts');
+
+export const test = baseTest.extend<{ page: Page }, { electronApp: ElectronApplication }>({
+  electronApp: [
+    async ({}, use) => {
+      const { app: electronApp, context } = await startApp();
+
+      await use(electronApp);
+      await context.close();
+      await electronApp.close();
+    },
+    { scope: 'worker' }
+  ],
+  page: async ({ electronApp }, use) => {
+    const page = await electronApp.firstWindow();
+    await use(page);
+    await page.reload();
+  }
+});
+
+export * from '@playwright/test'

scripts/playwright-codegen.js

@@ -1,17 +0,0 @@
-const path = require('path');
-const timer = require('node:timers/promises');
-const { _electron: electron } = require('playwright');
-
-const electronAppPath = path.join(__dirname, '../packages/bruno-electron');
-
-(async () => {
-  const browser = await electron.launch({ args: [electronAppPath] });
-  const context = await browser.context();
-  await context.route('**/*', (route) => route.continue());
-
-  while (true) {
-    if(browser.windows().length) break;
-    await timer.setTimeout(200);
-  }
-  await browser.windows()[0].pause();
-})();