swup
diff --git a/‎.github/workflows/e2e-tests.yml
+33 b/‎.github/workflows/e2e-tests.yml
+33
diff --git a/‎.github/workflows/unit-tests.yml
+4-6 b/‎.github/workflows/unit-tests.yml
+4-6
diff --git a/‎.gitignore
+10 b/‎.gitignore
+10
diff --git a/‎README.md
+4-3 b/‎README.md
+4-3
@@ -0,0 +1,33 @@
+name: E2E tests
+
+on:
+  push:
+    branches: [main, master, next]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  run-tests:
+    name: E2E tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v3
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - run: npm ci
+      - run: npm run build
+      - run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npx playwright test --config ./tests/config/playwright.config.ts
+
+      - uses: daun/playwright-report-summary@v2
+        with:
+          report-file: playwright-results.json
@@ -2,8 +2,9 @@ name: Unit tests
 
 on:
   push:
-    branches: [ main, master, next ]
+    branches: [main, master, next]
   pull_request:
+  workflow_dispatch:
 
 jobs:
   run-tests:
@@ -20,11 +21,8 @@ jobs:
         with:
           node-version: 18
 
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Bundle library
-        run: npm run build
+      - run: npm ci
+      - run: npm run build
 
       - name: Run tests
         run: npm run test:unit
@@ -6,3 +6,13 @@ Thumbs.db
 dist
 *.tgz
 src/packages
+
+# Testing tools and outputs
+/tests/reports/
+/tests/results/
+/tests/fixtures/dist/
+/playwright/.cache/
+/playwright-report/
+/coverage
+.nyc_output
+report.json
@@ -3,7 +3,8 @@
 <div class="shields">
 
 <!--[![npm version](https://img.shields.io/npm/v/@swup/fragment-plugin.svg)](https://www.npmjs.com/package/@swup/fragment-plugin) -->
-[![Test status](https://img.shields.io/github/actions/workflow/status/swup/fragment-plugin/unit-tests.yml?branch=master&label=unit%20tests)](https://github.com/swup/fragment-plugin/actions/workflows/unit-tests.yml)
+[![Unit Tests](https://img.shields.io/github/actions/workflow/status/swup/fragment-plugin/unit-tests.yml?branch=master&label=vitest)](https://github.com/swup/fragment-plugin/actions/workflows/unit-tests.yml)
+[![E2E Tests](https://img.shields.io/github/actions/workflow/status/swup/fragment-plugin/e2e-tests.yml?branch=master&label=playwright)](https://github.com/swup/fragment-plugin/actions/workflows/e2e-tests.yml)
 [![License](https://img.shields.io/github/license/swup/fragment-plugin.svg)](https://github.com/swup/fragment-plugin/blob/master/LICENSE)
 
 </div>
@@ -92,7 +93,7 @@ container.
 ```html
 <body>
   <header>Website</header>
-  <main id="swup" class="transition-main">
+  <main id="swup" class="transition-main" class="transition-main">
     <h1>Users</h1>
     <!-- A list of filters for the users: selecting one will update the list below -->
     <ul>
@@ -370,7 +371,7 @@ If all elements of a visit are `<template>` elements, the `out`/`in`-animation w
 Suppose you have an overlay that you want to present like a modal, above all other content:
 
 ```html
-<div id="swup" class="transition-main">
+<div id="swup" class="transition-main" class="transition-main">
   <!-- This should be placed above everything else, like a modal -->
   <main id="user" class="modal">
     <h1>User 1</h1>