Generate screenshot when "design_change" label is used (#483)

* create add images for files

* rename playwright test

* update imports to fix tests

* update compression

* change path

* add jpg suffix to file

Author: kjaymiller

.github/workflows/generate_screenshots.yml

@@ -0,0 +1,41 @@
+name: Generate and Upload Screenshots
+# https://devblogs.microsoft.com/python/announcing-playwright-for-python-reliable-end-to-end-testing-for-the-web/
+# https://github.com/marketplace/actions/run-playwright-tests
+
+on:
+  pull_request:
+    types: [labeled]
+    branches:
+      - gh-pages
+
+  workflow_dispatch:
+
+jobs:
+  test:
+    if: ${{ github.event.label.name == 'design_change' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.12"
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements-dev.txt
+          python -m playwright install --with-deps chromium
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+          # Run tests
+      - name: Run Tests
+        run: |
+          python -m pytest -m design
+      - name: upload images
+        uses: actions/upload-artifact@v4
+        with:
+          name: page_screenshots
+          path: test_images/
+          compression-level: 9

pytest.ini

@@ -1,3 +1,5 @@
 [pytest]
 python_files = tests/*.py
-addopts = -v
+addopts = -v -m "not design"
+markers =
+  design: get visuals for test paths

tests/test_design.py

@@ -0,0 +1,68 @@
+import pathlib
+
+import pytest
+from playwright.sync_api import Page, sync_playwright
+from xprocess import ProcessStarter
+
+
+@pytest.fixture(scope="module")
+def per_device_page_url(xprocess, loaded_profile, url_port):
+    """Returns the url of the live server"""
+
+    url, port = url_port
+
+    class Starter(ProcessStarter):
+        # Start the process
+        args = [
+            "bundle",
+            "exec",
+            "jekyll",
+            "serve",
+            "--source",
+            pathlib.Path().cwd().absolute(),
+            "--port",
+            port,
+        ]
+        terminate_on_interrupt = True
+        pattern = "Server running... press ctrl-c to stop."
+
+    xprocess.ensure("per_device_page_url", Starter)
+
+    with sync_playwright() as p:
+        device = p.devices[loaded_profile]
+        browser = p.chromium.launch()
+        context = browser.new_context(**device)
+        page = context.new_page()
+
+        # Return the URL of the live server
+        yield page, url
+
+        # Clean up the process
+        xprocess.getinfo("per_device_page_url").terminate()
+
+
+@pytest.fixture(scope="session")
+def create_test_image():
+    image_path = pathlib.Path("./").joinpath("test_images")
+
+    if not image_path.is_dir():
+        image_path.mkdir()
+    return image_path
+
+
+@pytest.mark.design
+def test_route_designs(
+    loaded_route: str,
+    per_device_page_url: tuple[Page, str],
+    create_test_image,
+    request,
+) -> None:
+    """Test that the destinations page loads with seeded data"""
+    # Create a destination
+    page, live_server_url = per_device_page_url
+    response = page.goto(f"{live_server_url}/{loaded_route}")
+    page.screenshot(
+        path=create_test_image.joinpath(request.node.name).with_suffix(".jpg"),
+        full_page=True,
+    )
+    assert response.status == 200