Skip to content

Commit 1729690

Browse files
KeikonichiKeikonichi
committed
Add capture test files for visual validation of Home and Personality
1 parent 7549d5a commit 1729690

File tree

4 files changed

+194
-0
lines changed

4 files changed

+194
-0
lines changed

‎cypress.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,10 @@ export default defineConfig({
2222
bundler: "webpack",
2323
},
2424
},
25+
env: {
26+
ENVIRONMENT: process.env.CYPRESS_BASE_URL?.includes("test.")
27+
? "test"
28+
: "production",
29+
PERCY_ENABLED: process.env.CI ? false : true, // Percy only runs locally, never on CI/CD
30+
},
2531
});

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/// <reference types="cypress" />
2+
/// <reference types="@percy/cypress" />
3+
4+
import locators from "../../../support/locators";
5+
import user from "../../../fixtures/user";
6+
7+
const baseUrlProduction = Cypress.env("BASE_URL_PRODUCTION"); // Production
8+
9+
const baseUrlEnvironment = Cypress.env("BASE_URL_TEST_ENVIRONMENT"); // Test
10+
11+
const login = (username: string, password: any): void => {
12+
cy.get(locators.login.BTN_LOGIN).should("be.visible");
13+
cy.get(locators.login.USER).should("be.empty").type(username);
14+
cy.get(locators.login.PASSWORD).type(password);
15+
cy.get(locators.login.BTN_LOGIN).click();
16+
};
17+
18+
describe("Test regression Home Page", () => {
19+
it("Verifies the home page the url test and snapshots", () => {
20+
const environment = "Test"; // identificy the environment
21+
const baseUrl = baseUrlEnvironment;
22+
23+
if (cy.isPercyEnabled()) {
24+
cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
25+
cy.log(
26+
`O ambiente detectado pelo Cypress é: ${Cypress.env(
27+
"ENVIRONMENT"
28+
)}`
29+
);
30+
31+
cy.visit(`${baseUrl}`);
32+
cy.title().should("contain", "AletheiaFact.org");
33+
cy.url().should("contains", "login");
34+
cy.percySnapshot(`${environment} - Login Page`, {
35+
widths: [768, 1024, 1280],
36+
});
37+
38+
cy.get('[id="rcc-confirm-button"]').should("be.visible");
39+
cy.get('[id="rcc-confirm-button"]').click();
40+
cy.percySnapshot(
41+
`${environment} - Login Page without Cookie Consent`,
42+
{ widths: [768, 1024, 1280] }
43+
);
44+
45+
login("knascimento+qatest@aletheiafact.org", user.password);
46+
47+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).should("be.visible");
48+
cy.percySnapshot(`${environment} - Home page with modal tutorial`, {
49+
widths: [768, 1024, 1280],
50+
});
51+
52+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).click();
53+
cy.percySnapshot(
54+
`${environment} - Home page with Donation Banner`,
55+
{ widths: [768, 1024, 1280] }
56+
);
57+
58+
cy.get('[data-testid="CloseOutlinedIcon"]')
59+
.should("be.visible")
60+
.click();
61+
cy.percySnapshot(
62+
`${environment} - Home page without Donation Banner`,
63+
{ widths: [768, 1024, 1280] }
64+
);
65+
}
66+
});
67+
it("Verifies the home page the url production and snapshots", () => {
68+
const environment = "Production"; // identificy simple for environment
69+
const baseUrl = baseUrlProduction;
70+
71+
if (cy.isPercyEnabled()) {
72+
cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
73+
cy.log(
74+
`O ambiente detectado pelo Cypress é: ${Cypress.env(
75+
"ENVIRONMENT"
76+
)}`
77+
);
78+
79+
cy.visit(`${baseUrl}/login`);
80+
cy.title().should("contain", "AletheiaFact.org");
81+
cy.url().should("contain", "login");
82+
cy.percySnapshot(`${environment} - Login page`, {
83+
widths: [768, 1024, 1280],
84+
});
85+
86+
cy.get('[id="rcc-confirm-button"]').should("be.visible");
87+
cy.get('[id="rcc-confirm-button"]').click();
88+
cy.percySnapshot(
89+
`${environment} - Login page without Cookie Consent`,
90+
{ widths: [768, 1024, 1280] }
91+
);
92+
93+
login("keikonichimoto@aletheiafact.org", user.password);
94+
95+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).should("be.visible");
96+
cy.percySnapshot(`${environment} - Home page with modal tutorial`, {
97+
widths: [768, 1024, 1280],
98+
});
99+
100+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`).click();
101+
cy.percySnapshot(
102+
`${environment} - Home page with Donation Banner`,
103+
{ widths: [768, 1024, 1280] }
104+
);
105+
106+
cy.get('[data-testid="CloseOutlinedIcon"]')
107+
.should("be.visible")
108+
.click();
109+
cy.percySnapshot(
110+
`${environment} - Home page without Donation Banner`,
111+
{ widths: [768, 1024, 1280] }
112+
);
113+
}
114+
});
115+
});

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/// <reference types="cypress" />
2+
/// <reference types="@percy/cypress" />
3+
4+
import locators from "../../../support/locators";
5+
import user from "../../../fixtures/user";
6+
7+
const login = (username: string, password: any): void => {
8+
cy.get(locators.login.BTN_LOGIN).should("be.visible");
9+
cy.get(locators.login.USER).should("be.empty").type(username);
10+
cy.get(locators.login.PASSWORD).type(password);
11+
cy.get(locators.login.BTN_LOGIN).click();
12+
};
13+
14+
describe("Snapshot personality page", () => {
15+
// ATTENTION: Make sure to run the tests on the branch that corresponds to the URL of the environment being tested.
16+
// This ensures that snapshots are captured correctly and reflect the expected state of the application.
17+
// Example: Use the 'stage' branch for testing in the staging environment and 'main' for production.
18+
19+
it("Environment personality page", () => {
20+
const environment = "Test";
21+
22+
if (cy.isPercyEnabled()) {
23+
cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
24+
25+
cy.visit("https://test.aletheiafact.org");
26+
cy.title().should("contain", "AletheiaFact.org");
27+
cy.url().should("contains", "login");
28+
29+
login("knascimento+qatest@aletheiafact.org", user.password);
30+
cy.title().should("contain", "AletheiaFact.org");
31+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`)
32+
.should("be.visible")
33+
.click();
34+
35+
cy.get(locators.personality.BTN_SEE_MORE_PERSONALITY)
36+
.should("be.visible")
37+
.click();
38+
cy.url().should("contains", "personality");
39+
cy.percySnapshot(`${environment} - Personality page`, {
40+
widths: [768, 1024, 1028],
41+
});
42+
}
43+
});
44+
45+
it("Production personality page", () => {
46+
const environment = "Production";
47+
48+
if (cy.isPercyEnabled()) {
49+
cy.log(`Percy está ativado? ${Cypress.env("PERCY_ENABLED")}`);
50+
51+
cy.visit("https://aletheiafact.org/login");
52+
cy.title().should("contain", "AletheiaFact.org");
53+
54+
login("keikonichimoto@aletheiafact.org", user.password);
55+
cy.title().should("contain", "AletheiaFact.org");
56+
cy.get(`${locators.claim.BTN_OK_TUTORIAL}`)
57+
.should("be.visible")
58+
.click();
59+
60+
cy.get(locators.personality.BTN_SEE_MORE_PERSONALITY)
61+
.should("be.visible")
62+
.click();
63+
cy.url().should("contains", "personality");
64+
cy.percySnapshot(`${environment} - Personality page`, {
65+
widths: [768, 1024, 1028],
66+
});
67+
}
68+
});
69+
});

‎cypress/support/commands.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,15 @@ Cypress.Commands.add("checkRecaptcha", () => {
3030
getIframeBody().find("#recaptcha-anchor").click();
3131
});
3232

33+
Cypress.Commands.add("isPercyEnabled", () => {
34+
return cy.wrap(Cypress.env("PERCY_ENABLED") === "true");
35+
});
3336
declare global {
3437
namespace Cypress {
3538
interface Chainable {
3639
login(): Chainable<Element>;
3740
checkRecaptcha(): Chainable<Element>;
41+
isPercyEnabled(): Chainable<boolean>;
3842
}
3943
}
4044
}

0 commit comments

Comments
 (0)