Add pixel threshold to UI tests

Author: ChristianZaccaria

.github/workflows/ui_notebooks_test.yaml

@@ -86,7 +86,8 @@ jobs:
           jq -r 'del(.cells[] | select(.source[] | contains("Create authentication object for user permissions")))' 3_widget_example.ipynb > 3_widget_example.ipynb.tmp && mv 3_widget_example.ipynb.tmp 3_widget_example.ipynb
           jq -r 'del(.cells[] | select(.source[] | contains("auth.logout()")))' 3_widget_example.ipynb > 3_widget_example.ipynb.tmp && mv 3_widget_example.ipynb.tmp 3_widget_example.ipynb
           # Set explicit namespace as SDK need it (currently) to resolve local queues
-          sed -i "s|head_memory_limits=2,|head_memory_limits=2, namespace='default',|" 3_widget_example.ipynb
+          kubectl create namespace "ui-test-namespace"
+          sed -i "s|head_memory_limits=2,|head_memory_limits=2, namespace='ui-test-namespace',|" 3_widget_example.ipynb
           sed -i "s|view_clusters()|view_clusters('default')|" 3_widget_example.ipynb
         working-directory: demo-notebooks/guided-demos
 

ui-tests/tests/widget_notebook_example.test.ts

@@ -30,7 +30,7 @@ test.describe("Visual Regression", () => {
     tmpPath,
   }) => {
     const notebook = "3_widget_example.ipynb";
-    const namespace = 'default';
+    const namespace = 'ui-test-namespace';
     await page.notebook.openByPath(`${tmpPath}/${notebook}`);
     await page.notebook.activate(notebook);
 
@@ -60,14 +60,14 @@ test.describe("Visual Regression", () => {
       const image = `widgets-cell-${i}.png`;
 
       if (captures[i]) {
-        expect.soft(captures[i]).toMatchSnapshot(image); // Compare pre-existing capture
+        expect.soft(captures[i]).toMatchSnapshot(image, { threshold: 0.7}); // Compare pre-existing capture
         continue;
       }
     }
 
     // At this point, all cells have been ran, and their screenshots have been captured.
     // We now interact with the widgets in the notebook.
-    const upDownWidgetCellIndex = 3; // 4 on OpenShift
+    const upDownWidgetCellIndex = 4; // 4 on OpenShift
 
     await waitForWidget(page, upDownWidgetCellIndex, 'input[type="checkbox"]');
     await waitForWidget(page, upDownWidgetCellIndex, 'button:has-text("Cluster Down")');
@@ -122,7 +122,7 @@ test.describe("Visual Regression", () => {
       expect(successMessage).not.toBeNull();
     });
 
-    const viewClustersCellIndex = 4; // 5 on OpenShift
+    const viewClustersCellIndex = 5; // 5 on OpenShift
     await page.notebook.runCell(cellCount - 2, true);
 
     // Wait until the RayCluster status in the table updates to "Ready"