Skip to content

Commit 3de448a

Browse files
leightktleightkt
authored
Playwright (#1609)
1 parent 22428ce commit 3de448a

File tree

13 files changed

+12217
-5
lines changed

13 files changed

+12217
-5
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
"build": "yarn wsrun --serial build",
6161
"type-check": "yarn wsrun type-check",
6262
"file-check": "yarn install --check-files",
63-
"check-all": "yarn build && yarn file-check && yarn type-check"
63+
"check-all": "yarn build && yarn file-check && yarn type-check",
64+
"test-playwright": "cd test && yarn && yarn playwright test"
6465
},
6566
"devDependencies": {
6667
"prettier": "^2.4.1",

‎packages/demo/src/App.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -661,7 +661,7 @@
661661
<button on:click={() => onboard.setChain({ chainId: '0x89' })}
662662
>Set Chain to Matic</button
663663
>
664-
<button on:click={() => onboard.updateChain({ chainId: 10 })}
664+
<button on:click={() => onboard.setChain({ chainId: 10 })}
665665
>Set Chain to Optimism</button
666666
>
667667
</div>
@@ -670,13 +670,15 @@
670670
</div>
671671
{#if $wallets$}
672672
{#each $wallets$ as { icon, label, accounts, chains, provider, instance }}
673-
<div class="connected-wallet">
673+
<div class="connected-wallet" data-testid="connected-wallet">
674674
<div class="flex-centered" style="width: 10rem;">
675675
<div style="width: 2rem; height: 2rem">{@html icon}</div>
676-
<span>{label}</span>
676+
<span data-testid={label}>{label}</span>
677677
</div>
678678
679-
<div>Chains: {JSON.stringify(chains, null, 2)}</div>
679+
<div data-testid="chains">
680+
Chains: {JSON.stringify(chains, null, 2)}
681+
</div>
680682
681683
{#each accounts as { address, ens, uns, balance }}
682684
<div
@@ -713,6 +715,7 @@
713715
class="text-input"
714716
placeholder="0x..."
715717
bind:value={toAddress}
718+
data-testid="sendTransaction"
716719
/>
717720
<button on:click={sendTransaction(provider)}>
718721
Send Transaction
@@ -724,6 +727,7 @@
724727
class="text-input"
725728
placeholder="0x..."
726729
bind:value={toAddress}
730+
data-testid="sendWithPreflight"
727731
/>
728732
<button on:click={sendTransactionWithPreFlight(provider, balance)}>
729733
Send with Preflight Notifications

‎test/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
/test-results/
3+
/playwright-report/
4+
/playwright/.cache/

‎test/e2e/.eslintrc.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const path = require('path')
2+
const synpressPath = path.join(
3+
process.cwd(),
4+
'/node_modules/@synthetixio/synpress'
5+
)
6+
7+
module.exports = {
8+
extends: `${synpressPath}/.eslintrc.js`
9+
}

‎test/e2e/support.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@synthetixio/synpress/support/index'

‎test/e2e/tsconfig.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"baseUrl": "../../node_modules",
5+
"types": [
6+
"cypress",
7+
"@synthetixio/synpress/support",
8+
"cypress-wait-until",
9+
"@testing-library/cypress"
10+
],
11+
"outDir": "./output"
12+
},
13+
"include": ["**/*.*"]
14+
}

‎test/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "-W",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"devDependencies": {
7+
"@playwright/test": "^1.31.2",
8+
"@synthetixio/synpress": "^3.5.1",
9+
"dotenv": "^16.0.3"
10+
},
11+
"scripts": {},
12+
"dependencies": {}
13+
}

‎test/playwright.config.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { defineConfig, devices } from '@playwright/test'
2+
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
require('dotenv').config()
8+
9+
/**
10+
* See https://playwright.dev/docs/test-configuration.
11+
*/
12+
export default defineConfig({
13+
testDir: './tests',
14+
/* Maximum time one test can run for. */
15+
timeout: 30 * 1000,
16+
expect: {
17+
/**
18+
* Maximum time expect() should wait for the condition to be met.
19+
* For example in `await expect(locator).toHaveText();`
20+
*/
21+
timeout: 5000
22+
},
23+
/* Run tests in files in parallel */
24+
fullyParallel: true,
25+
/* Fail the build on CI if you accidentally left test.only in the source code. */
26+
forbidOnly: !!process.env.CI,
27+
/* Retry on CI only */
28+
retries: process.env.CI ? 1 : 0,
29+
/* Opt out of parallel tests on CI. */
30+
workers: 1,
31+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
32+
reporter: 'html',
33+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
34+
use: {
35+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
36+
actionTimeout: 0,
37+
/* Base URL to use in actions like `await page.goto('/')`. */
38+
// baseURL: 'http://localhost:3000',
39+
40+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
41+
trace: 'on-first-retry'
42+
},
43+
44+
/* Configure projects for major browsers */
45+
projects: [
46+
{
47+
name: 'chromium',
48+
use: { ...devices['Desktop Chrome'] }
49+
}
50+
51+
// {
52+
// name: 'firefox',
53+
// use: { ...devices['Desktop Firefox'] }
54+
// },
55+
56+
// {
57+
// name: 'webkit',
58+
// use: { ...devices['Desktop Safari'] }
59+
// }
60+
61+
/* Test against mobile viewports. */
62+
// {
63+
// name: 'Mobile Chrome',
64+
// use: { ...devices['Pixel 5'] },
65+
// },
66+
// {
67+
// name: 'Mobile Safari',
68+
// use: { ...devices['iPhone 12'] },
69+
// },
70+
71+
/* Test against branded browsers. */
72+
// {
73+
// name: 'Microsoft Edge',
74+
// use: { channel: 'msedge' },
75+
// },
76+
// {
77+
// name: 'Google Chrome',
78+
// use: { channel: 'chrome' },
79+
// },
80+
],
81+
82+
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
83+
// outputDir: 'test-results/',
84+
85+
/* Run your local dev server before starting the tests */
86+
webServer: {
87+
command: 'cd .. && yarn && yarn dev',
88+
port: 8080,
89+
reuseExistingServer: true
90+
}
91+
})

‎test/tests/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# @web3-onboard/testing
2+
3+
## A collection of playwright tests run on the web3-onboard demo
4+
5+
To run tests:
6+
1. Create .env file in test/ with the following variables:
7+
TEST_WALLET_PHRASE
8+
TEST_WALLET_ADDRESS
9+
SERIAL_MODE=true
10+
HEADLESS_MODE=true
11+
2. yarn test
12+
13+
There are 4 existing tests for metamask: connect metamask, sign a message, sign a typed message, send a transaction, switche chains, and disconnect.
14+
15+
Please note: your test metamask wallet must have a balance of GoerliETH for all tests to pass.
16+
17+
To view report after running tests: npx playwright show-report

‎test/tests/example.spec.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('has title', async ({ page }) => {
4+
await page.goto('http://localhost:8080')
5+
// Expect a title "to contain" a substring.
6+
await expect(page).toHaveTitle(/Svelte app/)
7+
})

0 commit comments

Comments
 (0)