Kitware · psavery · Sep 22, 2025
diff --git a/.github/workflows/test_and_release.yml b/.github/workflows/test_and_release.yml
@@ -56,20 +56,6 @@ jobs:
       with:
         python-version: ${{ matrix.python-version }}
 
-    - name: Install Chrome
-      run: |
-        sudo apt install google-chrome-stable
-
-    - name: Check the console scripts interface
-      run: |
-        pip install seleniumbase
-        seleniumbase
-        sbase
-
-    - name: Install chromedriver
-      run: |
-        seleniumbase install chromedriver
-
     - name: Set Up Node
       uses: actions/setup-node@v4
       with:
@@ -91,11 +77,13 @@ jobs:
       run: |
         pip install .
         pip install -r tests/requirements.txt
+        # Install playwright requirements
+        playwright install
         # Run the tests with coverage so we get a coverage report too
         pip install coverage
-        # coverage run --source . -m pytest -s .
+        coverage run --source . -m pytest -s .
         # Print the coverage report
-        # coverage report -m
+        coverage report -m
 
     - name: Upload Coverage to Codecov
       uses: codecov/codecov-action@v3

diff --git a/examples/vue3/js_call.py b/examples/vue3/js_call.py
@@ -1,5 +1,5 @@
 from trame.app import get_server
-from trame_client.widgets import client, html
+from trame.widgets import client, html
 from trame_client.ui.html import DivLayout
 from trame_client.utils.testing import enable_testing
 

diff --git a/tests/conftest.py b/tests/conftest.py
@@ -6,11 +6,9 @@
 HELPER = FixtureHelper(ROOT_PATH)
 
 
-@pytest.fixture()
-def baseline_image():
-    HELPER.remove_page_urls()
-    yield
-    HELPER.remove_page_urls()
+@pytest.fixture
+def ref_dir() -> Path:
+    return Path(__file__).parent / "refs"
 
 
 @pytest.fixture

diff --git a/tests/refs/simple_count_1.html b/tests/refs/simple_count_1.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html><html lang="en" data-app-name="trame" data-launcher-retry="[]"><head>
+    <base href=".">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
+    <meta name="description" content="Application built with trame, a product from Kitware">
+    <meta name="keywords" content="trame, OpenSource, Stateful Python Application, Kitware">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <link rel="icon" href="logo.png">
+    <title>trame is built by Kitware</title>
+    <script src="vue.global.js"></script>
+    <script type="module" crossorigin="" src="./assets/index-5f6ebc8d.js"></script>
+    <link rel="stylesheet" href="./assets/index-e80c1ba5.css">
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but trame built by Kitware doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"><style>
+      .text-no-select {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .trame__loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: calc(50% - 50px);
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #ac262c;
+
+        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #258e44;
+
+        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:after {
+        content: "";
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #1c4678;
+
+        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__message {
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        top: calc(50% + 50px);
+        font-size: 200%;
+        user-select: none;
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+</style>
+<div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
+  <div class="trame__loader"></div>
+  <div class="trame__message">Loading...</div>
+</div>
+</div>
+    <script>
+      fetch("./loading.tpl")
+        .then((r) => r.text())
+        .then((c) => (document.querySelector("#app").innerHTML = c));
+    </script>
+
+
+
+</body></html>
diff --git a/tests/refs/simple_count_5.html b/tests/refs/simple_count_5.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html><html lang="en" data-app-name="trame" data-launcher-retry="[]"><head>
+    <base href=".">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
+    <meta name="description" content="Application built with trame, a product from Kitware">
+    <meta name="keywords" content="trame, OpenSource, Stateful Python Application, Kitware">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <link rel="icon" href="logo.png">
+    <title>Trame</title>
+    <script src="vue.global.js"></script>
+    <script type="module" crossorigin="" src="./assets/index-5f6ebc8d.js"></script>
+    <link rel="stylesheet" href="./assets/index-e80c1ba5.css">
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but trame built by Kitware doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app" data-v-app=""><div><div class="countValue" style="padding: 20px; background: red;">5</div><button class="plusButton">Add to count</button></div></div>
+    <script>
+      fetch("./loading.tpl")
+        .then((r) => r.text())
+        .then((c) => (document.querySelector("#app").innerHTML = c));
+    </script>
+
+
+
+</body></html>
diff --git a/tests/refs/test_dynamic_template_final.html b/tests/refs/test_dynamic_template_final.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html><html lang="" data-app-name="trame"><head><base href="."><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name="description" content="Application built with trame, a product from Kitware"><meta name="keywords" content="trame, OpenSource, Stateful Python Application, Kitware"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="icon" href="logo.png"><script src="vue.global.js"></script><title>Trame</title><script defer="defer" src="js/chunk-vendors.c3c88821.js"></script><script defer="defer" src="js/app.c98d1f1d.js"></script><link href="css/app.0b077e70.css" rel="stylesheet"></head><body style="margin: 0; padding: 0;"><noscript><strong>We're sorry but trame built by Kitware doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div><div class="staticDiv">
+Static text 6
+</div> <div class="countDiv">
+count = 6
+</div> <div class="ttsDiv">
+tts = 2
+</div> <button class="updateBtn">
+Update template
+</button> <button class="plusBtn">
+count++
+</button></div><script>fetch("./loading.tpl").then((r) => r.text()).then((c) => document.querySelector("#app").innerHTML = c)</script></body></html>
diff --git a/tests/refs/test_dynamic_template_initial.html b/tests/refs/test_dynamic_template_initial.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html><html lang="" data-app-name="trame"><head><base href="."><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name="description" content="Application built with trame, a product from Kitware"><meta name="keywords" content="trame, OpenSource, Stateful Python Application, Kitware"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="icon" href="logo.png"><script src="vue.global.js"></script><title>trame is built by Kitware</title><script defer="defer" src="js/chunk-vendors.c3c88821.js"></script><script defer="defer" src="js/app.c98d1f1d.js"></script><link href="css/app.0b077e70.css" rel="stylesheet"></head><body style="margin: 0; padding: 0;"><noscript><strong>We're sorry but trame built by Kitware doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><style>
+      .text-no-select {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .trame__loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: calc(50% - 50px);
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #ac262c;
+
+        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #258e44;
+
+        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:after {
+        content: "";
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #1c4678;
+
+        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__message {
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        top: calc(50% + 50px);
+        font-size: 200%;
+        user-select: none;
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+</style>
+<div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
+  <div class="trame__loader"></div>
+  <div class="trame__message">Loading...</div>
+</div>
+</div><script>fetch("./loading.tpl").then((r) => r.text()).then((c) => document.querySelector("#app").innerHTML = c)</script></body></html>
diff --git a/tests/requirements.txt b/tests/requirements.txt
@@ -1,8 +1,8 @@
 pytest
 pytest-asyncio
-seleniumbase
+pytest-playwright
 pixelmatch
 Pillow
 pytest-xprocess
 trame>=3.6
-trame-server>=3
+trame-server>=3
diff --git a/tests/test_reactivity.py b/tests/test_reactivity.py
@@ -1,23 +1,32 @@
+from playwright.sync_api import expect
 import pytest
-from seleniumbase import SB
+
+from trame_client.utils.testing import assert_html_matches
 
 
 @pytest.mark.parametrize("server_path", ["examples/test/reactivity.py"])
-def test_reactivity(server, baseline_image):
-    with SB() as sb:
-        url = f"http://127.0.0.1:{server.port}/"
-        sb.open(url)
-        sb.check_window(name="simple_count_1", level=3)
-        sb.assert_exact_text("1", ".countValue")
-        assert server.get("count") == 1
-        sb.click(".plusButton")
-        sb.assert_exact_text("2", ".countValue")
-        assert server.get("count") == 2
-        sb.click(".plusButton")
-        sb.click(".plusButton")
-        sb.assert_exact_text("4", ".countValue")
-        assert server.get("count") == 4
-        sb.click(".plusButton")
-        sb.assert_exact_text("5", ".countValue")
-        assert server.get("count") == 5
-        sb.check_window(name="simple_count_5", level=3)
+def test_reactivity(server, page, ref_dir):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    ref_path = ref_dir / "simple_count_1.html"
+    assert_html_matches(page.content(), ref_path)
+
+    plus_button = page.locator(".plusButton")
+    count_value = page.locator(".countValue")
+
+    expect(count_value).to_have_text("1")
+    assert server.get("count") == 1
+    plus_button.click()
+    expect(count_value).to_have_text("2")
+    assert server.get("count") == 2
+    plus_button.click()
+    plus_button.click()
+    expect(count_value).to_have_text("4")
+    assert server.get("count") == 4
+    plus_button.click()
+    expect(count_value).to_have_text("5")
+    assert server.get("count") == 5
+
+    ref_path = ref_dir / "simple_count_5.html"
+    assert_html_matches(page.content(), ref_path)