Update code and tests

Author: blueswen

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
         run: uv run bandit -r mkdocs_swagger_ui_tag
 
       - name: Run tests
-        run: uv run pytest tests
+        run: uv run pytest tests -m "not e2e"
 
       - name: Build the package
         run: uv build

.github/workflows/scheduled_unittests.yml

@@ -29,4 +29,4 @@ jobs:
         run: uv sync --all-extras --dev
 
       - name: Run tests
-        run: uv run pytest tests
+        run: uv run pytest tests -m "not e2e"

.github/workflows/unittests.yml

@@ -27,4 +27,4 @@ jobs:
         run: uv sync --all-extras --dev --frozen
 
       - name: Run tests
-        run: uv run pytest tests
+        run: uv run pytest tests -m "not e2e"

.github/workflows/unittests_codecov.yml

@@ -37,7 +37,7 @@ jobs:
         run: |
           git config --global user.name "Github Action"
           git config --global user.email "[email protected]"
-          uv run pytest --cov=mkdocs_swagger_ui_tag --cov-report=xml
+          uv run pytest --cov=mkdocs_swagger_ui_tag --cov-report=xml -m "not e2e"
     
       - name: Upload coverage to Codecov
         if: "contains(env.USING_COVERAGE, matrix.python-version)"

.gitignore

@@ -1,5 +1,7 @@
 .DS_Store
 .vscode/
+playwright-results/
+docs/
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

mkdocs_swagger_ui_tag/plugin.py

@@ -268,7 +268,15 @@ def render_template(openapi_spec_url, swagger_ui_ele):
             const dark_scheme_name = "{self.config["dark_scheme_name"]}"
             """
             js_code.string += """
-            window.scheme = document.body.getAttribute("data-md-color-scheme")
+            const schemeAttr = document.body.getAttribute("data-md-color-scheme");
+            const isMediaPrefersScheme = document.body.getAttribute("data-md-color-media") === "(prefers-color-scheme: dark)";
+
+            if (!isMediaPrefersScheme) {
+                window.__init_is_dark_mode = (schemeAttr === dark_scheme_name);
+            } else {
+                const computedScheme = window.getComputedStyle(document.body).getPropertyValue('color-scheme');
+                window.__init_is_dark_mode = computedScheme === "dark";
+            }
             const options = {
                 attributeFilter: ['data-md-color-scheme'],
             };

pytest.ini

@@ -1,2 +1,4 @@
 [pytest]
 log_cli = 1
+markers =
+    e2e: marks end-to-end tests

tests/__init__.py

@@ -158,7 +158,7 @@ def validate_additional_script_code(html_content, exists=True):
 
 def validate_additional_script_code_for_material(html_content, exists=True):
     assert exists == (
-        'window.scheme = document.body.getAttribute("data-md-color-scheme")'
+        'const schemeAttr = document.body.getAttribute("data-md-color-scheme")'
         in html_content
     )
     assert exists == (

tests/test_builds.py

@@ -0,0 +1,61 @@
+import subprocess
+import time
+import os
+import pytest
+from playwright.sync_api import Page, expect
+
+from .test_builds import validate_mkdocs_file
+
+pytestmark = pytest.mark.e2e
+
+MKDOCS_URL = "http://localhost:8000"
+PATHS = ["index.html", "build_in_multiple/index.html", "empty/index.html", "multiple/index.html", "oauth2/index.html", "options/index.html", "url/index.html", "sub_dir/page_in_sub_dir/index.html"]
+
+@pytest.fixture(scope="session", autouse=True)
+def start_mkdocs_server(tmp_path_factory):
+    """ Start a local server to serve the MkDocs site """
+
+    tmp_path = tmp_path_factory.mktemp("mkdocs_test")
+    mkdocs_file = "mkdocs-material.yml"
+    testproject_path = validate_mkdocs_file(tmp_path, f"tests/fixtures/{mkdocs_file}")
+
+    process = subprocess.Popen(["uv", "run", "-m", "http.server", "-d", os.path.join(testproject_path, "site")], stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+    time.sleep(1)  # wait for server to start
+
+    yield
+
+    process.terminate()
+    process.wait()
+
+@pytest.fixture
+def page_context(page: Page):
+    """
+    Create a new page context with a longer timeout
+    """
+    page.set_default_timeout(5000)
+    return page
+
+@pytest.mark.parametrize("path", PATHS)
+def test_no_console_errors(page_context: Page, path):
+    """
+    Validate that there are no console errors
+    """
+    url = f"{MKDOCS_URL}/{path}"
+    errors = []
+    
+    page_context.on("console", lambda msg: errors.append(msg.text) if msg.type == "error" else None)
+    page_context.goto(url)
+
+    assert not errors, f"Got {len(errors)} console errors: {errors}"
+
+@pytest.mark.parametrize("path", PATHS)
+def test_mkdocs_screenshot(page_context: Page, path):
+    """
+    Take a screenshot of the MkDocs
+    """
+    url = f"{MKDOCS_URL}/{path}"
+
+    page_context.goto(url)
+    time.sleep(3)
+    screenshot_path = f"playwright-results/{path.replace('/', '_')}.png"
+    page_context.screenshot(path=screenshot_path, full_page=True)