forked from garris/BackstopJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (116 loc) · 5.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans:300,200" rel="stylesheet">
<link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
<div class="page-root container-fluid">
<div class="row justify-content-center moneyshot">
<div class="col-10">
<p class="mascotBlock">
<a href="https://github.com/garris/BackstopJS" class="lemur-link">
<img id="theLemur" src="assets/lemurFace.png" class='lemurInYourFace' alt="">
</a>
<img id="lemurButt" src="assets/lemurButt.png" class='lemurButtInYourFace' alt="">
</p>
<p class="logoBlock">
<a href="https://github.com/garris/BackstopJS" class="logo-link">
<img src="assets/BackstopJS.svg" class='BackstopJS3' alt="BackstopJS">
</a>
</p>
</div>
<h1>Visual regression testing for web apps.</h1>
</div>
<div class="row justify-content-center">
<p class="supportsBlock col-10">
Supports screen rendering with <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" class="chrome">Chrome-headless.</a>
Add your own interactions with <a href="https://playwright.dev/" class="chrome">Playwright</a> and <a href="https://github.com/GoogleChrome/puppeteer" class="chrome">Puppeteer</a> scripting.
</p>
</div>
<div class="row justify-content-center">
<p class="getItBlock col-10">
BackstopJS was created by <a href="https://www.linkedin.com/in/garrisshipon/">Garris Shipon</a> with contributions from <a href="https://github.com/garris/BackstopJS/graphs/contributors">these amazing engineers 💜</a>.
</p>
<p class="getItBlock col-10">
Opensourced under the <a href="https://raw.githubusercontent.com/garris/BackstopJS/master/LICENSE">The MIT License</a>.
</p>
<p class="getItBlock col-10">
<span class="cta"><a href="https://github.com/garris/BackstopJS" class="github-link"><img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub"></a></span>
<span class="cta"><a href="https://github.com/garris/BackstopJS">Get it on github!</a></span>
</p>
<p class="getItBlock cantSeeDis col-10" style="display: none;">
<img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub">
</p>
</div>
</div>
<p id="noShow" style="display: none;">This is text that should not show.</p>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
<script type="text/javascript">
const READY_LAG_MS = 3000;
const READY_TAG = '_the_lemur_is_ready_to_see_you';
const OCTOCAT_CLASS_ACTION = 'hideOctocat';
const LEMUR_CLASS_ACTION = 'hideLemur';
const COOKIE_TEST = /cookie/i;
const CLICK_TEST = /click/i;
const DELAY_TEST = /delay/i;
if (COOKIE_TEST.test(window.location.search)) {
showCookies();
}
if (CLICK_TEST.test(window.location.search)) {
modifyLemurBehavior();
}
if (DELAY_TEST.test(window.location.search)) {
delayLemurification();
}
function modifyLemurBehavior () {
document.body.addEventListener('click', evt => {
if (evt.target.id === 'theLemur') {
containTheLemur();
evt.preventDefault();
setTimeout(setReadyFlags, READY_LAG_MS + 1000);
} else {
releaseTheLemur();
}
});
console.log('lemur behavior is modified');
}
function showCookies () {
document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
}
function setReadyFlags () {
console.log(READY_TAG);
document.body.classList.add(READY_TAG);
}
function releaseTheLemur () {
document.body.classList.remove(LEMUR_CLASS_ACTION);
}
function containTheLemur () {
document.body.classList.add(LEMUR_CLASS_ACTION);
}
function hideOctocat () {
console.log('hideOctocat')
document.body.classList.add(OCTOCAT_CLASS_ACTION);
}
function showOctocat () {
document.body.classList.remove(OCTOCAT_CLASS_ACTION);
}
function delayLemurification () {
containTheLemur();
hideOctocat();
setTimeout(releaseTheLemur, READY_LAG_MS);
setTimeout(showOctocat, READY_LAG_MS);
setTimeout(setReadyFlags, READY_LAG_MS + 1000);
}
</script>