Merge pull request #46 from Kitware/playwright-tests

ci(playwright): use playwright for tests instead of selenium

Author: psavery

.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

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
 

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

tests/refs/simple_count_1.yml

@@ -0,0 +1,3 @@
+- document:
+  - text: "1"
+  - button "Add to count"

tests/refs/simple_count_5.yml

@@ -0,0 +1,3 @@
+- document:
+  - text: "5"
+  - button "Add to count"

tests/refs/test_dynamic_template_final.yml

@@ -0,0 +1,4 @@
+- document:
+  - text: Static text 6 count = 6 tts = 2
+  - button "Update template"
+  - button "count++"

tests/refs/test_dynamic_template_initial.yml

@@ -0,0 +1,4 @@
+- document:
+  - text: Static text 2 count = 2 tts = 0
+  - button "Update template"
+  - button "count++"

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

tests/test_reactivity.py

@@ -1,23 +1,30 @@
+from playwright.sync_api import expect
 import pytest
-from seleniumbase import SB
+
+from trame_client.utils.testing import assert_snapshot_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)
+
+    assert_snapshot_matches(page, ref_dir, "simple_count_1")
+
+    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
+
+    assert_snapshot_matches(page, ref_dir, "simple_count_5")

tests/test_vue23.py

@@ -1,53 +1,55 @@
 import pytest
-from seleniumbase import SB
-from trame_client.utils.testing import wait_for_ready
+
+from playwright.sync_api import expect
+from trame_client.utils.testing import assert_snapshot_matches
 
 
 @pytest.mark.parametrize(
     "server_path",
     ["examples/vue2/dynamic_template.py"],
 )
-def test_dynamic_template(server, baseline_image):
-    with SB() as sb:
-        url = f"http://127.0.0.1:{server.port}/"
-        sb.open(url)
-        wait_for_ready(sb, 60)
-        sb.check_window(name="init", level=3)
-        sb.assert_exact_text("Static text 2", ".staticDiv")
-        sb.assert_exact_text("count = 2", ".countDiv")
-        sb.assert_exact_text("tts = 0", ".ttsDiv")
-        assert server.get("count") == 2
-        sb.click(".plusBtn")
-        sb.click(".plusBtn")
-        sb.assert_exact_text("Static text 2", ".staticDiv")
-        assert server.get("count") == 4
-        sb.assert_exact_text("count = 4", ".countDiv")
-        sb.assert_exact_text("tts = 0", ".ttsDiv")
-        sb.click(".updateBtn")
-        sb.click(".updateBtn")
-        sb.assert_exact_text("Static text 6", ".staticDiv")
-        assert server.get("count") == 6
-        sb.assert_exact_text("count = 6", ".countDiv")
-        sb.assert_exact_text("tts = 2", ".ttsDiv")
-        sb.check_window(name="final", level=3)
+def test_dynamic_template(server, page, ref_dir):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    assert_snapshot_matches(page, ref_dir, "test_dynamic_template_initial")
+
+    expect(page.locator(".staticDiv")).to_have_text("Static text 2")
+    expect(page.locator(".countDiv")).to_have_text("count = 2")
+    expect(page.locator(".ttsDiv")).to_have_text("tts = 0")
+    assert server.get("count") == 2
+
+    page.locator(".plusBtn").click()
+    page.locator(".plusBtn").click()
+    expect(page.locator(".staticDiv")).to_have_text("Static text 2")
+    assert server.get("count") == 4
+    expect(page.locator(".countDiv")).to_have_text("count = 4")
+    expect(page.locator(".ttsDiv")).to_have_text("tts = 0")
+    page.locator(".updateBtn").click()
+    page.locator(".updateBtn").click()
+    expect(page.locator(".staticDiv")).to_have_text("Static text 6")
+    assert server.get("count") == 6
+    expect(page.locator(".countDiv")).to_have_text("count = 6")
+    expect(page.locator(".ttsDiv")).to_have_text("tts = 2")
+
+    assert_snapshot_matches(page, ref_dir, "test_dynamic_template_final")
 
 
 @pytest.mark.parametrize(
     "server_path",
     ["examples/vue2/js_call.py", "examples/vue3/js_call.py"],
 )
-def test_js_call(server, baseline_image):
-    with SB() as sb:
-        url = f"http://127.0.0.1:{server.port}/"
-        sb.open(url)
-        wait_for_ready(sb, 60)
-        sb.assert_exact_text("Alert", ".jsAlert")
-        assert server.get("message") == "hello world"
-        sb.click(".alertMsg")
-        sb.assert_exact_text("hello world", ".jsAlert")
-        sb.click(".alertMe")
-        sb.assert_exact_text("Yes me", ".jsAlert")
-        sb.click(".swapMsg")
-        assert server.get("message") == "dlrow olleh"
-        sb.click(".alertMsg")
-        sb.assert_exact_text("dlrow olleh", ".jsAlert")
+def test_js_call(server, page):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    expect(page.locator(".jsAlert")).to_have_text("Alert")
+    assert server.get("message") == "hello world"
+    page.locator(".alertMsg").click()
+    expect(page.locator(".jsAlert")).to_have_text("hello world")
+    page.locator(".alertMe").click()
+    expect(page.locator(".jsAlert")).to_have_text("Yes me")
+    page.locator(".swapMsg").click()
+    assert server.get("message") == "dlrow olleh"
+    page.locator(".alertMsg").click()
+    expect(page.locator(".jsAlert")).to_have_text("dlrow olleh")