feat(tests): improve screenshot diffs

[no changelog]

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)

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)",
     )
 
 

tests/ui_tests/reporting/testreport.js

@@ -183,12 +183,9 @@ function getImageData(image) {
 }
 
 
-function createTableDiff(table) {
+function imageLoaded(img) {
-    // Process all rows in the table\
+    let row = img.closest("tr");
-    // (if the row doesn't contain two images, it's skipped)
+    createRowDiff(row);
-    table.querySelectorAll("tr").forEach((row) => {
-        createRowDiff(row);
-    });
 }
 
 function createRowDiff(row) {

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")