working visual tests - percy 1st attempt (#3400)

* working visual tests - percy 1st attempt

---------

Co-authored-by: Karolina Rakoczy <rakoczy.karolina@gmail.com>

cypress.config.js

@@ -21,10 +21,16 @@ module.exports = defineConfig({
   e2e: {
     env: {
       grepFilterSpecs: true,
+      demoTests: false,
     },
     setupNodeEvents(on, config) {
+      config.specPattern = process.env.CYPRESS_demoTests
+        ? "cypress/e2e/percy/**/*.{js,jsx,ts,tsx}"
+        : "cypress/e2e/**/*.{js,jsx,ts,tsx}";
+
       config = require("./cypress/support/cypress-grep/plugin")(config);
       config = require("./cypress/plugins/index.js")(on, config);
+
       on("after:spec", (spec, results) => {
         if (results && results.video) {
           return fs.unlink(results.video, function (err) {
@@ -38,7 +44,5 @@ module.exports = defineConfig({
       });
       return config;
     },
-    baseUrl: "http://localhost:4137/",
-    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
   },
 });

cypress/e2e/percy/demo.js

@@ -0,0 +1,30 @@
+/// <reference types="cypress"/>
+/// <reference types="../../support"/>
+
+import { BUTTON_SELECTORS, HOMEPAGE_SELECTORS } from "../../elements";
+import { urlList } from "../../fixtures/urlList";
+
+describe("Demo staging", () => {
+  it("should visual check login demo page", () => {
+    //   { tags: ["@login", "@allEnv", "@stable", "@oldRelease"] },
+    cy.visit(urlList.dashboard);
+    cy.get(BUTTON_SELECTORS.submit).should("be.visible");
+    cy.percySnapshot("Demo login page");
+  });
+  it("should log in via UI and visual check home demo page", () => {
+    //   { tags: ["@login", "@allEnv", "@stable", "@oldRelease"] },
+    cy.loginUserViaRequest();
+    cy.fixture("bodyMocks/demo/home").then(bodyMockHomePage => {
+      cy.addAliasToGraphRequestAndUseMockedResponseBody(
+        "Home",
+        bodyMockHomePage,
+      );
+      cy.visit(urlList.dashboard)
+        .get(HOMEPAGE_SELECTORS.activity)
+        .should("be.visible");
+      cy.get(HOMEPAGE_SELECTORS.topProducts).should("be.visible");
+      cy.waitForRequestAndCheckIfNoErrors("@Home");
+      cy.percySnapshot("Demo home page");
+    });
+  });
+});

cypress/elements/index.js

@@ -19,6 +19,7 @@ import {
   CUSTOMERS_LIST_SELECTORS,
 } from "./customer/";
 import { SALES_SELECTORS, VOUCHERS_SELECTORS } from "./discounts";
+import { HOMEPAGE_SELECTORS } from "./homePage/homePage-selectors";
 import { PAGINATION } from "./navigation";
 import { DRAFT_ORDERS_LIST_SELECTORS, ORDERS_SELECTORS } from "./orders";
 import { PAGE_DETAILS_SELECTORS, PAGES_LIST_SELECTORS } from "./pages/";
@@ -35,7 +36,7 @@ import {
   PRODUCT_TYPE_DETAILS_SELECTORS,
   PRODUCT_TYPES_LIST_SELECTORS,
 } from "./productTypes";
-import { ADDRESS_SELECTORS, SHARED_ELEMENTS } from "./shared";
+import { ADDRESS_SELECTORS, BUTTON_SELECTORS, SHARED_ELEMENTS } from "./shared";
 import { SHIPPING_ZONES_LIST_SELECTORS } from "./shipping";
 import {
   INVITE_STAFF_MEMBER_FORM_SELECTORS,
@@ -49,6 +50,7 @@ export {
   APPS_LIST_SELECTORS,
   ATTRIBUTES_DETAILS,
   ATTRIBUTES_LIST,
+  BUTTON_SELECTORS,
   CATEGORIES_LIST_SELECTORS,
   CATEGORY_DETAILS_SELECTORS,
   CHANNELS_SELECTORS,
@@ -57,6 +59,7 @@ export {
   CUSTOMER_DETAILS_SELECTORS,
   CUSTOMERS_LIST_SELECTORS,
   DRAFT_ORDERS_LIST_SELECTORS,
+  HOMEPAGE_SELECTORS,
   INVITE_STAFF_MEMBER_FORM_SELECTORS,
   LANGUAGES_LIST_SELECTORS,
   LOGIN_SELECTORS,

cypress/elements/shared/index.js

@@ -1,4 +1,5 @@
 import { ADDRESS_SELECTORS } from "./addressForm";
+import { BUTTON_SELECTORS } from "./button-selectors";
 import { SHARED_ELEMENTS } from "./sharedElements";
 
-export { SHARED_ELEMENTS, ADDRESS_SELECTORS };
+export { ADDRESS_SELECTORS, BUTTON_SELECTORS, SHARED_ELEMENTS };

cypress/fixtures/bodyMocks/demo/home.json

@@ -0,0 +1,223 @@
+{
+  "data": {
+    "salesToday": {
+      "gross": {
+        "amount": 190.0,
+        "currency": "PLN",
+        "__typename": "Money"
+      },
+      "__typename": "TaxedMoney"
+    },
+    "ordersToday": {
+      "totalCount": 310,
+      "__typename": "OrderCountableConnection"
+    },
+    "ordersToFulfill": {
+      "totalCount": 2,
+      "__typename": "OrderCountableConnection"
+    },
+    "ordersToCapture": {
+      "totalCount": 2,
+      "__typename": "OrderCountableConnection"
+    },
+    "productsOutOfStock": {
+      "totalCount": 0,
+      "__typename": "ProductCountableConnection"
+    },
+    "productTopToday": {
+      "edges": [],
+      "__typename": "ProductVariantCountableConnection"
+    },
+    "activities": {
+      "edges": [
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T21:52:58.137000+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5NzI=",
+            "message": null,
+            "orderNumber": "11591",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:02:28.234257+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5NzU=",
+            "message": null,
+            "orderNumber": "11592",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:03:10.694111+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5Nzg=",
+            "message": null,
+            "orderNumber": "11593",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:04:26.617028+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5ODE=",
+            "message": null,
+            "orderNumber": "11594",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:06:50.657651+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5ODQ=",
+            "message": null,
+            "orderNumber": "11595",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:07:26.956180+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5ODc=",
+            "message": null,
+            "orderNumber": "11596",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:08:41.140369+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5OTA=",
+            "message": null,
+            "orderNumber": "11597",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:14:18.581224+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5OTM=",
+            "message": null,
+            "orderNumber": "11598",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:16:33.599899+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5OTY=",
+            "message": null,
+            "orderNumber": "11599",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        },
+        {
+          "node": {
+            "amount": null,
+            "composedId": null,
+            "date": "2023-03-22T22:17:37.483381+00:00",
+            "email": null,
+            "emailType": null,
+            "id": "T3JkZXJFdmVudDo5OTk=",
+            "message": null,
+            "orderNumber": "11600",
+            "oversoldItems": null,
+            "quantity": null,
+            "type": "PLACED",
+            "user": null,
+            "__typename": "OrderEvent"
+          },
+          "__typename": "OrderEventCountableEdge"
+        }
+      ],
+      "__typename": "OrderEventCountableConnection"
+    }
+  },
+  "extensions": {
+    "cost": {
+      "requestedQueryCost": 20,
+      "maximumAvailable": 50000
+    }
+  }
+}

cypress/fixtures/bodyMocks/index.js

@@ -0,0 +1,3 @@
+import { bodyMockHomePage } from "./demo/home";
+
+export { bodyMockHomePage };

cypress/fixtures/index.js

@@ -0,0 +1,3 @@
+import { bodyMockHomePage } from "./bodyMocks";
+
+export { bodyMockHomePage };

cypress/fixtures/urlList.js

@@ -1,5 +1,6 @@
 export const urlList = {
   apiUri: Cypress.env("API_URI"),
+  dashboard: "dashboard/",
   addProduct: "products/add",
   apps: "custom-apps/",
   attributes: "attributes/",

cypress/plugins/index.js

@@ -37,6 +37,7 @@ module.exports = async (on, config) => {
     process.env.CYPRESS_PERMISSIONS_USERS_PASSWORD;
   config.env.mailHogUrl = process.env.CYPRESS_mailHogUrl;
   config.env.grepTags = process.env.CYPRESS_grepTags;
+  config.baseUrl = baseUrl(process.env.CYPRESS_demoTests);
 
   on("before:browser:launch", (_browser = {}, launchOptions) => {
     launchOptions.args.push("--proxy-bypass-list=<-loopback>");
@@ -46,6 +47,9 @@ module.exports = async (on, config) => {
   return config;
 };
 
+const baseUrl = isDemoTesting =>
+  isDemoTesting ? process.env.CYPRESS_DEMO_URI : process.env.CYPRESS_baseUrl;
+
 function getShopInfo(envVariables) {
   const createTokenMutation = graphql.gql`mutation tokenCreate($email: String!, $password: String!){
     tokenCreate(email:$email, password:$password){

cypress/support/e2e.js

@@ -14,13 +14,14 @@ import "./customCommands/sharedElementsOperations/selects.js";
 import "./customCommands/sharedElementsOperations/tables";
 import "./customCommands/softAssertions";
 import "./customCommands/user";
+import "@percy/cypress";
 
 import { commandTimings } from "cypress-timings";
 
-import cypressGrep from "../support/cypress-grep/support";
-commandTimings();
-
 import { urlList } from "../fixtures/urlList";
+import cypressGrep from "../support/cypress-grep/support";
+
+commandTimings();
 
 cypressGrep();
 
@@ -47,6 +48,32 @@ Cypress.Commands.add("addAliasToGraphRequest", operationName => {
     }
   });
 });
+Cypress.Commands.add(
+  "addAliasToGraphRequestAndUseMockedResponseBody",
+  (operationName, bodyMock) => {
+    cy.intercept("POST", urlList.apiUri, req => {
+      req.statusCode = 200;
+      const requestBody = req.body;
+      if (Array.isArray(requestBody)) {
+        requestBody.forEach(element => {
+          if (element.operationName === operationName) {
+            req.alias = operationName;
+            req.reply({
+              body: bodyMock,
+            });
+          }
+        });
+      } else {
+        if (requestBody.operationName === operationName) {
+          req.alias = operationName;
+          req.reply({
+            body: bodyMock,
+          });
+        }
+      }
+    });
+  },
+);
 
 Cypress.on(
   "uncaught:exception",

package-lock.json

@@ -113,6 +113,8 @@
         "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10",
         "@graphql-codegen/typescript-operations": "^2.2.4",
         "@graphql-codegen/typescript-react-apollo": "^3.2.5",
+        "@percy/cli": "^1.21.0",
+        "@percy/cypress": "^3.1.2",
         "@pollyjs/adapter-node-http": "~5.0.0",
         "@pollyjs/core": "~5.0.0",
         "@pollyjs/persister-fs": "~5.0.0",
@@ -6236,6 +6238,487 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/@percy/cli": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.21.0.tgz",
+      "integrity": "sha512-capaTXkj/L0Itn8VpDY/ePkHM9InaqwTRTK+IHGTA2HsRlpiNotunDAv8cNJ/fBMoRBh1Bki7tEWIp6zB+KmBQ==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-app": "1.21.0",
+        "@percy/cli-build": "1.21.0",
+        "@percy/cli-command": "1.21.0",
+        "@percy/cli-config": "1.21.0",
+        "@percy/cli-exec": "1.21.0",
+        "@percy/cli-snapshot": "1.21.0",
+        "@percy/cli-upload": "1.21.0",
+        "@percy/client": "1.21.0",
+        "@percy/logger": "1.21.0"
+      },
+      "bin": {
+        "percy": "bin/run.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-app": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.21.0.tgz",
+      "integrity": "sha512-kkYMTGEk33nsLIIKx57LzheK7WZK77Y52c+DAwnV1FDpzDvhpP4eLEpXwarTIapN76O4wZndFlX4zm07U9Cvfw==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0",
+        "@percy/cli-exec": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-build": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.21.0.tgz",
+      "integrity": "sha512-LRvGsTl6bw6zNMOQ36emjdIdkvCEUAbRRp2nryBODMpJ8YUd1NcXw/qLVM2bzpJcTmeBXR76Yjgi1VhFZrNZlg==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-command": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.21.0.tgz",
+      "integrity": "sha512-ZfjDMgUQRQonJT106Y89NVDzVd2qDmwQ+4oC0AyGgE5h1cHAEaPoYV8LnMvpjbvFYni+jbeZvHNANMP7Ut2yOQ==",
+      "dev": true,
+      "dependencies": {
+        "@percy/config": "1.21.0",
+        "@percy/core": "1.21.0",
+        "@percy/logger": "1.21.0"
+      },
+      "bin": {
+        "percy-cli-readme": "bin/readme.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-config": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.21.0.tgz",
+      "integrity": "sha512-7Wn3L/XkKhVWixH4/oPJV66jD6LBCma6pT/bzbKuV5Hlpscel2xz3p8JSDOvxQJl1eSRtjwhI1HP/0OT6EX5dg==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-exec": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.21.0.tgz",
+      "integrity": "sha512-Uwqw1WqXzYXk4WQLyRWkQJ4Tdm7/bUOOa2HJU/J5kGLDmoSRNX/TesobFy8ii55mB0QV2hkZnMkAFPwzfxaCSw==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0",
+        "cross-spawn": "^7.0.3",
+        "which": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-exec/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@percy/cli-exec/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/cli-exec/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/cli-exec/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/cli-exec/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@percy/cli-snapshot": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.21.0.tgz",
+      "integrity": "sha512-DR0yPRCCRFGXrDwfAmC/26yF4CGMTAWNgIKFgeQcPGgjkdXOSmm04fhU36QBU5S66B2gmSjEG0mfh+2oOD68EQ==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-snapshot/node_modules/yaml": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+      "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@percy/cli-upload": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.21.0.tgz",
+      "integrity": "sha512-NDh6NiirUgdnrNergiwtQceA0TjcT5vK6dzuE6pscwksvb9vzx+tvvbBcVBhpEQt+FmIoYDdqb8FVzMqxd5wEg==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.21.0",
+        "fast-glob": "^3.2.11",
+        "image-size": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/client": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.21.0.tgz",
+      "integrity": "sha512-IKFcMYcibWQjisjmS4K9HK7TbjPK4fnVeh/3Uq7Da0ejiu5qBvLn49aNcYfnrguPqaUcgIvLvpcgtHeH+srv/g==",
+      "dev": true,
+      "dependencies": {
+        "@percy/env": "1.21.0",
+        "@percy/logger": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/config": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.21.0.tgz",
+      "integrity": "sha512-s6XFBhjP0fGVg8onapDwebGNIdwMgdidZW5q0HziBiQVqfwh/83NkDlCq+c6/JU5P0Y5DArxCIFDVUfiLkcs4A==",
+      "dev": true,
+      "dependencies": {
+        "@percy/logger": "1.21.0",
+        "ajv": "^8.6.2",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/config/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@percy/config/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@percy/config/node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@percy/config/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@percy/config/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/@percy/config/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@percy/config/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@percy/config/node_modules/yaml": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+      "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@percy/core": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.21.0.tgz",
+      "integrity": "sha512-YFBTiRghq1m9t0/4ZUFWgS8LJ4DYugcMDoZ04yKWsIjRDcALwHAZahYpBZRcHkmfqB/kqLB5IYoyc6rel+PNeA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@percy/client": "1.21.0",
+        "@percy/config": "1.21.0",
+        "@percy/dom": "1.21.0",
+        "@percy/logger": "1.21.0",
+        "content-disposition": "^0.5.4",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "fast-glob": "^3.2.11",
+        "micromatch": "^4.0.4",
+        "mime-types": "^2.1.34",
+        "path-to-regexp": "^6.2.0",
+        "rimraf": "^3.0.2",
+        "ws": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/core/node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@percy/core/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@percy/core/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/core/node_modules/path-to-regexp": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
+      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
+      "dev": true
+    },
+    "node_modules/@percy/core/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/core/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@percy/core/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@percy/core/node_modules/ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@percy/cypress": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@percy/cypress/-/cypress-3.1.2.tgz",
+      "integrity": "sha512-JXrGDZbqwkzQd2h5T5D7PvqoucNaiMh4ChPp8cLQiEtRuLHta9nf1lEuXH+jnatGL2j+3jJFIHJ0L7XrgVnvQA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/sdk-utils": "^1.3.1"
+      },
+      "peerDependencies": {
+        "cypress": ">=3"
+      }
+    },
+    "node_modules/@percy/dom": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.21.0.tgz",
+      "integrity": "sha512-OKpS9EPnUrMx3Mu9L7QiqEtc+yAUz3gbXrbRlrPAljyRAmmBe9p5vy0hKtP8wO1vxjumqmtxNABpz5bc70CJ2Q==",
+      "dev": true
+    },
+    "node_modules/@percy/env": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.21.0.tgz",
+      "integrity": "sha512-rqbACxivUTkpAJnjk/7IosFdh2vdz1SVGV0KXFf2xtEuUb7YhYrYixhf/6xE81o93C+pxrlXYWkgUSaMhZpP5A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/logger": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.21.0.tgz",
+      "integrity": "sha512-qKKSFP25X+a50vpjUSolI8WSQ2YAunS6K4brdTRemgvc48Wlkv3541SP8iMK5BAy3Nn4u0KRiwkstvyRr1tXlA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/sdk-utils": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.21.0.tgz",
+      "integrity": "sha512-ZI6QbIhMZvE3P73ar7aeXcjSk8/czlS7h55QBynoJNorwimq5xed1CGPHu00uQsCO6dXeEKTfxQcqbCypRE6Hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pollyjs/adapter": {
       "version": "5.0.0",
       "dev": true,
@@ -12549,8 +13032,8 @@
     },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": "*"
       }
@@ -17752,8 +18235,8 @@
     },
     "node_modules/extract-zip": {
       "version": "2.0.1",
+      "devOptional": true,
       "license": "BSD-2-Clause",
-      "optional": true,
       "dependencies": {
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
@@ -17880,8 +18363,8 @@
     },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "pend": "~1.2.0"
       }
@@ -19990,6 +20473,21 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/image-size": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz",
+      "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==",
+      "dev": true,
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/immer": {
       "version": "1.10.0",
       "license": "MIT",
@@ -25228,19 +25726,21 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.40.0",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "devOptional": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "2.1.24",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "devOptional": true,
-      "license": "MIT",
       "dependencies": {
-        "mime-db": "1.40.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
         "node": ">= 0.6"
@@ -27337,8 +27837,8 @@
     },
     "node_modules/pend": {
       "version": "1.2.0",
-      "license": "MIT",
+      "devOptional": true,
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/performance-now": {
       "version": "2.1.0",
@@ -28088,6 +28588,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "funding": [
@@ -36403,8 +36912,8 @@
     },
     "node_modules/yauzl": {
       "version": "2.10.0",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"

package.json

@@ -120,6 +120,8 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10",
     "@graphql-codegen/typescript-operations": "^2.2.4",
     "@graphql-codegen/typescript-react-apollo": "^3.2.5",
+    "@percy/cli": "^1.21.0",
+    "@percy/cypress": "^3.1.2",
     "@pollyjs/adapter-node-http": "~5.0.0",
     "@pollyjs/core": "~5.0.0",
     "@pollyjs/persister-fs": "~5.0.0",
@@ -301,6 +303,7 @@
     "cy:run:critical:parallel": "cypress run --record --env grepTags=@critical  --parallel --tag Critical",
     "cy:run:allEnv:parallel": "cypress run --record --env grepTags=@allEnv --parallel",
     "cy:run:stable:parallel": "cypress run --record --env grepTags=@critical  --parallel --tag Stable",
+    "cy:percy": "CYPRESS_demoTests=true percy exec -- npm run cy:run",
     "test": "jest src/",
     "test:watch": "jest --watch src/",
     "lint": "eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix",