diff --git a/tests/ui_tests/reporting/common.py b/tests/ui_tests/reporting/common.py index 50e0e0bfeb..fb5218b4a2 100644 --- a/tests/ui_tests/reporting/common.py +++ b/tests/ui_tests/reporting/common.py @@ -3,7 +3,7 @@ from typing import Any import dominate import dominate.tags as t -from dominate.tags import a, h1, hr, i, p, table, td, th, tr +from dominate.tags import a, h1, hr, i, p, script, table, td, th, tr from ..common import ( UI_TESTS_DIR, @@ -179,17 +179,23 @@ def _differing_screens_report( model = "" doc = document(title="Master differing screens", model=model) + with doc.head: + script( + type="text/javascript", src="https://cdn.jsdelivr.net/npm/pixelmatch@5.3.0" + ) with doc: with table(border=1, width=600): with tr(): th("Expected") th("Actual") + th("Diff") th("Testcase (link)") for (master, current), testcase in unique_differing_screens.items(): with tr(bgcolor="red"): html.image_column(master, base_dir) html.image_column(current, base_dir) + html.diff_column() with td(): with a(href=f"diff/{testcase}.html"): i(testcase) diff --git a/tests/ui_tests/reporting/html.py b/tests/ui_tests/reporting/html.py index 1c933b671d..f2ed4b4e1a 100644 --- a/tests/ui_tests/reporting/html.py +++ b/tests/ui_tests/reporting/html.py @@ -59,7 +59,7 @@ def image_column(hash: str | None, cur_dir: Path, img_id: str | None = None) -> def diff_column() -> None: """Put diff image into table as one cell.""" with td(bgcolor="white"): - a("Click to show") + a("N/A") def _relative_path(cur_dir: Path, path_to: Path) -> str: @@ -88,6 +88,7 @@ def image_link( src=_relative_path(cur_dir, path), title=title, loading="lazy", + onload="imageLoaded(this)", ) diff --git a/tests/ui_tests/reporting/testreport.js b/tests/ui_tests/reporting/testreport.js index 7dbdbd3197..6c108a4de0 100644 --- a/tests/ui_tests/reporting/testreport.js +++ b/tests/ui_tests/reporting/testreport.js @@ -183,12 +183,9 @@ function getImageData(image) { } -function createTableDiff(table) { - // Process all rows in the table\ - // (if the row doesn't contain two images, it's skipped) - table.querySelectorAll("tr").forEach((row) => { - createRowDiff(row); - }); +function imageLoaded(img) { + let row = img.closest("tr"); + createRowDiff(row); } function createRowDiff(row) { diff --git a/tests/ui_tests/reporting/testreport.py b/tests/ui_tests/reporting/testreport.py index 969589d1c2..20ce5d9640 100644 --- a/tests/ui_tests/reporting/testreport.py +++ b/tests/ui_tests/reporting/testreport.py @@ -246,11 +246,16 @@ def differing_screens() -> None: model = recent_ui_failures[0].test.model if recent_ui_failures else None doc = document(title="Differing screens", model=model) + with doc.head: + script( + type="text/javascript", src="https://cdn.jsdelivr.net/npm/pixelmatch@5.3.0" + ) with doc: with table(border=1, width=600): with tr(): th("Expected") th("Actual") + th("Diff") th("Testcase (link)") for ui_failure in recent_ui_failures: @@ -260,6 +265,7 @@ def differing_screens() -> None: with tr(bgcolor="red"): html.image_column(recorded, TESTREPORT_PATH) html.image_column(actual, TESTREPORT_PATH) + html.diff_column() with td(): with a(href=f"failed/{ui_failure.test.id}.html"): i(ui_failure.test.id) @@ -374,7 +380,7 @@ def failed(result: TestResult) -> Path: strong("WARNING:") text(" failed to download recorded fixtures. Is this a new test case?") - with table(border=1, width=600, onclick="createTableDiff(this)"): + with table(border=1, width=600): with tr(): th("Expected") th("Actual")