<!DOCTYPE html>

<html itemscope itemtype="https://schema.org/WebPage" lang="en">

<head>

<meta charset="utf-8">

<meta content="IE=edge" http-equiv="X-UA-Compatible">

<meta content="width=device-width, initial-scale=1" name="viewport">

<link href="/rules_nodejs/Cypress.html" rel="canonical">

<link href="" rel="shortcut icon" type="image/png">

<title>rules_nodejs - Cypress</title>

<!-- Webfont -->

<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet">

<!-- Bootstrap -->

<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">

<!-- Font Awesome -->

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<!-- Custom stylesheet -->

<link href="/rules_nodejs/css/main.css" rel="stylesheet">

<!-- metadata -->

<meta content="rules_nodejs" name="og:title"/>

<meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav">

<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"

type="button">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="/rules_nodejs/">

<img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg">

</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box">

<div class="form-group">

<input type="hidden" name="cx" value="2735dc72dd157bd19">

<input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search">

</div>

</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

<div class="container vpad">

<div class="row">

<div class="col-md-2">

<a aria-controls="sidebar-nav"

aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse"

href="#sidebar-nav">

<i class="glyphicon glyphicon-menu-hamburger"></i> Navigation

</a>

<nav class="sidebar collapse" id="sidebar-nav">

<select onchange="location.href=this.value">

<option selected disabled hidden>Version: 3.x</option>

<option value="/rules_nodejs/Cypress.html">3.x</option>

<option value="https://docs.aspect.dev/rules_nodejs/Cypress.html">2.3</option>

</select>

<h3>rules_nodejs</h3>

<ul class="sidebar-nav">

<li><a href="/rules_nodejs/">Introduction</a></li>

<li><a href="install.html">Installation</a></li>

<li><a href="repositories.html">Repositories</a></li>

<li><a href="dependencies.html">Dependencies</a></li>

<li><a href="debugging.html">Debugging</a></li>

<li><a href="stamping.html">Stamping</a></li>

<li><a href="changing-rules.html">Making changes to rules_nodejs</a></li>

<li><a href="examples.html">Examples</a></li>

</ul>

<h3>Rules</h3>

<ul class="sidebar-nav">

<li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li>

<li><a href="/rules_nodejs/Concatjs.html">Concatjs</a></li>

<li><a href="/rules_nodejs/Cypress.html">Cypress</a></li>

<li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li>

<li><a href="/rules_nodejs/Labs.html">Labs</a></li>

<li><a href="/rules_nodejs/Protractor.html">Protractor</a></li>

<li><a href="/rules_nodejs/Rollup.html">Rollup</a></li>

<li><a href="/rules_nodejs/Terser.html">Terser</a></li>

<li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li>

<li><a href="/rules_nodejs/esbuild.html">esbuild</a></li>

</ul>

<h3>Community</h3>

<ul class="sidebar-nav">

<li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to

rules_nodejs</a></li>

<li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li>

<li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li>

<li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li>

</ul>

</nav>

</div>

<div class="col-md-8">

<div class="content">

<!-- *********************

DO NOT EDIT THIS FILE

It is a generated build output from Stardoc.

Instead you must edit the .bzl file where the rules are declared,

or possibly a markdown file next to the .bzl file

********************* -->

<h1 id="cypress-rules-for-bazel">Cypress rules for Bazel</h1>

<p>The Cypress rules run tests under the Cypress e2e testing framework with Bazel.</p>

<h2 id="installation">Installation</h2>

<p>Add <code class="language-plaintext highlighter-rouge">@bazel/cypress</code> and <code class="language-plaintext highlighter-rouge">cypress</code> npm packages to your <code class="language-plaintext highlighter-rouge">devDependencies</code> in <code class="language-plaintext highlighter-rouge">package.json</code>.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install --save-dev @bazel/cypress cypress

</code></pre></div></div>

<p>or using yarn</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>yarn add -D @bazel/cypress cypress

</code></pre></div></div>

<p>Then, load and invoke <code class="language-plaintext highlighter-rouge">cypress_repository</code> within your <code class="language-plaintext highlighter-rouge">WORKSPACE</code> file.</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Assuming your external repository for node_modules is named @npm

</span>

<span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/cypress:index.bzl"</span><span class="p">,</span> <span class="s">"cypress_repository"</span><span class="p">)</span>

<span class="c1"># The name you pass here names the external repository you can load cypress_web_test from

</span><span class="n">cypress_repository</span><span class="p">(</span><span class="n">name</span> <span class="o">=</span> <span class="s">"cypress"</span><span class="p">)</span>

</code></pre></div></div>

<h3 id="macos-install-requirements">macOS install requirements</h3>

<p>On macOS, <code class="language-plaintext highlighter-rouge">cypress_repository</code> generates an external repository containing files whose names contain spaces. In order to make these files compatible with bazel you will need to add the following flag to your <code class="language-plaintext highlighter-rouge">.bazelrc</code> file:</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Required for cypress_repository on macOS

</span><span class="n">build</span> <span class="o">--</span><span class="n">experimental_inprocess_symlink_creation</span>

</code></pre></div></div>

<h3 id="windows-install-requirements">windows install requirements</h3>

<p>At this point in time, <code class="language-plaintext highlighter-rouge">cypress_repository</code> is incompatible with bazel sandboxing on Windows. This may change in the future, but for now using cypress on windows requires windows sandboxing be disabled (it is disabled by default)</p>

<h2 id="example-use-of-cypress_web_test">Example use of cypress_web_test</h2>

<p>This example assumes you’ve named your external repository for node_modules as <code class="language-plaintext highlighter-rouge">npm</code> and for cypress as <code class="language-plaintext highlighter-rouge">cypress</code></p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@cypress//:index.bzl"</span><span class="p">,</span> <span class="s">"cypress_web_test"</span><span class="p">)</span>

<span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">)</span>

<span class="c1"># You must create a cypress plugin in order to boot a server to serve your application. It can be written as a javascript file or in typescript using ts_library or ts_project.

</span><span class="n">ts_library</span><span class="p">(</span>

<span class="n">name</span> <span class="o">=</span> <span class="s">"plugins_file"</span><span class="p">,</span>

<span class="n">testonly</span> <span class="o">=</span> <span class="bp">True</span><span class="p">,</span>

<span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"plugin.ts"</span><span class="p">],</span>

<span class="n">tsconfig</span> <span class="o">=</span> <span class="s">":tsconfig.json"</span><span class="p">,</span>

<span class="n">deps</span> <span class="o">=</span> <span class="p">[</span>

<span class="s">"@npm//@types/node"</span><span class="p">,</span>

<span class="s">"@npm//express"</span><span class="p">,</span>

<span class="p">],</span>

<span class="p">)</span>

<span class="c1"># You can write your cypress tests a javascript files or in typescript using ts_library or ts_project.

</span><span class="n">ts_library</span><span class="p">(</span>

<span class="n">name</span> <span class="o">=</span> <span class="s">"hello_spec"</span><span class="p">,</span>

<span class="n">testonly</span> <span class="o">=</span> <span class="bp">True</span><span class="p">,</span>

<span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"hello.spec.ts"</span><span class="p">],</span>

<span class="n">tsconfig</span> <span class="o">=</span> <span class="s">":tsconfig.json"</span><span class="p">,</span>

<span class="n">deps</span> <span class="o">=</span> <span class="p">[</span>

<span class="s">"@npm//cypress"</span><span class="p">,</span>

<span class="p">],</span>

<span class="p">)</span>

<span class="n">cypress_web_test</span><span class="p">(</span>

<span class="c1"># The name of your test target

</span> <span class="n">name</span> <span class="o">=</span> <span class="s">"test"</span><span class="p">,</span>

<span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span>

<span class="c1"># Load javascript test files directly as sources

</span> <span class="s">"world.spec.js"</span><span class="p">,</span>

<span class="c1"># Load ts_library tests as a target to srcs

</span> <span class="s">":hello_spec"</span><span class="p">,</span>

<span class="p">],</span>

<span class="c1"># A cypress config file is required

</span> <span class="n">config_file</span> <span class="o">=</span> <span class="s">"cypress.json"</span><span class="p">,</span>

<span class="c1"># Any runtime dependencies you need to boot your server or run your tests

</span> <span class="n">data</span> <span class="o">=</span> <span class="p">[],</span>

<span class="c1"># Your cypress plugin used to configure cypress and boot your server

</span> <span class="n">plugins_file</span> <span class="o">=</span> <span class="s">":plugins_file"</span><span class="p">,</span>

<span class="p">)</span>

</code></pre></div></div>

<h2 id="cypress_repository">cypress_repository</h2>

<p><strong>USAGE</strong></p>

<pre>

cypress_repository(<a href="#cypress_repository-name">name</a>, <a href="#cypress_repository-cypress_bin">cypress_bin</a>, <a href="#cypress_repository-fail_on_error">fail_on_error</a>, <a href="#cypress_repository-quiet">quiet</a>, <a href="#cypress_repository-repo_mapping">repo_mapping</a>)

</pre>

<p><strong>ATTRIBUTES</strong></p>

<h4 id="cypress_repository-name">name</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this repository.</p>

<h4 id="cypress_repository-cypress_bin">cypress_bin</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></em>): bazel target of the cypress binary</p>

<p>Defaults to <code class="language-plaintext highlighter-rouge">@npm//:node_modules/cypress/bin/cypress</code></p>

<h4 id="cypress_repository-fail_on_error">fail_on_error</h4>

<p>(<em>Boolean</em>): If the repository rule should allow errors</p>

<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>

<h4 id="cypress_repository-quiet">quiet</h4>

<p>(<em>Boolean</em>): If stdout and stderr should be printed to the terminal</p>

<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>

<h4 id="cypress_repository-repo_mapping">repo_mapping</h4>

<p>(<em><a href="https://bazel.build/docs/skylark/lib/dict.html">Dictionary: String -&gt; String</a>, mandatory</em>): A dictionary from local repository name to global repository name. This allows controls over workspace dependency resolution for dependencies of this repository.&lt;p&gt;For example, an entry <code class="language-plaintext highlighter-rouge">"@foo": "@bar"</code> declares that, for any time this repository depends on <code class="language-plaintext highlighter-rouge">@foo</code> (such as a dependency on <code class="language-plaintext highlighter-rouge">@foo//some:target</code>, it should actually resolve that dependency within globally-declared <code class="language-plaintext highlighter-rouge">@bar</code> (<code class="language-plaintext highlighter-rouge">@bar//some:target</code>).</p>

</div>

</div>

<div class="col-md-2 sticky-sidebar">

<div class="right-sidebar">

<ul class="gh-links">

<li>

<i class="fa fa-github"></i>

<a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: Cypress&labels=question/docs">Create

issue</a>

</li>

</ul>

<ul id="toc" class="section-nav">

<li class="toc-entry toc-h2"><a href="#installation">Installation</a>

<ul>

<li class="toc-entry toc-h3"><a href="#macos-install-requirements">macOS install requirements</a></li>

<li class="toc-entry toc-h3"><a href="#windows-install-requirements">windows install requirements</a></li>

</ul>

</li>

<li class="toc-entry toc-h2"><a href="#example-use-of-cypress_web_test">Example use of cypress_web_test</a></li>

<li class="toc-entry toc-h2"><a href="#cypress_repository">cypress_repository</a></li>

</ul>

</div>

</div>

</div>

</div>

<footer class="footer">

<div class="container">

<div class="row">

<div class="col-lg-8">

<p class="text-muted">&copy; 2021 The rules_nodejs authors</p>

</div>

</div>

</div>

</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script crossorigin="anonymous"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Anchor JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.min.js" type="text/javascript"></script>

<script>

// Automatically add anchors and links to all header elements that don't already have them.

anchors.options = { placement: 'left' };

anchors.add();

</script>

<script>

var shiftWindow = function () {

if (location.hash.length !== 0) {

window.scrollBy(0, -50);

}

};

window.addEventListener("hashchange", shiftWindow);

var highlightCurrentSidebarNav = function () {

var href = location.pathname;

var item = $('#sidebar-nav [href$="' + href + '"]');

if (item) {

var li = item.parent();

li.addClass("active");

if (li.parent() && li.parent().is("ul")) {

do {

var ul = li.parent();

if (ul.hasClass("collapse")) {

ul.collapse("show");

}

li = ul.parent();

} while (li && li.is("li"));

}

}

};

$(document).ready(function () {

// Scroll to anchor of location hash, adjusted for fixed navbar.

window.setTimeout(function () {

shiftWindow();

}, 1);

// Flip the caret when submenu toggles are clicked.

$(".sidebar-submenu").on("show.bs.collapse", function () {

var toggle = $('[href$="#' + $(this).attr('id') + '"]');

if (toggle) {

toggle.addClass("dropup");

}

});

$(".sidebar-submenu").on("hide.bs.collapse", function () {

var toggle = $('[href$="#' + $(this).attr('id') + '"]');

if (toggle) {

toggle.removeClass("dropup");

}

});

// Highlight the current page on the sidebar nav.

highlightCurrentSidebarNav();

});

</script>

</body>

</html>