Skip to content

Commit 3f70a02

Browse files
MadoshakalakaMadoshakalaka
committed
add playwright testing for pixel checking
1 parent 4ca16f9 commit 3f70a02

13 files changed

Lines changed: 403 additions & 1 deletion

File tree

‎.github/workflows/playwright-tests.yml‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
name: Playwright Tests
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- ".github/workflows/playwright-tests.yml"
7+
- "e2e/**"
8+
- "tests/**"
9+
- "playwright.config.ts"
10+
- "package.json"
11+
- "package-lock.json"
12+
- "packages/**/*"
13+
push:
14+
branches: [master]
15+
16+
jobs:
17+
playwright_tests:
18+
name: Playwright Browser Tests
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
23+
- uses: Swatinem/rust-cache@v2
24+
with:
25+
shared-key: yew-packages
26+
27+
# for wasm-bindgen-cli, always use stable rust
28+
- name: Setup toolchain
29+
uses: dtolnay/rust-toolchain@master
30+
with:
31+
toolchain: stable
32+
33+
- name: Install wasm-bindgen-cli
34+
shell: bash
35+
run: ./ci/install-wasm-bindgen-cli.sh
36+
37+
- name: Setup toolchain for wasm
38+
uses: dtolnay/rust-toolchain@master
39+
with:
40+
toolchain: stable
41+
targets: wasm32-unknown-unknown
42+
43+
- uses: jetli/trunk-action@v0.5.1
44+
with:
45+
version: 'latest'
46+
47+
- name: Setup Node.js
48+
uses: actions/setup-node@v4
49+
with:
50+
node-version: '20'
51+
52+
- name: Install dependencies
53+
run: npm ci
54+
55+
- name: Install Playwright browsers
56+
run: npx playwright install --with-deps chromium
57+
58+
- name: Run Playwright tests
59+
run: npx playwright test
60+
61+
- name: Upload test results
62+
if: always()
63+
uses: actions/upload-artifact@v4
64+
with:
65+
name: playwright-report
66+
path: playwright-report/
67+
retention-days: 30
68+
69+
- name: Upload test screenshots
70+
if: failure()
71+
uses: actions/upload-artifact@v4
72+
with:
73+
name: test-results
74+
path: test-results/
75+
retention-days: 30

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,11 @@ dist/
88
*.iml
99
/.idea/
1010
/.vscode/
11+
12+
# Node/npm
13+
node_modules/
14+
15+
# Playwright
16+
playwright-report/
17+
test-results/
18+
tests/svg-test-screenshot.png

‎Cargo.lock‎

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

‎Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
members = [
33
"packages/*",
44
"tools/*",
5-
"examples/*",
5+
"examples/*", "e2e",
66
]
77
default-members = [
88
"packages/*",

‎e2e/Cargo.toml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[package]
2+
name = "e2e"
3+
version = "0.1.0"
4+
edition = "2021"
5+
6+
[dependencies]
7+
yew = { path = "../packages/yew", features = ["csr"] }
8+
9+
[lints]
10+
workspace = true

‎e2e/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# E2E Tests
2+
3+
This directory contains end-to-end tests for Yew using Playwright.
4+
5+
## SVG Rendering Test
6+
7+
The test (`tests/svg-bug.spec.ts`) verifies proper rendering of SVG elements with camelCased tag names.
8+
9+
### The Bug/Feature
10+
11+
Yew currently has an issue where camelCase SVG filter primitive elements (like `feDropShadow`) are converted to lowercase, causing them to fail to render in some browsers. This test:
12+
13+
1. Renders an SVG with a `feDropShadow` filter effect (should create a red glow)
14+
2. Takes a screenshot and analyzes the pixels
15+
3. **Currently expected to fail** because all pixels are white - the drop shadow doesn't render
16+
17+
## Running Tests Locally
18+
19+
at the root of the project:
20+
```bash
21+
# Install dependencies
22+
npm install
23+
24+
# Install Playwright browsers
25+
npx playwright install chromium
26+
27+
# Run tests
28+
npx playwright test
29+
30+
# Run tests with UI
31+
npx playwright test --ui
32+
33+
# View test report
34+
npx playwright show-report
35+
```
36+
37+
38+
The tests automatically start a development server using `trunk serve` before running.

‎e2e/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>SVG Test</title>
6+
</head>
7+
<body></body>
8+
</html>

‎e2e/src/app.rs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
use yew::prelude::*;
2+
3+
#[function_component]
4+
pub fn App() -> Html {
5+
html! {
6+
<svg>
7+
<defs>
8+
<filter id="glow">
9+
<feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="red"/>
10+
</filter>
11+
</defs>
12+
<rect width="100" height="100" filter="url(#glow)" />
13+
</svg>
14+
}
15+
}

‎e2e/src/main.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
mod app;
2+
3+
use app::App;
4+
5+
fn main() {
6+
yew::Renderer::<App>::new().render();
7+
}

‎package-lock.json‎

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

0 commit comments

Comments
 (0)