yewstack · Madoshakalaka · Aug 10, 2025
diff --git a/.github/workflows/playwright-tests.yml b/.github/workflows/playwright-tests.yml
@@ -0,0 +1,75 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+    paths:
+      - ".github/workflows/playwright-tests.yml"
+      - "e2e/**"
+      - "tests/**"
+      - "playwright.config.ts"
+      - "package.json"
+      - "package-lock.json"
+      - "packages/**/*"
+  push:
+    branches: [master]
+
+jobs:
+  playwright_tests:
+    name: Playwright Browser Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          shared-key: yew-packages
+
+      # for wasm-bindgen-cli, always use stable rust
+      - name: Setup toolchain
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: stable
+
+      - name: Install wasm-bindgen-cli
+        shell: bash
+        run: ./ci/install-wasm-bindgen-cli.sh
+
+      - name: Setup toolchain for wasm
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: stable
+          targets: wasm32-unknown-unknown
+
+      - uses: jetli/[email protected]
+        with:
+          version: 'latest'
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Upload test screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,11 @@ dist/
 *.iml
 /.idea/
 /.vscode/
+
+# Node/npm
+node_modules/
+
+# Playwright
+playwright-report/
+test-results/
+tests/svg-test-screenshot.png
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -2,7 +2,7 @@
 members = [
     "packages/*",
     "tools/*",
-    "examples/*",
+    "examples/*", "e2e",
 ]
 default-members = [
     "packages/*",

diff --git a/e2e/Cargo.toml b/e2e/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "e2e"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { path = "../packages/yew", features = ["csr"] }
+
+[lints]
+workspace = true
diff --git a/e2e/README.md b/e2e/README.md
@@ -0,0 +1,38 @@
+# E2E Tests
+
+This directory contains end-to-end tests for Yew using Playwright.
+
+## SVG Rendering Test
+
+The test (`tests/svg-bug.spec.ts`) verifies proper rendering of SVG elements with camelCased tag names. 
+
+### The Bug/Feature
+
+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:
+
+1. Renders an SVG with a `feDropShadow` filter effect (should create a red glow)
+2. Takes a screenshot and analyzes the pixels
+3. **Currently expected to fail** because all pixels are white - the drop shadow doesn't render
+
+## Running Tests Locally
+
+at the root of the project:
+```bash
+# Install dependencies
+npm install
+
+# Install Playwright browsers
+npx playwright install chromium
+
+# Run tests
+npx playwright test
+
+# Run tests with UI
+npx playwright test --ui
+
+# View test report
+npx playwright show-report
+```
+
+
+The tests automatically start a development server using `trunk serve` before running.
diff --git a/e2e/index.html b/e2e/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>SVG Test</title>
+  </head>
+  <body></body>
+</html>
diff --git a/e2e/src/app.rs b/e2e/src/app.rs
@@ -0,0 +1,15 @@
+use yew::prelude::*;
+
+#[function_component]
+pub fn App() -> Html {
+    html! {
+    <svg>
+        <defs>
+            <filter id="glow">
+                <feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="red"/>
+            </filter>
+        </defs>
+        <rect width="100" height="100" filter="url(#glow)" />
+    </svg>
+    }
+}
diff --git a/e2e/src/main.rs b/e2e/src/main.rs
@@ -0,0 +1,7 @@
+mod app;
+
+use app::App;
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "yew-playwright-tests",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Internal package for Playwright E2E testing of Yew",
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.54.2"
+  }
+}
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:8080',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'cd e2e && trunk serve',
+    port: 8080,
+    reuseExistingServer: !process.env.CI,
+  },
+});