Skip to content

Commit 7882f0c

Browse files
yoshitaka7yoshitaka7
committed
test backstop.js
1 parent 8a7cdab commit 7882f0c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2862
-0
lines changed

‎backstop.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"id": "backstop_default",
3+
"viewports": [
4+
{
5+
"label": "phone",
6+
"width": 320,
7+
"height": 480
8+
},
9+
{
10+
"label": "tablet",
11+
"width": 1024,
12+
"height": 768
13+
}
14+
],
15+
"onBeforeScript": "puppet/onBefore.js",
16+
"onReadyScript": "puppet/onReady.js",
17+
"scenarios": [
18+
{
19+
"label": "BackstopJS Homepage",
20+
"cookiePath": "backstop_data/engine_scripts/cookies.json",
21+
"url": "http://localhost:3000/",
22+
"referenceUrl": "",
23+
"readyEvent": "",
24+
"readySelector": "",
25+
"delay": 0,
26+
"hideSelectors": [],
27+
"removeSelectors": [],
28+
"hoverSelector": "",
29+
"clickSelector": "",
30+
"postInteractionWait": 0,
31+
"selectors": [],
32+
"selectorExpansion": true,
33+
"expect": 0,
34+
"misMatchThreshold" : 0.1,
35+
"requireSameDimensions": true
36+
}
37+
],
38+
"paths": {
39+
"bitmaps_reference": "backstop_data/bitmaps_reference",
40+
"bitmaps_test": "backstop_data/bitmaps_test",
41+
"engine_scripts": "backstop_data/engine_scripts",
42+
"html_report": "backstop_data/html_report",
43+
"ci_report": "backstop_data/ci_report"
44+
},
45+
"report": ["browser"],
46+
"engine": "puppeteer",
47+
"engineOptions": {
48+
"args": ["--no-sandbox"]
49+
},
50+
"asyncCaptureLimit": 5,
51+
"asyncCompareLimit": 50,
52+
"debug": false,
53+
"debugWindow": false
54+
}

‎backstop_data/bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_0_phone.png

4.84 KB
Loading

‎backstop_data/bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png

8.17 KB
Loading

‎backstop_data/bitmaps_test/20211208-113844/backstop_default_BackstopJS_Homepage_0_document_0_phone.png

4.84 KB
Loading

‎backstop_data/bitmaps_test/20211208-113844/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png

8.17 KB
Loading

‎backstop_data/bitmaps_test/20211208-113844/report.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"testSuite": "BackstopJS",
3+
"tests": [
4+
{
5+
"pair": {
6+
"reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
7+
"test": "../bitmaps_test/20211208-113844/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
8+
"selector": "document",
9+
"fileName": "backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
10+
"label": "BackstopJS Homepage",
11+
"requireSameDimensions": true,
12+
"misMatchThreshold": 0.1,
13+
"url": "http://localhost:3000/",
14+
"referenceUrl": "",
15+
"expect": 0,
16+
"viewportLabel": "phone",
17+
"diff": {
18+
"isSameDimensions": true,
19+
"dimensionDifference": {
20+
"width": 0,
21+
"height": 0
22+
},
23+
"misMatchPercentage": "0.00"
24+
}
25+
},
26+
"status": "pass"
27+
},
28+
{
29+
"pair": {
30+
"reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
31+
"test": "../bitmaps_test/20211208-113844/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
32+
"selector": "document",
33+
"fileName": "backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
34+
"label": "BackstopJS Homepage",
35+
"requireSameDimensions": true,
36+
"misMatchThreshold": 0.1,
37+
"url": "http://localhost:3000/",
38+
"referenceUrl": "",
39+
"expect": 0,
40+
"viewportLabel": "tablet",
41+
"diff": {
42+
"isSameDimensions": true,
43+
"dimensionDifference": {
44+
"width": 0,
45+
"height": 0
46+
},
47+
"misMatchPercentage": "0.00"
48+
}
49+
},
50+
"status": "pass"
51+
}
52+
],
53+
"id": "backstop_default"
54+
}

‎backstop_data/bitmaps_test/20211208-113915/backstop_default_BackstopJS_Homepage_0_document_0_phone.png

4.84 KB
Loading

‎backstop_data/bitmaps_test/20211208-113915/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png

8.17 KB
Loading

‎backstop_data/bitmaps_test/20211208-113915/failed_diff_backstop_default_BackstopJS_Homepage_0_document_0_phone.png

3.86 KB
Loading

‎backstop_data/bitmaps_test/20211208-113915/failed_diff_backstop_default_BackstopJS_Homepage_0_document_1_tablet.png

6.98 KB
Loading

‎backstop_data/bitmaps_test/20211208-113915/report.json

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"testSuite": "BackstopJS",
3+
"tests": [
4+
{
5+
"pair": {
6+
"reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
7+
"test": "../bitmaps_test/20211208-113915/backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
8+
"selector": "document",
9+
"fileName": "backstop_default_BackstopJS_Homepage_0_document_0_phone.png",
10+
"label": "BackstopJS Homepage",
11+
"requireSameDimensions": true,
12+
"misMatchThreshold": 0.1,
13+
"url": "http://localhost:3000/",
14+
"referenceUrl": "",
15+
"expect": 0,
16+
"viewportLabel": "phone",
17+
"diff": {
18+
"isSameDimensions": true,
19+
"dimensionDifference": {
20+
"width": 0,
21+
"height": 0
22+
},
23+
"rawMisMatchPercentage": 0.7727864583333333,
24+
"misMatchPercentage": "0.77",
25+
"analysisTime": 18
26+
},
27+
"diffImage": "../bitmaps_test/20211208-113915/failed_diff_backstop_default_BackstopJS_Homepage_0_document_0_phone.png"
28+
},
29+
"status": "fail"
30+
},
31+
{
32+
"pair": {
33+
"reference": "../bitmaps_reference/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
34+
"test": "../bitmaps_test/20211208-113915/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
35+
"selector": "document",
36+
"fileName": "backstop_default_BackstopJS_Homepage_0_document_1_tablet.png",
37+
"label": "BackstopJS Homepage",
38+
"requireSameDimensions": true,
39+
"misMatchThreshold": 0.1,
40+
"url": "http://localhost:3000/",
41+
"referenceUrl": "",
42+
"expect": 0,
43+
"viewportLabel": "tablet",
44+
"diff": {
45+
"isSameDimensions": true,
46+
"dimensionDifference": {
47+
"width": 0,
48+
"height": 0
49+
},
50+
"rawMisMatchPercentage": 0.31115214029947913,
51+
"misMatchPercentage": "0.31",
52+
"analysisTime": 35
53+
},
54+
"diffImage": "../bitmaps_test/20211208-113915/failed_diff_backstop_default_BackstopJS_Homepage_0_document_1_tablet.png"
55+
},
56+
"status": "fail"
57+
}
58+
],
59+
"id": "backstop_default"
60+
}

‎backstop_data/engine_scripts/cookies.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[
2+
{
3+
"domain": ".www.yourdomain.com",
4+
"path": "/",
5+
"name": "yourCookieName",
6+
"value": "yourCookieValue",
7+
"expirationDate": 1798790400,
8+
"hostOnly": false,
9+
"httpOnly": false,
10+
"secure": false,
11+
"session": false,
12+
"sameSite": "Lax"
13+
}
14+
]

‎backstop_data/engine_scripts/imageStub.jpg

2.83 KB
Loading

‎backstop_data/engine_scripts/playwright/clickAndHoverHelper.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
module.exports = async (page, scenario) => {
2+
const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
3+
const clickSelector = scenario.clickSelectors || scenario.clickSelector;
4+
const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
5+
const scrollToSelector = scenario.scrollToSelector;
6+
const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
7+
8+
if (keyPressSelector) {
9+
for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
10+
await page.waitForSelector(keyPressSelectorItem.selector);
11+
await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
12+
}
13+
}
14+
15+
if (hoverSelector) {
16+
for (const hoverSelectorIndex of [].concat(hoverSelector)) {
17+
await page.waitForSelector(hoverSelectorIndex);
18+
await page.hover(hoverSelectorIndex);
19+
}
20+
}
21+
22+
if (clickSelector) {
23+
for (const clickSelectorIndex of [].concat(clickSelector)) {
24+
await page.waitForSelector(clickSelectorIndex);
25+
await page.click(clickSelectorIndex);
26+
}
27+
}
28+
29+
if (postInteractionWait) {
30+
if (parseInt(postInteractionWait) > 0) {
31+
await page.waitForTimeout(postInteractionWait);
32+
} else {
33+
await page.waitForSelector(postInteractionWait);
34+
}
35+
}
36+
37+
if (scrollToSelector) {
38+
await page.waitForSelector(scrollToSelector);
39+
await page.evaluate(scrollToSelector => {
40+
document.querySelector(scrollToSelector).scrollIntoView();
41+
}, scrollToSelector);
42+
}
43+
};

‎backstop_data/engine_scripts/playwright/interceptImages.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* INTERCEPT IMAGES
3+
* Listen to all requests. If a request matches IMAGE_URL_RE
4+
* then stub the image with data from IMAGE_STUB_URL
5+
*
6+
* Use this in an onBefore script E.G.
7+
```
8+
module.exports = async function(page, scenario) {
9+
require('./interceptImages')(page, scenario);
10+
}
11+
```
12+
*
13+
*/
14+
15+
const fs = require('fs');
16+
const path = require('path');
17+
18+
const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
19+
const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
20+
const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
21+
const HEADERS_STUB = {};
22+
23+
module.exports = async function (page, scenario) {
24+
page.route(IMAGE_URL_RE, route => {
25+
route.fulfill({
26+
body: IMAGE_DATA_BUFFER,
27+
headers: HEADERS_STUB,
28+
status: 200
29+
});
30+
});
31+
};

‎backstop_data/engine_scripts/playwright/loadCookies.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const fs = require('fs');
2+
3+
module.exports = async (browserContext, scenario) => {
4+
let cookies = [];
5+
const cookiePath = scenario.cookiePath;
6+
7+
// Read Cookies from File, if exists
8+
if (fs.existsSync(cookiePath)) {
9+
cookies = JSON.parse(fs.readFileSync(cookiePath));
10+
}
11+
12+
// Add cookies to browser
13+
browserContext.addCookies(cookies);
14+
15+
console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
16+
};

‎backstop_data/engine_scripts/playwright/onBefore.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = async (page, scenario, viewport, isReference, browserContext) => {
2+
await require('./loadCookies')(browserContext, scenario);
3+
};

‎backstop_data/engine_scripts/playwright/onReady.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = async (page, scenario, viewport, isReference, browserContext) => {
2+
console.log('SCENARIO > ' + scenario.label);
3+
await require('./clickAndHoverHelper')(page, scenario);
4+
5+
// add more ready handlers here...
6+
};

‎backstop_data/engine_scripts/playwright/overrideCSS.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* OVERRIDE CSS
3+
* Apply this CSS to the loaded page, as a way to override styles.
4+
*
5+
* Use this in an onReady script E.G.
6+
```
7+
module.exports = async function(page, scenario) {
8+
await require('./overrideCSS')(page, scenario);
9+
}
10+
```
11+
*
12+
*/
13+
14+
const BACKSTOP_TEST_CSS_OVERRIDE = `
15+
html {
16+
background-image: none;
17+
}
18+
`;
19+
20+
module.exports = async (page, scenario) => {
21+
// inject arbitrary css to override styles
22+
await page.addStyleTag({
23+
content: BACKSTOP_TEST_CSS_OVERRIDE
24+
});
25+
26+
console.log('BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);
27+
};

‎backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
module.exports = async (page, scenario) => {
2+
const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
3+
const clickSelector = scenario.clickSelectors || scenario.clickSelector;
4+
const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
5+
const scrollToSelector = scenario.scrollToSelector;
6+
const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
7+
8+
if (keyPressSelector) {
9+
for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
10+
await page.waitFor(keyPressSelectorItem.selector);
11+
await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
12+
}
13+
}
14+
15+
if (hoverSelector) {
16+
for (const hoverSelectorIndex of [].concat(hoverSelector)) {
17+
await page.waitFor(hoverSelectorIndex);
18+
await page.hover(hoverSelectorIndex);
19+
}
20+
}
21+
22+
if (clickSelector) {
23+
for (const clickSelectorIndex of [].concat(clickSelector)) {
24+
await page.waitFor(clickSelectorIndex);
25+
await page.click(clickSelectorIndex);
26+
}
27+
}
28+
29+
if (postInteractionWait) {
30+
await page.waitFor(postInteractionWait);
31+
}
32+
33+
if (scrollToSelector) {
34+
await page.waitFor(scrollToSelector);
35+
await page.evaluate(scrollToSelector => {
36+
document.querySelector(scrollToSelector).scrollIntoView();
37+
}, scrollToSelector);
38+
}
39+
};

0 commit comments

Comments
 (0)