[QA] Fix KPI screenshots in pure Dash app (#975)

vizro-core/tests/e2e/test_component_library.py

@@ -20,6 +20,7 @@
         value_column="Actual",
         title="KPI with aggregation",
         agg_func="median",
+        icon="folder_check_2",
     ),
     kpi_card(
         data_frame=df_kpi,
@@ -82,8 +83,20 @@ def test_kpi_card_component_library(dash_duo, request):
         ]
     )
     dash_duo.start_server(app)
-    dash_duo.wait_for_page(timeout=20)
-    dash_duo.wait_for_element("div[class='card-kpi card']")
+    dash_duo.wait_for_text_to_equal(
+        "div[class='vstack gap-4'] div:nth-of-type(1) div:nth-of-type(2) p[class='material-symbols-outlined']",
+        "folder_check_2",
+    )
+    dash_duo.wait_for_text_to_equal(
+        "div[class='vstack gap-4'] div:nth-of-type(1) div:nth-of-type(2) div[class='card-body']", "200.0"
+    )
+    dash_duo.wait_for_text_to_equal(
+        "div[class='vstack gap-4'] div:nth-of-type(2) div:nth-of-type(4) p[class='material-symbols-outlined']",
+        "shopping_cart",
+    )
+    dash_duo.wait_for_text_to_equal(
+        "div[class='vstack gap-4'] div:nth-of-type(2) div:nth-of-type(4) div[class='card-body']", "1000"
+    )
     result_image_path, expected_image_path = make_screenshot_and_paths(dash_duo.driver, request.node.name)
     assert_image_equal(result_image_path, expected_image_path)
     assert dash_duo.get_logs() == [], "browser console should contain no error"

vizro-core/tests/tests_utils/e2e_asserts.py

@@ -36,8 +36,8 @@ def _create_image_difference(expected_image, result_image):
         # Calculate bounding rectangles around detected contour
         (x, y, width, height) = cv2.boundingRect(contour)
         # Draw red rectangle around difference area
-        cv2.rectangle(result_image, (x, y), (x + width, y + height), (0, 0, 255), 2)
-    return result_image
+        cv2.rectangle(expected_image, (x, y), (x + width, y + height), (0, 0, 255), 2)
+    return expected_image
 
 
 def make_screenshot_and_paths(browserdriver, request_node_name):
@@ -54,7 +54,7 @@ def assert_image_equal(result_image_path, expected_image_path):
     expected_image_name = Path(expected_image_path).name
     result_image = cv2.imread(result_image_path)
     try:
-        _compare_images(expected_image, result_image)
+        _compare_images(expected_image=expected_image, result_image=result_image)
         # Deleting created branch image to leave only failed for github artifacts
         Path(result_image_path).unlink()
     except AssertionError as exc: