cypress-example-kitchensink
Advanced tools
cypress-example-kitchensink - npm Package Compare versions
Comparing version 0.7.0 to 0.7.1-dev.20170910.193949
@@ -80,2 +80,8 @@ // initialize highlight.js for JavaScript code highlighting | ||
| // listen to input range for trigger command | ||
| $('.trigger-input-range').on('change', (e) => { | ||
| const $range = $(e.target) | ||
| $range.next('p').text($range.val()) | ||
| }) | ||
| // begin: Handle our route listeners ------------- | ||
@@ -82,0 +88,0 @@ |
@@ -11,39 +11,18 @@ // | ||
| // **** Test Structure **** | ||
| // | ||
| // Cypress has adopted Mocha's bdd syntax. | ||
| // https://on.cypress.io/guides/bundled-tools#section-mocha | ||
| // | ||
| // Please read our "Introduction to Cypress" | ||
| // https://on.cypress.io/introduction-to-cypress | ||
| describe('Kitchen Sink', function(){ | ||
| it('.should() - assert that <title> is correct', function(){ | ||
| beforeEach(function(){ | ||
| // **** Resetting State Before Each Test **** | ||
| // | ||
| // Visiting our app before each test | ||
| // removes any state build up from | ||
| // previous tests. Visiting acts as if | ||
| // we closed a tab and opened a fresh one | ||
| // | ||
| // By default Cypress also automatically | ||
| // clears the Local Storage and Cookies | ||
| // before each test. | ||
| }) | ||
| it('cy.should - assert that <title> is correct', function(){ | ||
| // https://on.cypress.io/api/visit | ||
| // https://on.cypress.io/visit | ||
| cy.visit('http://localhost:8080') | ||
| // **** Making Assertions **** | ||
| // | ||
| // Here we've made our first assertion using a 'cy.should()' command. | ||
| // Here we've made our first assertion using a '.should()' command. | ||
| // An assertion is comprised of a chainer, subject, and optional value. | ||
| // Chainers are available from Chai, Chai-jQuery, and Chai-Sinon. | ||
| // https://on.cypress.io/guides/making-assertions | ||
| // | ||
| // https://on.cypress.io/api/should | ||
| // https://on.cypress.io/api/and | ||
| // https://on.cypress.io/api/title | ||
| // https://on.cypress.io/should | ||
| // https://on.cypress.io/and | ||
| // https://on.cypress.io/title | ||
| cy.title().should('include', 'Kitchen Sink') | ||
@@ -56,7 +35,7 @@ // ↲ ↲ ↲ | ||
| beforeEach(function(){ | ||
| // Visiting our app before each test removes any state build up from | ||
| // previous tests. Visiting acts as if we closed a tab and opened a fresh one | ||
| cy.visit('http://localhost:8080/commands/querying') | ||
| }) | ||
| // **** Querying DOM Elements **** | ||
| // | ||
| // Let's query for some DOM elements and make assertions | ||
@@ -67,8 +46,8 @@ // The most commonly used query is 'cy.get()', you can | ||
| it('cy.get() - query DOM elements', function(){ | ||
| // https://on.cypress.io/get | ||
| // https://on.cypress.io/api/get | ||
| // We can get DOM elements by id | ||
| // Get DOM elements by id | ||
| cy.get('#query-btn').should('contain', 'Button') | ||
| // We can get DOM elements by class | ||
| // Get DOM elements by class | ||
| cy.get('.query-btn').should('contain', 'Button') | ||
@@ -78,40 +57,34 @@ | ||
| // ↲ | ||
| // we can CSS selectors just like jQuery | ||
| // Use CSS selectors just like jQuery | ||
| }) | ||
| it('cy.contains() - query DOM elements with matching content', function(){ | ||
| // https://on.cypress.io/contains | ||
| cy.get('.query-list') | ||
| .contains('bananas').should('have.class', 'third') | ||
| // https://on.cypress.io/api/contains | ||
| cy | ||
| .get('.query-list') | ||
| .contains('bananas').should('have.class', 'third') | ||
| // we can pass a regexp to `.contains()` | ||
| cy.get('.query-list') | ||
| .contains(/^b\w+/).should('have.class', 'third') | ||
| // we can even pass a regexp to `cy.contains()` | ||
| .get('.query-list') | ||
| .contains(/^b\w+/).should('have.class', 'third') | ||
| cy.get('.query-list') | ||
| .contains('apples').should('have.class', 'first') | ||
| // `cy.contains()` will return the first matched element | ||
| .get('.query-list') | ||
| .contains('apples').should('have.class', 'first') | ||
| // passing a selector to contains will yield the selector containing the text | ||
| cy.get('#querying') | ||
| .contains('ul', 'oranges').should('have.class', 'query-list') | ||
| // passing a selector to contains will return the parent | ||
| // selector containing the text | ||
| .get('#querying') | ||
| .contains('ul', 'oranges').should('have.class', 'query-list') | ||
| // `cy.contains()` will favor input[type='submit'], | ||
| // button, a, and label over deeper elements inside them | ||
| // this will not return the <span> inside the button, | ||
| // but the <button> itself | ||
| .get('.query-button') | ||
| .contains('Save Form').should('have.class', 'btn') | ||
| // `.contains()` will favor input[type='submit'], | ||
| // button, a, and label over deeper elements inside them | ||
| // this will not yield the <span> inside the button, | ||
| // but the <button> itself | ||
| cy.get('.query-button') | ||
| .contains('Save Form').should('have.class', 'btn') | ||
| }) | ||
| it('cy.within() - query DOM elements within a specific element', function(){ | ||
| // https://on.cypress.io/api/within | ||
| it('.within() - query DOM elements within a specific element', function(){ | ||
| // https://on.cypress.io/within | ||
| cy.get('.query-form').within(function(){ | ||
| cy | ||
| .get('input:first').should('have.attr', 'placeholder', 'Email') | ||
| .get('input:last').should('have.attr', 'placeholder', 'Password') | ||
| cy.get('input:first').should('have.attr', 'placeholder', 'Email') | ||
| cy.get('input:last').should('have.attr', 'placeholder', 'Password') | ||
| }) | ||
@@ -121,4 +94,3 @@ }) | ||
| it('cy.root() - query the root DOM element', function(){ | ||
| // https://on.cypress.io/api/root | ||
| // https://on.cypress.io/root | ||
| // By default, root is the document | ||
@@ -139,113 +111,96 @@ cy.root().should('match', 'html') | ||
| // **** Traversing DOM Elements **** | ||
| // | ||
| // Let's query for some DOM elements and make assertions | ||
| // The most commonly used query is 'cy.get()', you can | ||
| // think of this like the '$' in jQuery | ||
| it('cy.children() - get child DOM elements', function(){ | ||
| // https://on.cypress.io/api/children | ||
| cy.get('.traversal-breadcrumb').children('.active').should('contain', 'Data') | ||
| it('.children() - get child DOM elements', function(){ | ||
| // https://on.cypress.io/children | ||
| cy.get('.traversal-breadcrumb').children('.active') | ||
| .should('contain', 'Data') | ||
| }) | ||
| it('cy.closest() - get closest ancestor DOM element', function(){ | ||
| // https://on.cypress.io/api/closest | ||
| cy.get('.traversal-badge').closest('ul').should('have.class', 'list-group') | ||
| it('.closest() - get closest ancestor DOM element', function(){ | ||
| // https://on.cypress.io/closest | ||
| cy.get('.traversal-badge').closest('ul') | ||
| .should('have.class', 'list-group') | ||
| }) | ||
| it('cy.eq() - get a DOM element at a specific index', function(){ | ||
| // https://on.cypress.io/api/eq | ||
| it('.eq() - get a DOM element at a specific index', function(){ | ||
| // https://on.cypress.io/eq | ||
| cy.get('.traversal-list>li').eq(1).should('contain', 'siamese') | ||
| }) | ||
| it('cy.filter() - get DOM elements that match the selector', function(){ | ||
| // https://on.cypress.io/api/filter | ||
| it('.filter() - get DOM elements that match the selector', function(){ | ||
| // https://on.cypress.io/filter | ||
| cy.get('.traversal-nav>li').filter('.active').should('contain', 'About') | ||
| }) | ||
| it('cy.find() - get descendant DOM elements of the selector', function(){ | ||
| // https://on.cypress.io/api/find | ||
| cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7) | ||
| it('.find() - get descendant DOM elements of the selector', function(){ | ||
| // https://on.cypress.io/find | ||
| cy.get('.traversal-pagination').find('li').find('a') | ||
| .should('have.length', 7) | ||
| }) | ||
| it('cy.first() - get first DOM element', function(){ | ||
| // https://on.cypress.io/api/first | ||
| it('.first() - get first DOM element', function(){ | ||
| // https://on.cypress.io/first | ||
| cy.get('.traversal-table td').first().should('contain', '1') | ||
| }) | ||
| it('cy.last() - get last DOM element', function(){ | ||
| // https://on.cypress.io/api/last | ||
| it('.last() - get last DOM element', function(){ | ||
| // https://on.cypress.io/last | ||
| cy.get('.traversal-buttons .btn').last().should('contain', 'Submit') | ||
| }) | ||
| it('cy.next() - get next sibling DOM element', function(){ | ||
| // https://on.cypress.io/api/next | ||
| it('.next() - get next sibling DOM element', function(){ | ||
| // https://on.cypress.io/next | ||
| cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges') | ||
| }) | ||
| it('cy.nextAll() - get all next sibling DOM elements', function(){ | ||
| // https://on.cypress.io/api/nextall | ||
| cy.get('.traversal-next-all').contains('oranges').nextAll().should("have.length", 3) | ||
| it('.nextAll() - get all next sibling DOM elements', function(){ | ||
| // https://on.cypress.io/nextall | ||
| cy.get('.traversal-next-all').contains('oranges') | ||
| .nextAll().should('have.length', 3) | ||
| }) | ||
| it('cy.nextUntil() - get all next sibling DOM elements until other element', function(){ | ||
| // https://on.cypress.io/api/nextuntil | ||
| cy.get("#veggies").nextUntil("#nuts").should("have.length", 3) | ||
| it('.nextUntil() - get next sibling DOM elements until next el', function(){ | ||
| // https://on.cypress.io/nextuntil | ||
| cy.get('#veggies').nextUntil('#nuts').should('have.length', 3) | ||
| }) | ||
| it('cy.not() - remove DOM elements from set of DOM elements', function(){ | ||
| // https://on.cypress.io/api/not | ||
| it('.not() - remove DOM elements from set of DOM elements', function(){ | ||
| // https://on.cypress.io/not | ||
| cy.get('.traversal-disabled .btn').not('[disabled]').should('not.contain', 'Disabled') | ||
| }) | ||
| it('cy.parent() - get parent DOM element from set of DOM elements', function(){ | ||
| // https://on.cypress.io/api/parent | ||
| it('.parent() - get parent DOM element from DOM elements', function(){ | ||
| // https://on.cypress.io/parent | ||
| cy.get('.traversal-mark').parent().should('contain', 'Morbi leo risus') | ||
| }) | ||
| it('cy.parents() - get parent DOM elements from set of DOM elements', function(){ | ||
| // https://on.cypress.io/api/parents | ||
| it('.parents() - get parent DOM elements from DOM elements', function(){ | ||
| // https://on.cypress.io/parents | ||
| cy.get('.traversal-cite').parents().should('match', 'blockquote') | ||
| }) | ||
| it('cy.parentsUntil() - get parent DOM elements from set of DOM elements until other element', function(){ | ||
| // https://on.cypress.io/api/parentsuntil | ||
| cy.get('.clothes-nav').find(".active").parentsUntil('.clothes-nav').should("have.length", 2) | ||
| it('.parentsUntil() - get parent DOM elements from DOM elements until el', function(){ | ||
| // https://on.cypress.io/parentsuntil | ||
| cy.get('.clothes-nav').find('.active').parentsUntil('.clothes-nav') | ||
| .should('have.length', 2) | ||
| }) | ||
| it('cy.prev() - get previous sibling DOM element', function(){ | ||
| // https://on.cypress.io/api/prev | ||
| cy.get('.birds').find(".active").prev().should("contain", "Lorikeets") | ||
| it('.prev() - get previous sibling DOM element', function(){ | ||
| // https://on.cypress.io/prev | ||
| cy.get('.birds').find('.active').prev().should('contain', 'Lorikeets') | ||
| }) | ||
| it('cy.prevAll() - get all previous sibling DOM elements', function(){ | ||
| // https://on.cypress.io/api/prevAll | ||
| cy.get('.fruits-list').find(".third").prevAll().should("have.length", 2) | ||
| it('.prevAll() - get all previous sibling DOM elements', function(){ | ||
| // https://on.cypress.io/prevAll | ||
| cy.get('.fruits-list').find('.third').prevAll().should('have.length', 2) | ||
| }) | ||
| it('cy.prevUntil() - get all previous sibling DOM elements until other element', function(){ | ||
| // https://on.cypress.io/api/prevUntil | ||
| cy.get(".foods-list").find("#nuts").prevUntil("#veggies") | ||
| it('.prevUntil() - get all previous sibling DOM elements until el', function(){ | ||
| // https://on.cypress.io/prevUntil | ||
| cy.get('.foods-list').find('#nuts').prevUntil('#veggies') | ||
| }) | ||
| it('cy.siblings() - get all sibling DOM elements from set of DOM elements', function(){ | ||
| // https://on.cypress.io/api/siblings | ||
| it('.siblings() - get all sibling DOM elements', function(){ | ||
| // https://on.cypress.io/siblings | ||
| cy.get('.traversal-pills .active').siblings().should('have.length', 2) | ||
@@ -260,20 +215,15 @@ }) | ||
| // **** Actions **** | ||
| // | ||
| // Let's perform some actions on DOM elements | ||
| // Most of these involve filling in form elements | ||
| // But some actions, like click, will often be | ||
| // used throughout an application | ||
| // https://on.cypress.io/interacting-with-elements | ||
| it('cy.type() - type into a DOM element', function(){ | ||
| // https://on.cypress.io/api/type | ||
| cy | ||
| .get('.action-email') | ||
| it('.type() - type into a DOM element', function(){ | ||
| // https://on.cypress.io/type | ||
| cy.get('.action-email') | ||
| .type('fake@email.com').should('have.value', 'fake@email.com') | ||
| // cy.type() may include special character sequences | ||
| .type('{leftarrow}{rightarrow}{uparrow}{downarrow}{del}{selectall}{backspace}') | ||
| // .type() with special character sequences | ||
| .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') | ||
| .type('{del}{selectall}{backspace}') | ||
| // cy.type() may additionally include key modifiers | ||
| // .type() with key modifiers | ||
| .type('{alt}{option}') //these are equivalent | ||
@@ -284,110 +234,85 @@ .type('{ctrl}{control}') //these are equivalent | ||
| // **** Type Options **** | ||
| // | ||
| // cy.type() accepts options that control typing | ||
| // | ||
| // Delay each keypress by 0.1 sec | ||
| // You may want to set the delay which | ||
| // causes the keystrokes to happen much slower | ||
| // in some situations if the application under | ||
| // test is not able to handle rapid firing events. | ||
| // (generally due to the app not properly throttling events) | ||
| .type('slow.typing@email.com', {delay: 100}) | ||
| .should('have.value', 'slow.typing@email.com') | ||
| .should('have.value', 'slow.typing@email.com') | ||
| .get('.action-disabled') | ||
| cy.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') | ||
| .should('have.value', 'disabled error checking') | ||
| }) | ||
| it('cy.focus() - focus on a DOM element', function(){ | ||
| // https://on.cypress.io/api/focus | ||
| cy | ||
| .get('.action-focus').focus() | ||
| it('.focus() - focus on a DOM element', function(){ | ||
| // https://on.cypress.io/focus | ||
| cy.get('.action-focus').focus() | ||
| .should('have.class', 'focus') | ||
| .prev().should('have.attr', 'style', 'color: orange;') | ||
| .prev().should('have.attr', 'style', 'color: orange;') | ||
| }) | ||
| it('cy.blur() - blur off a DOM element', function(){ | ||
| // https://on.cypress.io/api/blur | ||
| cy | ||
| .get('.action-blur').type('I\'m about to blur').blur() | ||
| it('.blur() - blur off a DOM element', function(){ | ||
| // https://on.cypress.io/blur | ||
| cy.get('.action-blur').type('I\'m about to blur').blur() | ||
| .should('have.class', 'error') | ||
| .prev().should('have.attr', 'style', 'color: red;') | ||
| .prev().should('have.attr', 'style', 'color: red;') | ||
| }) | ||
| it('cy.clear() - clears the value of an input or textarea element', function(){ | ||
| // https://on.cypress.io/api/clear | ||
| cy | ||
| .get('.action-clear').type('We are going to clear this text') | ||
| .should('have.value', 'We are going to clear this text') | ||
| it('.clear() - clears an input or textarea element', function(){ | ||
| // https://on.cypress.io/clear | ||
| 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', '') | ||
| .should('have.value', '') | ||
| }) | ||
| it('cy.submit() - submit a form', function(){ | ||
| // https://on.cypress.io/api/submit | ||
| cy | ||
| .get('.action-form') | ||
| .find('[type="text"]').type('HALFOFF') | ||
| .get('.action-form').submit() | ||
| .next().should('contain', 'Your form has been submitted!') | ||
| it('.submit() - submit a form', function(){ | ||
| // https://on.cypress.io/submit | ||
| cy.get('.action-form') | ||
| .find('[type="text"]').type('HALFOFF') | ||
| cy.get('.action-form').submit() | ||
| .next().should('contain', 'Your form has been submitted!') | ||
| }) | ||
| it('cy.click() - click on a DOM element', function(){ | ||
| // https://on.cypress.io/api/click | ||
| it('.click() - click on a DOM element', function(){ | ||
| // https://on.cypress.io/click | ||
| cy.get('.action-btn').click() | ||
| // **** Click Position **** | ||
| // | ||
| // cy.click() accepts a position argument | ||
| // that controls where the click occurs | ||
| // | ||
| // You can clock on 9 specific positions of an element: | ||
| // ----------------------------------- | ||
| // | topLeft top topRight | | ||
| // | | | ||
| // | | | ||
| // | | | ||
| // | left center right | | ||
| // | | | ||
| // | | | ||
| // | | | ||
| // | bottomLeft bottom bottomRight | | ||
| // ----------------------------------- | ||
| // clicking in the center of the element is the default | ||
| 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('top') | ||
| cy.get('#action-canvas').click('topRight') | ||
| // click the bottom left corner of the element | ||
| cy.get('#action-canvas').click('left') | ||
| cy.get('#action-canvas').click('right') | ||
| cy.get('#action-canvas').click('bottomLeft') | ||
| // click the bottom right corner of the element | ||
| cy.get('#action-canvas').click('bottom') | ||
| cy.get('#action-canvas').click('bottomRight') | ||
| // **** Click Coordinate **** | ||
| // | ||
| // cy.click() accepts a an x and y coordinate | ||
| // .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) | ||
| cy.get('#action-canvas') | ||
| .click(80, 75) // click 80px on x coord and 75px on y coord | ||
| .click(170, 75) | ||
| .click(80, 165) | ||
| .click(100, 185) | ||
| .click(125, 190) | ||
| .click(150, 185) | ||
| .click(170, 165) | ||
| // **** Click Options **** | ||
| // | ||
| // cy.click() accepts options that control clicking | ||
| // | ||
| // 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}) | ||
@@ -401,112 +326,177 @@ | ||
| it('cy.dblclick() - double click on a DOM element', function(){ | ||
| // We have a listener on 'dblclick' event in our 'scripts.js' | ||
| it('.dblclick() - double click on a DOM element', function(){ | ||
| // Our app has a listener on 'dblclick' event in our 'scripts.js' | ||
| // that hides the div and shows an input on double click | ||
| // https://on.cypress.io/api/dblclick | ||
| cy | ||
| .get('.action-div').dblclick().should('not.be.visible') | ||
| .get('.action-input-hidden').should('be.visible') | ||
| // https://on.cypress.io/dblclick | ||
| cy.get('.action-div').dblclick().should('not.be.visible') | ||
| cy.get('.action-input-hidden').should('be.visible') | ||
| }) | ||
| it('cy.check() - check a checkbox or radio element', function(){ | ||
| // By default, cy.check() will check all | ||
| // By default, .check() will check all | ||
| // matching checkbox or radio elements in succession, one after another | ||
| // https://on.cypress.io/api/check | ||
| cy | ||
| .get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked') | ||
| // https://on.cypress.io/check | ||
| cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') | ||
| .check().should('be.checked') | ||
| .get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked') | ||
| cy.get('.action-radios [type="radio"]').not('[disabled]') | ||
| .check().should('be.checked') | ||
| // **** Check Value **** | ||
| // | ||
| // cy.check() accepts a value argument | ||
| // .check() accepts a value argument | ||
| // that checks only checkboxes or radios | ||
| // with matching values | ||
| // | ||
| .get('.action-radios [type="radio"]').check('radio1').should('be.checked') | ||
| cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked') | ||
| // **** Check Values **** | ||
| // | ||
| // cy.check() accepts an array of values | ||
| // .check() accepts an array of values | ||
| // that checks only checkboxes or radios | ||
| // with matching values | ||
| // | ||
| .get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2']).should('be.checked') | ||
| cy.get('.action-multiple-checkboxes [type="checkbox"]') | ||
| .check(['checkbox1', 'checkbox2']).should('be.checked') | ||
| // **** Check Options **** | ||
| // | ||
| // cy.check() accepts options that control checking | ||
| // | ||
| // 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') | ||
| cy.get('.action-checkboxes [disabled]') | ||
| .check({force: true}).should('be.checked') | ||
| .get('.action-radios [type="radio"]').check('radio3', {force: true}).should('be.checked') | ||
| cy.get('.action-radios [type="radio"]') | ||
| .check('radio3', {force: true}).should('be.checked') | ||
| }) | ||
| it('cy.uncheck() - uncheck a checkbox element', function(){ | ||
| // By default, cy.uncheck() will uncheck all matching | ||
| it('.uncheck() - uncheck a checkbox element', function(){ | ||
| // By default, .uncheck() will uncheck all matching | ||
| // checkbox elements in succession, one after another | ||
| // https://on.cypress.io/api/uncheck | ||
| cy | ||
| .get('.action-check [type="checkbox"]') | ||
| .not('[disabled]') | ||
| .uncheck().should('not.be.checked') | ||
| // https://on.cypress.io/uncheck | ||
| cy.get('.action-check [type="checkbox"]') | ||
| .not('[disabled]') | ||
| .uncheck().should('not.be.checked') | ||
| // **** Check Value **** | ||
| // | ||
| // cy.uncheck() accepts a value argument | ||
| // .uncheck() accepts a value argument | ||
| // that unchecks only checkboxes | ||
| // with matching values | ||
| // | ||
| .get('.action-check [type="checkbox"]') | ||
| .check('checkbox1') | ||
| .uncheck('checkbox1').should('not.be.checked') | ||
| cy.get('.action-check [type="checkbox"]') | ||
| .check('checkbox1') | ||
| .uncheck('checkbox1').should('not.be.checked') | ||
| // **** Uncheck Values **** | ||
| // | ||
| // cy.uncheck() accepts an array of values | ||
| // .uncheck() accepts an array of values | ||
| // that unchecks only checkboxes or radios | ||
| // with matching values | ||
| // | ||
| .get('.action-check [type="checkbox"]') | ||
| .check(['checkbox1', 'checkbox3']) | ||
| .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') | ||
| cy.get('.action-check [type="checkbox"]') | ||
| .check(['checkbox1', 'checkbox3']) | ||
| .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') | ||
| // **** Uncheck Options **** | ||
| // | ||
| // cy.uncheck() accepts options that control unchecking | ||
| // | ||
| // 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') | ||
| cy.get('.action-check [disabled]') | ||
| .uncheck({force: true}).should('not.be.checked') | ||
| }) | ||
| it('cy.select() - select an option in a <select> element', function(){ | ||
| it('.select() - select an option in a <select> element', function(){ | ||
| // https://on.cypress.io/select | ||
| // https://on.cypress.io/api/select | ||
| // Select the option with matching text content | ||
| // Select option with matching text content | ||
| cy.get('.action-select').select('apples') | ||
| // Select the option with matching value | ||
| // Select 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 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']) | ||
| // Select options with matching values | ||
| cy.get('.action-select-multiple') | ||
| .select(['fr-apples', 'fr-oranges', 'fr-bananas']) | ||
| }) | ||
| it('.scrollIntoView() - scroll an element into view', function(){ | ||
| // https://on.cypress.io/scrollintoview | ||
| // normally all of these buttons are hidden, because they're not within | ||
| // the viewable area of their parent (we need to scroll to see them) | ||
| cy.get('#scroll-horizontal button') | ||
| .should('not.be.visible') | ||
| // scroll the button into view, as if the user had scrolled | ||
| cy.get('#scroll-horizontal button').scrollIntoView() | ||
| .should('be.visible') | ||
| cy.get('#scroll-vertical button') | ||
| .should('not.be.visible') | ||
| // Cypress handles the scroll direction needed | ||
| cy.get('#scroll-vertical button').scrollIntoView() | ||
| .should('be.visible') | ||
| cy.get('#scroll-both button') | ||
| .should('not.be.visible') | ||
| // Cypress knows to scroll to the right and down | ||
| cy.get('#scroll-both button').scrollIntoView() | ||
| .should('be.visible') | ||
| }) | ||
| it('cy.scrollTo() - scroll the window or element to a position', function(){ | ||
| // https://on.cypress.io/scrollTo | ||
| // You can scroll to 9 specific positions of an element: | ||
| // ----------------------------------- | ||
| // | topLeft top topRight | | ||
| // | | | ||
| // | | | ||
| // | | | ||
| // | left center right | | ||
| // | | | ||
| // | | | ||
| // | | | ||
| // | bottomLeft bottom bottomRight | | ||
| // ----------------------------------- | ||
| // if you chain .scrollTo() off of cy, we will | ||
| // scroll the entire window | ||
| cy.scrollTo('bottom') | ||
| cy.get('#scrollable-horizontal').scrollTo('right') | ||
| // or you can scroll to a specific coordinate: | ||
| // (x axis, y axis) in pixels | ||
| cy.get('#scrollable-vertical').scrollTo(250, 250) | ||
| // or you can scroll to a specific percentage | ||
| // of the (width, height) of the element | ||
| cy.get('#scrollable-both').scrollTo('75%', '25%') | ||
| // control the easing of the scroll (default is 'swing') | ||
| cy.get('#scrollable-vertical').scrollTo('center', {easing: 'linear'} ) | ||
| // control the duration of the scroll (in ms) | ||
| cy.get('#scrollable-both').scrollTo('center', {duration: 2000} ) | ||
| }) | ||
| it('.trigger() - trigger an event on a DOM element', function(){ | ||
| // To interact with a range input (slider), we need to set its value and | ||
| // then trigger the appropriate event to signal it has changed | ||
| // Here, we invoke jQuery's val() method to set the value | ||
| // and trigger the 'change' event | ||
| // Note that some implementations may rely on the 'input' event, | ||
| // which is fired as a user moves the slider, but is not supported | ||
| // by some browsers | ||
| // https://on.cypress.io/trigger | ||
| cy.get('.trigger-input-range') | ||
| .invoke('val', 25) | ||
| .trigger('change') | ||
| .get('input[type=range]').siblings('p') | ||
| .should('have.text', '25') | ||
| // See our example recipes for more examples of using trigger | ||
| // https://on.cypress.io/examples | ||
| }) | ||
| }) | ||
@@ -519,10 +509,4 @@ | ||
| // **** Window **** | ||
| // | ||
| // Cypress has commands to help you get | ||
| // access to window, document, and title | ||
| it('cy.window() - get the global window object', function(){ | ||
| // https://on.cypress.io/api/window | ||
| // https://on.cypress.io/window | ||
| cy.window().should('have.property', 'top') | ||
@@ -532,4 +516,3 @@ }) | ||
| it('cy.document() - get the document object', function(){ | ||
| // https://on.cypress.io/api/document | ||
| // https://on.cypress.io/document | ||
| cy.document().should('have.property', 'charset').and('eq', 'UTF-8') | ||
@@ -539,4 +522,3 @@ }) | ||
| it('cy.title() - get the title', function(){ | ||
| // https://on.cypress.io/api/title | ||
| // https://on.cypress.io/title | ||
| cy.title().should('include', 'Kitchen Sink') | ||
@@ -551,21 +533,13 @@ }) | ||
| // **** Viewport **** | ||
| // | ||
| // Let's make some assertions based on | ||
| // the size of our screen. This command | ||
| // is great for checking responsive logic | ||
| it('cy.viewport() - set the viewport size and dimension', function(){ | ||
| cy | ||
| .get('#navbar').should('be.visible') | ||
| cy.get('#navbar').should('be.visible') | ||
| // https://on.cypress.io/api/viewport | ||
| // https://on.cypress.io/viewport | ||
| cy.viewport(320, 480) | ||
| // the navbar should have collapse since our screen is smaller | ||
| cy | ||
| .get('#navbar').should('not.be.visible') | ||
| .get('.navbar-toggle').should('be.visible').click() | ||
| .get('.nav').find('a').should('be.visible') | ||
| cy.get('#navbar').should('not.be.visible') | ||
| cy.get('.navbar-toggle').should('be.visible').click() | ||
| cy.get('.nav').find('a').should('be.visible') | ||
@@ -575,4 +549,2 @@ // lets see what our app looks like on a super large screen | ||
| // **** Viewport Presets **** | ||
| // | ||
| // cy.viewport() accepts a set of preset sizes | ||
@@ -583,35 +555,30 @@ // to easily set the screen to a device's width and height | ||
| // the change otherwise it's a little too fast to see :) | ||
| // | ||
| cy | ||
| .viewport('macbook-15') | ||
| .wait(200) | ||
| .viewport('macbook-13') | ||
| .wait(200) | ||
| .viewport('macbook-11') | ||
| .wait(200) | ||
| .viewport('ipad-2') | ||
| .wait(200) | ||
| .viewport('ipad-mini') | ||
| .wait(200) | ||
| .viewport('iphone-6+') | ||
| .wait(200) | ||
| .viewport('iphone-6') | ||
| .wait(200) | ||
| .viewport('iphone-5') | ||
| .wait(200) | ||
| .viewport('iphone-4') | ||
| .wait(200) | ||
| .viewport('iphone-3') | ||
| .wait(200) | ||
| // **** Viewport Orientation **** | ||
| // | ||
| cy.viewport('macbook-15') | ||
| cy.wait(200) | ||
| cy.viewport('macbook-13') | ||
| cy.wait(200) | ||
| cy.viewport('macbook-11') | ||
| cy.wait(200) | ||
| cy.viewport('ipad-2') | ||
| cy.wait(200) | ||
| cy.viewport('ipad-mini') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-6+') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-6') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-5') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-4') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-3') | ||
| cy.wait(200) | ||
| // cy.viewport() accepts an orientation for all presets | ||
| // the default orientation is 'portrait' | ||
| // | ||
| cy | ||
| .viewport('ipad-2', 'portrait') | ||
| .wait(200) | ||
| .viewport('iphone-4', 'landscape') | ||
| .wait(200) | ||
| cy.viewport('ipad-2', 'portrait') | ||
| cy.wait(200) | ||
| cy.viewport('iphone-4', 'landscape') | ||
| cy.wait(200) | ||
@@ -628,4 +595,2 @@ // The viewport will be reset back to the default dimensions | ||
| // **** Location **** | ||
| // | ||
| // We look at the url to make assertions | ||
@@ -635,4 +600,3 @@ // about the page's state | ||
| it('cy.hash() - get the current URL hash', function(){ | ||
| // https://on.cypress.io/api/hash | ||
| // https://on.cypress.io/hash | ||
| cy.hash().should('be.empty') | ||
@@ -642,5 +606,4 @@ }) | ||
| it('cy.location() - get window.location', function(){ | ||
| // https://on.cypress.io/api/location | ||
| cy.location().then(function(location){ | ||
| // https://on.cypress.io/location | ||
| cy.location().should(function(location){ | ||
| expect(location.hash).to.be.empty | ||
@@ -659,4 +622,3 @@ expect(location.href).to.eq('http://localhost:8080/commands/location') | ||
| it('cy.url() - get the current URL', function(){ | ||
| // https://on.cypress.io/api/url | ||
| // https://on.cypress.io/url | ||
| cy.url().should('eq', 'http://localhost:8080/commands/location') | ||
@@ -668,18 +630,11 @@ }) | ||
| beforeEach(function(){ | ||
| cy | ||
| .visit('http://localhost:8080') | ||
| .get('.navbar-nav').contains('Commands').click() | ||
| .get('.dropdown-menu').contains('Navigation').click() | ||
| cy.visit('http://localhost:8080') | ||
| cy.get('.navbar-nav').contains('Commands').click() | ||
| cy.get('.dropdown-menu').contains('Navigation').click() | ||
| }) | ||
| // **** Navigation **** | ||
| // | ||
| // We can issue commands to visit, reload the page, | ||
| // navigate in the browser's history | ||
| it('cy.go() - go back or forward in the browser\'s history', function(){ | ||
| cy.location('pathname').should('include', 'navigation') | ||
| // https://on.cypress.io/api/go | ||
| // https://on.cypress.io/go | ||
| cy.go('back') | ||
@@ -698,7 +653,6 @@ cy.location('pathname').should('not.include', 'navigation') | ||
| cy.location('pathname').should('include', 'navigation') | ||
| }) | ||
| it('cy.reload() - reload the page', function(){ | ||
| // https://on.cypress.io/api/reload | ||
| // https://on.cypress.io/reload | ||
| cy.reload() | ||
@@ -711,5 +665,5 @@ | ||
| it('cy.visit() - visit a remote url', function(){ | ||
| /* eslint-disable no-unused-vars */ | ||
| // Visit any sub-domain of your current domain | ||
| // https://on.cypress.io/api/visit | ||
| // https://on.cypress.io/visit | ||
@@ -726,2 +680,3 @@ // Pass options to the visit | ||
| }) | ||
| /* eslint-enable no-unused-vars */ | ||
| }) | ||
@@ -734,30 +689,22 @@ }) | ||
| }) | ||
| // **** Assertions **** | ||
| // | ||
| describe('Implicit Assertions', function(){ | ||
| it('cy.should - make an assertion about the current subject', function(){ | ||
| // https://on.cypress.io/api/should | ||
| cy | ||
| .get('.assertion-table') | ||
| .find('tbody tr:last').should('have.class', 'success') | ||
| it('.should() - make an assertion about the current subject', function(){ | ||
| // https://on.cypress.io/should | ||
| cy.get('.assertion-table') | ||
| .find('tbody tr:last').should('have.class', 'success') | ||
| }) | ||
| it('cy.and - chain multiple assertions together', function(){ | ||
| // https://on.cypress.io/api/and | ||
| cy | ||
| .get('.assertions-link') | ||
| .should('have.class', 'active') | ||
| .and('have.attr', 'href') | ||
| .and('include', 'cypress.io') | ||
| it('.and() - chain multiple assertions together', function(){ | ||
| // https://on.cypress.io/and | ||
| cy.get('.assertions-link') | ||
| .should('have.class', 'active') | ||
| .and('have.attr', 'href') | ||
| .and('include', 'cypress.io') | ||
| }) | ||
| }) | ||
| describe('Explicit Assertions', function(){ | ||
| it('expect - make an assertion about a specified subject', function(){ | ||
| // We can use Chai's BDD style assertions | ||
@@ -768,8 +715,7 @@ expect(true).to.be.true | ||
| // of explicit assertions within it. | ||
| cy | ||
| .get('.assertions-p').find('p') | ||
| cy.get('.assertions-p').find('p') | ||
| .should(function($p){ | ||
| // return an array of texts from all of the p's | ||
| var texts = $p.map(function(i, el){ | ||
| // https://on.cypress.io/api/cypress-jquery | ||
| // https://on.cypress.io/$ | ||
| return Cypress.$(el).text() | ||
@@ -780,3 +726,3 @@ }) | ||
| // and .get() convert this to simple array | ||
| var texts = texts.get() | ||
| texts = texts.get() | ||
@@ -792,3 +738,3 @@ // array should have length of 3 | ||
| ]) | ||
| }) | ||
| }) | ||
| }) | ||
@@ -803,63 +749,52 @@ }) | ||
| it('cy.end() - end the command chain', function(){ | ||
| it('.end() - end the command chain', function(){ | ||
| // cy.end is useful when you want to end a chain of commands | ||
| // and force Cypress to re-query from the root element | ||
| // | ||
| // https://on.cypress.io/api/end | ||
| cy | ||
| .get('.misc-table').within(function(){ | ||
| cy | ||
| // ends the current chain and returns null | ||
| .contains("Cheryl").click().end() | ||
| // queries the entire table again | ||
| .contains("Charles").click() | ||
| }) | ||
| // https://on.cypress.io/end | ||
| cy.get('.misc-table').within(function(){ | ||
| // ends the current chain and yields null | ||
| cy.contains('Cheryl').click().end() | ||
| // queries the entire table again | ||
| cy.contains('Charles').click() | ||
| }) | ||
| }) | ||
| it('cy.exec() - execute a system command', function(){ | ||
| // cy.exec allows you to execute a system command. | ||
| // so you can take actions necessary for your test, | ||
| // but outside the scope of Cypress. | ||
| // | ||
| // https://on.cypress.io/api/exec | ||
| cy | ||
| .exec('echo Jane Lane') | ||
| .its('stdout').should('contain', 'Jane Lane') | ||
| .exec('cat cypress.json') | ||
| .its('stderr').should('be.empty') | ||
| // https://on.cypress.io/exec | ||
| cy.exec('echo Jane Lane') | ||
| .its('stdout').should('contain', 'Jane Lane') | ||
| .exec('pwd') | ||
| .its('code').should('eq', 0) | ||
| cy.exec('cat cypress.json') | ||
| .its('stderr').should('be.empty') | ||
| cy.exec('pwd') | ||
| .its('code').should('eq', 0) | ||
| }) | ||
| it('cy.focused() - get the DOM element that has focus', function(){ | ||
| // https://on.cypress.io/focused | ||
| cy.get('.misc-form').find('#name').click() | ||
| cy.focused().should('have.id', 'name') | ||
| // https://on.cypress.io/api/focused | ||
| cy | ||
| .get('.misc-form').find('#name').click() | ||
| .focused().should('have.id', 'name') | ||
| .get('.misc-form').find('#description').click() | ||
| .focused().should('have.id', 'description') | ||
| cy.get('.misc-form').find('#description').click() | ||
| cy.focused().should('have.id', 'description') | ||
| }) | ||
| it("cy.screenshot() - take a screenshot", function(){ | ||
| // https://on.cypress.io/api/screenshot | ||
| cy.screenshot("my-image") | ||
| it('cy.screenshot() - take a screenshot', function(){ | ||
| // https://on.cypress.io/screenshot | ||
| cy.screenshot('my-image') | ||
| }) | ||
| it('cy.wrap() - wrap an object', function(){ | ||
| // https://on.cypress.io/api/wrap | ||
| cy | ||
| .wrap({foo: 'bar'}) | ||
| .should('have.property', 'foo') | ||
| .and('include', 'bar') | ||
| // https://on.cypress.io/wrap | ||
| cy.wrap({foo: 'bar'}) | ||
| .should('have.property', 'foo') | ||
| .and('include', 'bar') | ||
| }) | ||
| }) | ||
@@ -872,14 +807,7 @@ | ||
| // **** Connectors **** | ||
| // | ||
| // Some commands are just used to manipulate elements, | ||
| // properties or invoke functions on the current subject | ||
| it('cy.each() - iterate over an array of elements', function(){ | ||
| // https://on.cypress.io/api/each | ||
| cy | ||
| .get('.connectors-each-ul>li') | ||
| it('.each() - iterate over an array of elements', function(){ | ||
| // https://on.cypress.io/each | ||
| cy.get('.connectors-each-ul>li') | ||
| .each(function($el, index, $list){ | ||
| // eslint-disable-next-line no-console | ||
| console.log($el, index, $list) | ||
@@ -889,29 +817,24 @@ }) | ||
| it('cy.its() - get properties on the current subject', function(){ | ||
| // https://on.cypress.io/api/its | ||
| cy | ||
| .get('.connectors-its-ul>li') | ||
| // calls the 'length' property returning that value | ||
| .its('length') | ||
| .should('be.gt', 2) | ||
| it('.its() - get properties on the current subject', function(){ | ||
| // https://on.cypress.io/its | ||
| cy.get('.connectors-its-ul>li') | ||
| // calls the 'length' property yielding that value | ||
| .its('length') | ||
| .should('be.gt', 2) | ||
| }) | ||
| it('cy.invoke() - invoke a function on the current subject', function(){ | ||
| it('.invoke() - invoke a function on the current subject', function(){ | ||
| // our div is hidden in our script.js | ||
| // $('.connectors-div').hide() | ||
| // https://on.cypress.io/api/invoke | ||
| cy | ||
| .get('.connectors-div').should('be.hidden') | ||
| // https://on.cypress.io/invoke | ||
| cy.get('.connectors-div').should('be.hidden') | ||
| // call the jquery method 'show' on the 'div.container' | ||
| .invoke('show') | ||
| .should('be.visible') | ||
| .should('be.visible') | ||
| }) | ||
| it('cy.spread() - spread an array as individual arguments to a callback function', function(){ | ||
| // https://on.cypress.io/api/spread | ||
| it('.spread() - spread an array as individual args to callback function', function(){ | ||
| // https://on.cypress.io/spread | ||
| var arr = ['foo', 'bar', 'baz'] | ||
@@ -926,5 +849,4 @@ | ||
| it('cy.then() - invoke a callback function with the current subject', function(){ | ||
| // https://on.cypress.io/api/then | ||
| it('.then() - invoke a callback function with the current subject', function(){ | ||
| // https://on.cypress.io/then | ||
| cy.get('.connectors-list>li').then(function($lis){ | ||
@@ -944,4 +866,2 @@ expect($lis).to.have.length(3) | ||
| // **** Aliasing **** | ||
| // | ||
| // We alias a DOM element for use later | ||
@@ -951,21 +871,19 @@ // We don't have to traverse to the element | ||
| it('cy.as() - alias a route or DOM element for later use', function(){ | ||
| it('.as() - alias a route or DOM element for later use', function(){ | ||
| // this is a good use case for an alias, | ||
| // we don't want to write this long traversal again | ||
| // | ||
| // https://on.cypress.io/api/as | ||
| cy | ||
| .get('.as-table').find('tbody>tr') | ||
| .first().find('td').first().find('button').as('firstBtn') | ||
| // maybe do some more testing here... | ||
| // https://on.cypress.io/as | ||
| cy.get('.as-table').find('tbody>tr') | ||
| .first().find('td').first().find('button').as('firstBtn') | ||
| // when we reference the alias, we place an | ||
| // @ in front of it's name | ||
| .get('@firstBtn').click() | ||
| // maybe do some more testing here... | ||
| .get('@firstBtn') | ||
| .should('have.class', 'btn-success') | ||
| .and('contain', 'Changed') | ||
| // when we reference the alias, we place an | ||
| // @ in front of it's name | ||
| cy.get('@firstBtn').click() | ||
| cy.get('@firstBtn') | ||
| .should('have.class', 'btn-success') | ||
| .and('contain', 'Changed') | ||
| }) | ||
@@ -978,25 +896,16 @@ }) | ||
| }) | ||
| // **** Waiting **** | ||
| // | ||
| // Wait for a specific amount of ms before | ||
| // continuing to the next command | ||
| // | ||
| // BE CAREFUL of adding unnecessary wait times: | ||
| // https://on.cypress.io/guides/anti-patterns#section-adding-unnecessary-waits | ||
| // | ||
| // https://on.cypress.io/api/wait | ||
| // BE CAREFUL of adding unnecessary wait times. | ||
| // https://on.cypress.io/wait | ||
| it('cy.wait() - wait for a specific amount of time', function(){ | ||
| cy.get('.wait-input1').type('Wait 1000ms after typing') | ||
| cy.wait(1000) | ||
| cy.get('.wait-input2').type('Wait 1000ms after typing') | ||
| cy.wait(1000) | ||
| cy.get('.wait-input3').type('Wait 1000ms after typing') | ||
| cy.wait(1000) | ||
| }) | ||
| cy | ||
| .get(".wait-input1").type('Wait 1000ms after typing') | ||
| .wait(1000) | ||
| .get(".wait-input2").type('Wait 1000ms after typing') | ||
| .wait(1000) | ||
| .get(".wait-input3").type('Wait 1000ms after typing') | ||
| .wait(1000) | ||
| }) | ||
| // | ||
| // Waiting for a specific resource to resolve | ||
| // is covered within the cy.route() test below | ||
| // | ||
| }) | ||
@@ -1009,10 +918,7 @@ | ||
| // **** Network Requests **** | ||
| // | ||
| // Manage AJAX / XHR requests in your app | ||
| it('cy.server() - control the behavior of network requests and responses', function(){ | ||
| // https://on.cypress.io/api/server | ||
| cy.server().then(function(server){ | ||
| it('cy.server() - control behavior of network requests and responses', function(){ | ||
| // https://on.cypress.io/server | ||
| cy.server().should(function(server){ | ||
| // the default options on server | ||
@@ -1031,25 +937,27 @@ // you can override any of these options | ||
| // affecting all requests | ||
| expect(server.enable).to.be.true // pass false to disable existing route stubs | ||
| expect(server.force404).to.be.false // forces requests that don't match your routes to 404 | ||
| expect(server.whitelist).to.be.a('function') // whitelists requests from ever being logged or stubbed | ||
| // pass false to disable existing route stubs | ||
| expect(server.enable).to.be.true | ||
| // forces requests that don't match your routes to 404 | ||
| expect(server.force404).to.be.false | ||
| // whitelists requests from ever being logged or stubbed | ||
| expect(server.whitelist).to.be.a('function') | ||
| }) | ||
| cy | ||
| .server({ | ||
| method: 'POST', | ||
| delay: 1000, | ||
| status: 422, | ||
| response: {} | ||
| }) | ||
| cy.server({ | ||
| method: 'POST', | ||
| delay: 1000, | ||
| status: 422, | ||
| response: {} | ||
| }) | ||
| // any route commands will now inherit the above options | ||
| // from the server. anything we pass specifically | ||
| // to route will override the defaults though. | ||
| // any route commands will now inherit the above options | ||
| // from the server. anything we pass specifically | ||
| // to route will override the defaults though. | ||
| }) | ||
| it('cy.request() - make an XHR request', function(){ | ||
| // https://on.cypress.io/api/request | ||
| cy | ||
| .request('https://jsonplaceholder.typicode.com/comments').then(function(response){ | ||
| // https://on.cypress.io/request | ||
| cy.request('https://jsonplaceholder.typicode.com/comments') | ||
| .should(function(response){ | ||
| expect(response.status).to.eq(200) | ||
@@ -1064,60 +972,55 @@ expect(response.body).to.have.length(500) | ||
| var message = 'whoa, this comment doesn\'t exist' | ||
| cy.server() | ||
| // **** GET comments route **** | ||
| // | ||
| // https://on.cypress.io/api/route | ||
| cy | ||
| .route(/comments\/1/).as('getComment') | ||
| // we have code that fetches a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.network-btn').click() | ||
| // https://on.cypress.io/route | ||
| cy.route(/comments\/1/).as('getComment') | ||
| // **** Wait **** | ||
| // | ||
| // Wait for a specific resource to resolve | ||
| // continuing to the next command | ||
| // | ||
| // https://on.cypress.io/api/wait | ||
| .wait('@getComment').its('status').should('eq', 200) | ||
| // we have code that fetches a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.network-btn').click() | ||
| // **** Wait **** | ||
| // Wait for a specific resource to resolve | ||
| // continuing to the next command | ||
| // https://on.cypress.io/wait | ||
| cy.wait('@getComment').its('status').should('eq', 200) | ||
| // **** POST comment route **** | ||
| // | ||
| // Specify the route to listen to method 'POST' | ||
| cy | ||
| .route('POST', '/comments').as('postComment') | ||
| cy.route('POST', '/comments').as('postComment') | ||
| // we have code that posts a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.network-post').click() | ||
| .wait('@postComment') | ||
| // we have code that posts a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.network-post').click() | ||
| cy.wait('@postComment') | ||
| // get the route | ||
| .get('@postComment').then(function(xhr){ | ||
| expect(xhr.requestBody).to.include('email') | ||
| expect(xhr.requestHeaders).to.have.property('Content-Type') | ||
| expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()') | ||
| }) | ||
| // get the route | ||
| cy.get('@postComment').then(function(xhr){ | ||
| expect(xhr.requestBody).to.include('email') | ||
| expect(xhr.requestHeaders).to.have.property('Content-Type') | ||
| expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()') | ||
| }) | ||
| // **** Stubbed PUT comment route **** | ||
| // | ||
| cy | ||
| .route({ | ||
| method: 'PUT', | ||
| url: /comments\/\d+/, | ||
| status: 404, | ||
| response: {error: message}, | ||
| delay: 500 | ||
| }).as('putComment') | ||
| cy.route({ | ||
| method: 'PUT', | ||
| url: /comments\/\d+/, | ||
| status: 404, | ||
| response: {error: message}, | ||
| delay: 500 | ||
| }).as('putComment') | ||
| // we have code that puts a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.network-put').click() | ||
| // we have code that puts a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.network-put').click() | ||
| .wait('@putComment') | ||
| cy.wait('@putComment') | ||
| // our 404 statusCode logic in scripts.js executed | ||
| .get('.network-put-comment').should('contain', message) | ||
| // our 404 statusCode logic in scripts.js executed | ||
| cy.get('.network-put-comment').should('contain', message) | ||
| }) | ||
@@ -1130,9 +1033,3 @@ }) | ||
| }) | ||
| // **** Files **** | ||
| // | ||
| // Use files to represent data | ||
| // or read / write files in your project | ||
| it('cy.fixture() - load a fixture', function(){ | ||
| // Instead of writing a response inline you can | ||
@@ -1144,52 +1041,47 @@ // connect a response with a fixture file | ||
| // https://on.cypress.io/api/fixture | ||
| cy | ||
| .fixture('example.json').as('comment') | ||
| // https://on.cypress.io/fixture | ||
| cy.fixture('example.json').as('comment') | ||
| .route(/comments/, '@comment').as('getComment') | ||
| cy.route(/comments/, '@comment').as('getComment') | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.fixture-btn').click() | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.fixture-btn').click() | ||
| .wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| cy.wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| // you can also just write the fixture in the route | ||
| cy | ||
| .route(/comments/, 'fixture:example.json').as('getComment') | ||
| cy.route(/comments/, 'fixture:example.json').as('getComment') | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.fixture-btn').click() | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.fixture-btn').click() | ||
| .wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| cy.wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| // or write fx to represent fixture | ||
| // by default it assumes it's .json | ||
| cy | ||
| .route(/comments/, 'fx:example').as('getComment') | ||
| cy.route(/comments/, 'fx:example').as('getComment') | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| .get('.fixture-btn').click() | ||
| // we have code that gets a comment when | ||
| // the button is clicked in scripts.js | ||
| cy.get('.fixture-btn').click() | ||
| .wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| cy.wait('@getComment').its('responseBody') | ||
| .should('have.property', 'name') | ||
| .and('include', 'Using fixtures to represent data') | ||
| }) | ||
| it('cy.readFile() - read a files contents', function(){ | ||
| // You can read a file and returns its contents | ||
| // You can read a file and yield its contents | ||
| // The filePath is relative to your project's root. | ||
| cy | ||
| // https://on.cypress.io/api/readfile | ||
| .readFile('cypress.json').then(function(json) { | ||
| expect(json).to.be.an('object') | ||
| }) | ||
| // https://on.cypress.io/readfile | ||
| cy.readFile('cypress.json').then(function(json) { | ||
| expect(json).to.be.an('object') | ||
| }) | ||
@@ -1199,28 +1091,26 @@ }) | ||
| it('cy.writeFile() - write to a file', function(){ | ||
| // You can write to a file with the specified contents | ||
| // If the path to the file does not exist, the file | ||
| // and it's path will be created. | ||
| // If the file already exists, it will be over-written. | ||
| cy | ||
| // Use a response from a request to automatically | ||
| // generate a fixture file for use later | ||
| .request('https://jsonplaceholder.typicode.com/users').then(function(response){ | ||
| // https://on.cypress.io/api/writefile | ||
| // Use a response from a request to automatically | ||
| // generate a fixture file for use later | ||
| cy.request('https://jsonplaceholder.typicode.com/users') | ||
| .then(function(response){ | ||
| // https://on.cypress.io/writefile | ||
| cy.writeFile('cypress/fixtures/users.json', response.body) | ||
| }) | ||
| .fixture('users').then(function(users){ | ||
| expect(users[0].name).to.exist | ||
| }) | ||
| cy.fixture('users').should(function(users){ | ||
| expect(users[0].name).to.exist | ||
| }) | ||
| cy | ||
| // JavaScript arrays and objects are stringified and formatted into text. | ||
| .writeFile('cypress/fixtures/profile.json', { id: 8739, name: 'Jane', email: 'jane@example.com'}) | ||
| .fixture('profile').then(function(profile){ | ||
| expect(profile.name).to.eq('Jane') | ||
| }) | ||
| // JavaScript arrays and objects are stringified and formatted into text. | ||
| cy.writeFile('cypress/fixtures/profile.json', { | ||
| id: 8739, | ||
| name: 'Jane', | ||
| email: 'jane@example.com' | ||
| }) | ||
| cy.fixture('profile').should(function(profile){ | ||
| expect(profile.name).to.eq('Jane') | ||
| }) | ||
| }) | ||
| }) | ||
@@ -1232,4 +1122,2 @@ | ||
| }) | ||
| // **** Local Storage **** | ||
| // | ||
| // Although local storage is automatically cleared | ||
@@ -1240,49 +1128,41 @@ // to maintain a clean state in between tests | ||
| it('cy.clearLocalStorage() - clear all data in local storage', function(){ | ||
| // https://on.cypress.io/clearlocalstorage | ||
| cy.get('.ls-btn').click().should(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| // **** Clear all data in Local Storage **** | ||
| // | ||
| // https://on.cypress.io/api/clearlocalstorage | ||
| cy | ||
| .get(".ls-btn").click().then(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| // clearLocalStorage() yields the localStorage object | ||
| cy.clearLocalStorage().should(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.be.null | ||
| expect(ls.getItem('prop3')).to.be.null | ||
| }) | ||
| // clearLocalStorage() returns the localStorage object | ||
| .clearLocalStorage().then(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.be.null | ||
| expect(ls.getItem('prop3')).to.be.null | ||
| }) | ||
| // **** Clear key matching string in Local Storage **** | ||
| // | ||
| cy | ||
| .get(".ls-btn").click().then(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| cy.get('.ls-btn').click().should(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| .clearLocalStorage('prop1').then(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.eq('blue') | ||
| expect(ls.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| cy.clearLocalStorage('prop1').should(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.eq('blue') | ||
| expect(ls.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| // **** Clear key's matching regex in Local Storage **** | ||
| // | ||
| cy | ||
| .get(".ls-btn").click().then(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| cy.get('.ls-btn').click().should(function(){ | ||
| expect(localStorage.getItem('prop1')).to.eq('red') | ||
| expect(localStorage.getItem('prop2')).to.eq('blue') | ||
| expect(localStorage.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| .clearLocalStorage(/prop1|2/).then(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.be.null | ||
| expect(ls.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| cy.clearLocalStorage(/prop1|2/).should(function(ls){ | ||
| expect(ls.getItem('prop1')).to.be.null | ||
| expect(ls.getItem('prop2')).to.be.null | ||
| expect(ls.getItem('prop3')).to.eq('magenta') | ||
| }) | ||
| }) | ||
@@ -1299,107 +1179,74 @@ }) | ||
| // any 3rd party cookies picked up such as cloudflare | ||
| .clearCookies() | ||
| cy.clearCookies() | ||
| }) | ||
| it('cy.getCookie() - get a browser cookie', function(){ | ||
| // https://on.cypress.io/getcookie | ||
| cy.get('#getCookie .set-a-cookie').click() | ||
| // **** Get a Cookie **** | ||
| // | ||
| // // https://on.cypress.io/api/getcookie | ||
| cy | ||
| .get('#getCookie .set-a-cookie').click() | ||
| // getCookie() returns a cookie object | ||
| .getCookie('token').should('have.property', 'value', '123ABC') | ||
| // cy.getCookie() yields a cookie object | ||
| cy.getCookie('token').should('have.property', 'value', '123ABC') | ||
| }) | ||
| it('cy.getCookies() - get browser cookies', function(){ | ||
| // https://on.cypress.io/getcookies | ||
| cy.getCookies().should('be.empty') | ||
| // **** Get all Cookies **** | ||
| // | ||
| // // https://on.cypress.io/api/getcookies | ||
| cy | ||
| .getCookies().should('be.empty') | ||
| cy.get('#getCookies .set-a-cookie').click() | ||
| .get('#getCookies .set-a-cookie').click() | ||
| // cy.getCookies() yields an array of cookies | ||
| cy.getCookies().should('have.length', 1).should( function(cookies) { | ||
| // getCookies() returns an array of cookies | ||
| .getCookies().should('have.length', 1).then( function(cookies) { | ||
| // each cookie has these properties | ||
| expect(cookies[0]).to.have.property('name', 'token') | ||
| expect(cookies[0]).to.have.property('value', '123ABC') | ||
| expect(cookies[0]).to.have.property('httpOnly', false) | ||
| expect(cookies[0]).to.have.property('secure', false) | ||
| expect(cookies[0]).to.have.property('domain') | ||
| expect(cookies[0]).to.have.property('path') | ||
| }) | ||
| // each cookie has these properties | ||
| expect(cookies[0]).to.have.property('name', 'token') | ||
| expect(cookies[0]).to.have.property('value', '123ABC') | ||
| expect(cookies[0]).to.have.property('httpOnly', false) | ||
| expect(cookies[0]).to.have.property('secure', false) | ||
| expect(cookies[0]).to.have.property('domain') | ||
| expect(cookies[0]).to.have.property('path') | ||
| }) | ||
| }) | ||
| it('cy.setCookie() - set a browser cookie', function(){ | ||
| // https://on.cypress.io/setcookie | ||
| cy.getCookies().should('be.empty') | ||
| // **** Set a Cookie **** | ||
| // | ||
| // // https://on.cypress.io/api/setcookie | ||
| cy | ||
| .getCookies().should('be.empty') | ||
| cy.setCookie('foo', 'bar') | ||
| .setCookie('foo', 'bar') | ||
| // getCookie() returns a cookie object | ||
| .getCookie('foo').should('have.property', 'value', 'bar') | ||
| // cy.getCookie() yields a cookie object | ||
| cy.getCookie('foo').should('have.property', 'value', 'bar') | ||
| }) | ||
| it('cy.clearCookie() - clear a browser cookie', function(){ | ||
| // https://on.cypress.io/clearcookie | ||
| cy.getCookie('token').should('be.null') | ||
| // **** Clear a Cookie **** | ||
| // | ||
| // // https://on.cypress.io/api/clearcookie | ||
| cy | ||
| .getCookie('token').should('be.null') | ||
| cy.get('#clearCookie .set-a-cookie').click() | ||
| .get('#clearCookie .set-a-cookie').click() | ||
| cy.getCookie('token').should('have.property', 'value', '123ABC') | ||
| .getCookie('token').should('have.property', 'value', '123ABC') | ||
| // cy.clearCookies() yields null | ||
| cy.clearCookie('token').should('be.null') | ||
| // clearCookies() returns null | ||
| .clearCookie('token').should('be.null') | ||
| .getCookie('token').should('be.null') | ||
| cy.getCookie('token').should('be.null') | ||
| }) | ||
| it('cy.clearCookies() - clear browser cookies', function(){ | ||
| // https://on.cypress.io/clearcookies | ||
| cy.getCookies().should('be.empty') | ||
| // **** Clear all Cookies **** | ||
| // | ||
| // https://on.cypress.io/api/clearcookies | ||
| cy.get('#clearCookies .set-a-cookie').click() | ||
| cy | ||
| .getCookies().should('be.empty') | ||
| cy.getCookies().should('have.length', 1) | ||
| .get('#clearCookies .set-a-cookie').click() | ||
| // cy.clearCookies() yields null | ||
| cy.clearCookies() | ||
| .getCookies().should('have.length', 1) | ||
| // clearCookies() returns null | ||
| .clearCookies() | ||
| .getCookies().should('be.empty') | ||
| cy.getCookies().should('be.empty') | ||
| }) | ||
| }) | ||
| context('Spies, Stubs, and Clock', function(){ | ||
| // **** Spies, Stubs, and Clock **** | ||
| // | ||
| // Cypress comes built in with the ability to stub, | ||
| // spy or modify your applications clock - | ||
| // such as controlling Date, setTimeout, and setInterval. | ||
| // These commands are useful when writing both | ||
| // unit tests and integration tests. | ||
| it('cy.spy() - wrap a method in a spy', function(){ | ||
| // https://on.cypress.io/api/spy | ||
| // https://on.cypress.io/spy | ||
| cy.visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
@@ -1411,3 +1258,3 @@ | ||
| var spy = cy.spy(obj, "foo").as("anyArgs") | ||
| var spy = cy.spy(obj, 'foo').as('anyArgs') | ||
@@ -1421,4 +1268,3 @@ obj.foo() | ||
| it('cy.stub() - create a stub and/or replace a function with a stub', function(){ | ||
| // https://on.cypress.io/api/stub | ||
| // https://on.cypress.io/stub | ||
| cy.visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
@@ -1430,5 +1276,5 @@ | ||
| var stub = cy.stub(obj, "foo").as("foo") | ||
| var stub = cy.stub(obj, 'foo').as('foo') | ||
| obj.foo("foo", "bar") | ||
| obj.foo('foo', 'bar') | ||
@@ -1442,11 +1288,9 @@ expect(stub).to.be.called | ||
| // no matter what local timezone the browser is running in | ||
| var now = new Date(Date.UTC(2017, 2, 14)).getTime() // March 14, 2017 timestamp | ||
| var now = new Date(Date.UTC(2017, 2, 14)).getTime() | ||
| // https://on.cypress.io/api/clock | ||
| cy | ||
| .clock(now) | ||
| .visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
| .get("#clock-div").click() | ||
| .should("have.text", "1489449600") | ||
| // https://on.cypress.io/clock | ||
| cy.clock(now) | ||
| cy.visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
| cy.get('#clock-div').click() | ||
| .should('have.text', '1489449600') | ||
| }) | ||
@@ -1457,14 +1301,12 @@ | ||
| // no matter what local timezone the browser is running in | ||
| var now = new Date(Date.UTC(2017, 2, 14)).getTime() // March 14, 2017 timestamp | ||
| var now = new Date(Date.UTC(2017, 2, 14)).getTime() | ||
| // https://on.cypress.io/api/tick | ||
| cy | ||
| .clock(now) | ||
| .visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
| .get("#tick-div").click() | ||
| .should("have.text", "1489449600") | ||
| .tick(10000) // 10 seconds passed | ||
| .get("#tick-div").click() | ||
| .should("have.text", "1489449610") | ||
| // https://on.cypress.io/tick | ||
| cy.clock(now) | ||
| cy.visit('http://localhost:8080/commands/spies-stubs-clocks') | ||
| cy.get('#tick-div').click() | ||
| .should('have.text', '1489449600') | ||
| cy.tick(10000) // 10 seconds passed | ||
| cy.get('#tick-div').click() | ||
| .should('have.text', '1489449610') | ||
| }) | ||
@@ -1478,17 +1320,9 @@ }) | ||
| // **** Utilities **** | ||
| // | ||
| // Cypress offers some utilities commands | ||
| // that give you access to methods from other | ||
| // commonly used libraries | ||
| it('Cypress._.method() - call a lodash method', function(){ | ||
| // use the _.chain, _.map, _.take, and _.value functions | ||
| // https://on.cypress.io/_ | ||
| cy.request('https://jsonplaceholder.typicode.com/users') | ||
| .then(function(response){ | ||
| var ids = Cypress._.chain(response.body).map('id').take(3).value() | ||
| it('Cypress._.method() - call an underscore method', function(){ | ||
| cy | ||
| // use the _.chain, _.pluck, _.first, and _.value functions | ||
| // https://on.cypress.io/api/cypress-underscore | ||
| .request('https://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]) | ||
@@ -1499,43 +1333,39 @@ }) | ||
| it('Cypress.$(selector) - call a jQuery method', function(){ | ||
| // https://on.cypress.io/api/cypress-jquery | ||
| // https://on.cypress.io/$ | ||
| var $li = Cypress.$('.utility-jquery li:first') | ||
| cy | ||
| .wrap($li) | ||
| .should('not.have.class', 'active') | ||
| cy.wrap($li) | ||
| .should('not.have.class', 'active') | ||
| .click() | ||
| .should('have.class', 'active') | ||
| .should('have.class', 'active') | ||
| }) | ||
| it('Cypress.moment() - format or parse dates using a moment method', function(){ | ||
| // use moment's format function | ||
| // https://on.cypress.io/api/cypress-moment | ||
| // https://on.cypress.io/cypress-moment | ||
| // eslint-disable-next-line no-unused-vars | ||
| var time = Cypress.moment().utc('2014-04-25T19:38:53.196Z').format('h:mm A') | ||
| cy | ||
| .get('.utility-moment').contains('3:38 PM') | ||
| .should('have.class', 'badge') | ||
| cy.get('.utility-moment').contains('3:38 PM') | ||
| .should('have.class', 'badge') | ||
| }) | ||
| it('Cypress.Blob.method() - blob utilities and base64 string conversion', function(){ | ||
| // https://on.cypress.io/api/cypress-blob | ||
| // https://github.com/nolanlawson/blob-util#imgSrcToDataURL | ||
| // get the dataUrl string for the javascript-logo | ||
| 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){ | ||
| cy.get('.utility-blob').then(function($div){ | ||
| // https://on.cypress.io/blob | ||
| // https://github.com/nolanlawson/blob-util#imgSrcToDataURL | ||
| // get the dataUrl string for the javascript-logo | ||
| 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.Blob.imgSrcToDataURL promise to our test | ||
| // append the image | ||
| $div.append(img) | ||
| cy.get('.utility-blob img').click() | ||
| .should('have.attr', 'src', dataUrl) | ||
| }) | ||
| .get('.utility-blob img').click().should('have.attr', 'src', dataUrl) | ||
| }) | ||
@@ -1545,4 +1375,3 @@ }) | ||
| it('new Cypress.Promise(function) - instantiate a bluebird promise', function(){ | ||
| // https://on.cypress.io/api/cypress-promise | ||
| // https://on.cypress.io/promise | ||
| var waited = false | ||
@@ -1552,2 +1381,3 @@ | ||
| // return a promise that resolves after 1 second | ||
| // eslint-disable-next-line no-unused-vars | ||
| return new Cypress.Promise(function(resolve, reject){ | ||
@@ -1564,13 +1394,11 @@ setTimeout(function(){ | ||
| 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 | ||
| }) | ||
| 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 | ||
| }) | ||
| }) | ||
| }) | ||
| }) | ||
@@ -1584,8 +1412,4 @@ | ||
| // **** Config **** | ||
| // | ||
| it('Cypress.config() - get and set configuration options', function(){ | ||
| // https://on.cypress.io/api/config | ||
| // https://on.cypress.io/config | ||
| var myConfig = Cypress.config() | ||
@@ -1603,9 +1427,5 @@ | ||
| // *** get a single configuration option ** | ||
| expect(Cypress.config('pageLoadTimeout')).to.eq(60000) | ||
| // *** set a single configuration option ** | ||
| // | ||
| // this will change the config for the rest of your tests! | ||
| // | ||
| Cypress.config('pageLoadTimeout', 20000) | ||
@@ -1624,15 +1444,11 @@ | ||
| // **** Env **** | ||
| // | ||
| // We can set environment variables for highly dynamic values | ||
| // | ||
| // https://on.cypress.io/guides/environment-variables | ||
| it('Cypress.env() - get the environment variables', function(){ | ||
| // https://on.cypress.io/api/env | ||
| // https://on.cypress.io/environment-variables | ||
| it('Cypress.env() - get environment variables', function(){ | ||
| // https://on.cypress.io/env | ||
| // set multiple environment variables | ||
| Cypress.env({ | ||
| host: 'veronica.dev.local', | ||
| api_server: 'http://localhost:8888/api/v1/' | ||
| api_server: 'http://localhost:8888/v1/' | ||
| }) | ||
@@ -1644,8 +1460,8 @@ | ||
| // set environment variable | ||
| Cypress.env('api_server', 'http://localhost:8888/api/v2/') | ||
| expect(Cypress.env('api_server')).to.eq('http://localhost:8888/api/v2/') | ||
| Cypress.env('api_server', 'http://localhost:8888/v2/') | ||
| expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/') | ||
| // get all environment variable | ||
| expect(Cypress.env()).to.have.property('host', 'veronica.dev.local') | ||
| expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/api/v2/') | ||
| expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/') | ||
| }) | ||
@@ -1659,10 +1475,4 @@ }) | ||
| // **** Cookies **** | ||
| // | ||
| // Manage your app's cookies while testing | ||
| // | ||
| // https://on.cypress.io/api/cookies | ||
| // https://on.cypress.io/cookies | ||
| it('Cypress.Cookies.debug() - enable or disable debugging', function(){ | ||
| Cypress.Cookies.debug(true) | ||
@@ -1680,3 +1490,2 @@ | ||
| it('Cypress.Cookies.preserveOnce() - preserve cookies by key', function(){ | ||
| // normally cookies are reset after each test | ||
@@ -1692,3 +1501,2 @@ cy.getCookie('fakeCookie').should('not.be.ok') | ||
| it('Cypress.Cookies.defaults() - set defaults for all cookies', function(){ | ||
| // now any cookie with the name 'session_id' will | ||
@@ -1702,3 +1510,3 @@ // not be cleared before each new test runs | ||
| context('Cypress.Dom', function(){ | ||
| context('Cypress.dom', function(){ | ||
| beforeEach(function(){ | ||
@@ -1708,10 +1516,4 @@ cy.visit('http://localhost:8080/cypress-api/dom') | ||
| // **** Dom **** | ||
| // | ||
| // Cypress.Dom holds methods and logic related to DOM. | ||
| // | ||
| // https://on.cypress.io/api/dom | ||
| it('Cypress.Dom.isHidden() - determine if a DOM element is hidden', function(){ | ||
| // https://on.cypress.io/dom | ||
| it('Cypress.dom.isHidden() - determine if a DOM element is hidden', function(){ | ||
| var hiddenP = Cypress.$('.dom-p p.hidden').get(0) | ||
@@ -1721,4 +1523,4 @@ var 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 | ||
| expect(Cypress.dom.isHidden(hiddenP)).to.be.true | ||
| expect(Cypress.dom.isHidden(visibleP)).to.be.false | ||
| }) | ||
@@ -1732,9 +1534,6 @@ }) | ||
| // **** Server **** | ||
| // | ||
| // Permanently override server options for | ||
| // all instances of cy.server() | ||
| // | ||
| // https://on.cypress.io/api/api-server | ||
| // https://on.cypress.io/cypress-server | ||
| it('Cypress.Server.defaults() - change default config of server', function(){ | ||
@@ -1744,2 +1543,3 @@ Cypress.Server.defaults({ | ||
| force404: false, | ||
| // eslint-disable-next-line no-unused-vars | ||
| whitelist: function(xhr){ | ||
@@ -1746,0 +1546,0 @@ // handle custom logic for whitelisting |
| // *********************************************** | ||
| // This example commands.js shows you how to | ||
| // create the custom command: 'login'. | ||
| // | ||
| // The commands.js file is a great place to | ||
@@ -10,10 +7,10 @@ // modify existing commands and create custom | ||
| // You can read more about custom commands here: | ||
| // https://on.cypress.io/api/commands | ||
| // https://on.cypress.io/commands | ||
| // *********************************************** | ||
| // | ||
| // Cypress.addParentCommand("login", function(email, password){ | ||
| // Cypress.Command.add("login", function(email, password){ | ||
| // var email = email || "joe@example.com" | ||
| // var password = password || "foobar" | ||
| // | ||
| // var log = Cypress.Log.command({ | ||
| // var log = Cypress.log({ | ||
| // name: "login", | ||
@@ -29,13 +26,17 @@ // message: [email, password], | ||
| // | ||
| // cy | ||
| // .visit("/login", {log: false}) | ||
| // .contains("Log In", {log: false}) | ||
| // .get("#email", {log: false}).type(email, {log: false}) | ||
| // .get("#password", {log: false}).type(password, {log: false}) | ||
| // .get("button", {log: false}).click({log: false}) //this should submit the form | ||
| // .get("h1", {log: false}).contains("Dashboard", {log: false}) //we should be on the dashboard now | ||
| // .url({log: false}).should("match", /dashboard/, {log: false}) | ||
| // cy.visit("/login", {log: false}) | ||
| // cy.contains("Log In", {log: false}) | ||
| // cy.get("#email", {log: false}) | ||
| // .type(email, {log: false}) | ||
| // cy.get("#password", {log: false}) | ||
| // .type(password, {log: false}) | ||
| // cy.get("button", {log: false}) | ||
| // .click({log: false}) // this should submit the form | ||
| // cy.get("h1", {log: false}) | ||
| // .contains("Dashboard", {log: false}) // we should be on the dashboard now | ||
| // cy.url({log: false}) | ||
| // .should("match", /dashboard/, {log: false}) | ||
| // .then(function(){ | ||
| // log.snapshot().end() | ||
| // }) | ||
| // }) | ||
| // }) |
| // *********************************************** | ||
| // This example defaults.js shows you how to | ||
| // customize the internal behavior of Cypress. | ||
| // | ||
| // The defaults.js file is a great place to | ||
| // override defaults used throughout all tests. | ||
| // | ||
| // *********************************************** | ||
@@ -17,2 +13,2 @@ // | ||
| // whitelist: ["session_id", "remember_token"] | ||
| // }) | ||
| // }) |
| // *********************************************************** | ||
| // This example support/index.js is processed and | ||
| // loaded automatically before your other test files. | ||
| // This file is loaded automatically before other test files. | ||
| // | ||
@@ -13,3 +12,3 @@ // This is a great place to put global configuration and | ||
| // You can read more here: | ||
| // https://on.cypress.io/guides/configuration#section-global | ||
| // https://on.cypress.io/configuration | ||
| // *********************************************************** | ||
@@ -19,4 +18,4 @@ | ||
| // using ES2015 syntax: | ||
| import "./commands" | ||
| import "./defaults" | ||
| import './commands' | ||
| import './defaults' | ||
@@ -23,0 +22,0 @@ // Alternatively you can use CommonJS syntax: |
| { | ||
| "name": "cypress-example-kitchensink", | ||
| "version": "0.7.0", | ||
| "version": "0.7.1-dev.20170910.193949", | ||
| "description": "This is an example app used to showcase Cypress.io testing. For a full reference of our documentation, go to docs.cypress.io", | ||
@@ -10,3 +10,5 @@ "main": "index.js", | ||
| "release": "releaser", | ||
| "test": "npm start & cypress run" | ||
| "test": "npm start & cypress run", | ||
| "pretest": "npm run lint", | ||
| "lint": "eslint --fix cypress/**/*.js" | ||
| }, | ||
@@ -27,4 +29,7 @@ "repository": { | ||
| "devDependencies": { | ||
| "@cypress/core-releaser": "0.1.8" | ||
| "@cypress/releaser": "0.2.1", | ||
| "cypress": "dev", | ||
| "eslint": "^4.0.0", | ||
| "stop-build": "^1.1.0" | ||
| } | ||
| } |
@@ -30,3 +30,3 @@ # Kitchen Sink [](https://circleci.com/gh/cypress-io/cypress-example-kitchensink) [](https://travis-ci.org/cypress-io/cypress-example-kitchensink) | ||
| * [Gitter Channel](https://gitter.im/cypress-io/cypress) | ||
| * [Gitter Chat](https://gitter.im/cypress-io/cypress) | ||
| * [Cypress Docs](https://on.cypress.io) | ||
@@ -33,0 +33,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.32%
2266078
Worsened metrics
- Dev dependency count
- increased by300%
4
- Lines of code
- decreased by-1.59%
2730
No dependency changes