test new artifacts and notifications failure logic

.github/actions/failed-artifacts-and-slack-notifications/actions.yml

@@ -0,0 +1,29 @@
+name: "Create artifacts and slack notifications"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Copy failed screenshots
+      shell: bash
+      run: |
+        mkdir /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/
+        cp *.png failed_screenshots
+
+    - name: Archive production artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: Failed screenshots
+        path: |
+          /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/*.png
+
+    - name: Send custom JSON data to Slack
+      id: slack
+      uses: slackapi/[email protected]
+      with:
+        payload: |
+          {
+            "text": "${{ env.TESTS_NAME }} build result: ${{ job.status }}\nBranch: ${{ github.head_ref }}\n${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+          }
+      env:
+        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/test-e2e-component-library-vizro-core.yml

@@ -37,29 +37,8 @@ jobs:
       - name: Run e2e component library tests
         run: hatch run test-e2e-component-library
 
-      - name: Copy failed screenshots
+      - name: Create artifacts and slack notifications
         if: failure()
-        run: |
-          mkdir /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/
-          cp *.png failed_screenshots
-
-      - name: Archive production artifacts
-        uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: Failed screenshots
-          path: |
-            /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/*.png
-
-      - name: Send custom JSON data to Slack
-        id: slack
-        uses: slackapi/[email protected]
-        if: failure()
-        with:
-          payload: |
-            {
-              "text": "Vizro component tests build result: ${{ job.status }}\nBranch: ${{ github.head_ref }}\n${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
-            }
+        uses: ./.github/actions/failed-artifacts-and-slack-notifications
         env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+          TESTS_NAME: Vizro e2e component library tests

vizro-core/tests/tests_utils/e2e_asserts.py

@@ -8,30 +8,40 @@
 
 def _compare_images(expected_image, result_image):
     """Comparison process."""
+    # Subtract two images
     difference = cv2.subtract(expected_image, result_image)
+    # Splitting image into separate channels
     blue, green, red = cv2.split(difference)
+    # Counting non-zero pixels and comparing it to zero
     assert_that(cv2.countNonZero(blue), equal_to(0), reason="Blue channel is different")
     assert_that(cv2.countNonZero(green), equal_to(0), reason="Green channel is different")
     assert_that(cv2.countNonZero(red), equal_to(0), reason="Red channel is different")
 
 
 def _create_image_difference(expected_image, result_image):
     """Creates new image with diff of images comparison."""
-    diff = expected_image.copy()
-    cv2.absdiff(expected_image, result_image, diff)
+    # Calculate the difference between the two images
+    diff = cv2.absdiff(expected_image, result_image)
+    # Convert image to grayscale
     gray = cv2.cvtColor(diff, cv2.COLOR_BGR2GRAY)
     for i in range(0, 3):
+        # Dilation of the image
         dilated = cv2.dilate(gray.copy(), None, iterations=i + 1)
+    # Apply threshold to the dilated image
     (t_var, thresh) = cv2.threshold(dilated, 3, 255, cv2.THRESH_BINARY)
+    # Calculate difference contours for the image
     cnts = cv2.findContours(thresh, cv2.RETR_LIST, cv2.CHAIN_APPROX_SIMPLE)
     cnts = imutils.grab_contours(cnts)
     for contour in cnts:
+        # Calculate bounding rectangles around detected contour
         (x, y, width, height) = cv2.boundingRect(contour)
-        cv2.rectangle(result_image, (x, y), (x + width, y + height), (0, 255, 0), 2)
+        # Draw red rectangle around difference area
+        cv2.rectangle(result_image, (x, y), (x + width, y + height), (0, 0, 255), 2)
     return result_image
 
 
 def make_screenshot_and_paths(browserdriver, request_node_name):
+    """Creates image paths and makes screenshot during the test run."""
     result_image_path = f"{request_node_name}_branch.png"
     expected_image_path = f"tests/e2e/screenshots/{request_node_name.replace('test', 'main')}.png"
     browserdriver.save_screenshot(result_image_path)
@@ -45,10 +55,13 @@ def assert_image_equal(result_image_path, expected_image_path):
     result_image = cv2.imread(result_image_path)
     try:
         _compare_images(expected_image, result_image)
+        # Deleting created branch image to leave only failed for github artifacts
         Path(result_image_path).unlink()
     except AssertionError as exc:
+        # Copy created branch image to the one with the name from main for easier replacement in the repo
         shutil.copy(result_image_path, expected_image_name)
         diff = _create_image_difference(expected_image=expected_image, result_image=result_image)
+        # Writing image with differences to a new file
         cv2.imwrite(f"{result_image_path}_difference_from_main.png", diff)
         raise AssertionError("pictures are not the same") from exc
     except cv2.error as exc: