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>Actions</h1> <p>Examples of actions being performed on 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="actions"> <div class="row"> <div class="col-xs-7"> <h4>cy.type()</h4> <p>To type into a DOM element, use the <a href="https://on.cypress.io/api/type"><code>cy.type()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-email') .type('fake@email.com').should('have.value', 'fake@email.com') // cy.type() may include special character sequences .type('{leftarrow}{leftarrow}{del}{del}{selectall}{backspace}') // Delay each keypress by 0.1 sec .type('slow.typing@email.com', {delay: 100}).should('have.value', 'slow.typing@email.com') .get('.action-disabled') // Ignore error checking prior to type // like whether the input is visible or disabled .type('disabled error checking', {force: true}) .should('have.value', 'disabled error checking')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <div class="form-group"> <label for="email1">Email address</label> <input type="email" class="form-control action-email" id="email1" placeholder="Email"> </div> <div class="form-group"> <label>Disabled Textarea</label> <textarea class="form-control action-disabled" disabled="disabled"></textarea> </div> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.focus()</h4> <p>To focus on a DOM element, use the <a href="https://on.cypress.io/api/focus"><code>cy.focus()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-focus').focus().should('have.class', 'focus') .prev().should('have.attr', 'style', 'color: orange;')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <div class="form-group"> <label for="password1">Password</label> <input type="password" class="form-control action-focus" id="password1" placeholder="Password"> </div> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.blur()</h4> <p>To blur on a DOM element, use the <a href="https://on.cypress.io/api/blur"><code>cy.blur()</code></a> command.</p> <pre><code class="javascript"> cy .get('.action-blur').type('I\'m about to blur').blur() .should('have.class', 'error') .prev().should('have.attr', 'style', 'color: red;')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <div class="form-group"> <label for="fullName1">Full Name</label> <input type="text" class="form-control action-blur" id="fullName1" placeholder="Enter your name"> </div> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.clear()</h4> <p>To clear on a DOM element, use the <a href="https://on.cypress.io/api/clear"><code>cy.clear()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-clear').type('We are going to clear this text') .should('have.value', 'We are going to clear this text') .clear() .should('have.value', '')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <div class="form-group"> <label for="description">Describe:</label> <input type="text" class="form-control action-clear" id="description"> </div> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.submit()</h4> <p>To submit a form, use the <a href="https://on.cypress.io/api/submit"><code>cy.submit()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-form') .find('[type="text"]').type('HALFOFF') .get('.action-form').submit() .next().should('contain', "Your form has been submitted!")</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form class="action-form"> <div class="form-group"> <label for="couponCode1" val="HALFOFF">Coupon Code</label> <input type="text" class="form-control" id="couponCode1"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.click()</h4> <p>To click a DOM element, use the <a href="https://on.cypress.io/api/click"><code>cy.click()</code></a> command.</p> <pre><code class="javascript">cy.get('.action-btn').click() cy.get('#action-canvas').click() // click the top left corner of the element cy.get('#action-canvas').click('topLeft') // click the top right corner of the element cy.get('#action-canvas').click('topRight') // click the bottom left corner of the element cy.get('#action-canvas').click('bottomLeft') // click the bottom right corner of the element cy.get('#action-canvas').click('bottomRight') // **** Click Coordinate **** // // cy.click() accepts an x and y coordinate // that controls where the click occurs :) cy .get('#action-canvas') // click 80px on x coord and 75px on y coord .click(80, 75) .click(170, 75) .click(80, 165) .click(100, 185) .click(125, 190) .click(150, 185) .click(170, 165) // click multiple elements by passing multiple: true // otherwise an error will be thrown if multiple // elements are the subject of cy.click cy.get('.action-labels>.label').click({multiple: true}) // Ignore error checking prior to clicking // like whether the element is visible, clickable or disabled // this button below is covered by another element. cy.get('.action-opacity>.btn').click({force: true})</code></pre> </div> <div class="col-xs-5"> <div class="well"> <button type="button" class="btn btn-lg btn-danger action-btn" data-toggle="popover" title="Popover" data-placement="top" data-content="This popover shows up on click">Click to toggle popover</button> <hr> <h6>Canvas to Illustrate Click Positions</h6> <canvas width="250" height="250" id="action-canvas"></canvas> <hr> <div class="action-labels"> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">click me</span> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span> <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span> </div> <hr> <div class="action-opacity"> <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" data-placement="left" data-content="This popover shows up because we forced the click on the button">I'm being covered</button> <div class="opacity-cover"></div> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.dblclick()</h4> <p>To double click a DOM element, use the <a href="https://on.cypress.io/api/dblclick"><code>cy.dblclick()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-div').dblclick().should('not.be.visible') .get('.action-input-hidden').should('be.visible')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <div class="form-group"> <div class="action-div">Double click to edit</div> <input type="text" class="action-input-hidden hidden form-control" value="Double click to edit"> </div> </form> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.check()</h4> <p>To check a checkbox or radio, use the <a href="https://on.cypress.io/api/check"><code>cy.check()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked') .get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked') .get('.action-radios [type="radio"]').check('radio1').should('be.checked') .get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2']).should('be.checked') // Ignore error checking prior to checking // like whether the element is visible, clickable or disabled // this checkbox below is disabled. .get('.action-checkboxes [disabled]') .check({force: true}).should('be.checked') .get('.action-radios [type="radio"]').check('radio3', {force: true}).should('be.checked')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="action-checkboxes"> <div class="checkbox"> <label> <input type="checkbox" value="checkbox1"> Checkbox one has value "checkbox1" </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="checkbox2" disabled> Checkbox two is disabled </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkbox3"> Checkbox three has value "checkbox3" </label> </div> </div> <hr> <div class="action-multiple-checkboxes"> <div class="checkbox"> <label> <input type="checkbox" value="checkbox1"> Checkbox one has value "checkbox1" </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkbox2"> Checkbox two has value "checkbox2" </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkbox3"> Checkbox three has value "checkbox3" </label> </div> </div> <hr> <div class="action-radios"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="radio1"> Radio one has value "radio1" </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="radio2"> Radio two has value "radio2". When checked, it will uncheck Radio one. </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="radio3" disabled> Radio three is disabled </label> </div> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.uncheck()</h4> <p>To uncheck a checkbox or radio, use the <a href="https://on.cypress.io/api/uncheck"><code>cy.uncheck()</code></a> command.</p> <pre><code class="javascript">cy .get('.action-check [type="checkbox"]') .not('[disabled]') .uncheck().should('not.be.checked') .get('.action-check [type="checkbox"]') .check('checkbox1') .uncheck('checkbox1').should('not.be.checked') .get('.action-check [type="checkbox"]') .check(['checkbox1', 'checkbox3']) .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') // Ignore error checking prior to unchecking // like whether the element is visible, clickable or disabled // this checkbox below is disabled. .get('.action-check [disabled]') .uncheck({force: true}).should('not.be.checked')</code></pre> </div> <div class="col-xs-5"> <div class="well"> <div class="action-check"> <div class="checkbox"> <label> <input type="checkbox" value="checkbox1" checked> Checkbox one has value "checkbox1" </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="checkbox2" disabled checked> Checkbox two is disabled </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkbox3" checked> Checkbox three has value "checkbox3" </label> </div> </div> </div> </div> <div class="col-xs-12"><hr></div> <div class="col-xs-7"> <h4>cy.select()</h4> <p>To select an option in a <code>select</code>, use the <a href="https://on.cypress.io/api/select"><code>cy.select()</code></a> command.</p> <pre><code class="javascript">// Select the option with matching text content cy.get('.action-select').select('apples') // Select the option with matching value cy.get('.action-select').select('fr-bananas') // Select the options with matching text content cy.get('.action-select-multiple').select(['apples', 'oranges', 'bananas']) // Select the options with matching values cy.get('.action-select-multiple').select(['fr-apples', 'fr-oranges', 'fr-bananas'])</code></pre> </div> <div class="col-xs-5"> <div class="well"> <form> <select class="form-control action-select"> <option>--Select a fruit--</option> <option value="fr-apples">apples</option> <option value="fr-oranges">oranges</option> <option value="fr-bananas">bananas</option> </select> <select class="form-control action-select-multiple" multiple="true"> <option value="fr-apples">apples</option> <option value="fr-oranges">oranges</option> <option value="fr-bananas">bananas</option> </select> </form> </div> </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>