cypress-example-kitchensink
Version:
This is an example app used to showcase Cypress.io End-to-End (E2E) testing. For a full reference of our documentation, go to https://docs.cypress.io
218 lines (183 loc) • 9.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Kitchen Sink | Cypress Example">
<meta name="author" content="Cypress.io">
<meta name="copyright" content="Cypress.io, Inc">
<title>Cypress.io: Kitchen Sink</title>
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/vendor/fira.css">
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">cypress.io</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Commands <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/commands/querying">Querying</a></li>
<li><a href="/commands/traversal">Traversal</a></li>
<li><a href="/commands/actions">Actions</a></li>
<li><a href="/commands/window">Window</a></li>
<li><a href="/commands/viewport">Viewport</a></li>
<li><a href="/commands/location">Location</a></li>
<li><a href="/commands/navigation">Navigation</a></li>
<li><a href="/commands/assertions">Assertions</a></li>
<li><a href="/commands/misc">Misc</a></li>
<li><a href="/commands/connectors">Connectors</a></li>
<li><a href="/commands/aliasing">Aliasing</a></li>
<li><a href="/commands/waiting">Waiting</a></li>
<li><a href="/commands/network-requests">Network Requests</a></li>
<li><a href="/commands/files">Files</a></li>
<li><a href="/commands/storage">Storage</a></li>
<li><a href="/commands/cookies">Cookies</a></li>
<li><a href="/commands/spies-stubs-clocks">Spies, Stubs & Clocks</a></li>
</ul>
</li>
<li><a href="/utilities">Utilities</a></li>
<li class="active"><a href="/cypress-api">Cypress API</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="https://github.com/cypress-io/cypress-example-kitchensink">GitHub</a></li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<div class="container">
<h1>Cypress API</h1>
<p>Examples of uses of the Cypress API, for a full reference, go to <a href="https://on.cypress.io/custom-commands" target="_blank">docs.cypress.io</a>
</p>
</div>
</div>
<div class="container content-container">
<div id="api-commands">
<div class="row">
<div class="col-xs-12">
<h4 id="Commands.add"><a href="https://on.cypress.io/custom-commands">Cypress.Commands.add()</a></h4>
<p>To add a command, use <a href="https://on.cypress.io/custom-commands"><code>Cypress.Commands.add()</code></a>.</p>
<pre><code class="javascript">Cypress.Commands.add('console', {
prevSubject: true,
}, (subject, method) => {
method = method || 'log'
// log the subject to the console
console[method]('The subject is', subject)
return subject</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="Cookies.debug"><a href="https://on.cypress.io/cookies">Cypress.Cookies.debug()</a></h4>
<p>To enable or disable cookie debugging, use <a href="https://on.cypress.io/cookies"><code>Cypress.Cookies.debug()</code></a>.</p>
<pre><code class="javascript">// Cypress will now log in the console when
// cookies are set or removed
Cypress.Cookies.debug(true)
cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')
</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="arch"><a href="https://on.cypress.io/arch">Cypress.arch</a></h4>
<p>To get CPU architecture name of underlying OS, use <a href="https://on.cypress.io/arch"><code>Cypress.arch</code></a>.</p>
<pre><code class="javascript">expect(Cypress.arch).to.exist</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="config"><a href="https://on.cypress.io/config">Cypress.config()</a></h4>
<p>To get or set configuration options, use <a href="https://on.cypress.io/config"><code>Cypress.config()</code></a>.</p>
<pre><code class="javascript">var myConfig = Cypress.config()
expect(myConfig).to.have.property('animationDistanceThreshold', 5)
expect(myConfig).to.have.property('baseUrl', null)
expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
expect(myConfig).to.have.property('requestTimeout', 5000)
expect(myConfig).to.have.property('responseTimeout', 30000)
expect(myConfig).to.have.property('viewportHeight', 660)
expect(myConfig).to.have.property('viewportWidth', 1000)
expect(myConfig).to.have.property('pageLoadTimeout', 60000)
expect(myConfig).to.have.property('waitForAnimations', true)
expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
Cypress.config('pageLoadTimeout', 20000)
expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
Cypress.config('pageLoadTimeout', 60000)
</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="dom.isHidden"><a href="https://on.cypress.io/dom">Cypress.dom.isHidden()</a></h4>
<p>To see whether a DOM element is hidden, use <a href="https://on.cypress.io/dom"><code>Cypress.dom.isHidden()</code></a>.</p>
<pre><code class="javascript">let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
let visibleP = Cypress.$('.dom-p p.visible').get(0)
// our first paragraph has css class 'hidden'
expect(Cypress.dom.isHidden(hiddenP)).to.be.true
expect(Cypress.dom.isHidden(visibleP)).to.be.false</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<div class="dom-p">
<p class="hidden">I'm hiding!</p>
<p class="visible">I'm visible!</p>
</div>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="env"><a href="https://on.cypress.io/env">Cypress.expose()</a></h4>
<p>To get or set public configuration in your tests, use <a href="https://on.cypress.io/env"><code>Cypress.expose()</code></a>.</p>
<pre><code class="javascript">// set multiple environment variables
Cypress.expose({
host: 'veronica.dev.local',
api_server: 'http://localhost:8888/v1/',
})
// get environment variable
expect(Cypress.expose('host')).to.eq('veronica.dev.local')
// set environment variable
Cypress.expose('api_server', 'http://localhost:8888/v2/')
expect(Cypress.expose('api_server')).to.eq('http://localhost:8888/v2/')
// get all environment variable
expect(Cypress.expose()).to.have.property('host', 'veronica.dev.local')
expect(Cypress.expose()).to.have.property('api_server', 'http://localhost:8888/v2/')</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="log">Cypress.log()</h4>
<p>To control what is printed to the Command Log <a href="https://on.cypress.io/cypress-log"><code>Cypress.log()</code></a>.</p>
<pre><code class="javascript"></code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="platform"><a href="https://on.cypress.io/platform">Cypress.platform</a></h4>
<p>To get name of underlying OS, use <a href="https://on.cypress.io/platform"><code>Cypress.platform</code></a>.</p>
<pre><code class="javascript">expect(Cypress.platform).to.exist</code></pre>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-12">
<h4 id="version"><a href="https://on.cypress.io/version">Cypress.version</a></h4>
<p>To get version of Cypress being run, use <a href="https://on.cypress.io/version"><code>Cypress.version</code></a>.</p>
<pre><code class="javascript">expect(Cypress.version).to.exist</code></pre>
</div>
<div class="col-xs-12"><hr></div>
</div>
</div>
</div>
<script src="/assets/js/vendor/jquery-1.12.0.min.js"></script>
<script src="/assets/js/vendor/bootstrap.min.js"></script>
<script src="/assets/js/vendor/highlight.pack.js"></script>
<script src="/assets/js/scripts.js"></script>
</body>
</html>