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>Traversal</h1> <p>Examples of traversing DOM elements 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 id="traversal" class="row"> <div class="col-xs-7"> <h4>cy.children()</h4> <p>To get children of DOM elements, use the <a href="https://on.cypress.io/api/children"><code>cy.children()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-breadcrumb').children('.active').should('contain', 'Data')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ol class="traversal-breadcrumb breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.closest()</h4> <p>To get the closest ancestor DOM element, use the <a href="https://on.cypress.io/api/closest"><code>cy.closest()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-badge').closest('ul').should('have.class', 'list-group')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Events </li> <li class="list-group-item"> <span class="badge traversal-badge">54</span> Friends </li> </ul> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.eq()</h4> <p>To get a DOM element at a specific index, use the <a href="https://on.cypress.io/api/eq"><code>cy.eq()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-list>li').eq(1).should('contain', 'siamese')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="traversal-list"> <li>tabby</li> <li>siamese</li> <li>persian</li> <li>sphynx</li> <li>burmese</li> </ul> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.filter()</h4> <p>To get DOM elements that match a specific selector, use the <a href="https://on.cypress.io/api/filter"><code>cy.filter()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-nav>li').filter('.active').should('contain', 'About')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="traversal-nav nav nav-tabs"> <li><a href="#">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="#">Services</a></li> </ul> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.find()</h4> <p>To get DOM elements that match a specific selector, use the <a href="https://on.cypress.io/api/filter"><code>cy.filter()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7)</code></pre> </div> <div class="col-xs-5"> <div class="well"> <nav> <ul class="pagination traversal-pagination"> <li> <a href="#"> <span>«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#"> <span>»</span> </a> </li> </ul> </nav> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.first()</h4> <p>To get the first DOM element within elements, use the <a href="https://on.cypress.io/api/first"><code>cy.first()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-table td').first().should('contain', '1')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <table class="table traversal-table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Jane</td> <td>Lane</td> </tr> <tr> <td>2</td> <td>John</td> <td>Doe</td> </tr> </tbody> </table> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.last()</h4> <p>To get the last DOM element within elements, use the <a href="https://on.cypress.io/api/last"><code>cy.last()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-buttons .btn').last().should('contain', 'Submit')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="traversal-buttons"> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.next()</h4> <p>To get the next sibling DOM element within elements, use the <a href="https://on.cypress.io/api/next"><code>cy.next()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="traversal-ul"> <li>apples</li> <li class="second">oranges</li> <li>bananas</li> </ul> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.not()</h4> <p>To remove DOM element(s) from the set of elements, use the <a href="https://on.cypress.io/api/not"><code>cy.not()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-disabled').not('[disabled]').should('not.contain', 'Disabled')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="traversal-disabled"> <button type="button" class="btn btn-default" disabled="disabled">Disabled</button> <button type="button" class="btn btn-default">Button</button> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.parent()</h4> <p>To get parent DOM element of elements, use the <a href="https://on.cypress.io/api/parent"><code>cy.parent()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-mark').parent().should('contain', 'Morbi leo risus')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <p>Morbi leo risus, porta ac consectetur ac, <mark class="traversal-mark">highlight</mark> vestibulum at eros.</p> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.parents()</h4> <p>To get parents DOM element of elements, use the <a href="https://on.cypress.io/api/parents"><code>cy.parents()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-cite').parents().should('match', 'blockquote')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <footer>Someone famous in <cite class="traversal-cite">Source Title</cite></footer> </blockquote> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.siblings()</h4> <p>To get all sibling DOM elements of elements, use the <a href="https://on.cypress.io/api/siblings"><code>cy.siblings()</code></a> command.</p> <pre><code class="javascript">cy.get('.traversal-pills .active').siblings().should('have.length', 2)</code></pre> </div> <div class="col-xs-5"> <div class="well"> <ul class="nav nav-pills traversal-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> </div> <div class="col-xs-12"><hr></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>