-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
131 lines (116 loc) · 7.24 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
131
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Argus Eyes</title>
<meta name="description" content="A lightweight CLI tool for visual regression testing: Argus Eyes captures screenshots for components over time and identifies visual differences with diff images">
<meta name="keywords" content="argus eyes, testing, visual regression, regression, automated, screenshots, captures, components, differences">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic|Ubuntu+Mono:400,400italic,700">
<link rel="stylesheet" href="/static/css/all.css">
<link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/img/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/static/img/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/static/img/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/static/img/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/static/img/favicon/manifest.json">
<link rel="mask-icon" href="/static/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/img/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="/static/img/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/static/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="layout__container ">
<header class="layout__header">
<nav class="nav-home">
<ol>
<li><a href="/" class="nav-home__item nav-home__item_is-active">Home</a></li>
<li><a href="/guide.html" class="nav-home__item">Guide</a></li>
<li><a href="/reference.html" class="nav-home__item">Reference</a></li>
<li><a href="http://github.com/arguseyes/argus-eyes/releases" class="nav-home__item" target="_blank">Releases</a></li>
<li><a href="http://github.com/arguseyes/argus-eyes" class="nav-home__item nav-home__item_github" title="Github" target="_blank"></a></li>
</ol>
</nav>
</header>
<main class="layout__main">
<div class="hero">
<div class="hero__logo"></div>
<h1 class="hero__title">A lightweight CLI tool for visual regression testing</h1>
<pre class="hero__install"><code>$ npm install argus-eyes -g</code></pre>
</div>
<article>
<h1>Overview</h1>
<!-- start -->
<p>Argus eyes does 3 things for you:</p>
<ol>
<li>Take screenshots of UI components in different views and branches</li>
<li>Test the screenshots for visual differences</li>
<li>Create images of the visual differences</li>
</ol>
<p>Screenshots are caputured with <a href="http://phantomjs.org/">PhantomJS</a>, comparing sceenshots is done using
<a href="http://yahoo.github.io/blink-diff/">Blink-diff</a>.
<!-- end --></p>
<!-- start -->
<h2 id="introduction">Introduction</h2>
<p>After installing, you want to tell argus eyes which pages and which components to check for visual regression.
Argus eyes works by going over a straightforward JSON file containing the resolutions you want to capture, as well as
the pages with their url's, and the components with their CSS-selectors.</p>
<p>Once argus eyes knows where to find the components, it's time for some command line action. The first command you want
to use is <code>$ argus-eyes capture master</code>. This makes argus eyes go over the config file and take screenshots of
all specified components in there. The screenshots are saved in <strong><code>.argus-eyes/master</code></strong> and this set of screenshots can
be compared with another set.</p>
<p>Say you want to compare the components in your dev branch with those in your master branch. Now is the time to switch
branches and do a new <code>$ argus-eyes capture dev</code>.</p>
<p>To compare the 2 sets you run <code>$ argus-eyes compare master dev</code>, that's it! Argus eyes now checks all supposedly
identical screenshots for visual differences. If differences were found, a new folder <strong><code>.argus-eyes/diff_master_dev</code></strong>
is created. This folder contains overlay-images of the offending components, highlighting their differences in red.
<!-- end --></p>
<h2>Example</h2>
<figure class="example-figure" role="group">
<figcaption class="example-figure__caption">Example of argus eyes visual regression testing</figcaption>
<figure class="figure-part" role="group">
<figcaption class="figure-part__caption">baseline</figcaption>
<img src="/static/img/nav-menu-1.png">
</figure>
<figure class="figure-part" role="group">
<figcaption class="figure-part__caption">current</figcaption>
<img src="/static/img/nav-menu-2.png">
</figure>
<figure class="figure-part" role="group">
<figcaption class="figure-part__caption">diff</figcaption>
<img src="/static/img/nav-menu-3.png">
</figure>
</figure>
<!-- start -->
<h2 id="authors">Authors</h2>
<p>The initial idea and continued vision is a shared responsibility between Maarten Groeneweg and
<a href="http://bran.name/">Bran van der Meer</a>.</p>
<p>We strongly believe a visual regression testing tool should be looking for the sweet spot in collaboration between a
Front-End Developer and a Test Engineer. That’s why we started working on Argus Eyes together.</p>
<p>For a list of all contributors, see the <a href="https://github.com/arguseyes/argus-eyes/graphs/contributors">contributor graph</a>.
<!-- end --></p>
</article>
</main>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4923292-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>