Skip to content

Commit f807b6f

Browse files
divine-watersdivine-waters
committed
updating config
1 parent 3ff7927 commit f807b6f

11 files changed

+359
-110
lines changed

‎.vscode/mocha.tree.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"id": "root",
3+
"title": "root",
4+
"file": null,
5+
"state": "idle",
6+
"tests": null,
7+
"suites": null
8+
}

‎applitools.config.js

+12-32
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,16 @@
1-
// This config file specifies how to run visual tests with Applitools.
2-
// It applies to all tests in this project.
3-
41
module.exports = {
5-
6-
// Concurrency refers to the number of visual checkpoints Applitools will perform in parallel.
7-
// Warning: If you have a free account, then concurrency will be limited to 1.
82
testConcurrency: 5,
9-
10-
// To connect visual test results to your account,
11-
// you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key.
12-
// To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html
13-
// If you don't explicitly set the API key here,
14-
// then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it.
15-
apiKey: 'APPLITOOLS_API_KEY',
16-
17-
// A batch is the collection of visual checkpoints for a test suite.
18-
// Batches are displayed in the Eyes Test Manager, so use meaningful names.
19-
batchName: 'Example: Cypress in JavaScript with the Ultrafast Grid',
20-
21-
// Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid.
22-
// This setting defines 5 unique browser configurations to test.
3+
apiKey: 'q5K100101MEwl2OzhaH5vIzhqXv14KjUtCNosY101HVEDgRHQ1100',
234
browser: [
24-
25-
// Add 3 desktop browsers with different viewports for cross-browser testing in the Ultrafast Grid.
26-
// Other browsers are also available, like Edge and IE.
27-
{width: 800, height: 600, name: 'chrome'},
28-
{width: 1600, height: 1200, name: 'firefox'},
29-
{width: 1024, height: 768, name: 'safari'},
30-
31-
// Add 2 mobile emulation devices with different orientations for cross-browser testing in the Ultrafast Grid.
32-
// Other mobile devices are available, including iOS.
33-
{deviceName: 'Pixel 2', screenOrientation: 'portrait'},
34-
{deviceName: 'Nexus 10', screenOrientation: 'landscape'},
35-
]
5+
// Desktop
6+
{ width: 1440, height: 900, name: 'chrome' },
7+
{ width: 1440, height: 900, name: 'safari' },
8+
// Mobile
9+
{ deviceName: 'iPhone X', screenOrientation: 'portrait' },
10+
{ deviceName: 'Pixel 2', screenOrientation: 'portrait' },
11+
{ deviceName: 'Galaxy S5', screenOrientation: 'portrait' },
12+
{ deviceName: 'Nexus 10', screenOrientation: 'portrait' },
13+
{ deviceName: 'iPad Pro', screenOrientation: 'landscape' },
14+
],
15+
batchName: 'IlluccixHCP Cross-ENV Testing'
3616
}

‎config/matrix.conf.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use strict'
2+
const { getOS } = require("../matrix/util")
3+
const common = {
4+
"node-version": "18",
5+
"work_dir": "sdks/js/eyes-cypress/v10",
6+
"framework_package": "cypress",
7+
"test_runner": "js",
8+
"eyes_package": "@applitools/eyes-cypress",
9+
test_command: "npm test"
10+
}
11+
const latest_variations = [{
12+
"os": "windows-latest",
13+
"version": "latest@",
14+
},
15+
{
16+
"os": "macos-latest",
17+
"version": "latest@",
18+
},
19+
20+
]
21+
22+
const base_common = latest_variations
23+
.map(variant => ({...common, ...variant, }))
24+
.concat(old_variations.map(variant => ({
25+
...common,
26+
...variant,
27+
work_dir: "../"
28+
})))
29+
const variations = base_common.map(variant => ({
30+
...variant,
31+
job_name: `JS Cypress [${getOS(variant)} | ${variant["node-version"]}] version: ${variant.version}`
32+
}))
33+
console.log(variations)
34+
module.exports = {
35+
"include": variations
36+
}

‎cypress.config.js

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
const { defineConfig } = require('cypress')
22

3-
module.exports = defineConfig({
4-
fixturesFolder: false,
5-
video: false,
6-
7-
e2e: {
8-
// We've imported your old cypress plugins here.
9-
// You may want to clean this up later by importing these.
10-
setupNodeEvents(on, config) {
3+
export default defineConfig({
4+
fixturesFolder: false,
5+
video: false,
6+
e2e: {
7+
chromeWebSecurity: false,
8+
baseUrl: 'https://illuccixhcp.com/',
9+
requestTimeout: 3000,
10+
experimentalInteractiveRunEvents: true,
11+
experimentalSourceRewriting: true,
12+
screenshotOnRunFailure: true,
13+
screenshotsFolder: "cypress/result/screenshots/temp",
14+
videosFolder: "cypress/result/videos",
15+
defaultCommandTimeout: 3000,
16+
waitForAnimations: true,
17+
// We've imported your old cypress plugins here.
18+
// You may want to clean this up later by importing these.
19+
setupNodeEvents(on, config) {},
1120
},
12-
},
1321
})
1422

15-
require('@applitools/eyes-cypress')(module)
23+
require('@applitools/eyes-cypress')(module)

‎cypress/e2e/2nd-try.cy.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/// <reference types="cypress" />
2+
/// <reference types="@applitools/eyes-cypress" />
3+
4+
const viewportWidth = 375;
5+
const viewportHeight = 812;
6+
7+
// --------------------------------------------------------------------------------
8+
// Test Cases
9+
// --------------------------------------------------------------------------------
10+
11+
describe('A visual test with Applitools', () => {
12+
13+
it('should log into the demo app', () => {
14+
15+
cy.eyesOpen({
16+
appName: 'IlluccixHCP',
17+
testName: '',
18+
})
19+
20+
loadPage()\ dismissModal()
21+
removeElements()
22+
verifyPage()
23+
24+
})
25+
26+
afterEach(() => {
27+
cy.eyesClose()
28+
})
29+
})
30+
31+
32+
// --------------------------------------------------------------------------------
33+
// Test Step Functions
34+
// --------------------------------------------------------------------------------
35+
36+
function loadPage() {
37+
const pages = [
38+
"/",
39+
"/safety",
40+
"/preparation",
41+
"/receive-updates",
42+
"/access-reimbursement",
43+
"/accessibility",
44+
"/efficacy",
45+
"/subscribe"
46+
]
47+
pages.forEach((page) => {
48+
let staging = 'https://development:[email protected]' ? ? 'original'
49+
let live = 'https://illuccixhcp.com'
50+
cy.visit(staging + page)
51+
cy.viewport(viewportWidth, viewportHeight);
52+
53+
},
54+
55+
function verifyPage() {
56+
cy.eyesCheckWindow({
57+
tag: page,
58+
target: 'window',
59+
fully: true
60+
});
61+
}
62+
63+
function dismissModal() {
64+
cy.contains("I am a").click({ force: true });
65+
}
66+
67+
function removeElements() {
68+
cy.get("#indications-tray").invoke('remove');
69+
cy.get(".icon-tabler-x").click({ force: true });
70+
}
71+
72+
function verifyMainPage() {
73+
cy.eyesCheckWindow({
74+
tag: "Main page",
75+
target: 'window',
76+
fully: true,
77+
matchLevel: 'Layout'
78+
});
79+
}

‎cypress/e2e/acme-bank.cy.js

+41-53
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,55 @@
11
/// <reference types="cypress" />
22

3-
// This test case spec contains everything needed to run a full visual test against the ACME bank site.
4-
// The file `applitools.config.js` specifies how to run this test against multiple browsers in Applitools Ultrafast Grid.
3+
const viewportWidth = 375;
4+
const viewportHeight = 812;
5+
const urls = [
6+
"https://illuccixhcp.com/",
7+
"https://illuccixhcp.com/safety/",
8+
"https://illuccixhcp.com/preparation/",
9+
"https://illuccixhcp.com/receive-updates/",
10+
"https://illuccixhcp.com/access-reimbursement/",
11+
"https://illuccixhcp.com/accessibility/",
12+
"https://illuccixhcp.com/efficacy/",
13+
"https://illuccixhcp.com/subscribe"
14+
15+
]
16+
17+
Cypress.on("uncaught:exception", (err, runnable) => {
18+
return false;
19+
});
520

6-
// This "describe" method contains related test cases with per-test setup and cleanup.
7-
// In this example, there is only one test.
821
describe('ACME Bank', () => {
9-
1022
// This method performs setup before each test.
1123
beforeEach(() => {
12-
13-
// Open Eyes to start visual testing.
14-
// Each test should open its own Eyes for its own snapshots.
1524
cy.eyesOpen({
16-
17-
// The name of the application under test.
18-
// All tests for the same app should share the same app name.
19-
// Set this name wisely: Applitools features rely on a shared app name across tests.
2025
appName: 'ACME Bank',
21-
22-
// The name of the test case for the given application.
23-
// Additional unique characteristics of the test may also be specified as part of the test name,
24-
// such as localization information ("Home Page - EN") or different user permissions ("Login by admin").
2526
testName: Cypress.currentTest.title,
26-
})
27-
})
28-
29-
// This test covers login for the Applitools demo site, which is a dummy banking app.
30-
// The interactions use typical Cypress calls,
31-
// but the verifications use one-line snapshot calls with Applitools Eyes.
32-
// If the page ever changes, then Applitools will detect the changes and highlight them in the Eyes Test Manager.
33-
// Traditional assertions that scrape the page for text values are not needed here.
34-
it('should log into a bank account', () => {
35-
36-
// Load the login page.
37-
cy.visit('https://demo.applitools.com')
38-
39-
// Verify the full login page loaded correctly.
40-
cy.eyesCheckWindow({
41-
tag: "Login page",
42-
target: 'window',
43-
fully: true
27+
browser: { width: viewportWidth, height: viewportHeight, name: chrome },
28+
baselineEnvName: 'desktop'
4429
});
45-
46-
// Perform login.
47-
cy.get('#username').type('andy')
48-
cy.get('#password').type('i<3pandas')
49-
cy.get('#log-in').click()
50-
51-
// Verify the full main page loaded correctly.
52-
// This snapshot uses LAYOUT match level to avoid differences in closing time text.
53-
cy.eyesCheckWindow({
54-
tag: "Main page",
55-
target: 'window',
56-
fully: true,
57-
matchLevel: 'Layout'
30+
});
31+
32+
urls.forEach((url) => {
33+
it(`should capture snapshots for comparison between envs on ${url}`, () => {
34+
cy.visit(url);
35+
cy.contains("I am a").click({ force: true });
36+
cy.get("#indications-tray").invoke('remove');
37+
// cy.get(".icon-tabler-x").click({ force: true });
38+
cy.viewport(viewportWidth, viewportHeight);
39+
40+
// Extract the path from the URL
41+
const urlPath = new URL(url).pathname;
42+
43+
// Capture a visual snapshot using Applitools with the path as the tag
44+
cy.eyesCheckWindow({
45+
tag: urlPath, // Using the path as a tag for the snapshot
46+
fully: true, // Capture the full page
47+
});
5848
});
59-
})
49+
});
6050

6151
// This method performs cleanup after each test.
6252
afterEach(() => {
63-
64-
// Close Eyes to tell the server it should display the results.
65-
cy.eyesClose()
66-
})
67-
})
53+
cy.eyesClose();
54+
});
55+
});

‎cypress/e2e/desktop.cy.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/// <reference types="cypress" />
2+
/// <reference types="@applitools/eyes-cypress" />
3+
4+
const viewportWidth = 1440;
5+
const viewportHeight = 900;
6+
const urls = [
7+
"https://illuccixhcp.com/",
8+
"https://illuccixhcp.com/safety/",
9+
"https://illuccixhcp.com/preparation/",
10+
"https://illuccixhcp.com/receive-updates/",
11+
"https://illuccixhcp.com/access-reimbursement/",
12+
"https://illuccixhcp.com/accessibility/",
13+
"https://illuccixhcp.com/efficacy/",
14+
"https://illuccixhcp.com/subscribe"
15+
16+
]
17+
18+
Cypress.on("uncaught:exception", (err, runnable) => {
19+
return false;
20+
});
21+
22+
describe('ACME Bank', () => {
23+
// This method performs setup before each test.
24+
beforeEach(() => {
25+
cy.eyesOpen({
26+
appName: 'Staging vs Live',
27+
testName: Cypress.currentTest.title,
28+
testConcurrency: 2,
29+
browser: { width: viewportWidth, height: viewportHeight, name: chrome },
30+
baselineEnvName: 'desktop',
31+
saveNewTests: true,
32+
waitBeforeCapture: 1000
33+
});
34+
});
35+
36+
// This method performs cleanup after each test.
37+
afterEach(() => {
38+
cy.eyesClose();
39+
});
40+
});
41+
42+
urls.forEach((url) => {
43+
it(`should capture snapshots for comparison between envs on ${url}`, () => {
44+
cy.visit(url);
45+
cy.viewport(viewportWidth, viewportHeight);
46+
cy.contains("I am a").click({ force: true });
47+
cy.get("#indications-tray").invoke('remove');
48+
// cy.get(".icon-tabler-x").click({ force: true });
49+
50+
// Extract the path from the URL
51+
const urlPath = new URL(url).pathname;
52+
53+
// Capture a visual snapshot using Applitools with the path as the tag
54+
cy.eyesCheckWindow({
55+
tag: 'desktop' + urlPath, // Using the path as a tag for the snapshot
56+
target: 'window',
57+
hideScrollbar: true,
58+
fully: true, // Capture the full page
59+
waitBeforeCapture: 1000,
60+
matchLevel: 'Strict',
61+
lazyLoad: {},
62+
polyfillAdoptedStyleSheets: true,
63+
useDom: true,
64+
stitchMode: CSS,
65+
sendDom: true
66+
67+
});
68+
});
69+
});

0 commit comments

Comments
 (0)