feat(tests): improve screenshot diffs

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 table(border=1, width=600, onclick="createTableDiff(this)"):
             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/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 table(border=1, width=600, onclick="createTableDiff(this)"):
             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)