|
|
@@ -0,0 +1,1499 @@
|
|
|
+//
|
|
|
+// **** Kitchen Sink Tests ****
|
|
|
+//
|
|
|
+// This app was developed to demonstrate
|
|
|
+// how to write tests in Cypress utilizing
|
|
|
+// all of the available commands
|
|
|
+//
|
|
|
+// Feel free to modify this spec in your
|
|
|
+// own application as a jumping off point
|
|
|
+
|
|
|
+// Please read our "Introduction to Cypress"
|
|
|
+// https://on.cypress.io/introduction-to-cypress
|
|
|
+
|
|
|
+/* eslint-disable */
|
|
|
+
|
|
|
+describe('Kitchen Sink', function () {
|
|
|
+ it('.should() - assert that <title> is correct', function () {
|
|
|
+ // https://on.cypress.io/visit
|
|
|
+ cy.visit('https://example.cypress.io')
|
|
|
+
|
|
|
+ // Here we've made our first assertion using a '.should()' command.
|
|
|
+ // An assertion is comprised of a chainer, subject, and optional value.
|
|
|
+
|
|
|
+ // https://on.cypress.io/should
|
|
|
+ // https://on.cypress.io/and
|
|
|
+
|
|
|
+ // https://on.cypress.io/title
|
|
|
+ cy.title().should('include', 'Kitchen Sink')
|
|
|
+ // ↲ ↲ ↲
|
|
|
+ // subject chainer value
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Querying', function () {
|
|
|
+ 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('https://example.cypress.io/commands/querying')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 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.get() - query DOM elements', function () {
|
|
|
+ // https://on.cypress.io/get
|
|
|
+
|
|
|
+ // Get DOM elements by id
|
|
|
+ cy.get('#query-btn').should('contain', 'Button')
|
|
|
+
|
|
|
+ // Get DOM elements by class
|
|
|
+ cy.get('.query-btn').should('contain', 'Button')
|
|
|
+
|
|
|
+ cy.get('#querying .well>button:first').should('contain', 'Button')
|
|
|
+ // ↲
|
|
|
+ // 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')
|
|
|
+
|
|
|
+ // we can pass a regexp to `.contains()`
|
|
|
+ cy.get('.query-list')
|
|
|
+ .contains(/^b\w+/).should('have.class', 'third')
|
|
|
+
|
|
|
+ cy.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')
|
|
|
+
|
|
|
+ // `.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('.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')
|
|
|
+ cy.get('input:last').should('have.attr', 'placeholder', 'Password')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.root() - query the root DOM element', function () {
|
|
|
+ // https://on.cypress.io/root
|
|
|
+ // By default, root is the document
|
|
|
+ cy.root().should('match', 'html')
|
|
|
+
|
|
|
+ cy.get('.query-ul').within(function () {
|
|
|
+ // In this within, the root is now the ul DOM element
|
|
|
+ cy.root().should('have.class', 'query-ul')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Traversal', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/traversal')
|
|
|
+ })
|
|
|
+
|
|
|
+ // Let's query for some DOM elements and make assertions
|
|
|
+
|
|
|
+ it('.children() - get child DOM elements', function () {
|
|
|
+ // https://on.cypress.io/children
|
|
|
+ cy.get('.traversal-breadcrumb').children('.active')
|
|
|
+ .should('contain', 'Data')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.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('.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('.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('.first() - get first DOM element', function () {
|
|
|
+ // https://on.cypress.io/first
|
|
|
+ cy.get('.traversal-table td').first().should('contain', '1')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.last() - get last DOM element', function () {
|
|
|
+ // https://on.cypress.io/last
|
|
|
+ cy.get('.traversal-buttons .btn').last().should('contain', 'Submit')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.next() - get next sibling DOM element', function () {
|
|
|
+ // https://on.cypress.io/next
|
|
|
+ cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.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('.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('.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('.parents() - get parent DOM elements from DOM elements', function () {
|
|
|
+ // https://on.cypress.io/parents
|
|
|
+ cy.get('.traversal-cite').parents().should('match', 'blockquote')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.prev() - get previous sibling DOM element', function () {
|
|
|
+ // https://on.cypress.io/prev
|
|
|
+ cy.get('.birds').find('.active').prev().should('contain', 'Lorikeets')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.prevUntil() - get all previous sibling DOM elements until el', function () {
|
|
|
+ // https://on.cypress.io/prevUntil
|
|
|
+ cy.get('.foods-list').find('#nuts').prevUntil('#veggies')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.siblings() - get all sibling DOM elements', function () {
|
|
|
+ // https://on.cypress.io/siblings
|
|
|
+ cy.get('.traversal-pills .active').siblings().should('have.length', 2)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Actions', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/actions')
|
|
|
+ })
|
|
|
+
|
|
|
+ // Let's perform some actions on DOM elements
|
|
|
+ // https://on.cypress.io/interacting-with-elements
|
|
|
+
|
|
|
+ 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')
|
|
|
+
|
|
|
+ // .type() with special character sequences
|
|
|
+ .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
|
|
|
+ .type('{del}{selectall}{backspace}')
|
|
|
+
|
|
|
+ // .type() with key modifiers
|
|
|
+ .type('{alt}{option}') //these are equivalent
|
|
|
+ .type('{ctrl}{control}') //these are equivalent
|
|
|
+ .type('{meta}{command}{cmd}') //these are equivalent
|
|
|
+ .type('{shift}')
|
|
|
+
|
|
|
+ // Delay each keypress by 0.1 sec
|
|
|
+ .type('slow.typing@email.com', { delay: 100 })
|
|
|
+ .should('have.value', 'slow.typing@email.com')
|
|
|
+
|
|
|
+ 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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;')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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;')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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', '')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.click() - click on a DOM element', function () {
|
|
|
+ // https://on.cypress.io/click
|
|
|
+ cy.get('.action-btn').click()
|
|
|
+
|
|
|
+ // You can click 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()
|
|
|
+
|
|
|
+ cy.get('#action-canvas').click('topLeft')
|
|
|
+ cy.get('#action-canvas').click('top')
|
|
|
+ cy.get('#action-canvas').click('topRight')
|
|
|
+ cy.get('#action-canvas').click('left')
|
|
|
+ cy.get('#action-canvas').click('right')
|
|
|
+ cy.get('#action-canvas').click('bottomLeft')
|
|
|
+ cy.get('#action-canvas').click('bottom')
|
|
|
+ cy.get('#action-canvas').click('bottomRight')
|
|
|
+
|
|
|
+ // .click() accepts an x and y coordinate
|
|
|
+ // that controls where the click occurs :)
|
|
|
+
|
|
|
+ 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 multiple elements by passing multiple: true
|
|
|
+ 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 })
|
|
|
+ })
|
|
|
+
|
|
|
+ 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/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, .check() will check all
|
|
|
+ // matching checkbox or radio elements in succession, one after another
|
|
|
+
|
|
|
+ // https://on.cypress.io/check
|
|
|
+ cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
|
|
|
+ .check().should('be.checked')
|
|
|
+
|
|
|
+ cy.get('.action-radios [type="radio"]').not('[disabled]')
|
|
|
+ .check().should('be.checked')
|
|
|
+
|
|
|
+ // .check() accepts a value argument
|
|
|
+ // that checks only checkboxes or radios
|
|
|
+ // with matching values
|
|
|
+ cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked')
|
|
|
+
|
|
|
+ // .check() accepts an array of values
|
|
|
+ // that checks only checkboxes or radios
|
|
|
+ // with matching values
|
|
|
+ cy.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.
|
|
|
+ cy.get('.action-checkboxes [disabled]')
|
|
|
+ .check({ force: true }).should('be.checked')
|
|
|
+
|
|
|
+ cy.get('.action-radios [type="radio"]')
|
|
|
+ .check('radio3', { force: true }).should('be.checked')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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/uncheck
|
|
|
+ cy.get('.action-check [type="checkbox"]')
|
|
|
+ .not('[disabled]')
|
|
|
+ .uncheck().should('not.be.checked')
|
|
|
+
|
|
|
+ // .uncheck() accepts a value argument
|
|
|
+ // that unchecks only checkboxes
|
|
|
+ // with matching values
|
|
|
+ cy.get('.action-check [type="checkbox"]')
|
|
|
+ .check('checkbox1')
|
|
|
+ .uncheck('checkbox1').should('not.be.checked')
|
|
|
+
|
|
|
+ // .uncheck() accepts an array of values
|
|
|
+ // that unchecks only checkboxes or radios
|
|
|
+ // with matching values
|
|
|
+ cy.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.
|
|
|
+ cy.get('.action-check [disabled]')
|
|
|
+ .uncheck({ force: true }).should('not.be.checked')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.select() - select an option in a <select> element', function () {
|
|
|
+ // https://on.cypress.io/select
|
|
|
+
|
|
|
+ // Select option with matching text content
|
|
|
+ cy.get('.action-select').select('apples')
|
|
|
+
|
|
|
+ // Select option with matching value
|
|
|
+ cy.get('.action-select').select('fr-bananas')
|
|
|
+
|
|
|
+ // Select options with matching text content
|
|
|
+ cy.get('.action-select-multiple')
|
|
|
+ .select(['apples', 'oranges', '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
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Window', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/window')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.window() - get the global window object', function () {
|
|
|
+ // https://on.cypress.io/window
|
|
|
+ cy.window().should('have.property', 'top')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.document() - get the document object', function () {
|
|
|
+ // https://on.cypress.io/document
|
|
|
+ cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.title() - get the title', function () {
|
|
|
+ // https://on.cypress.io/title
|
|
|
+ cy.title().should('include', 'Kitchen Sink')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Viewport', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/viewport')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.viewport() - set the viewport size and dimension', function () {
|
|
|
+
|
|
|
+ cy.get('#navbar').should('be.visible')
|
|
|
+
|
|
|
+ // 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')
|
|
|
+ cy.get('.navbar-toggle').should('be.visible').click()
|
|
|
+ cy.get('.nav').find('a').should('be.visible')
|
|
|
+
|
|
|
+ // lets see what our app looks like on a super large screen
|
|
|
+ cy.viewport(2999, 2999)
|
|
|
+
|
|
|
+ // cy.viewport() accepts a set of preset sizes
|
|
|
+ // to easily set the screen to a device's width and height
|
|
|
+
|
|
|
+ // We added a cy.wait() between each viewport change so you can see
|
|
|
+ // the change otherwise it's a little too fast to see :)
|
|
|
+
|
|
|
+ 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')
|
|
|
+ cy.wait(200)
|
|
|
+ cy.viewport('iphone-4', 'landscape')
|
|
|
+ cy.wait(200)
|
|
|
+
|
|
|
+ // The viewport will be reset back to the default dimensions
|
|
|
+ // in between tests (the default is set in cypress.json)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Location', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/location')
|
|
|
+ })
|
|
|
+
|
|
|
+ // We look at the url to make assertions
|
|
|
+ // about the page's state
|
|
|
+
|
|
|
+ it('cy.hash() - get the current URL hash', function () {
|
|
|
+ // https://on.cypress.io/hash
|
|
|
+ cy.hash().should('be.empty')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.location() - get window.location', function () {
|
|
|
+ // https://on.cypress.io/location
|
|
|
+ cy.location().should(function (location) {
|
|
|
+ expect(location.hash).to.be.empty
|
|
|
+ expect(location.href).to.eq('https://example.cypress.io/commands/location')
|
|
|
+ expect(location.host).to.eq('example.cypress.io')
|
|
|
+ expect(location.hostname).to.eq('example.cypress.io')
|
|
|
+ expect(location.origin).to.eq('https://example.cypress.io')
|
|
|
+ expect(location.pathname).to.eq('/commands/location')
|
|
|
+ expect(location.port).to.eq('')
|
|
|
+ expect(location.protocol).to.eq('https:')
|
|
|
+ expect(location.search).to.be.empty
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.url() - get the current URL', function () {
|
|
|
+ // https://on.cypress.io/url
|
|
|
+ cy.url().should('eq', 'https://example.cypress.io/commands/location')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Navigation', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io')
|
|
|
+ cy.get('.navbar-nav').contains('Commands').click()
|
|
|
+ cy.get('.dropdown-menu').contains('Navigation').click()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.go() - go back or forward in the browser\'s history', function () {
|
|
|
+ cy.location('pathname').should('include', 'navigation')
|
|
|
+
|
|
|
+ // https://on.cypress.io/go
|
|
|
+ cy.go('back')
|
|
|
+ cy.location('pathname').should('not.include', 'navigation')
|
|
|
+
|
|
|
+ cy.go('forward')
|
|
|
+ cy.location('pathname').should('include', 'navigation')
|
|
|
+
|
|
|
+ // equivalent to clicking back
|
|
|
+ cy.go(-1)
|
|
|
+ cy.location('pathname').should('not.include', 'navigation')
|
|
|
+
|
|
|
+ // equivalent to clicking forward
|
|
|
+ cy.go(1)
|
|
|
+ cy.location('pathname').should('include', 'navigation')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.reload() - reload the page', function () {
|
|
|
+ // https://on.cypress.io/reload
|
|
|
+ cy.reload()
|
|
|
+
|
|
|
+ // reload the page without using the cache
|
|
|
+ cy.reload(true)
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.visit() - visit a remote url', function () {
|
|
|
+ // Visit any sub-domain of your current domain
|
|
|
+ // https://on.cypress.io/visit
|
|
|
+
|
|
|
+ // Pass options to the visit
|
|
|
+ cy.visit('https://example.cypress.io/commands/navigation', {
|
|
|
+ timeout: 50000, // increase total time for the visit to resolve
|
|
|
+ onBeforeLoad (contentWindow) {
|
|
|
+ // contentWindow is the remote page's window object
|
|
|
+ },
|
|
|
+ onLoad (contentWindow) {
|
|
|
+ // contentWindow is the remote page's window object
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Assertions', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/assertions')
|
|
|
+ })
|
|
|
+
|
|
|
+ describe('Implicit Assertions', function () {
|
|
|
+
|
|
|
+ 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('.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 () {
|
|
|
+ // https://on.cypress.io/assertions
|
|
|
+ it('expect - assert shape of an object', function () {
|
|
|
+ const person = {
|
|
|
+ name: 'Joe',
|
|
|
+ age: 20,
|
|
|
+ }
|
|
|
+ expect(person).to.have.all.keys('name', 'age')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('expect - make an assertion about a specified subject', function () {
|
|
|
+ // We can use Chai's BDD style assertions
|
|
|
+ expect(true).to.be.true
|
|
|
+
|
|
|
+ // Pass a function to should that can have any number
|
|
|
+ // of explicit assertions within it.
|
|
|
+ cy.get('.assertions-p').find('p')
|
|
|
+ .should(function ($p) {
|
|
|
+ // return an array of texts from all of the p's
|
|
|
+ let texts = $p.map(function (i, el) {
|
|
|
+ // https://on.cypress.io/$
|
|
|
+ return Cypress.$(el).text()
|
|
|
+ })
|
|
|
+
|
|
|
+ // jquery map returns jquery object
|
|
|
+ // and .get() convert this to simple array
|
|
|
+ texts = texts.get()
|
|
|
+
|
|
|
+ // array should have length of 3
|
|
|
+ expect(texts).to.have.length(3)
|
|
|
+
|
|
|
+ // set this specific subject
|
|
|
+ expect(texts).to.deep.eq([
|
|
|
+ 'Some text from first p',
|
|
|
+ 'More text from second p',
|
|
|
+ 'And even more text from third p',
|
|
|
+ ])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Misc', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/misc')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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/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/exec
|
|
|
+ cy.exec('echo Jane Lane')
|
|
|
+ .its('stdout').should('contain', 'Jane Lane')
|
|
|
+
|
|
|
+ // we can use Cypress.platform string to
|
|
|
+ // select appropriate command
|
|
|
+ // https://on.cypress/io/platform
|
|
|
+ cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
|
|
|
+
|
|
|
+ if (Cypress.platform === 'win32') {
|
|
|
+ cy.exec('print cypress.json')
|
|
|
+ .its('stderr').should('be.empty')
|
|
|
+ } else {
|
|
|
+ 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')
|
|
|
+
|
|
|
+ cy.get('.misc-form').find('#description').click()
|
|
|
+ cy.focused().should('have.id', 'description')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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/wrap
|
|
|
+ cy.wrap({ foo: 'bar' })
|
|
|
+ .should('have.property', 'foo')
|
|
|
+ .and('include', 'bar')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Connectors', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/connectors')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ console.log($el, index, $list)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ 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('.invoke() - invoke a function on the current subject', function () {
|
|
|
+ // our div is hidden in our script.js
|
|
|
+ // $('.connectors-div').hide()
|
|
|
+
|
|
|
+ // 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.spread() - spread an array as individual args to callback function', function () {
|
|
|
+ // https://on.cypress.io/spread
|
|
|
+ let arr = ['foo', 'bar', 'baz']
|
|
|
+
|
|
|
+ cy.wrap(arr).spread(function (foo, bar, baz) {
|
|
|
+ expect(foo).to.eq('foo')
|
|
|
+ expect(bar).to.eq('bar')
|
|
|
+ expect(baz).to.eq('baz')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('.then() - invoke a callback function with the current subject', function () {
|
|
|
+ // https://on.cypress.io/then
|
|
|
+ cy.get('.connectors-list>li').then(function ($lis) {
|
|
|
+ expect($lis).to.have.length(3)
|
|
|
+ expect($lis.eq(0)).to.contain('Walk the dog')
|
|
|
+ expect($lis.eq(1)).to.contain('Feed the cat')
|
|
|
+ expect($lis.eq(2)).to.contain('Write JavaScript')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Aliasing', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/aliasing')
|
|
|
+ })
|
|
|
+
|
|
|
+ // We alias a DOM element for use later
|
|
|
+ // We don't have to traverse to the element
|
|
|
+ // later in our code, we just reference it with @
|
|
|
+
|
|
|
+ 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/as
|
|
|
+ cy.get('.as-table').find('tbody>tr')
|
|
|
+ .first().find('td').first().find('button').as('firstBtn')
|
|
|
+
|
|
|
+ // maybe do some more testing here...
|
|
|
+
|
|
|
+ // 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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Waiting', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/waiting')
|
|
|
+ })
|
|
|
+ // 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)
|
|
|
+ })
|
|
|
+
|
|
|
+ // Waiting for a specific resource to resolve
|
|
|
+ // is covered within the cy.route() test below
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Network Requests', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/network-requests')
|
|
|
+ })
|
|
|
+
|
|
|
+ // Manage AJAX / XHR requests in your app
|
|
|
+
|
|
|
+ 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
|
|
|
+ // you can override any of these options
|
|
|
+ expect(server.delay).to.eq(0)
|
|
|
+ expect(server.method).to.eq('GET')
|
|
|
+ expect(server.status).to.eq(200)
|
|
|
+ expect(server.headers).to.be.null
|
|
|
+ expect(server.response).to.be.null
|
|
|
+ expect(server.onRequest).to.be.undefined
|
|
|
+ expect(server.onResponse).to.be.undefined
|
|
|
+ expect(server.onAbort).to.be.undefined
|
|
|
+
|
|
|
+ // These options control the server behavior
|
|
|
+ // affecting all requests
|
|
|
+
|
|
|
+ // 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: {},
|
|
|
+ })
|
|
|
+
|
|
|
+ // 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/request
|
|
|
+ cy.request('https://jsonplaceholder.typicode.com/comments')
|
|
|
+ .should(function (response) {
|
|
|
+ expect(response.status).to.eq(200)
|
|
|
+ expect(response.body).to.have.length(500)
|
|
|
+ expect(response).to.have.property('headers')
|
|
|
+ expect(response).to.have.property('duration')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.route() - route responses to matching requests', function () {
|
|
|
+ let message = 'whoa, this comment doesn\'t exist'
|
|
|
+ cy.server()
|
|
|
+
|
|
|
+ // **** GET comments route ****
|
|
|
+
|
|
|
+ // https://on.cypress.io/route
|
|
|
+ cy.route(/comments\/1/).as('getComment')
|
|
|
+
|
|
|
+ // 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')
|
|
|
+
|
|
|
+ // 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
|
|
|
+ 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')
|
|
|
+
|
|
|
+ // we have code that puts a comment when
|
|
|
+ // the button is clicked in scripts.js
|
|
|
+ cy.get('.network-put').click()
|
|
|
+
|
|
|
+ cy.wait('@putComment')
|
|
|
+
|
|
|
+ // our 404 statusCode logic in scripts.js executed
|
|
|
+ cy.get('.network-put-comment').should('contain', message)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Files', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/files')
|
|
|
+ })
|
|
|
+ it('cy.fixture() - load a fixture', function () {
|
|
|
+ // Instead of writing a response inline you can
|
|
|
+ // connect a response with a fixture file
|
|
|
+ // located in fixtures folder.
|
|
|
+
|
|
|
+ cy.server()
|
|
|
+
|
|
|
+ // https://on.cypress.io/fixture
|
|
|
+ cy.fixture('example.json').as('comment')
|
|
|
+
|
|
|
+ cy.route(/comments/, '@comment').as('getComment')
|
|
|
+
|
|
|
+ // we have code that gets a comment when
|
|
|
+ // the button is clicked in scripts.js
|
|
|
+ cy.get('.fixture-btn').click()
|
|
|
+
|
|
|
+ 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')
|
|
|
+
|
|
|
+ // we have code that gets a comment when
|
|
|
+ // the button is clicked in scripts.js
|
|
|
+ cy.get('.fixture-btn').click()
|
|
|
+
|
|
|
+ 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')
|
|
|
+
|
|
|
+ // we have code that gets a comment when
|
|
|
+ // the button is clicked in scripts.js
|
|
|
+ cy.get('.fixture-btn').click()
|
|
|
+
|
|
|
+ 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 yield its contents
|
|
|
+ // The filePath is relative to your project's root.
|
|
|
+
|
|
|
+ // https://on.cypress.io/readfile
|
|
|
+ cy.readFile('cypress.json').then(function (json) {
|
|
|
+ expect(json).to.be.an('object')
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.writeFile() - write to a file', function () {
|
|
|
+ // You can write to a file with the specified contents
|
|
|
+
|
|
|
+ // 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)
|
|
|
+ })
|
|
|
+ cy.fixture('users').should(function (users) {
|
|
|
+ expect(users[0].name).to.exist
|
|
|
+ })
|
|
|
+
|
|
|
+ // 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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Local Storage', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/commands/local-storage')
|
|
|
+ })
|
|
|
+ // Although local storage is automatically cleared
|
|
|
+ // to maintain a clean state in between tests
|
|
|
+ // sometimes we need to clear the local storage manually
|
|
|
+
|
|
|
+ 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 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
|
|
|
+ })
|
|
|
+
|
|
|
+ // **** Clear key matching string in Local Storage ****
|
|
|
+ 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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().should(function () {
|
|
|
+ expect(localStorage.getItem('prop1')).to.eq('red')
|
|
|
+ expect(localStorage.getItem('prop2')).to.eq('blue')
|
|
|
+ expect(localStorage.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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Cookies', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ Cypress.Cookies.debug(true)
|
|
|
+
|
|
|
+ cy.visit('https://example.cypress.io/commands/cookies')
|
|
|
+
|
|
|
+ // clear cookies again after visiting to remove
|
|
|
+ // any 3rd party cookies picked up such as cloudflare
|
|
|
+ cy.clearCookies()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.getCookie() - get a browser cookie', function () {
|
|
|
+ // https://on.cypress.io/getcookie
|
|
|
+ cy.get('#getCookie .set-a-cookie').click()
|
|
|
+
|
|
|
+ // 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')
|
|
|
+
|
|
|
+ cy.get('#getCookies .set-a-cookie').click()
|
|
|
+
|
|
|
+ // cy.getCookies() yields an array of cookies
|
|
|
+ cy.getCookies().should('have.length', 1).should(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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.setCookie() - set a browser cookie', function () {
|
|
|
+ // https://on.cypress.io/setcookie
|
|
|
+ cy.getCookies().should('be.empty')
|
|
|
+
|
|
|
+ cy.setCookie('foo', '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')
|
|
|
+
|
|
|
+ cy.get('#clearCookie .set-a-cookie').click()
|
|
|
+
|
|
|
+ cy.getCookie('token').should('have.property', 'value', '123ABC')
|
|
|
+
|
|
|
+ // cy.clearCookies() yields null
|
|
|
+ cy.clearCookie('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')
|
|
|
+
|
|
|
+ cy.get('#clearCookies .set-a-cookie').click()
|
|
|
+
|
|
|
+ cy.getCookies().should('have.length', 1)
|
|
|
+
|
|
|
+ // cy.clearCookies() yields null
|
|
|
+ cy.clearCookies()
|
|
|
+
|
|
|
+ cy.getCookies().should('be.empty')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Spies, Stubs, and Clock', function () {
|
|
|
+ it('cy.spy() - wrap a method in a spy', function () {
|
|
|
+ // https://on.cypress.io/spy
|
|
|
+ cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
|
|
|
+
|
|
|
+ let obj = {
|
|
|
+ foo () {},
|
|
|
+ }
|
|
|
+
|
|
|
+ let spy = cy.spy(obj, 'foo').as('anyArgs')
|
|
|
+
|
|
|
+ obj.foo()
|
|
|
+
|
|
|
+ expect(spy).to.be.called
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.stub() - create a stub and/or replace a function with a stub', function () {
|
|
|
+ // https://on.cypress.io/stub
|
|
|
+ cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
|
|
|
+
|
|
|
+ let obj = {
|
|
|
+ foo () {},
|
|
|
+ }
|
|
|
+
|
|
|
+ let stub = cy.stub(obj, 'foo').as('foo')
|
|
|
+
|
|
|
+ obj.foo('foo', 'bar')
|
|
|
+
|
|
|
+ expect(stub).to.be.called
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.clock() - control time in the browser', function () {
|
|
|
+ // create the date in UTC so its always the same
|
|
|
+ // no matter what local timezone the browser is running in
|
|
|
+ let now = new Date(Date.UTC(2017, 2, 14)).getTime()
|
|
|
+
|
|
|
+ // https://on.cypress.io/clock
|
|
|
+ cy.clock(now)
|
|
|
+ cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
|
|
|
+ cy.get('#clock-div').click()
|
|
|
+ .should('have.text', '1489449600')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('cy.tick() - move time in the browser', function () {
|
|
|
+ // create the date in UTC so its always the same
|
|
|
+ // no matter what local timezone the browser is running in
|
|
|
+ let now = new Date(Date.UTC(2017, 2, 14)).getTime()
|
|
|
+
|
|
|
+ // https://on.cypress.io/tick
|
|
|
+ cy.clock(now)
|
|
|
+ cy.visit('https://example.cypress.io/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')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Utilities', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/utilities')
|
|
|
+ })
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ let ids = Cypress._.chain(response.body).map('id').take(3).value()
|
|
|
+
|
|
|
+ expect(ids).to.deep.eq([1, 2, 3])
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('Cypress.$(selector) - call a jQuery method', function () {
|
|
|
+ // https://on.cypress.io/$
|
|
|
+ let $li = Cypress.$('.utility-jquery li:first')
|
|
|
+
|
|
|
+ cy.wrap($li)
|
|
|
+ .should('not.have.class', 'active')
|
|
|
+ .click()
|
|
|
+ .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/cypress-moment
|
|
|
+ let 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('Cypress.Blob.method() - blob utilities and base64 string conversion', function () {
|
|
|
+ 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('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
|
|
|
+ .then(function (dataUrl) {
|
|
|
+ // create an <img> element and set its src to the dataUrl
|
|
|
+ let 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)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('new Cypress.Promise(function) - instantiate a bluebird promise', function () {
|
|
|
+ // https://on.cypress.io/promise
|
|
|
+ let waited = false
|
|
|
+
|
|
|
+ function waitOneSecond () {
|
|
|
+ // return a promise that resolves after 1 second
|
|
|
+ return new Cypress.Promise(function (resolve, reject) {
|
|
|
+ setTimeout(function () {
|
|
|
+ // set waited to true
|
|
|
+ waited = true
|
|
|
+
|
|
|
+ // resolve with 'foo' string
|
|
|
+ resolve('foo')
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ cy.then(function () {
|
|
|
+ // return a promise to cy.then() that
|
|
|
+ // is awaited until it resolves
|
|
|
+ return waitOneSecond().then(function (str) {
|
|
|
+ expect(str).to.eq('foo')
|
|
|
+ expect(waited).to.be.true
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ context('Cypress.config()', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/cypress-api/config')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('Cypress.config() - get and set configuration options', function () {
|
|
|
+ // https://on.cypress.io/config
|
|
|
+ let myConfig = Cypress.config()
|
|
|
+
|
|
|
+ expect(myConfig).to.have.property('animationDistanceThreshold', 5)
|
|
|
+ expect(myConfig).to.have.property('baseUrl', null)
|
|
|
+ expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
|
|
|
+ expect(myConfig).to.have.property('requestTimeout', 5000)
|
|
|
+ expect(myConfig).to.have.property('responseTimeout', 30000)
|
|
|
+ expect(myConfig).to.have.property('viewportHeight', 660)
|
|
|
+ expect(myConfig).to.have.property('viewportWidth', 1000)
|
|
|
+ expect(myConfig).to.have.property('pageLoadTimeout', 60000)
|
|
|
+ expect(myConfig).to.have.property('waitForAnimations', true)
|
|
|
+
|
|
|
+ expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
|
|
|
+
|
|
|
+ // this will change the config for the rest of your tests!
|
|
|
+ Cypress.config('pageLoadTimeout', 20000)
|
|
|
+
|
|
|
+ expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
|
|
|
+
|
|
|
+ Cypress.config('pageLoadTimeout', 60000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Cypress.env()', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/cypress-api/env')
|
|
|
+ })
|
|
|
+
|
|
|
+ // We can set environment variables for highly dynamic values
|
|
|
+
|
|
|
+ // 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/v1/',
|
|
|
+ })
|
|
|
+
|
|
|
+ // get environment variable
|
|
|
+ expect(Cypress.env('host')).to.eq('veronica.dev.local')
|
|
|
+
|
|
|
+ // set environment variable
|
|
|
+ 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/v2/')
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Cypress.Cookies', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/cypress-api/cookies')
|
|
|
+ })
|
|
|
+
|
|
|
+ // https://on.cypress.io/cookies
|
|
|
+ it('Cypress.Cookies.debug() - enable or disable debugging', function () {
|
|
|
+ Cypress.Cookies.debug(true)
|
|
|
+
|
|
|
+ // Cypress will now log in the console when
|
|
|
+ // cookies are set or cleared
|
|
|
+ cy.setCookie('fakeCookie', '123ABC')
|
|
|
+ cy.clearCookie('fakeCookie')
|
|
|
+ cy.setCookie('fakeCookie', '123ABC')
|
|
|
+ cy.clearCookie('fakeCookie')
|
|
|
+ cy.setCookie('fakeCookie', '123ABC')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('Cypress.Cookies.preserveOnce() - preserve cookies by key', function () {
|
|
|
+ // normally cookies are reset after each test
|
|
|
+ cy.getCookie('fakeCookie').should('not.be.ok')
|
|
|
+
|
|
|
+ // preserving a cookie will not clear it when
|
|
|
+ // the next test starts
|
|
|
+ cy.setCookie('lastCookie', '789XYZ')
|
|
|
+ Cypress.Cookies.preserveOnce('lastCookie')
|
|
|
+ })
|
|
|
+
|
|
|
+ it('Cypress.Cookies.defaults() - set defaults for all cookies', function () {
|
|
|
+ // now any cookie with the name 'session_id' will
|
|
|
+ // not be cleared before each new test runs
|
|
|
+ Cypress.Cookies.defaults({
|
|
|
+ whitelist: 'session_id',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Cypress.dom', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/cypress-api/dom')
|
|
|
+ })
|
|
|
+
|
|
|
+ // https://on.cypress.io/dom
|
|
|
+ it('Cypress.dom.isHidden() - determine if a DOM element is hidden', function () {
|
|
|
+ let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
|
|
|
+ let 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ context('Cypress.Server', function () {
|
|
|
+ beforeEach(function () {
|
|
|
+ cy.visit('https://example.cypress.io/cypress-api/server')
|
|
|
+ })
|
|
|
+
|
|
|
+ // Permanently override server options for
|
|
|
+ // all instances of cy.server()
|
|
|
+
|
|
|
+ // https://on.cypress.io/cypress-server
|
|
|
+ it('Cypress.Server.defaults() - change default config of server', function () {
|
|
|
+ Cypress.Server.defaults({
|
|
|
+ delay: 0,
|
|
|
+ force404: false,
|
|
|
+ whitelist (xhr) {
|
|
|
+ // handle custom logic for whitelisting
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+})
|
Sergiu Miclea