creating first visual test for login page

cypress/e2e/tests/pages/generic/login.spec.ts

@@ -6,14 +6,19 @@ const successStatusCode = 200;
 
 describe('Local authentication', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
   it('Confirm correct number of settings requests made', () => {
-    cy.intercept('GET', '/v1/management.cattle.io.settings?exclude=metadata.managedFields').as('settingsReq');
+    cy.intercept(
+      'GET',
+      '/v1/management.cattle.io.settings?exclude=metadata.managedFields'
+    ).as('settingsReq');
     const loginPage = new LoginPagePo();
 
     loginPage.goTo();
 
     // First request will fetch a partial list of settings
     cy.wait('@settingsReq').then((interception) => {
-      expect(interception.response.body.count).lessThan(PARTIAL_SETTING_THRESHOLD);
+      expect(interception.response.body.count).lessThan(
+        PARTIAL_SETTING_THRESHOLD
+      );
     });
     cy.get('@settingsReq.all').should('have.length', 1);
 
@@ -27,7 +32,9 @@ describe('Local authentication', { tags: ['@generic', '@adminUser', '@standardUs
 
     // Second request (after user is logged in) will return the full list
     cy.wait('@settingsReq').then((interception) => {
-      expect(interception.response.body.count).greaterThan(PARTIAL_SETTING_THRESHOLD);
+      expect(interception.response.body.count).greaterThan(
+        PARTIAL_SETTING_THRESHOLD
+      );
     });
     // Yes this is bad, but want to ensure no other settings requests are made.
     cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -36,16 +43,31 @@ describe('Local authentication', { tags: ['@generic', '@adminUser', '@standardUs
 
   it('Log in with valid credentials', () => {
     LoginPagePo.goTo();
+
     cy.intercept('POST', '/v3-public/localProviders/local*').as('loginReq');
 
+    const loginPage = new LoginPagePo();
+
+    // take screenshot if locator is visible.
+    loginPage.canSubmit().then((canSubmit) => {
+      if (canSubmit) {
+        // Take a snapshot for visual difference
+        cy.percySnapshot('Login test');
+      }
+    });
+
     cy.login(Cypress.env('username'), Cypress.env('password'), false);
 
     cy.wait('@loginReq').then((login) => {
       if (login.response?.statusCode !== successStatusCode) {
-        cy.log('Login incorrectly failed', login.response?.statusCode, login.response?.statusMessage, JSON.stringify(login.response?.body || {}));
+        cy.log(
+          'Login incorrectly failed',
+          login.response?.statusCode,
+          login.response?.statusMessage,
+          JSON.stringify(login.response?.body || {})
+        );
       }
       expect(login.response?.statusCode).to.equal(successStatusCode);
-
       cy.url().should('not.equal', `${ Cypress.config().baseUrl }/auth/login`);
     });
   });
@@ -59,12 +81,18 @@ describe('Local authentication', { tags: ['@generic', '@adminUser', '@standardUs
 
     cy.wait('@loginReq').then((login) => {
       if (login.response?.statusCode === successStatusCode) {
-        cy.log('Login incorrectly succeeded', login.response?.statusCode, login.response?.statusMessage, JSON.stringify(login.response?.body || {}));
+        cy.log(
+          'Login incorrectly succeeded',
+          login.response?.statusCode,
+          login.response?.statusMessage,
+          JSON.stringify(login.response?.body || {})
+        );
       }
       expect(login.response?.statusCode).to.not.equal(successStatusCode);
 
       // URL is partial as it may change based on the authentication configuration present
       cy.url().should('include', `${ Cypress.config().baseUrl }/auth/login`);
     });
   });
-});
+}
+);

cypress/support/e2e.ts

@@ -5,6 +5,7 @@ import './commands/rancher-api-commands';
 import registerCypressGrep from '@cypress/grep/src/support';
 import { addCustomCommand } from 'cypress-delete-downloads-folder';
 import 'cypress-mochawesome-reporter/register';
+import '@percy/cypress';
 
 registerCypressGrep();
 addCustomCommand();

cypress/tsconfig.json

@@ -18,7 +18,8 @@
     "noEmit": true,
     "types": [
       "cypress",
-      "@cypress/grep"
+      "@cypress/grep",
+       "@percy/cypress"
     ]
   },
   "include": [

package.json

@@ -39,6 +39,7 @@
     "cy:e2e": "cypress open --e2e --browser chrome",
     "cy:open": "cypress open",
     "cy:run": "cypress run --browser chrome",
+    "cy:run:percy": "npx percy exec -- cypress run --browser chrome --spec cypress/e2e/tests/pages/generic/login.spec.ts",
     "cy:run:sorry": "./scripts/e2e $SPEC_FILE",
     "e2e:pre-dev": "yarn docker:local:stop && yarn docker:local:start && NODE_ENV=dev TEST_INSTRUMENT=true yarn build",
     "e2e:dev": "START_SERVER_AND_TEST_INSECURE=1 server-test start:dev https-get://localhost:8005 cy:run:sorry",
@@ -145,6 +146,8 @@
     "@cypress/grep": "3.1.5",
     "@cypress/vue": "5.0.5",
     "@cypress/webpack-dev-server": "3.4.1",
+    "@percy/cli": "^1.30.5",
+    "@percy/cypress": "^3.1.3",
     "@types/copy-webpack-plugin": "5.0.3",
     "@types/dompurify": "3.0.0",
     "@types/is-url": "1.2.30",