Skip to content

Commit 4cecbb5

Browse files
heeckhauheeckhau
authored
Use Playwright to test demos (#106)
* Run tests and demos with playwright * ci: renamed workflow * Improved demo readmes * Use a separate page for each test
1 parent 8bc8a94 commit 4cecbb5

37 files changed

+938
-1558
lines changed

‎.github/workflows/ci.yaml

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ on:
55
release:
66
types: [published]
77

8-
env:
9-
LOCAL-NOTARY: true
10-
LOCAL-WS: false
11-
HEADLESS: true
12-
PUPPETEER_SKIP_DOWNLOAD: true
13-
148
jobs:
159
build-and-test:
1610
name: Build and test
@@ -37,7 +31,7 @@ jobs:
3731
- name: Setup Node.js
3832
uses: actions/setup-node@v4
3933
with:
40-
node-version: 18
34+
node-version: 20
4135
cache: 'npm'
4236

4337
- name: Install stable nightly toolchain
@@ -61,27 +55,18 @@ jobs:
6155

6256
- name: Build
6357
run: npm run build
64-
58+
6559
- name: Lint
6660
run: npm run lint
67-
68-
- name: Install Chrome
69-
uses: browser-actions/setup-chrome@v1
70-
id: setup-chrome
71-
with:
72-
chrome-version: 121.0.6167.85
7361

74-
- name: Set CHROME_PATH environment variable
75-
run: echo "CHROME_PATH=${{ steps.setup-chrome.outputs['chrome-path'] }}" >> $GITHUB_ENV
62+
- name: install wstcp
63+
run: cargo install wstcp
64+
65+
- name: Install Chromium (Playwright)
66+
run: npx playwright install --with-deps chromium
7667

7768
- name: Test
78-
run: |
79-
# Install wstcp and use it in the background
80-
cargo install wstcp
81-
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443 &
82-
WSTCP_PID=$!
83-
trap "kill $WSTCP_PID" EXIT
84-
npm run test
69+
run: npm run test
8570

8671
- name: Determine release type (dry-run or publish)
8772
run: |

‎.github/workflows/playwright.yml

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Tests demos
2+
on:
3+
pull_request:
4+
jobs:
5+
test:
6+
timeout-minutes: 60
7+
name: Tests demos
8+
runs-on: ubuntu-latest
9+
services:
10+
notary-server:
11+
image: ghcr.io/tlsnotary/tlsn/notary-server:v0.1.0-alpha.10
12+
env:
13+
NOTARY_SERVER__TLS__ENABLED: false
14+
ports:
15+
- 7047:7047
16+
steps:
17+
- uses: actions/checkout@v4
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: lts/*
21+
- name: build tlsn-js
22+
run: npm ci; npm run build
23+
- name: install wstcp
24+
run: cargo install wstcp
25+
- name: Install Chromium (Playwright)
26+
run: npx playwright install --with-deps chromium
27+
- name: Test react demo
28+
working-directory: demo/react-ts-webpack
29+
continue-on-error: true
30+
run: |
31+
set -e
32+
npm i
33+
npm run test
34+
- name: Test interactive verifier demo
35+
continue-on-error: true
36+
run: |
37+
set -e
38+
cd demo/interactive-demo/verifier-rs
39+
cargo build --release
40+
cd ../prover-ts
41+
npm i
42+
npm run test
43+
- name: Test web-to-web p2p demo
44+
working-directory: demo/react-ts-webpack
45+
continue-on-error: true
46+
run: |
47+
set -e
48+
npm run test
49+
- uses: actions/upload-artifact@v4
50+
if: ${{ !cancelled() }}
51+
with:
52+
name: playwright-report
53+
path: '**/playwright-report/'
54+
retention-days: 30

‎.gitignore

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,10 @@ dev-build/
66
test-build/
77
./demo/node_modules
88
utils/tlsn
9-
.vscode
9+
.vscode
10+
11+
# Playwright
12+
/test-results/
13+
/playwright-report/
14+
/blob-report/
15+
/playwright/.cache/

‎demo/interactive-demo/README.md

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,59 @@
1-
# Test Rust Prover
2-
3-
1. Start the verifier:
4-
```bash
5-
cd verifier-rs; cargo run --release
6-
```
7-
2. Run the prover:
8-
```bash
9-
cd prover-rs; cargo run --release
10-
```
11-
12-
# Test Browser Prover
13-
1. Start the verifier:
14-
```bash
15-
cd verifier-rs; cargo run --release
16-
```
17-
2. Since a web browser doesn't have the ability to make TCP connection, we need to use a websocket proxy server to access <raw.githubusercontent.com>.
18-
```bash
19-
cargo install wstcp
20-
21-
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
22-
```
23-
3. Run the prover
24-
1. Build tlsn-js
1+
# Interactive Verifier Demo
2+
3+
This demo shows how to use TLSNotary **without a notary**: a direct proof between a prover and a verifier, where the verifier checks both the TLS session and the revealed data.
4+
5+
There are two prover implementations:
6+
- **Rust**
7+
- **TypeScript** (browser)
8+
The verifier is implemented in Rust.
9+
10+
---
11+
12+
## Interactive Verifier Demo with Rust Prover
13+
14+
1. **Start the verifier:**
15+
```bash
16+
cd verifier-rs
17+
cargo run --release
18+
```
19+
2. **Run the prover:**
20+
```bash
21+
cd prover-rs
22+
cargo run --release
23+
```
24+
25+
---
26+
27+
## Interactive Verifier Demo with TypeScript Prover (Browser)
28+
29+
1. **Start the verifier:**
30+
```bash
31+
cd verifier-rs
32+
cargo run --release
33+
```
34+
2. **Set up a websocket proxy for raw.githubusercontent.com**
35+
Browsers cannot make raw TCP connections, so a websocket proxy is required:
36+
```bash
37+
cargo install wstcp
38+
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
39+
```
40+
3. **Run the prover in the browser:**
41+
1. **Build tlsn-js**
2542
```bash
2643
cd ..
27-
npm i
44+
npm install
2845
npm run build
29-
npm link
3046
```
31-
2. Build demo prover-ts
47+
2. **Build and start the TypeScript prover demo**
3248
```bash
3349
cd prover-ts
34-
npm i
35-
npm link
50+
npm install
3651
npm run dev
3752
```
38-
3. Open <http://localhost:3456/> and click **Start Prover**
53+
3. **Open the demo in your browser:**
54+
Go to [http://localhost:8080/](http://localhost:8080/) and click **Start Prover**.
55+
56+
---
57+
58+
**Tip:**
59+
If you encounter issues, make sure all dependencies are installed and the websocket proxy is running before starting the browser demo.

‎demo/interactive-demo/prover-ts/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
11
package-lock.json
2+
3+
# Playwright
4+
node_modules/
5+
/test-results/
6+
/playwright-report/
7+
/blob-report/
8+
/playwright/.cache/

‎demo/interactive-demo/prover-ts/index.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>React/Typescript Example</title>
7+
<title>TLSNotary React TypeScript Demo</title>
88
</head>
99

1010
<body>

‎demo/interactive-demo/prover-ts/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
"description": "",
55
"main": "webpack.js",
66
"scripts": {
7-
"dev": "webpack-dev-server --config webpack.js"
7+
"dev": "webpack-dev-server --config webpack.js",
8+
"start": "webpack serve --config webpack.js",
9+
"test": "npx playwright test"
810
},
911
"author": "",
1012
"license": "ISC",

‎demo/interactive-demo/prover-ts/playwright.config.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
// import dotenv from 'dotenv';
8+
// import path from 'path';
9+
// dotenv.config({ path: path.resolve(__dirname, '.env') });
10+
11+
/**
12+
* See https://playwright.dev/docs/test-configuration.
13+
*/
14+
export default defineConfig({
15+
testDir: './tests',
16+
/* Run tests in files in parallel */
17+
fullyParallel: true,
18+
/* Fail the build on CI if you accidentally left test.only in the source code. */
19+
forbidOnly: !!process.env.CI,
20+
/* Retry on CI only */
21+
retries: process.env.CI ? 2 : 0,
22+
/* Opt out of parallel tests on CI. */
23+
workers: process.env.CI ? 1 : undefined,
24+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
25+
reporter: 'html',
26+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
27+
use: {
28+
/* Base URL to use in actions like `await page.goto('/')`. */
29+
baseURL: 'http://localhost:8080',
30+
31+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32+
trace: 'on-first-retry',
33+
},
34+
35+
/* Configure projects for major browsers */
36+
projects: [
37+
{
38+
name: 'chromium',
39+
use: { ...devices['Desktop Chrome'] },
40+
},
41+
42+
// {
43+
// name: 'firefox',
44+
// use: { ...devices['Desktop Firefox'] },
45+
// },
46+
47+
// {
48+
// name: 'webkit',
49+
// use: { ...devices['Desktop Safari'] },
50+
// },
51+
52+
/* Test against mobile viewports. */
53+
// {
54+
// name: 'Mobile Chrome',
55+
// use: { ...devices['Pixel 5'] },
56+
// },
57+
// {
58+
// name: 'Mobile Safari',
59+
// use: { ...devices['iPhone 12'] },
60+
// },
61+
62+
/* Test against branded browsers. */
63+
// {
64+
// name: 'Microsoft Edge',
65+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
66+
// },
67+
// {
68+
// name: 'Google Chrome',
69+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
70+
// },
71+
],
72+
73+
/* Run your local dev server before starting the tests */
74+
webServer: [
75+
{
76+
command: 'npm run start',
77+
url: 'http://localhost:8080',
78+
reuseExistingServer: !process.env.CI,
79+
},
80+
{
81+
command: 'wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443',
82+
reuseExistingServer: true,
83+
},
84+
{
85+
command: 'cargo run --release',
86+
cwd: '../verifier-rs',
87+
reuseExistingServer: true,
88+
}
89+
]
90+
});

‎demo/interactive-demo/prover-ts/src/app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ function App(): ReactElement {
224224
</div>
225225
) : (
226226
<div className="bg-gray-100 border border-gray-300 p-4 rounded-lg mt-4">
227-
<pre className="text-left text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
227+
<pre data-testid="proof-data" className="text-left text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
228228
{JSON.stringify(result, null, 2)}
229229
</pre>
230230
</div>

‎demo/interactive-demo/prover-ts/tests/demo-flow.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test('has title', async ({ page }) => {
4+
await page.goto('/');
5+
await expect(page).toHaveTitle(/TLSNotary/)
6+
});
7+
8+
test('run demo', async ({ page }) => {
9+
await page.goto('/');
10+
11+
// Click the get started link.
12+
await page.getByRole('button', { name: 'Start Prover' }).click();
13+
14+
await expect(page.getByTestId('proof-data')).toContainText('Unredacted data successfully revealed to Verifier', { timeout: 60000 });
15+
16+
});

‎demo/react-ts-webpack/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
11
package-lock.json
2+
3+
# Playwright
4+
node_modules/
5+
/test-results/
6+
/playwright-report/
7+
/blob-report/
8+
/playwright/.cache/

0 commit comments

Comments
 (0)