Skip to content

Commit cd484c8

Browse files
JayPanozJayPanoz
committed
Fix visual regression tests
Switched to puppeteer after backstopJS update and had to cheat a little bit in html test files to keep some consistency with previous screenshots. Note: require express be installed.
1 parent 67c26f6 commit cd484c8

20 files changed

Lines changed: 67 additions & 46 deletions

‎backstop.json‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,175 +15,175 @@
1515
"scenarios": [
1616
{
1717
"label": "Paged",
18-
"url": "tests/base.html",
18+
"url": "http://localhost:8000/tests/base.html",
1919
"delay": 0,
2020
"selectors": ["viewport"],
2121
"misMatchThreshold" : 0.1
2222
},
2323
{
2424
"label": "Paged rtl",
25-
"url": "tests/base-rtl.html",
25+
"url": "http://localhost:8000/tests/base-rtl.html",
2626
"delay": 0,
2727
"selectors": ["viewport"],
2828
"misMatchThreshold" : 0.1
2929
},
3030
{
3131
"label": "Paged vertical",
32-
"url": "tests/base-vertical.html",
32+
"url": "http://localhost:8000/tests/base-vertical.html",
3333
"delay": 0,
3434
"selectors": ["viewport"],
3535
"misMatchThreshold" : 0.1
3636
},
3737
{
3838
"label": "1 column pref",
39-
"url": "tests/cols-1.html",
39+
"url": "http://localhost:8000/tests/cols-1.html",
4040
"delay": 0,
4141
"selectors": ["viewport"],
4242
"misMatchThreshold" : 0.1
4343
},
4444
{
4545
"label": "2 columns pref",
46-
"url": "tests/cols-2.html",
46+
"url": "http://localhost:8000/tests/cols-2.html",
4747
"delay": 0,
4848
"selectors": ["viewport"],
4949
"misMatchThreshold" : 0.1
5050
},
5151
{
5252
"label": "Page margins pref",
53-
"url": "tests/margins.html",
53+
"url": "http://localhost:8000/tests/margins.html",
5454
"delay": 0,
5555
"selectors": ["viewport"],
5656
"misMatchThreshold" : 0.1
5757
},
5858
{
5959
"label": "Scroll pref",
60-
"url": "tests/scroll.html",
60+
"url": "http://localhost:8000/tests/scroll.html",
6161
"delay": 0,
6262
"selectors": ["viewport"],
6363
"misMatchThreshold" : 0.1
6464
},
6565
{
6666
"label": "Scroll vertical pref",
67-
"url": "tests/scroll-vertical.html",
67+
"url": "http://localhost:8000/tests/scroll-vertical.html",
6868
"delay": 0,
6969
"selectors": ["viewport"],
7070
"misMatchThreshold" : 0.1
7171
},
7272
{
7373
"label": "Day mode pref",
74-
"url": "tests/day.html",
74+
"url": "http://localhost:8000/tests/day.html",
7575
"delay": 0,
7676
"selectors": ["document"],
7777
"misMatchThreshold" : 0.1
7878
},
7979
{
8080
"label": "Sepia mode pref",
81-
"url": "tests/sepia.html",
81+
"url": "http://localhost:8000/tests/sepia.html",
8282
"delay": 0,
8383
"selectors": ["document"],
8484
"misMatchThreshold" : 0.1
8585
},
8686
{
8787
"label": "Night mode pref",
88-
"url": "tests/night.html",
88+
"url": "http://localhost:8000/tests/night.html",
8989
"delay": 0,
9090
"selectors": ["document"],
9191
"misMatchThreshold" : 0.1
9292
},
9393
{
9494
"label": "Font family pref",
95-
"url": "tests/font-family.html",
95+
"url": "http://localhost:8000/tests/font-family.html",
9696
"delay": 0,
9797
"selectors": ["document"],
9898
"misMatchThreshold" : 0.1
9999
},
100100
{
101101
"label": "Font size pref",
102-
"url": "tests/font-size.html",
102+
"url": "http://localhost:8000/tests/font-size.html",
103103
"delay": 0,
104104
"selectors": ["document"],
105105
"misMatchThreshold" : 0.1
106106
},
107107
{
108108
"label": "Type scale pref",
109-
"url": "tests/type-scale.html",
109+
"url": "http://localhost:8000/tests/type-scale.html",
110110
"delay": 0,
111111
"selectors": ["document"],
112112
"misMatchThreshold" : 0.1
113113
},
114114
{
115115
"label": "Text align pref",
116-
"url": "tests/text-align.html",
116+
"url": "http://localhost:8000/tests/text-align.html",
117117
"delay": 0,
118118
"selectors": ["document"],
119119
"misMatchThreshold" : 0.1
120120
},
121121
{
122122
"label": "Hyphens pref",
123-
"url": "tests/hyphens.html",
123+
"url": "http://localhost:8000/tests/hyphens.html",
124124
"delay": 0,
125125
"selectors": ["document"],
126126
"misMatchThreshold" : 0.1
127127
},
128128
{
129129
"label": "Line height pref",
130-
"url": "tests/line-height.html",
130+
"url": "http://localhost:8000/tests/line-height.html",
131131
"delay": 0,
132132
"selectors": ["document"],
133133
"misMatchThreshold" : 0.1
134134
},
135135
{
136136
"label": "Para spacing pref",
137-
"url": "tests/para-spacing.html",
137+
"url": "http://localhost:8000/tests/para-spacing.html",
138138
"delay": 0,
139139
"selectors": ["document"],
140140
"misMatchThreshold" : 0.1
141141
},
142142
{
143143
"label": "Para spacing vertical pref",
144-
"url": "tests/para-spacing-vertical.html",
144+
"url": "http://localhost:8000/tests/para-spacing-vertical.html",
145145
"delay": 0,
146146
"selectors": ["document"],
147147
"misMatchThreshold" : 0.1
148148
},
149149
{
150150
"label": "Wordspacing pref",
151-
"url": "tests/word-spacing.html",
151+
"url": "http://localhost:8000/tests/word-spacing.html",
152152
"delay": 0,
153153
"selectors": ["document"],
154154
"misMatchThreshold" : 0.1
155155
},
156156
{
157157
"label": "Letterspacing pref",
158-
"url": "tests/letter-spacing.html",
158+
"url": "http://localhost:8000/tests/letter-spacing.html",
159159
"delay": 0,
160160
"selectors": ["document"],
161161
"misMatchThreshold" : 0.1
162162
},
163163
{
164164
"label": "Ligatures pref",
165-
"url": "tests/arabic-ligatures.html",
165+
"url": "http://localhost:8000/tests/arabic-ligatures.html",
166166
"delay": 0,
167167
"selectors": ["document"],
168168
"misMatchThreshold" : 0.1
169169
},
170170
{
171171
"label": "Accessibility font pref",
172-
"url": "tests/a11y-font.html",
172+
"url": "http://localhost:8000/tests/a11y-font.html",
173173
"delay": 0,
174174
"selectors": ["document"],
175175
"misMatchThreshold" : 0.1
176176
},
177177
{
178178
"label": "Accessibility normalize pref",
179-
"url": "tests/a11y-normalize.html",
179+
"url": "http://localhost:8000/tests/a11y-normalize.html",
180180
"delay": 0,
181181
"selectors": ["document"],
182182
"misMatchThreshold" : 0.1
183183
},
184184
{
185185
"label": "Accessibility custom pref",
186-
"url": "tests/a11y-custom.html",
186+
"url": "http://localhost:8000/tests/a11y-custom.html",
187187
"delay": 0,
188188
"selectors": ["document"],
189189
"misMatchThreshold" : 0.1
@@ -197,8 +197,10 @@
197197
"ci_report": "tests/backstop_data/ci_report"
198198
},
199199
"report": ["browser"],
200-
"engine": "chrome",
201-
"engineFlags": [],
200+
"engine": "puppeteer",
201+
"engineOptions": {
202+
"args": ["--no-sandbox"]
203+
},
202204
"asyncCaptureLimit": 5,
203205
"asyncCompareLimit": 50,
204206
"debug": false,

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"main": "css/ReadiumCSS-config.css",
2727
"devDependencies": {
2828
"backstopjs": "^4.5.0",
29+
"express": "^4.17.1",
2930
"postcss-alter-property-value": "^1.1.3",
3031
"postcss-cli": "^7.1.0",
3132
"postcss-css-variables": "^0.14.0",
@@ -42,8 +43,9 @@
4243
"build:rtl": "postcss css/src/ReadiumCSS-before-rtl.css -o css/dist/rtl/ReadiumCSS-before.css && postcss css/src/ReadiumCSS-default-rtl.css -o css/dist/rtl/ReadiumCSS-default.css && postcss css/src/ReadiumCSS-after-rtl.css -o css/dist/rtl/ReadiumCSS-after.css",
4344
"build:cjk": "postcss css/src/ReadiumCSS-before-cjk-horizontal.css -o css/dist/cjk-horizontal/ReadiumCSS-before.css && postcss css/src/ReadiumCSS-default-cjk-horizontal.css -o css/dist/cjk-horizontal/ReadiumCSS-default.css && postcss css/src/ReadiumCSS-after-cjk-horizontal.css -o css/dist/cjk-horizontal/ReadiumCSS-after.css",
4445
"build:vertical": "postcss css/src/ReadiumCSS-before-cjk-vertical.css -o css/dist/cjk-vertical/ReadiumCSS-before.css && postcss css/src/ReadiumCSS-default-cjk-vertical.css -o css/dist/cjk-vertical/ReadiumCSS-default.css && postcss css/src/ReadiumCSS-after-cjk-vertical.css -o css/dist/cjk-vertical/ReadiumCSS-after.css",
45-
"test": "backstop test",
46-
"test:ref": "backstop reference",
46+
"start": "node \"./server.js\"",
47+
"test": "npm start & backstop test && pkill -9 -f \"node ./server.js\" && echo '\nVisual Regression testing has been completed.\n'",
48+
"test:ref": "npm start & backstop reference && pkill -9 -f \"node ./server.js\" && echo '\nVisual Regression references have been generated.\n'",
4749
"test:approve": "backstop approve"
4850
}
4951
}

‎server.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const http = require("http");
2+
const express = require("express");
3+
4+
const app = express();
5+
const httpPort = 8000;
6+
const httpServer = http.createServer(app);
7+
8+
httpServer.listen(httpPort, (err) => {
9+
if (err) {
10+
console.error(err);
11+
} else {
12+
console.log("http server listening on port " + httpServer.address().port);
13+
}
14+
});
15+
16+
app.use("/tests", express.static(__dirname + "/tests"));
17+
app.use("/css/dist", express.static(__dirname + "/css/dist"));

‎tests/a11y-custom.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__fontOverride: readium-font-on; --USER__fontFamily: 'IA Writer Duospace'; --USER__advancedSettings: readium-advanced-on; --USER__paraSpacing: 2rem; --USER__paraIndent: 0; --USER__backgroundColor: #c5e6ce; --USER__textColor: #3b4c44;">
2+
<html style="--USER__view: readium-scroll-on; --USER__fontOverride: readium-font-on; --USER__fontFamily: 'IA Writer Duospace'; --USER__advancedSettings: readium-advanced-on; --USER__paraSpacing: 2rem; --USER__paraIndent: 0; --USER__backgroundColor: #c5e6ce; --USER__textColor: #3b4c44;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/a11y-font.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__fontOverride: readium-font-on; --USER__fontFamily: AccessibleDfA;">
2+
<html style="--USER__view: readium-scroll-on; --USER__fontOverride: readium-font-on; --USER__fontFamily: AccessibleDfA;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/a11y-normalize.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__fontOverride: readium-font-on; --USER__a11yNormalize: readium-a11y-on; --USER__fontFamily: Verdana, 'Trebuchet MS', Arial">
2+
<html style="--USER__view: readium-scroll-on; --USER__fontOverride: readium-font-on; --USER__a11yNormalize: readium-a11y-on; --USER__fontFamily: Verdana, 'Trebuchet MS', Arial">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/arabic-ligatures.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__advancedSettings: readium-advanced-on; --USER__ligatures: none;" dir="rtl" lang="ar">
2+
<html style="--USER__view: readium-scroll-on; --USER__advancedSettings: readium-advanced-on; --USER__ligatures: none;" dir="rtl" lang="ar">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/day.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html>
2+
<html style="--USER__view: readium-scroll-on;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/font-family.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__fontOverride: readium-font-on; --USER__fontFamily: sans-serif;">
2+
<html style="--USER__view: readium-scroll-on; --USER__fontOverride: readium-font-on; --USER__fontFamily: sans-serif;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

‎tests/font-size.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__advancedSettings: readium-advanced-on; --USER__fontSize: 200%;">
2+
<html style="--USER__view: readium-scroll-on; --USER__advancedSettings: readium-advanced-on; --USER__fontSize: 200%;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

0 commit comments

Comments
 (0)