test: ensure that connected before making screenshot

Author: davidyuk

Diff for: .github/workflows/test.yml

@@ -3,24 +3,21 @@ on: [pull_request]
 jobs:
   main:
     runs-on: ubuntu-latest
-    env:
-      CYPRESS_PLUGIN_VISUAL_REGRESSION_UPDATE_IMAGES: ${{ contains(github.event.head_commit.message, ' [update screenshots]') }}
     steps:
       - uses: actions/checkout@v3
         with:
           ref: ${{ github.head_ref }}
       - uses: actions/setup-node@v3
         with:
-          # TODO: update to 18 after updating cypress
-          node-version: 16.x
+          node-version: 18.x
       - uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
       - run: npm ci --legacy-peer-deps # TODO: remove --legacy-peer-deps after updating dependencies
       - run: npm test
       - uses: stefanzweifel/git-auto-commit-action@v4
-        if: ${{ env.CYPRESS_PLUGIN_VISUAL_REGRESSION_UPDATE_IMAGES == true }}
+        if: failure()
         with:
           commit_message: "chore: update e2e screenshots"
           file_pattern: 'tests/e2e/*.png'

Diff for: tests/e2e/specs/settings/__image_snapshots__/Security courses walks through #0.png

@@ -77,3 +77,11 @@ Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => originalF
 ));
 
 Cypress.Commands.add('getState', () => JSON.parse(localStorage.vuex));
+
+Cypress.Commands.overwrite('matchImage', (originalFn, ...args) => {
+  cy.get('body').then(($body) => {
+    if ($body.find('.connection-status.connecting').length === 0) return;
+    cy.get('.connection-status.test-net').should('be.visible');
+  });
+  originalFn(...args);
+});