-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathguide.html
170 lines (155 loc) · 9.67 KB
/
guide.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Argus Eyes — Guide</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 layout__container_has-aside">
<header class="layout__header">
<figure class="header-logo">
<a href="/"><img src="/static/img/argus-eyes-line.svg" alt="Argus Eyes logo"></a>
</figure>
<nav class="nav-main">
<ol>
<li><a href="/" class="nav-main__item">Home</a></li>
<li><a href="/guide.html" class="nav-main__item nav-main__item_is-active">Guide</a></li>
<li><a href="/reference.html" class="nav-main__item">Reference</a></li>
<li><a href="http://github.com/arguseyes/argus-eyes/releases" class="nav-main__item" target="_blank">Releases</a></li>
<li><a href="http://github.com/arguseyes/argus-eyes" class="nav-main__item nav-main__item_github" title="Github" target="_blank"></a></li>
</ol>
</nav>
</header>
<main class="layout__main">
<article>
<!-- start -->
<h2 id="guide">Guide</h2>
<h3 id="install">Install</h3>
<ul>
<li>Install <a href="http://nodejs.org/">Node.js</a>, at least v4</li>
<li>Install argus-eyes using npm:</li>
</ul>
<pre><code class="lang-bash">$ npm install argus-eyes -g
</code></pre>
<h3 id="step-1-setup-config-file">Step 1: Setup config file</h3>
<p>Before argus eyes can measure visual differences, it needs a list of pages and components. By
default argus eyes expects an <strong><code>argus-eyes.json</code></strong> file in the current working directory.</p>
<p>The config file must be a valid JSON object, containing 3 arrays: <strong><code>sizes</code></strong>, <strong><code>pages</code></strong> and
<strong><code>components</code></strong>. Sizes are simple strings. Page objects require a name, url and list of components. Components require
a name and a CSS-selector. Components can optionally take a list of selectors of elements to ignore, this selector is
appended to the component selector. See the Reference section for a more detailed format description.</p>
<p><strong>Example config file:</strong></p>
<pre><code class="lang-json">{
<span class="hljs-attr">"sizes"</span>: [<span class="hljs-string">"320x480"</span>, <span class="hljs-string">"1280x768"</span>],
<span class="hljs-attr">"pages"</span>: [ {
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"homepage"</span>,
<span class="hljs-attr">"url"</span>: <span class="hljs-string">"http://localhost:3000/"</span>,
<span class="hljs-attr">"components"</span>: [ <span class="hljs-string">"navigation"</span>, <span class="hljs-string">"news-items"</span> ]
}, {
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"contact"</span>,
<span class="hljs-attr">"url"</span>: <span class="hljs-string">"http://localhost:3000/contact.html"</span>,
<span class="hljs-attr">"components"</span>: [ <span class="hljs-string">"navigation"</span> ]
} ],
<span class="hljs-attr">"components"</span>: [ {
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"navigation"</span>,
<span class="hljs-attr">"selector"</span>: <span class="hljs-string">".nav"</span>
}, {
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"news-items"</span>,
<span class="hljs-attr">"selector"</span>: <span class="hljs-string">".news-items"</span>,
<span class="hljs-attr">"ignore"</span>: [ <span class="hljs-string">".last-updated"</span> ]
} ]
}
</code></pre>
<h3 id="step-2-take-screenshots">Step 2: Take screenshots</h3>
<p>After setting up the JSON, argus eyes can be put to work. Let's create your first set of screenshots of the components
we specified. To do that, you can use the <strong><code>argus-eyes capture</code></strong> command:</p>
<pre><code class="lang-bash">$ argus-eyes capture <name>
</code></pre>
<p>It's best to name your set of screenshots semantically, after your current git branch for example.</p>
<p>Argus eyes now creates a folder called <strong><code>.argus-eyes/<name>/</code></strong>, and saves the screenshots of all components specified
in the config file.</p>
<p>Now, you can switch branches and save another set of screenshots.</p>
<h3 id="step-3-test-for-visual-differences">Step 3: Test for visual differences</h3>
<p>When any 2 sets of screenshots were created, argus eyes can compare them for visual differences. Comparison is done with
the <strong><code>argus-eyes compare</code></strong> command:</p>
<pre><code class="lang-bash">$ argus-eyes compare <left> <right>
</code></pre>
<p>If visual differences between supposedly identical components are found, a new folder is created. This folder contains
images of the offending components, highlighting their differences in red.</p>
<p><em>Note:</em> Please make sure to add <strong><code>'.argus-eyes'</code></strong> to your <strong><code>.gitignore</code></strong>!</p>
<h3 id="gitflow-testing-separate-branches">Gitflow: Testing separate branches</h3>
<p>Argus eyes is especially useful for checking visual regression between different branches. Say you're working on a
feature branch and you want to make sure your changes have no unintended side effects:</p>
<p><strong>On the <code>feature/navigation</code> branch:</strong></p>
<pre><code class="lang-bash">$ argus-eyes capture feature/navigation
</code></pre>
<p><strong>On the <code>develop</code> branch:</strong></p>
<pre><code class="lang-bash">$ argus-eyes capture develop
$ argus-eyes compare develop feature/navigation
</code></pre>
<p>If any differences are found, the visual diff images are stored in <strong><code>.argus-eyes/diff_develop_feature-navigation/</code></strong>
<!-- end --></p>
</article>
</main>
<aside class="layout__aside">
<nav class="nav-aside">
<ol>
<li class="nav-aside_lvl1">
<a href="#guide">Guide</a>
</li>
<li class="nav-aside_lvl2">
<a href="#install">Install</a>
</li>
<li class="nav-aside_lvl2">
<a href="#step-1-setup-config-file">Step 1: Setup config file</a>
</li>
<li class="nav-aside_lvl2">
<a href="#step-2-take-screenshots">Step 2: Take screenshots</a>
</li>
<li class="nav-aside_lvl2">
<a href="#step-3-test-for-visual-differences">Step 3: Test for visual differences</a>
</li>
<li class="nav-aside_lvl2">
<a href="#gitflow-testing-separate-branches">Gitflow: Testing separate branches</a>
</li>
</ol>
</nav>
</aside>
</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>