cypress-example-kitchensink
Version:
This is an example app used to showcase Cypress.io testing. For a full reference of our documentation, go to https://docs.cypress.io
472 lines (431 loc) • 18.4 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="active" 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 class="active"><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><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>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 id="children"><a href="https://on.cypress.io/children">.children()</a></h4>
<p>To get children of DOM elements, use the <a href="https://on.cypress.io/children"><code>.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 id="closest"><a href="https://on.cypress.io/closest">.closest()</a></h4>
<p>To get the closest ancestor DOM element, use the <a href="https://on.cypress.io/closest"><code>.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 id="eq"><a href="https://on.cypress.io/eq">.eq()</a></h4>
<p>To get a DOM element at a specific index, use the <a href="https://on.cypress.io/eq"><code>.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 id="filter"><a href="https://on.cypress.io/filter">.filter()</a></h4>
<p>To get DOM elements that match a specific selector, use the <a href="https://on.cypress.io/filter"><code>.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 id="find"><a href="https://on.cypress.io/find">.find()</a></h4>
<p>To get descendant DOM elements of the selector, use the <a href="https://on.cypress.io/api/find"><code>.find()</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 id="first"><a href="https://on.cypress.io/first">.first()</a></h4>
<p>To get the first DOM element within elements, use the <a href="https://on.cypress.io/first"><code>.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 id="last"><a href="https://on.cypress.io/last">.last()</a></h4>
<p>To get the last DOM element within elements, use the <a href="https://on.cypress.io/last"><code>.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 id="next"><a href="https://on.cypress.io/next">.next()</a></h4>
<p>To get the next sibling DOM element within elements, use the <a href="https://on.cypress.io/next"><code>.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 id="nextAll"><a href="https://on.cypress.io/nextall">.nextAll()</a></h4>
<p>To get all of the next sibling DOM elements within elements, use the <a href="https://on.cypress.io/nextall"><code>.nextAll()</code></a> command.</p>
<pre><code class="javascript">cy.get('.traversal-next-all')
.contains('oranges')
.nextAll().should('have.length', 3)</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="traversal-next-all">
<li>apples</li>
<li class="second">oranges</li>
<li>bananas</li>
<li>pineapples</li>
<li>grapes</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="nextUntil"><a href="https://on.cypress.io/nextuntil">.nextUntil()</a></h4>
<p>To get all of the next sibling DOM elements within elements until another element, use the <a href="https://on.cypress.io/nextuntil"><code>.nextUntil()</code></a> command.</p>
<pre><code class="javascript">cy.get('#veggies')
.nextUntil('#nuts').should('have.length', 3)</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="healthy-foods">
<li id="fruits" class="header">Fruits</li>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
<li id="veggies" class="header">Vegetables</li>
<li>cucumbers</li>
<li>carrots</li>
<li>corn</li>
<li id="nuts" class="header">Nuts</li>
<li>walnuts</li>
<li>cashews</li>
<li>almonds</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="not"><a href="https://on.cypress.io/not">.not()</a></h4>
<p>To remove DOM element(s) from the set of elements, use the <a href="https://on.cypress.io/not"><code>.not()</code></a> command.</p>
<pre><code class="javascript">cy.get('.traversal-disabled .btn')
.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 id="parent"><a href="https://on.cypress.io/parent">.parent()</a></h4>
<p>To get parent DOM element of elements, use the <a href="https://on.cypress.io/parent"><code>.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 id="parents"><a href="https://on.cypress.io/parents">.parents()</a></h4>
<p>To get parents DOM element of elements, use the <a href="https://on.cypress.io/parents"><code>.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 id="parentsUntil"><a href="https://on.cypress.io/parentsuntil">.parentsUntil()</a></h4>
<p>To get parents DOM element of elements until other element, use the <a href="https://on.cypress.io/parentsuntil"><code>.parentsUntil()</code></a> command.</p>
<pre><code class="javascript">cy.get('.clothes-nav')
.find('.active')
.parentsUntil('.clothes-nav')
.should('have.length', 2)</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="nav clothes-nav">
<li>
<a href="#">Clothes</a>
<ul class="menu">
<li>
<a href="/shirts">Shirts</a>
</li>
<li class="active">
<a href="/pants">Pants</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="prev"><a href="https://on.cypress.io/prev">.prev()</a></h4>
<p>To get the previous sibling DOM element within elements, use the <a href="https://on.cypress.io/prev"><code>.prev()</code></a> command.</p>
<pre><code class="javascript">cy.get('.birds').find('.active')
.prev().should('contain', 'Lorikeets')</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="birds list-group">
<li class="list-group-item">Cockatiels</li>
<li class="list-group-item">Lorikeets</li>
<li class="list-group-item active">Cockatoos</li>
<li class="list-group-item">Conures</li>
<li class="list-group-item">Eclectus</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="prevAll"><a href="https://on.cypress.io/prevall">.prevAll()</a></h4>
<p>To get all previous sibling DOM elements within elements, use the <a href="https://on.cypress.io/prevall"><code>.prevAll()</code></a> command.</p>
<pre><code class="javascript">cy.get('.fruits-list').find('.third')
.prevAll().should('have.length', 2)</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="fruits-list">
<li>apples</li>
<li>oranges</li>
<li class="third">bananas</li>
<li>pineapples</li>
<li>grapes</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="prevUntil"><a href="https://on.cypress.io/prevuntil">.prevUntil()</a></h4>
<p>To get all previous sibling DOM elements within elements until other element, use the <a href="https://on.cypress.io/prevuntil"><code>.prevUntil()</code></a> command.</p>
<pre><code class="javascript">cy.get('.foods-list').find('#nuts')
.prevUntil('#veggies').should('have.length', 3)</code></pre>
</div>
<div class="col-xs-5">
<div class="well">
<ul class="foods-list">
<li id="fruits" class="header">Fruits</li>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
<li id="veggies" class="header">Vegetables</li>
<li>cucumbers</li>
<li>carrots</li>
<li>corn</li>
<li id="nuts" class="header">Nuts</li>
<li>walnuts</li>
<li>cashews</li>
<li>almonds</li>
</ul>
</div>
</div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-7">
<h4 id="siblings"><a href="https://on.cypress.io/siblings">.siblings()</a></h4>
<p>To get all sibling DOM elements of elements, use the <a href="https://on.cypress.io/siblings"><code>.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>