cypress-example-kitchensink

<!DOCTYPE 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 Copyright (c) 2016"> <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/fixtures">Fixtures</a></li> <li><a href="/commands/local-storage">Local Storage</a></li> <li><a href="/commands/cookies">Cookies</a></li> </ul> </li> <li><a href="/utilities">Utilities</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Cypress API <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/cypress-api/config">config</a></li> <li><a href="/cypress-api/env">env</a></li> <li><a href="/cypress-api/commands">Commands</a></li> <li><a href="/cypress-api/cookies">Cookies</a></li> <li><a href="/cypress-api/dom">Dom</a></li> <li><a href="/cypress-api/server">Server</a></li> </ul> </ul> </div> </div> </nav> <div class="banner"> <div class="container"> <h1>Utilities</h1> <p>Examples of the use of methods from other commonly used libraries in Cypress, for a full reference of commands, go to <a href="https://on.cypress.io/api" target="_blank">docs.cypress.io</a> </p> </div> </div> <div class="container content-container"> <div> <div class="row"> <div class="col-xs-12"> <h4>Cypress._.method()</h4> <p>To call an underscore method, use the <a href="https://on.cypress.io/api/cypress-underscore"><code>Cypress._.method()</code></a> command.</p> <pre><code class="javascript">cy // use the _.chain, _.pluck, _.first, and _.value functions // http://on.cypress.io/api/cypress-underscore .request('http://jsonplaceholder.typicode.com/users').then(function(response){ var _ = Cypress._ var ids = _.chain(response.body).pluck("id").first(3).value() expect(ids).to.deep.eq([1, 2, 3]) })</code></pre> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>Cypress.$(selector)</h4> <p>To call a jQuery method, use the <a href="https://on.cypress.io/api/cypress-jquery"><code>Cypress.$(selector)</code></a> command.</p> <pre><code class="javascript">var $li = Cypress.$(".utility-jquery li:first") cy .wrap($li) .should("not.have.class", "active") .click() .should("have.class", "active")</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="list-group utility-jquery"> <li class="list-group-item"> <span class="badge">5</span> Watches </li> <li class="list-group-item"> <span class="badge">14</span> Sweaters </li> <li class="list-group-item"> <span class="badge">22</span> Scarves </li> </ul> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>Cypress.moment()</h4> <p>To parse or format a date using a moment method, use the <a href="https://on.cypress.io/api/cypress-moment"><code>Cypress.moment()</code></a> command.</p> <pre><code class="javascript">var time = Cypress.moment('2014-04-25T19:38:53.196Z').format('h:mm A') cy.get('.utility-moment').contains(time)</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="utility-moment"> Posted at <span class="badge badge-primary">3:38 PM</span> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>Cypress.Blob.method()</h4> <p>To work with blobs, convert strings, and other utility functions, use the <a href="https://on.cypress.io/api/cypress-blob"><code>Cypress.Blob.method()</code></a> command.</p> <pre><code class="javascript">// get the dataUrl string for the javascript-logo // https://github.com/nolanlawson/blob-util#imgSrcToDataURL return Cypress.Blob.imgSrcToDataURL( '/assets/img/javascript-logo.png', undefined, 'anonymous' ).then(function(dataUrl){ // create an <img> element and set its src to the dataUrl var img = Cypress.$('<img />', {src: dataUrl}) // need to explicitly return cy here since we are initially returning // the Cypress.Blog.imgSrcToDataURL promise to our test return cy .get('.utility-blob').then(function($div){ // append the image $div.append(img) }) .get('.utility-blob img') .click() .should('have.attr', 'src', dataUrl) })</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="utility-blob"></div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-12"> <h4>new Cypress.Promise(function)</h4> <p>To instantiate a new bluebird promise, use the <a href="https://on.cypress.io/api/cypress-promise"><code>new Cypress.Promise(function)</code></a> command.</p> <pre><code class="javascript">var waited = false function waitOneSecond(){ // return a promise that resolves after 1 second return new Cypress.Promise(function(resolve, reject){ setTimeout(function(){ // set waited to true waited = true // resolve with 'foo' string resolve("foo") }, 1000) }) } cy .then(function(){ // return a promise to cy.then() that // is awaited until it resolves return waitOneSecond().then(function(str){ expect(str).to.eq("foo") expect(waited).to.be.true }) })</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>