feat:Tool configuration for visual regression testing.

.github/workflows/nodejs.yml

@@ -26,6 +26,7 @@ env:
     GITLAB_FEATURE_FLAG_URL: ${{ secrets.GITLAB_FEATURE_FLAG_URL }}
     GITLAB_FEATURE_FLAG_INSTANCE_ID: ${{ secrets.GITLAB_FEATURE_FLAG_INSTANCE_ID }}
     MONGOMS_VERSION: 6.0.17
+    PERCY_ENABLED: false
 jobs:
     test-docker:
         runs-on: ubuntu-latest

config.test.ci.yaml

@@ -26,6 +26,8 @@ services:
         # url: {env(ORY_SDK_URL)}
         # access_token: {env(ORY_ACCESS_TOKEN)}
         # schema_id: {env(ALETHEIA_SCHEMA_ID)}
+      env:
+        PERCY_ENABLED: false
       feature_flag:
         url: {env(GITLAB_FEATURE_FLAG_URL)}
         appName: Staging

config/percy.yml

@@ -0,0 +1,24 @@
+version: 2
+percy:
+  useSystemProxy: false
+  skipBaseBuild: false
+snapshot:
+  widths:
+    - 375
+    - 1280
+  minHeight: 1024
+  percyCSS: ""
+  enableJavaScript: false
+  cliEnableJavaScript: true
+  disableShadowDOM: false
+  responsiveSnapshotCapture: false
+discovery:
+  allowedHostnames: []
+  disallowedHostnames: []
+  networkIdleTimeout: 100
+  captureMockedServiceWorker: false
+  retry: false
+upload:
+  files: "**/*.{png,jpg,jpeg}"
+  ignore: ""
+  stripExtensions: false

cypress.config.ts

@@ -22,4 +22,10 @@ export default defineConfig({
             bundler: "webpack",
         },
     },
+    env: {
+        ENVIRONMENT: process.env.CYPRESS_BASE_URL?.includes("test.")
+            ? "test"
+            : "production",
+        PERCY_ENABLED: process.env.CI ? false : true, // Percy only runs locally, never on CI/CD
+    },
 });

cypress/e2e/tests/header.cy.ts

@@ -29,7 +29,7 @@ describe("Test the header menus", () => {
             cy.url().should("contains", "source");
         });
 
-        it("Open side bar and click source", () => {
+        it("Open side bar and click verification request", () => {
             cy.get(locators.menu.SIDE_MENU).click();
             cy.get("[data-cy=testVerificationRequestItem]").click();
             cy.url().should("contains", "verification-request");

cypress/e2e/tests/percy/homeRegression.cy.ts

@@ -0,0 +1,115 @@
+/// <reference types="cypress" />
+/// <reference types="@percy/cypress" />
+
+import locators from "../../../support/locators";
+import user from "../../../fixtures/user";
+
+const baseUrlProduction = Cypress.env("BASE_URL_PRODUCTION"); // Production
+
+const baseUrlEnvironment = Cypress.env("BASE_URL_TEST_ENVIRONMENT"); // Test
+
+const login = (username: string, password: any): void => {
+    cy.get(locators.login.BTN_LOGIN).should("be.visible");
+    cy.get(locators.login.USER).should("be.empty").type(username);
+    cy.get(locators.login.PASSWORD).type(password);
+    cy.get(locators.login.BTN_LOGIN).click();
+};
+
+describe("Test regression Home Page", () => {
+    it("Verifies the home page the url test and snapshots", () => {
+        const environment = "Test"; // identificy the environment
+        const baseUrl = baseUrlEnvironment;
+
+        if (cy.isPercyEnabled()) {
+            cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
+            cy.log(
+                `O ambiente detectado pelo Cypress é: ${Cypress.env(
+                    "ENVIRONMENT"
+                )}`
+            );
+
+            cy.visit(`${baseUrl}`);
+            cy.title().should("contain", "AletheiaFact.org");
+            cy.url().should("contains", "login");
+            cy.percySnapshot(`${environment} - Login Page`, {
+                widths: [768, 1024, 1280],
+            });
+
+            cy.get('[id="rcc-confirm-button"]').should("be.visible");
+            cy.get('[id="rcc-confirm-button"]').click();
+            cy.percySnapshot(
+                `${environment} - Login Page without Cookie Consent`,
+                { widths: [768, 1024, 1280] }
+            );
+
+            login("knascimento+qatest@aletheiafact.org", user.password);
+
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).should("be.visible");
+            cy.percySnapshot(`${environment} - Home page with modal tutorial`, {
+                widths: [768, 1024, 1280],
+            });
+
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).click();
+            cy.percySnapshot(
+                `${environment} - Home page with Donation Banner`,
+                { widths: [768, 1024, 1280] }
+            );
+
+            cy.get('[data-testid="CloseOutlinedIcon"]')
+                .should("be.visible")
+                .click();
+            cy.percySnapshot(
+                `${environment} - Home page without Donation Banner`,
+                { widths: [768, 1024, 1280] }
+            );
+        }
+    });
+    it("Verifies the home page the url production and snapshots", () => {
+        const environment = "Production"; // identificy simple for environment
+        const baseUrl = baseUrlProduction;
+
+        if (cy.isPercyEnabled()) {
+            cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
+            cy.log(
+                `O ambiente detectado pelo Cypress é: ${Cypress.env(
+                    "ENVIRONMENT"
+                )}`
+            );
+
+            cy.visit(`${baseUrl}/login`);
+            cy.title().should("contain", "AletheiaFact.org");
+            cy.url().should("contain", "login");
+            cy.percySnapshot(`${environment} - Login page`, {
+                widths: [768, 1024, 1280],
+            });
+
+            cy.get('[id="rcc-confirm-button"]').should("be.visible");
+            cy.get('[id="rcc-confirm-button"]').click();
+            cy.percySnapshot(
+                `${environment} - Login page without Cookie Consent`,
+                { widths: [768, 1024, 1280] }
+            );
+
+            login("keikonichimoto@aletheiafact.org", user.password);
+
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).should("be.visible");
+            cy.percySnapshot(`${environment} - Home page with modal tutorial`, {
+                widths: [768, 1024, 1280],
+            });
+
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).click();
+            cy.percySnapshot(
+                `${environment} - Home page with Donation Banner`,
+                { widths: [768, 1024, 1280] }
+            );
+
+            cy.get('[data-testid="CloseOutlinedIcon"]')
+                .should("be.visible")
+                .click();
+            cy.percySnapshot(
+                `${environment} - Home page without Donation Banner`,
+                { widths: [768, 1024, 1280] }
+            );
+        }
+    });
+});

cypress/e2e/tests/percy/personalityPage.cy.ts

@@ -0,0 +1,69 @@
+/// <reference types="cypress" />
+/// <reference types="@percy/cypress" />
+
+import locators from "../../../support/locators";
+import user from "../../../fixtures/user";
+
+const login = (username: string, password: any): void => {
+    cy.get(locators.login.BTN_LOGIN).should("be.visible");
+    cy.get(locators.login.USER).should("be.empty").type(username);
+    cy.get(locators.login.PASSWORD).type(password);
+    cy.get(locators.login.BTN_LOGIN).click();
+};
+
+describe("Snapshot personality page", () => {
+    // ATTENTION: Make sure to run the tests on the branch that corresponds to the URL of the environment being tested.
+    // This ensures that snapshots are captured correctly and reflect the expected state of the application.
+    // Example: Use the 'stage' branch for testing in the staging environment and 'main' for production.
+
+    it("Environment personality page", () => {
+        const environment = "Test";
+
+        if (cy.isPercyEnabled()) {
+            cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
+
+            cy.visit("https://test.aletheiafact.org");
+            cy.title().should("contain", "AletheiaFact.org");
+            cy.url().should("contains", "login");
+
+            login("knascimento+qatest@aletheiafact.org", user.password);
+            cy.title().should("contain", "AletheiaFact.org");
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`)
+                .should("be.visible")
+                .click();
+
+            cy.get(locators.personality.BTN_SEE_MORE_PERSONALITY)
+                .should("be.visible")
+                .click();
+            cy.url().should("contains", "personality");
+            cy.percySnapshot(`${environment} - Personality page`, {
+                widths: [768, 1024, 1028],
+            });
+        }
+    });
+
+    it("Production personality page", () => {
+        const environment = "Production";
+
+        if (cy.isPercyEnabled()) {
+            cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
+
+            cy.visit("https://aletheiafact.org/login");
+            cy.title().should("contain", "AletheiaFact.org");
+
+            login("keikonichimoto@aletheiafact.org", user.password);
+            cy.title().should("contain", "AletheiaFact.org");
+            cy.get(`${locators.claim.BTN_OK_TUTORIAL}`)
+                .should("be.visible")
+                .click();
+
+            cy.get(locators.personality.BTN_SEE_MORE_PERSONALITY)
+                .should("be.visible")
+                .click();
+            cy.url().should("contains", "personality");
+            cy.percySnapshot(`${environment} - Personality page`, {
+                widths: [768, 1024, 1028],
+            });
+        }
+    });
+});

cypress/support/commands.ts

@@ -30,11 +30,15 @@ Cypress.Commands.add("checkRecaptcha", () => {
     getIframeBody().find("#recaptcha-anchor").click();
 });
 
+Cypress.Commands.add("isPercyEnabled", () => {
+    return cy.wrap(Cypress.env("PERCY_ENABLED") === "true");
+});
 declare global {
     namespace Cypress {
         interface Chainable {
             login(): Chainable<Element>;
             checkRecaptcha(): Chainable<Element>;
+            isPercyEnabled(): Chainable<boolean>;
         }
     }
 }

cypress/support/e2e.ts

@@ -1,4 +1,5 @@
 import "./commands";
+import "@percy/cypress";
 
 // eslint-disable-next-line no-undef
 Cypress.SelectorPlayground.defaults({

cypress/tsconfig.json

@@ -4,5 +4,6 @@
       "lib": ["es5", "dom"],
       "types": ["cypress"]
     },
-    "include": ["**/*.ts"]
+    "include": ["**/*.ts"],
+    "types": ["cypress", "@percy/cypress"]
   }

package.json

@@ -40,7 +40,8 @@
         "test:e2e:cy": "env-cmd --silent concurrently -p \"[{name}]\" -n \"MongoDB,Ory,Server\" \"yarn test:e2e:mongo-server\" \"yarn ory-kratos:cy\" \"wait-on tcp:127.0.0.1:35025 tcp:127.0.0.1:4433 tcp:127.0.0.1:4434 && yarn test:e2e:app-server\"",
         "test:e2e:mongo-server": "node dist/server/mongodb.server.js",
         "test:e2e:app-server": "yarn seed:ci && yarn start -c config.test.ci.yaml",
-        "create-novu-subscribers": "env-cmd ts-node scripts/createNovuSubscribers.ts"
+        "create-novu-subscribers": "env-cmd ts-node scripts/createNovuSubscribers.ts",
+        "test-percy-enabled": "PERCY_ENABLED=true yarn percy exec -- yarn cypress run --spec \"cypress/e2e/tests/percy\""
     },
     "nodemonConfig": {
         "ignore": [
@@ -188,6 +189,8 @@
         "@nestjs/testing": "^9.3.12",
         "@next/eslint-plugin-next": "^12.0.10",
         "@ory/cli": "^0.1.24",
+        "@percy/cli": "^1.30.7",
+        "@percy/cypress": "^3.1.4",
         "@shelf/jest-mongodb": "^2.2.0",
         "@storybook/addon-actions": "^7.4.5",
         "@storybook/addon-essentials": "^7.4.5",