taiko-screencheck
Version:
simplify visual regression testing with screenshot capture and compare
224 lines • 14 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>taiko-screencheck</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">taiko-screencheck</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1>taiko-screencheck</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#taiko-screencheck" id="taiko-screencheck" style="color: inherit; text-decoration: none;">
<h1>taiko screencheck</h1>
</a>
<p><img src="https://github.com/dcdc-io/taiko-screencheck/workflows/Node.js%20CI/badge.svg" alt="Node.js CI"> <a href="https://dcdc-io.github.io/taiko-screencheck/"><img src="https://img.shields.io/badge/TypeDocs-readme-blue" alt="TypeDocs"></a></p>
<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
<h2>Installation</h2>
</a>
<p><code>npm install taiko-screencheck</code></p>
<a href="#introduction" id="introduction" style="color: inherit; text-decoration: none;">
<h2>Introduction</h2>
</a>
<p><img src="https://raw.githubusercontent.com/dcdc-io/taiko-screencheck/master/intro.gif" alt="taiko-screencheck"></p>
<p>taiko-screencheck is a taiko plugin that assists visual regression testing by tracking visual changes to websites and web apps. It introduces a global <code>screencheck</code> method that has the same call signature as the built-in <code>screenshot</code> method, except that it returns the result of comparing a screenshot to a reference screenshot.</p>
<p>By default taiko-screencheck will create an automatically numbered directory to store screenshots. It is recommended that test developers use the <code>screenshotSetup</code> method to override this behaviour to give complete control of taiko-screencheck output.</p>
<a href="#taiko-methods" id="taiko-methods" style="color: inherit; text-decoration: none;">
<h2>Taiko Methods</h2>
</a>
<a href="#screencheck" id="screencheck" style="color: inherit; text-decoration: none;">
<h3>screencheck()</h3>
</a>
<pre><code class="language-typescript">screencheck(screenshotOptions = {}) => {
result:<span class="hljs-built_in">string</span> = <span class="hljs-string">"SAME"</span> | <span class="hljs-string">"DIFFERENT"</span> | <span class="hljs-string">"NO_BASE_IMAGE"</span>,
data:Buffer, referenceData:Buffer = <span class="hljs-literal">undefined</span>, pixelCount:<span class="hljs-built_in">number</span>
}</code></pre>
<p>This method takes and saves a screenshot and compares it to the reference screenshot in the detected or configured reference directory (see screencheckSetup#refRunId).</p>
<p>The value of the returned <code>result</code> property indicates whether or not the screenshots differ.</p>
<p>Taiko CLI example:</p>
<pre><code><span class="hljs-keyword">await</span> openBrowser()
<span class="hljs-keyword">await</span> <span class="hljs-keyword">goto</span>(<span class="hljs-string">"dcdc.io"</span>)
homepage = <span class="hljs-keyword">await</span> screencheck()
assert.equal(homepage.result, <span class="hljs-string">"SAME"</span>)</code></pre>
<a href="#screenchecksetup" id="screenchecksetup" style="color: inherit; text-decoration: none;">
<h3>screencheckSetup()</h3>
</a>
<pre><code class="language-typescript">screencheckSetup(options = {
runId:<span class="hljs-built_in">string</span> = <auto>, refRunId:<span class="hljs-built_in">string</span> = <auto>, baseDir:<span class="hljs-built_in">string</span> = <cwd>
}) => options</code></pre>
<p>This method optionally configures screencheck to use custom directories for output and comparison.</p>
<a href="#faqs" id="faqs" style="color: inherit; text-decoration: none;">
<h2>FAQs</h2>
</a>
<ol>
<li><p>My headless screen captures never match my headed screen captures of the same page.</p>
<p>This may be happening because you have a high DPI display. Try setting your desktop as a 1:1 pixel ratio to your display device. Alternatively you may want to avoid headed mode for the creation of reference images.</p>
<p>On Windows it may help to disable ClearType while running tests in headed modes.</p>
</li>
<li><p>How do I use taiko-screencheck?</p>
<p>With an initialised node project, run <code>npm install taiko-screencheck</code> and from thereonin taiko will automatically enable taiko-screencheck.</p>
</li>
<li><p>Does taiko-screencheck work on the taiko CLI and in node?</p>
<p>Yes. You can use the plugin in both node and taiko CLI.</p>
</li>
<li><p>What happens when I don't configure using <code>screencheckSetup</code>?</p>
<p>taiko-screencheck will create a directory per run, named <em>000n</em>.auto where <em>n</em> is computed based on the current contents of the base directory. This is to say, the first time it runs the output will go to <code>$pwd/0001.auto</code> and the next time <code>$pwd/0002.auto</code> and so on.</p>
<p>You can use <code>screencheckSetup(options)</code> to change this behaviour.</p>
</li>
<li><p>Can I see the current configuration at runtime?</p>
<p>Yes. Call <code>screencheckSetup()</code> without providing options and taiko-screencheck will return the current configuration.</p>
</li>
<li><p>When I call <code>openBrowser</code> the viewport size is 1440 x 900. Why is this happening?</p>
<p>taiko-screencheck overrides the built in <code>openBrowser()</code> command by adding a call to <code>setViewPort()</code> that matches the headless mode viewport. This feature mitigates the need to rewrite test scripts written in headed mode that later run in headless mode. If you don't want this behaviour, you can add a second boolean parameter to <code>openBrowser(options, true)</code> to force use of the original <code>openBrowser</code> command which will have a viewport "appropriate" for your desktop display.</p>
</li>
</ol>
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
<h2>Contributing</h2>
</a>
<p>Clone the git repository and use the <code>_test_harness</code> subdirectory to test the plugin in the taiko environment. The repository includes a Visual Studio Code configuration for debugging in a taiko context.</p>
<pre><code class="language-bash">git <span class="hljs-built_in">clone</span> https://github.com/dcdc-io/taiko-screencheck
<span class="hljs-built_in">cd</span> taiko-screencheck
npm install
npm run build
npm run <span class="hljs-built_in">test</span></code></pre>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_screencheck_.html">"<wbr>Screen<wbr>Check"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
<li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>