@argos-ci/cypress 0.0.7 → 0.0.9-alpha.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/support.d.ts +18 -0
- package/dist/support.mjs +98 -0
- package/package.json +28 -22
- package/support.d.ts +0 -16
- package/support.js +0 -105
package/README.md
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ViewportOption } from "@argos-ci/browser";
|
|
2
|
+
declare global {
|
|
3
|
+
namespace Cypress {
|
|
4
|
+
interface Chainable {
|
|
5
|
+
/**
|
|
6
|
+
* Stabilize the UI and takes a screenshot of the application under test.
|
|
7
|
+
*
|
|
8
|
+
* @see https://on.cypress.io/screenshot
|
|
9
|
+
* @example
|
|
10
|
+
* cy.argosScreenshot("my-screenshot")
|
|
11
|
+
* cy.get(".post").argosScreenshot()
|
|
12
|
+
*/
|
|
13
|
+
argosScreenshot: (name: string, options?: Partial<Loggable & Timeoutable & ScreenshotOptions> & {
|
|
14
|
+
viewports?: ViewportOption[];
|
|
15
|
+
}) => Chainable<null>;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
package/dist/support.mjs
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import 'cypress-wait-until';
|
|
2
|
+
import { resolveViewport } from '@argos-ci/browser';
|
|
3
|
+
import { getScreenshotName, getMetadataPath } from '@argos-ci/util/browser';
|
|
4
|
+
|
|
5
|
+
function injectArgos() {
|
|
6
|
+
var _require;
|
|
7
|
+
const fileName = typeof ((_require = require) === null || _require === void 0 ? void 0 : _require.resolve) === "function" ? require.resolve("@argos-ci/browser/global.js") : "node_modules/@argos-ci/browser/dist/global.js";
|
|
8
|
+
cy.readFile(fileName).then((source)=>cy.window({
|
|
9
|
+
log: false
|
|
10
|
+
}).then((window)=>{
|
|
11
|
+
window.eval(source);
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
14
|
+
function readArgosCypressVersion() {
|
|
15
|
+
const fileName = require.resolve("@argos-ci/cypress/package.json");
|
|
16
|
+
return cy.readFile(fileName).then((source)=>{
|
|
17
|
+
return source.version;
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
Cypress.Commands.add("argosScreenshot", {
|
|
21
|
+
prevSubject: [
|
|
22
|
+
"optional",
|
|
23
|
+
"element",
|
|
24
|
+
"window",
|
|
25
|
+
"document"
|
|
26
|
+
]
|
|
27
|
+
}, (subject, name, { viewports, ...options } = {})=>{
|
|
28
|
+
if (!name) {
|
|
29
|
+
throw new Error("The `name` argument is required.");
|
|
30
|
+
}
|
|
31
|
+
Cypress.log({
|
|
32
|
+
name: "argosScreenshot",
|
|
33
|
+
displayName: `Argos Screenshot`,
|
|
34
|
+
message: name
|
|
35
|
+
});
|
|
36
|
+
injectArgos();
|
|
37
|
+
cy.window({
|
|
38
|
+
log: false
|
|
39
|
+
}).then((window)=>window.__ARGOS__.prepareForScreenshot());
|
|
40
|
+
function stabilizeAndScreenshot(name) {
|
|
41
|
+
cy.waitUntil(()=>cy.window({
|
|
42
|
+
log: false
|
|
43
|
+
}).then((window)=>window.__ARGOS__.waitForStability()));
|
|
44
|
+
let ref = {};
|
|
45
|
+
cy.wrap(subject).screenshot(name, {
|
|
46
|
+
blackout: [
|
|
47
|
+
'[data-visual-test="blackout"]'
|
|
48
|
+
].concat(options.blackout || []),
|
|
49
|
+
onAfterScreenshot: (_$el, props)=>{
|
|
50
|
+
ref.props = props;
|
|
51
|
+
},
|
|
52
|
+
...options
|
|
53
|
+
});
|
|
54
|
+
cy.window({
|
|
55
|
+
log: false
|
|
56
|
+
}).then((window)=>{
|
|
57
|
+
const mediaType = window.__ARGOS__.getMediaType();
|
|
58
|
+
const colorScheme = window.__ARGOS__.getColorScheme();
|
|
59
|
+
readArgosCypressVersion().then((argosCypressVersion)=>{
|
|
60
|
+
const metadata = {
|
|
61
|
+
url: window.location.href,
|
|
62
|
+
viewport: {
|
|
63
|
+
width: window.innerWidth,
|
|
64
|
+
height: window.innerHeight
|
|
65
|
+
},
|
|
66
|
+
colorScheme,
|
|
67
|
+
mediaType,
|
|
68
|
+
browser: {
|
|
69
|
+
name: Cypress.browser.name,
|
|
70
|
+
version: Cypress.browser.version
|
|
71
|
+
},
|
|
72
|
+
automationLibrary: {
|
|
73
|
+
name: "cypress",
|
|
74
|
+
version: Cypress.version
|
|
75
|
+
},
|
|
76
|
+
sdk: {
|
|
77
|
+
name: "@argos-ci/cypress",
|
|
78
|
+
version: argosCypressVersion
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
cy.writeFile(getMetadataPath(ref.props.path), JSON.stringify(metadata));
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
if (!viewports) {
|
|
86
|
+
stabilizeAndScreenshot(name);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
for (const viewport of viewports){
|
|
90
|
+
const viewportSize = resolveViewport(viewport);
|
|
91
|
+
cy.viewport(viewportSize.width, viewportSize.height);
|
|
92
|
+
stabilizeAndScreenshot(getScreenshotName(name, {
|
|
93
|
+
viewportWidth: viewportSize.width
|
|
94
|
+
}));
|
|
95
|
+
}
|
|
96
|
+
// Restore the original viewport
|
|
97
|
+
cy.viewport(Cypress.config("viewportWidth"), Cypress.config("viewportHeight"));
|
|
98
|
+
});
|
package/package.json
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@argos-ci/cypress",
|
|
3
3
|
"description": "Visual testing solution to avoid visual regression. Cypress commands and utilities for Argos visual testing.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.9-alpha.182+8a2e9db",
|
|
5
5
|
"author": "Smooth Code",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"repository":
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/argos-ci/argos-javascript.git",
|
|
10
|
+
"directory": "packages/cypress"
|
|
11
|
+
},
|
|
8
12
|
"keywords": [
|
|
9
13
|
"cypress",
|
|
10
14
|
"argos",
|
|
@@ -21,35 +25,37 @@
|
|
|
21
25
|
"type": "module",
|
|
22
26
|
"exports": {
|
|
23
27
|
"./support": {
|
|
24
|
-
"import": "./support.
|
|
25
|
-
"types": "./support.d.ts",
|
|
26
|
-
"default": "./support.
|
|
28
|
+
"import": "./dist/support.mjs",
|
|
29
|
+
"types": "./dist/support.d.ts",
|
|
30
|
+
"default": "./dist/support.mjs"
|
|
27
31
|
},
|
|
28
32
|
"./package.json": "./package.json"
|
|
29
33
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"test:open": "cypress open --e2e -b chrome",
|
|
33
|
-
"format": "prettier --write .",
|
|
34
|
-
"check-format": "prettier --check .",
|
|
35
|
-
"lint": "eslint --ignore-path .gitignore .",
|
|
36
|
-
"release": "standard-version && conventional-github-releaser --preset angular"
|
|
34
|
+
"engines": {
|
|
35
|
+
"node": ">=16.0.0"
|
|
37
36
|
},
|
|
38
37
|
"dependencies": {
|
|
38
|
+
"@argos-ci/browser": "0.0.1-alpha.182+8a2e9db",
|
|
39
|
+
"@argos-ci/util": "0.0.1-alpha.182+8a2e9db",
|
|
39
40
|
"cypress-wait-until": "^1.7.2"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
|
-
"cypress": "
|
|
43
|
+
"cypress": "^12.0.0 || ^13.0.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
|
-
"@argos-ci/cli": "
|
|
46
|
+
"@argos-ci/cli": "0.6.1-alpha.4+8a2e9db",
|
|
46
47
|
"@argos-ci/cypress": "file:.",
|
|
47
|
-
"
|
|
48
|
-
"cypress": "^
|
|
49
|
-
"eslint": "^
|
|
50
|
-
"eslint-plugin-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"
|
|
54
|
-
|
|
48
|
+
"@types/node": "^16.0.0",
|
|
49
|
+
"cypress": "^13.3.0",
|
|
50
|
+
"eslint-plugin-cypress": "^2.15.1",
|
|
51
|
+
"eslint-plugin-html": "^7.1.0"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"prebuild": "rm -rf dist",
|
|
55
|
+
"build": "rollup -c",
|
|
56
|
+
"test": "pnpm exec cypress run",
|
|
57
|
+
"argos-upload": "pnpm exec argos upload cypress/screenshots --build-name \"argos-cypress-e2e-node-$NODE_VERSION-$OS\"",
|
|
58
|
+
"e2e": "pnpm run test && pnpm run argos-upload"
|
|
59
|
+
},
|
|
60
|
+
"gitHead": "8a2e9db6427071708c3d701a3230f228b1216893"
|
|
55
61
|
}
|
package/support.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
declare namespace Cypress {
|
|
2
|
-
interface Chainable {
|
|
3
|
-
/**
|
|
4
|
-
* Stabilize the UI and takes a screenshot of the application under test.
|
|
5
|
-
*
|
|
6
|
-
* @see https://on.cypress.io/screenshot
|
|
7
|
-
* @example
|
|
8
|
-
* cy.argosScreenshot("my-screenshot")
|
|
9
|
-
* cy.get(".post").argosScreenshot()
|
|
10
|
-
*/
|
|
11
|
-
argosScreenshot: (
|
|
12
|
-
name: string,
|
|
13
|
-
options?: Partial<Loggable & Timeoutable & ScreenshotOptions>
|
|
14
|
-
) => Chainable<null>;
|
|
15
|
-
}
|
|
16
|
-
}
|
package/support.js
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import "cypress-wait-until";
|
|
2
|
-
|
|
3
|
-
const GLOBAL_STYLES = `
|
|
4
|
-
/* Hide carets */
|
|
5
|
-
* { caret-color: transparent !important; }
|
|
6
|
-
|
|
7
|
-
/* Hide scrollbars */
|
|
8
|
-
::-webkit-scrollbar {
|
|
9
|
-
display: none !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* Generic hide */
|
|
13
|
-
[data-visual-test="transparent"] {
|
|
14
|
-
color: transparent !important;
|
|
15
|
-
font-family: monospace !important;
|
|
16
|
-
opacity: 0 !important;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[data-visual-test="removed"] {
|
|
20
|
-
display: none !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
[data-test-no-radius] {
|
|
24
|
-
border-radius: 0 !important;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Injected style to hide elements and fix unstable rendering.
|
|
30
|
-
*/
|
|
31
|
-
function injectStyles(document) {
|
|
32
|
-
const css = document.createElement("style");
|
|
33
|
-
css.type = "text/css";
|
|
34
|
-
css.textContent = GLOBAL_STYLES;
|
|
35
|
-
document.body.appendChild(css);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Check if an element is visible.
|
|
40
|
-
*/
|
|
41
|
-
function isVisible(element) {
|
|
42
|
-
return Boolean(
|
|
43
|
-
element.offsetWidth ||
|
|
44
|
-
element.offsetHeight ||
|
|
45
|
-
element.getClientRects().length
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Wait until there is no `[aria-busy="true"]` element on the page.
|
|
51
|
-
*/
|
|
52
|
-
function waitUntilNoBusy() {
|
|
53
|
-
cy.waitUntil(() =>
|
|
54
|
-
cy.document().then((document) => {
|
|
55
|
-
const busy = Array.from(document.querySelectorAll('[aria-busy="true"]'));
|
|
56
|
-
return busy.every((element) => !isVisible(element));
|
|
57
|
-
})
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
Cypress.Commands.add(
|
|
62
|
-
"argosScreenshot",
|
|
63
|
-
{ prevSubject: ["optional", "element", "window", "document"] },
|
|
64
|
-
(subject, name, options = {}) => {
|
|
65
|
-
if (typeof name === "object" && name !== null) {
|
|
66
|
-
options = name;
|
|
67
|
-
name = null;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
Cypress.log({
|
|
71
|
-
name: "argosScreenshot",
|
|
72
|
-
displayName: `Argos Screenshot`,
|
|
73
|
-
message: name,
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
// Inject styles
|
|
77
|
-
cy.document().then((doc) => injectStyles(doc));
|
|
78
|
-
|
|
79
|
-
// Wait until there is no `[aria-busy="true"]` element on the page.
|
|
80
|
-
waitUntilNoBusy();
|
|
81
|
-
|
|
82
|
-
// Wait for fonts to be loaded
|
|
83
|
-
cy.document().its("fonts.status").should("equal", "loaded");
|
|
84
|
-
|
|
85
|
-
// Wait for images to be loaded
|
|
86
|
-
cy.waitUntil(() =>
|
|
87
|
-
cy.document().then((document) => {
|
|
88
|
-
const allImages = Array.from(document.images);
|
|
89
|
-
allImages.forEach((img) => {
|
|
90
|
-
img.loading = "eager";
|
|
91
|
-
img.decoding = "sync";
|
|
92
|
-
});
|
|
93
|
-
return allImages.every((img) => img.complete && img.naturalWidth > 0);
|
|
94
|
-
})
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
// Screenshot
|
|
98
|
-
cy.wrap(subject).screenshot(name, {
|
|
99
|
-
blackout: ['[data-visual-test="blackout"]'].concat(
|
|
100
|
-
options.blackout || []
|
|
101
|
-
),
|
|
102
|
-
...options,
|
|
103
|
-
});
|
|
104
|
-
}
|
|
105
|
-
);
|