Skip to content

Commit f4379ab

Browse files
bzneinbznein
committed
tests: add CI playwright integration and first test.
1 parent a16d5e9 commit f4379ab

File tree

12 files changed

+285
-1
lines changed

12 files changed

+285
-1
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Playwright Tests
2+
3+
on:
4+
push:
5+
branches:
6+
- '**'
7+
pull_request:
8+
branches:
9+
- '**'
10+
workflow_dispatch:
11+
12+
jobs:
13+
run-tests:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- uses: actions/checkout@v3
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v3
20+
with:
21+
node-version: 20
22+
23+
- name: Install dependencies
24+
run: |
25+
cd frontends/web
26+
npm install
27+
28+
- name: Install Playwright browsers
29+
run: |
30+
cd frontends/web
31+
npx playwright install --with-deps
32+
33+
- name: Run Playwright tests
34+
run: make webe2etest
35+
36+
- name: Upload Playwright artifacts
37+
if: failure()
38+
uses: actions/upload-artifact@v4
39+
with:
40+
name: playwright-artifacts
41+
path: frontends/web/test-results/*

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,8 @@ tags
5050
!/frontends/web/src/locales/sl/
5151
!/frontends/web/src/locales/tr/
5252
!/frontends/web/src/locales/zh/
53-
!/frontends/web/src/locales/cs/
53+
!/frontends/web/src/locales/cs/
54+
55+
# Playwright files
56+
/frontends/web/playwright-report/
57+
/frontends/web/test-results/

‎Makefile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ webtestwatch:
5555
cd ${WEBROOT} && $(MAKE) jstest-watch
5656
webserve:
5757
cd ${WEBROOT} && $(MAKE) serve
58+
webe2etest:
59+
cd ${WEBROOT} && $(MAKE) test-e2e
5860
qt-linux: # run inside dockerdev
5961
$(MAKE) buildweb
6062
cd frontends/qt && $(MAKE) linux

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,13 @@ The frontend tests are run using [vitest](https://vitest.dev/) and [@testing-lib
9696

9797
To run all test suites, execute `make webtest`.
9898

99+
#### E2E testing
100+
101+
Playwright is used to perform automatic test on some use cases on the webdev version.
102+
103+
Tests are located under [`frontends/web/tests`](/frontends/web/tests) and can be run with
104+
`make webe2etest`
105+
99106
#### Run the HTTP API
100107

101108
Run `make servewallet` to compile the code and run `servewallet`. `servewallet` is a devtool which

‎frontends/web/Makefile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,5 @@ listdeps:
3030
npm list -prod -long
3131
serve:
3232
npm run serve
33+
test-e2e:
34+
npm run test-e2e

‎frontends/web/package-lock.json‎

Lines changed: 60 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontends/web/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"name": "bitboxapp",
44
"version": "0.0.0",
55
"devDependencies": {
6+
"@playwright/test": "^1.55.0",
67
"@stylistic/eslint-plugin": "^4.2.0",
78
"@testing-library/jest-dom": "^6.6.3",
89
"@testing-library/react": "^16.0.1",
@@ -54,6 +55,7 @@
5455
"lint-debug": "eslint ./src --inspect-config",
5556
"typescript": "tsc -p tsconfig.json",
5657
"test": "vitest",
58+
"test-e2e": "playwright test",
5759
"preview": "vite preview --port 8080",
5860
"serve": "npm run build && npm run preview"
5961
}

‎frontends/web/playwright.config.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
import * as path from 'path';
3+
4+
// Read defaults from environment variables if set, otherwise fallback
5+
const HOST = process.env.HOST || 'localhost';
6+
const FRONTEND_PORT = parseInt(process.env.FRONTEND_PORT || '8080', 10);
7+
8+
export default defineConfig({
9+
testDir: path.join(__dirname, 'tests'),
10+
testMatch: ['**/*.test.ts'],
11+
webServer: [
12+
{
13+
command: `make -C ../.. buildweb && make -C ../.. webserve`,
14+
port: FRONTEND_PORT,
15+
reuseExistingServer: true,
16+
timeout: 120_000,
17+
},
18+
],
19+
timeout: 120_000,
20+
use: {
21+
baseURL: `http://${HOST}:${FRONTEND_PORT}`,
22+
headless: true,
23+
video: 'retain-on-failure',
24+
screenshot: 'only-on-failure',
25+
trace: 'retain-on-failure',
26+
},
27+
reporter: [['html', { open: 'never' }], ['list']],
28+
outputDir: 'test-results/',
29+
projects: [
30+
{
31+
name: 'Chromium',
32+
use: { ...devices['Desktop Chrome'] },
33+
},
34+
{
35+
name: 'WebKit',
36+
use: { ...devices['Desktop Safari'] },
37+
},
38+
],
39+
});

‎frontends/web/tests/base.test.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Copyright 2025 Shift Crypto AG
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { test } from './helpers/fixtures';
18+
import { startServeWallet, waitForServewallet } from './helpers/servewallet';
19+
import { expect } from '@playwright/test';
20+
21+
test('App main page loads', async ({ page, host, frontendPort, servewalletPort }) => {
22+
23+
await test.step('Start servewallet', async () => {
24+
startServeWallet();
25+
await waitForServewallet(page, servewalletPort, frontendPort, host);
26+
});
27+
28+
29+
await test.step('Navigate to the app', async () => {
30+
await page.goto(`http://${host}:${frontendPort}`);
31+
const body = page.locator('body');
32+
await expect(body).toContainText('Please connect your BitBox and tap the side to continue.');
33+
});
34+
});

‎frontends/web/tests/helpers/fixtures.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Copyright 2025 Shift Crypto AG
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { test as baseTest } from '@playwright/test';
18+
19+
// Custom fixtures for host/ports
20+
export const test = baseTest.extend<{
21+
host: string;
22+
frontendPort: number;
23+
servewalletPort: number;
24+
}>({
25+
host: [process.env.HOST || 'localhost', { scope: 'worker' }],
26+
frontendPort: [parseInt(process.env.FRONTEND_PORT || '8080', 10), { scope: 'worker' }],
27+
servewalletPort: [parseInt(process.env.SERVE_WALLET_PORT || '8082', 10), { scope: 'worker' }],
28+
});
29+

0 commit comments

Comments
 (0)