SHARE
TWEET

Untitled

a guest Apr 27th, 2018 521 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //
  2. // **** Kitchen Sink Tests ****
  3. //
  4. // This app was developed to demonstrate
  5. // how to write tests in Cypress utilizing
  6. // all of the available commands
  7. //
  8. // Feel free to modify this spec in your
  9. // own application as a jumping off point
  10.  
  11. // Please read our "Introduction to Cypress"
  12. // https://on.cypress.io/introduction-to-cypress
  13.  
  14. describe('Kitchen Sink', function () {
  15.   it('.should() - assert that <title> is correct', function () {
  16.     // https://on.cypress.io/visit
  17.     cy.visit('https://example.cypress.io')
  18.  
  19.     // Here we've made our first assertion using a '.should()' command.
  20.     // An assertion is comprised of a chainer, subject, and optional value.
  21.  
  22.     // https://on.cypress.io/should
  23.     // https://on.cypress.io/and
  24.  
  25.     // https://on.cypress.io/title
  26.     cy.title().should('include', 'Kitchen Sink')
  27.     //   ↲               ↲            ↲
  28.     // subject        chainer      value
  29.   })
  30.  
  31.   context('Querying', function () {
  32.     beforeEach(function () {
  33.       // Visiting our app before each test removes any state build up from
  34.       // previous tests. Visiting acts as if we closed a tab and opened a fresh one
  35.       cy.visit('https://example.cypress.io/commands/querying')
  36.     })
  37.  
  38.     // Let's query for some DOM elements and make assertions
  39.     // The most commonly used query is 'cy.get()', you can
  40.     // think of this like the '$' in jQuery
  41.  
  42.     it('cy.get() - query DOM elements', function () {
  43.       // https://on.cypress.io/get
  44.  
  45.       // Get DOM elements by id
  46.       cy.get('#query-btn').should('contain', 'Button')
  47.  
  48.       // Get DOM elements by class
  49.       cy.get('.query-btn').should('contain', 'Button')
  50.  
  51.       cy.get('#querying .well>button:first').should('contain', 'Button')
  52.       //              ↲
  53.       // Use CSS selectors just like jQuery
  54.     })
  55.  
  56.     it('cy.contains() - query DOM elements with matching content', function () {
  57.       // https://on.cypress.io/contains
  58.       cy.get('.query-list')
  59.         .contains('bananas').should('have.class', 'third')
  60.  
  61.       // we can pass a regexp to `.contains()`
  62.       cy.get('.query-list')
  63.         .contains(/^b\w+/).should('have.class', 'third')
  64.  
  65.       cy.get('.query-list')
  66.         .contains('apples').should('have.class', 'first')
  67.  
  68.       // passing a selector to contains will yield the selector containing the text
  69.       cy.get('#querying')
  70.         .contains('ul', 'oranges').should('have.class', 'query-list')
  71.  
  72.       // `.contains()` will favor input[type='submit'],
  73.       // button, a, and label over deeper elements inside them
  74.       // this will not yield the <span> inside the button,
  75.       // but the <button> itself
  76.       cy.get('.query-button')
  77.         .contains('Save Form').should('have.class', 'btn')
  78.     })
  79.  
  80.     it('.within() - query DOM elements within a specific element', function () {
  81.       // https://on.cypress.io/within
  82.       cy.get('.query-form').within(function () {
  83.         cy.get('input:first').should('have.attr', 'placeholder', 'Email')
  84.         cy.get('input:last').should('have.attr', 'placeholder', 'Password')
  85.       })
  86.     })
  87.  
  88.     it('cy.root() - query the root DOM element', function () {
  89.       // https://on.cypress.io/root
  90.       // By default, root is the document
  91.       cy.root().should('match', 'html')
  92.  
  93.       cy.get('.query-ul').within(function () {
  94.         // In this within, the root is now the ul DOM element
  95.         cy.root().should('have.class', 'query-ul')
  96.       })
  97.     })
  98.   })
  99.  
  100.   context('Traversal', function () {
  101.     beforeEach(function () {
  102.       cy.visit('https://example.cypress.io/commands/traversal')
  103.     })
  104.  
  105.     // Let's query for some DOM elements and make assertions
  106.  
  107.     it('.children() - get child DOM elements', function () {
  108.       // https://on.cypress.io/children
  109.       cy.get('.traversal-breadcrumb').children('.active')
  110.         .should('contain', 'Data')
  111.     })
  112.  
  113.     it('.closest() - get closest ancestor DOM element', function () {
  114.       // https://on.cypress.io/closest
  115.       cy.get('.traversal-badge').closest('ul')
  116.         .should('have.class', 'list-group')
  117.     })
  118.  
  119.     it('.eq() - get a DOM element at a specific index', function () {
  120.       // https://on.cypress.io/eq
  121.       cy.get('.traversal-list>li').eq(1).should('contain', 'siamese')
  122.     })
  123.  
  124.     it('.filter() - get DOM elements that match the selector', function () {
  125.       // https://on.cypress.io/filter
  126.       cy.get('.traversal-nav>li').filter('.active').should('contain', 'About')
  127.     })
  128.  
  129.     it('.find() - get descendant DOM elements of the selector', function () {
  130.       // https://on.cypress.io/find
  131.       cy.get('.traversal-pagination').find('li').find('a')
  132.         .should('have.length', 7)
  133.     })
  134.  
  135.     it('.first() - get first DOM element', function () {
  136.       // https://on.cypress.io/first
  137.       cy.get('.traversal-table td').first().should('contain', '1')
  138.     })
  139.  
  140.     it('.last() - get last DOM element', function () {
  141.       // https://on.cypress.io/last
  142.       cy.get('.traversal-buttons .btn').last().should('contain', 'Submit')
  143.     })
  144.  
  145.     it('.next() - get next sibling DOM element', function () {
  146.       // https://on.cypress.io/next
  147.       cy.get('.traversal-ul').contains('apples').next().should('contain', 'oranges')
  148.     })
  149.  
  150.     it('.nextAll() - get all next sibling DOM elements', function () {
  151.       // https://on.cypress.io/nextall
  152.       cy.get('.traversal-next-all').contains('oranges')
  153.         .nextAll().should('have.length', 3)
  154.     })
  155.  
  156.     it('.nextUntil() - get next sibling DOM elements until next el', function () {
  157.       // https://on.cypress.io/nextuntil
  158.       cy.get('#veggies').nextUntil('#nuts').should('have.length', 3)
  159.     })
  160.  
  161.     it('.not() - remove DOM elements from set of DOM elements', function () {
  162.       // https://on.cypress.io/not
  163.       cy.get('.traversal-disabled .btn').not('[disabled]').should('not.contain', 'Disabled')
  164.     })
  165.  
  166.     it('.parent() - get parent DOM element from DOM elements', function () {
  167.       // https://on.cypress.io/parent
  168.       cy.get('.traversal-mark').parent().should('contain', 'Morbi leo risus')
  169.     })
  170.  
  171.     it('.parents() - get parent DOM elements from DOM elements', function () {
  172.       // https://on.cypress.io/parents
  173.       cy.get('.traversal-cite').parents().should('match', 'blockquote')
  174.     })
  175.  
  176.     it('.parentsUntil() - get parent DOM elements from DOM elements until el', function () {
  177.       // https://on.cypress.io/parentsuntil
  178.       cy.get('.clothes-nav').find('.active').parentsUntil('.clothes-nav')
  179.         .should('have.length', 2)
  180.     })
  181.  
  182.     it('.prev() - get previous sibling DOM element', function () {
  183.       // https://on.cypress.io/prev
  184.       cy.get('.birds').find('.active').prev().should('contain', 'Lorikeets')
  185.     })
  186.  
  187.     it('.prevAll() - get all previous sibling DOM elements', function () {
  188.       // https://on.cypress.io/prevAll
  189.       cy.get('.fruits-list').find('.third').prevAll().should('have.length', 2)
  190.     })
  191.  
  192.     it('.prevUntil() - get all previous sibling DOM elements until el', function () {
  193.       // https://on.cypress.io/prevUntil
  194.       cy.get('.foods-list').find('#nuts').prevUntil('#veggies')
  195.     })
  196.  
  197.     it('.siblings() - get all sibling DOM elements', function () {
  198.       // https://on.cypress.io/siblings
  199.       cy.get('.traversal-pills .active').siblings().should('have.length', 2)
  200.     })
  201.   })
  202.  
  203.   context('Actions', function () {
  204.     beforeEach(function () {
  205.       cy.visit('https://example.cypress.io/commands/actions')
  206.     })
  207.  
  208.     // Let's perform some actions on DOM elements
  209.     // https://on.cypress.io/interacting-with-elements
  210.  
  211.     it('.type() - type into a DOM element', function () {
  212.       // https://on.cypress.io/type
  213.       cy.get('.action-email')
  214.         .type('fake@email.com').should('have.value', 'fake@email.com')
  215.  
  216.         // .type() with special character sequences
  217.         .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
  218.         .type('{del}{selectall}{backspace}')
  219.  
  220.         // .type() with key modifiers
  221.         .type('{alt}{option}') //these are equivalent
  222.         .type('{ctrl}{control}') //these are equivalent
  223.         .type('{meta}{command}{cmd}') //these are equivalent
  224.         .type('{shift}')
  225.  
  226.         // Delay each keypress by 0.1 sec
  227.         .type('slow.typing@email.com', { delay: 100 })
  228.         .should('have.value', 'slow.typing@email.com')
  229.  
  230.       cy.get('.action-disabled')
  231.         // Ignore error checking prior to type
  232.         // like whether the input is visible or disabled
  233.         .type('disabled error checking', { force: true })
  234.         .should('have.value', 'disabled error checking')
  235.     })
  236.  
  237.     it('.focus() - focus on a DOM element', function () {
  238.       // https://on.cypress.io/focus
  239.       cy.get('.action-focus').focus()
  240.         .should('have.class', 'focus')
  241.         .prev().should('have.attr', 'style', 'color: orange;')
  242.     })
  243.  
  244.     it('.blur() - blur off a DOM element', function () {
  245.       // https://on.cypress.io/blur
  246.       cy.get('.action-blur').type('I\'m about to blur').blur()
  247.         .should('have.class', 'error')
  248.         .prev().should('have.attr', 'style', 'color: red;')
  249.     })
  250.  
  251.     it('.clear() - clears an input or textarea element', function () {
  252.       // https://on.cypress.io/clear
  253.       cy.get('.action-clear').type('We are going to clear this text')
  254.         .should('have.value', 'We are going to clear this text')
  255.         .clear()
  256.         .should('have.value', '')
  257.     })
  258.  
  259.     it('.submit() - submit a form', function () {
  260.       // https://on.cypress.io/submit
  261.       cy.get('.action-form')
  262.         .find('[type="text"]').type('HALFOFF')
  263.       cy.get('.action-form').submit()
  264.         .next().should('contain', 'Your form has been submitted!')
  265.     })
  266.  
  267.     it('.click() - click on a DOM element', function () {
  268.       // https://on.cypress.io/click
  269.       cy.get('.action-btn').click()
  270.  
  271.       // You can click on 9 specific positions of an element:
  272.       //  -----------------------------------
  273.       // | topLeft        top       topRight |
  274.       // |                                   |
  275.       // |                                   |
  276.       // |                                   |
  277.       // | left          center        right |
  278.       // |                                   |
  279.       // |                                   |
  280.       // |                                   |
  281.       // | bottomLeft   bottom   bottomRight |
  282.       //  -----------------------------------
  283.  
  284.       // clicking in the center of the element is the default
  285.       cy.get('#action-canvas').click()
  286.  
  287.       cy.get('#action-canvas').click('topLeft')
  288.       cy.get('#action-canvas').click('top')
  289.       cy.get('#action-canvas').click('topRight')
  290.       cy.get('#action-canvas').click('left')
  291.       cy.get('#action-canvas').click('right')
  292.       cy.get('#action-canvas').click('bottomLeft')
  293.       cy.get('#action-canvas').click('bottom')
  294.       cy.get('#action-canvas').click('bottomRight')
  295.  
  296.       // .click() accepts an x and y coordinate
  297.       // that controls where the click occurs :)
  298.  
  299.       cy.get('#action-canvas')
  300.         .click(80, 75) // click 80px on x coord and 75px on y coord
  301.         .click(170, 75)
  302.         .click(80, 165)
  303.         .click(100, 185)
  304.         .click(125, 190)
  305.         .click(150, 185)
  306.         .click(170, 165)
  307.  
  308.       // click multiple elements by passing multiple: true
  309.       cy.get('.action-labels>.label').click({ multiple: true })
  310.  
  311.       // Ignore error checking prior to clicking
  312.       // like whether the element is visible, clickable or disabled
  313.       // this button below is covered by another element.
  314.       cy.get('.action-opacity>.btn').click({ force: true })
  315.     })
  316.  
  317.     it('.dblclick() - double click on a DOM element', function () {
  318.       // Our app has a listener on 'dblclick' event in our 'scripts.js'
  319.       // that hides the div and shows an input on double click
  320.  
  321.       // https://on.cypress.io/dblclick
  322.       cy.get('.action-div').dblclick().should('not.be.visible')
  323.       cy.get('.action-input-hidden').should('be.visible')
  324.     })
  325.  
  326.     it('cy.check() - check a checkbox or radio element', function () {
  327.       // By default, .check() will check all
  328.       // matching checkbox or radio elements in succession, one after another
  329.  
  330.       // https://on.cypress.io/check
  331.       cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
  332.         .check().should('be.checked')
  333.  
  334.       cy.get('.action-radios [type="radio"]').not('[disabled]')
  335.         .check().should('be.checked')
  336.  
  337.       // .check() accepts a value argument
  338.       // that checks only checkboxes or radios
  339.       // with matching values
  340.       cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked')
  341.  
  342.       // .check() accepts an array of values
  343.       // that checks only checkboxes or radios
  344.       // with matching values
  345.       cy.get('.action-multiple-checkboxes [type="checkbox"]')
  346.         .check(['checkbox1', 'checkbox2']).should('be.checked')
  347.  
  348.       // Ignore error checking prior to checking
  349.       // like whether the element is visible, clickable or disabled
  350.       // this checkbox below is disabled.
  351.       cy.get('.action-checkboxes [disabled]')
  352.         .check({ force: true }).should('be.checked')
  353.  
  354.       cy.get('.action-radios [type="radio"]')
  355.         .check('radio3', { force: true }).should('be.checked')
  356.     })
  357.  
  358.     it('.uncheck() - uncheck a checkbox element', function () {
  359.       // By default, .uncheck() will uncheck all matching
  360.       // checkbox elements in succession, one after another
  361.  
  362.       // https://on.cypress.io/uncheck
  363.       cy.get('.action-check [type="checkbox"]')
  364.         .not('[disabled]')
  365.         .uncheck().should('not.be.checked')
  366.  
  367.       // .uncheck() accepts a value argument
  368.       // that unchecks only checkboxes
  369.       // with matching values
  370.       cy.get('.action-check [type="checkbox"]')
  371.         .check('checkbox1')
  372.         .uncheck('checkbox1').should('not.be.checked')
  373.  
  374.       // .uncheck() accepts an array of values
  375.       // that unchecks only checkboxes or radios
  376.       // with matching values
  377.       cy.get('.action-check [type="checkbox"]')
  378.         .check(['checkbox1', 'checkbox3'])
  379.         .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
  380.  
  381.       // Ignore error checking prior to unchecking
  382.       // like whether the element is visible, clickable or disabled
  383.       // this checkbox below is disabled.
  384.       cy.get('.action-check [disabled]')
  385.         .uncheck({ force: true }).should('not.be.checked')
  386.     })
  387.  
  388.     it('.select() - select an option in a <select> element', function () {
  389.       // https://on.cypress.io/select
  390.  
  391.       // Select option with matching text content
  392.       cy.get('.action-select').select('apples')
  393.  
  394.       // Select option with matching value
  395.       cy.get('.action-select').select('fr-bananas')
  396.  
  397.       // Select options with matching text content
  398.       cy.get('.action-select-multiple')
  399.         .select(['apples', 'oranges', 'bananas'])
  400.  
  401.       // Select options with matching values
  402.       cy.get('.action-select-multiple')
  403.         .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
  404.     })
  405.  
  406.     it('.scrollIntoView() - scroll an element into view', function () {
  407.       // https://on.cypress.io/scrollintoview
  408.  
  409.       // normally all of these buttons are hidden, because they're not within
  410.       // the viewable area of their parent (we need to scroll to see them)
  411.       cy.get('#scroll-horizontal button')
  412.         .should('not.be.visible')
  413.  
  414.       // scroll the button into view, as if the user had scrolled
  415.       cy.get('#scroll-horizontal button').scrollIntoView()
  416.         .should('be.visible')
  417.  
  418.       cy.get('#scroll-vertical button')
  419.         .should('not.be.visible')
  420.  
  421.       // Cypress handles the scroll direction needed
  422.       cy.get('#scroll-vertical button').scrollIntoView()
  423.         .should('be.visible')
  424.  
  425.       cy.get('#scroll-both button')
  426.         .should('not.be.visible')
  427.  
  428.       // Cypress knows to scroll to the right and down
  429.       cy.get('#scroll-both button').scrollIntoView()
  430.         .should('be.visible')
  431.     })
  432.  
  433.     it('cy.scrollTo() - scroll the window or element to a position', function () {
  434.  
  435.       // https://on.cypress.io/scrollTo
  436.  
  437.       // You can scroll to 9 specific positions of an element:
  438.       //  -----------------------------------
  439.       // | topLeft        top       topRight |
  440.       // |                                   |
  441.       // |                                   |
  442.       // |                                   |
  443.       // | left          center        right |
  444.       // |                                   |
  445.       // |                                   |
  446.       // |                                   |
  447.       // | bottomLeft   bottom   bottomRight |
  448.       //  -----------------------------------
  449.  
  450.       // if you chain .scrollTo() off of cy, we will
  451.       // scroll the entire window
  452.       cy.scrollTo('bottom')
  453.  
  454.       cy.get('#scrollable-horizontal').scrollTo('right')
  455.  
  456.       // or you can scroll to a specific coordinate:
  457.       // (x axis, y axis) in pixels
  458.       cy.get('#scrollable-vertical').scrollTo(250, 250)
  459.  
  460.       // or you can scroll to a specific percentage
  461.       // of the (width, height) of the element
  462.       cy.get('#scrollable-both').scrollTo('75%', '25%')
  463.  
  464.       // control the easing of the scroll (default is 'swing')
  465.       cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
  466.  
  467.       // control the duration of the scroll (in ms)
  468.       cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
  469.     })
  470.  
  471.     it('.trigger() - trigger an event on a DOM element', function () {
  472.       // To interact with a range input (slider), we need to set its value and
  473.       // then trigger the appropriate event to signal it has changed
  474.  
  475.       // Here, we invoke jQuery's val() method to set the value
  476.       // and trigger the 'change' event
  477.  
  478.       // Note that some implementations may rely on the 'input' event,
  479.       // which is fired as a user moves the slider, but is not supported
  480.       // by some browsers
  481.  
  482.       // https://on.cypress.io/trigger
  483.       cy.get('.trigger-input-range')
  484.         .invoke('val', 25)
  485.         .trigger('change')
  486.         .get('input[type=range]').siblings('p')
  487.         .should('have.text', '25')
  488.  
  489.       // See our example recipes for more examples of using trigger
  490.       // https://on.cypress.io/examples
  491.     })
  492.   })
  493.  
  494.   context('Window', function () {
  495.     beforeEach(function () {
  496.       cy.visit('https://example.cypress.io/commands/window')
  497.     })
  498.  
  499.     it('cy.window() - get the global window object', function () {
  500.       // https://on.cypress.io/window
  501.       cy.window().should('have.property', 'top')
  502.     })
  503.  
  504.     it('cy.document() - get the document object', function () {
  505.       // https://on.cypress.io/document
  506.       cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
  507.     })
  508.  
  509.     it('cy.title() - get the title', function () {
  510.       // https://on.cypress.io/title
  511.       cy.title().should('include', 'Kitchen Sink')
  512.     })
  513.   })
  514.  
  515.   context('Viewport', function () {
  516.     beforeEach(function () {
  517.       cy.visit('https://example.cypress.io/commands/viewport')
  518.     })
  519.  
  520.     it('cy.viewport() - set the viewport size and dimension', function () {
  521.  
  522.       cy.get('#navbar').should('be.visible')
  523.  
  524.       // https://on.cypress.io/viewport
  525.       cy.viewport(320, 480)
  526.  
  527.       // the navbar should have collapse since our screen is smaller
  528.       cy.get('#navbar').should('not.be.visible')
  529.       cy.get('.navbar-toggle').should('be.visible').click()
  530.       cy.get('.nav').find('a').should('be.visible')
  531.  
  532.       // lets see what our app looks like on a super large screen
  533.       cy.viewport(2999, 2999)
  534.  
  535.       // cy.viewport() accepts a set of preset sizes
  536.       // to easily set the screen to a device's width and height
  537.  
  538.       // We added a cy.wait() between each viewport change so you can see
  539.       // the change otherwise it's a little too fast to see :)
  540.  
  541.       cy.viewport('macbook-15')
  542.       cy.wait(200)
  543.       cy.viewport('macbook-13')
  544.       cy.wait(200)
  545.       cy.viewport('macbook-11')
  546.       cy.wait(200)
  547.       cy.viewport('ipad-2')
  548.       cy.wait(200)
  549.       cy.viewport('ipad-mini')
  550.       cy.wait(200)
  551.       cy.viewport('iphone-6+')
  552.       cy.wait(200)
  553.       cy.viewport('iphone-6')
  554.       cy.wait(200)
  555.       cy.viewport('iphone-5')
  556.       cy.wait(200)
  557.       cy.viewport('iphone-4')
  558.       cy.wait(200)
  559.       cy.viewport('iphone-3')
  560.       cy.wait(200)
  561.  
  562.       // cy.viewport() accepts an orientation for all presets
  563.       // the default orientation is 'portrait'
  564.       cy.viewport('ipad-2', 'portrait')
  565.       cy.wait(200)
  566.       cy.viewport('iphone-4', 'landscape')
  567.       cy.wait(200)
  568.  
  569.       // The viewport will be reset back to the default dimensions
  570.       // in between tests (the  default is set in cypress.json)
  571.     })
  572.   })
  573.  
  574.   context('Location', function () {
  575.     beforeEach(function () {
  576.       cy.visit('https://example.cypress.io/commands/location')
  577.     })
  578.  
  579.     // We look at the url to make assertions
  580.     // about the page's state
  581.  
  582.     it('cy.hash() - get the current URL hash', function () {
  583.       // https://on.cypress.io/hash
  584.       cy.hash().should('be.empty')
  585.     })
  586.  
  587.     it('cy.location() - get window.location', function () {
  588.       // https://on.cypress.io/location
  589.       cy.location().should(function (location) {
  590.         expect(location.hash).to.be.empty
  591.         expect(location.href).to.eq('https://example.cypress.io/commands/location')
  592.         expect(location.host).to.eq('example.cypress.io')
  593.         expect(location.hostname).to.eq('example.cypress.io')
  594.         expect(location.origin).to.eq('https://example.cypress.io')
  595.         expect(location.pathname).to.eq('/commands/location')
  596.         expect(location.port).to.eq('')
  597.         expect(location.protocol).to.eq('https:')
  598.         expect(location.search).to.be.empty
  599.       })
  600.     })
  601.  
  602.     it('cy.url() - get the current URL', function () {
  603.       // https://on.cypress.io/url
  604.       cy.url().should('eq', 'https://example.cypress.io/commands/location')
  605.     })
  606.   })
  607.  
  608.   context('Navigation', function () {
  609.     beforeEach(function () {
  610.       cy.visit('https://example.cypress.io')
  611.       cy.get('.navbar-nav').contains('Commands').click()
  612.       cy.get('.dropdown-menu').contains('Navigation').click()
  613.     })
  614.  
  615.     it('cy.go() - go back or forward in the browser\'s history', function () {
  616.       cy.location('pathname').should('include', 'navigation')
  617.  
  618.       // https://on.cypress.io/go
  619.       cy.go('back')
  620.       cy.location('pathname').should('not.include', 'navigation')
  621.  
  622.       cy.go('forward')
  623.       cy.location('pathname').should('include', 'navigation')
  624.  
  625.       // equivalent to clicking back
  626.       cy.go(-1)
  627.       cy.location('pathname').should('not.include', 'navigation')
  628.  
  629.       // equivalent to clicking forward
  630.       cy.go(1)
  631.       cy.location('pathname').should('include', 'navigation')
  632.     })
  633.  
  634.     it('cy.reload() - reload the page', function () {
  635.       // https://on.cypress.io/reload
  636.       cy.reload()
  637.  
  638.       // reload the page without using the cache
  639.       cy.reload(true)
  640.     })
  641.  
  642.     it('cy.visit() - visit a remote url', function () {
  643.       // Visit any sub-domain of your current domain
  644.       // https://on.cypress.io/visit
  645.  
  646.       // Pass options to the visit
  647.       cy.visit('https://example.cypress.io/commands/navigation', {
  648.         timeout: 50000, // increase total time for the visit to resolve
  649.         onBeforeLoad (contentWindow) {
  650.           // contentWindow is the remote page's window object
  651.         },
  652.         onLoad (contentWindow) {
  653.           // contentWindow is the remote page's window object
  654.         },
  655.       })
  656.       })
  657.   })
  658.  
  659.   context('Assertions', function () {
  660.     beforeEach(function () {
  661.       cy.visit('https://example.cypress.io/commands/assertions')
  662.     })
  663.  
  664.     describe('Implicit Assertions', function () {
  665.  
  666.       it('.should() - make an assertion about the current subject', function () {
  667.         // https://on.cypress.io/should
  668.         cy.get('.assertion-table')
  669.           .find('tbody tr:last').should('have.class', 'success')
  670.       })
  671.  
  672.       it('.and() - chain multiple assertions together', function () {
  673.         // https://on.cypress.io/and
  674.         cy.get('.assertions-link')
  675.           .should('have.class', 'active')
  676.           .and('have.attr', 'href')
  677.           .and('include', 'cypress.io')
  678.       })
  679.     })
  680.  
  681.     describe('Explicit Assertions', function () {
  682.       // https://on.cypress.io/assertions
  683.       it('expect - assert shape of an object', function () {
  684.         const person = {
  685.           name: 'Joe',
  686.           age: 20,
  687.         }
  688.         expect(person).to.have.all.keys('name', 'age')
  689.       })
  690.  
  691.       it('expect - make an assertion about a specified subject', function () {
  692.         // We can use Chai's BDD style assertions
  693.         expect(true).to.be.true
  694.  
  695.         // Pass a function to should that can have any number
  696.         // of explicit assertions within it.
  697.         cy.get('.assertions-p').find('p')
  698.         .should(function ($p) {
  699.           // return an array of texts from all of the p's
  700.           let texts = $p.map(function (i, el) {
  701.             // https://on.cypress.io/$
  702.             return Cypress.$(el).text()
  703.           })
  704.  
  705.           // jquery map returns jquery object
  706.           // and .get() convert this to simple array
  707.           texts = texts.get()
  708.  
  709.           // array should have length of 3
  710.           expect(texts).to.have.length(3)
  711.  
  712.           // set this specific subject
  713.           expect(texts).to.deep.eq([
  714.             'Some text from first p',
  715.             'More text from second p',
  716.             'And even more text from third p',
  717.           ])
  718.         })
  719.       })
  720.     })
  721.   })
  722.  
  723.   context('Misc', function () {
  724.     beforeEach(function () {
  725.       cy.visit('https://example.cypress.io/commands/misc')
  726.     })
  727.  
  728.     it('.end() - end the command chain', function () {
  729.       // cy.end is useful when you want to end a chain of commands
  730.       // and force Cypress to re-query from the root element
  731.  
  732.       // https://on.cypress.io/end
  733.       cy.get('.misc-table').within(function () {
  734.         // ends the current chain and yields null
  735.         cy.contains('Cheryl').click().end()
  736.  
  737.         // queries the entire table again
  738.         cy.contains('Charles').click()
  739.       })
  740.     })
  741.  
  742.     it('cy.exec() - execute a system command', function () {
  743.       // cy.exec allows you to execute a system command.
  744.       // so you can take actions necessary for your test,
  745.       // but outside the scope of Cypress.
  746.  
  747.       // https://on.cypress.io/exec
  748.       cy.exec('echo Jane Lane')
  749.         .its('stdout').should('contain', 'Jane Lane')
  750.  
  751.       // we can use Cypress.platform string to
  752.       // select appropriate command
  753.       // https://on.cypress/io/platform
  754.       cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
  755.  
  756.       if (Cypress.platform === 'win32') {
  757.         cy.exec('print cypress.json')
  758.           .its('stderr').should('be.empty')
  759.       } else {
  760.         cy.exec('cat cypress.json')
  761.           .its('stderr').should('be.empty')
  762.  
  763.         cy.exec('pwd')
  764.           .its('code').should('eq', 0)
  765.       }
  766.     })
  767.  
  768.     it('cy.focused() - get the DOM element that has focus', function () {
  769.       // https://on.cypress.io/focused
  770.       cy.get('.misc-form').find('#name').click()
  771.       cy.focused().should('have.id', 'name')
  772.  
  773.       cy.get('.misc-form').find('#description').click()
  774.       cy.focused().should('have.id', 'description')
  775.     })
  776.  
  777.     it('cy.screenshot() - take a screenshot', function () {
  778.       // https://on.cypress.io/screenshot
  779.       cy.screenshot('my-image')
  780.     })
  781.  
  782.     it('cy.wrap() - wrap an object', function () {
  783.       // https://on.cypress.io/wrap
  784.       cy.wrap({ foo: 'bar' })
  785.         .should('have.property', 'foo')
  786.         .and('include', 'bar')
  787.     })
  788.   })
  789.  
  790.   context('Connectors', function () {
  791.     beforeEach(function () {
  792.       cy.visit('https://example.cypress.io/commands/connectors')
  793.     })
  794.  
  795.     it('.each() - iterate over an array of elements', function () {
  796.       // https://on.cypress.io/each
  797.       cy.get('.connectors-each-ul>li')
  798.         .each(function ($el, index, $list) {
  799.           console.log($el, index, $list)
  800.         })
  801.     })
  802.  
  803.     it('.its() - get properties on the current subject', function () {
  804.       // https://on.cypress.io/its
  805.       cy.get('.connectors-its-ul>li')
  806.         // calls the 'length' property yielding that value
  807.         .its('length')
  808.         .should('be.gt', 2)
  809.     })
  810.  
  811.     it('.invoke() - invoke a function on the current subject', function () {
  812.       // our div is hidden in our script.js
  813.       // $('.connectors-div').hide()
  814.  
  815.       // https://on.cypress.io/invoke
  816.       cy.get('.connectors-div').should('be.hidden')
  817.  
  818.         // call the jquery method 'show' on the 'div.container'
  819.         .invoke('show')
  820.         .should('be.visible')
  821.     })
  822.  
  823.     it('.spread() - spread an array as individual args to callback function', function () {
  824.       // https://on.cypress.io/spread
  825.       let arr = ['foo', 'bar', 'baz']
  826.  
  827.       cy.wrap(arr).spread(function (foo, bar, baz) {
  828.         expect(foo).to.eq('foo')
  829.         expect(bar).to.eq('bar')
  830.         expect(baz).to.eq('baz')
  831.       })
  832.     })
  833.  
  834.     it('.then() - invoke a callback function with the current subject', function () {
  835.       // https://on.cypress.io/then
  836.       cy.get('.connectors-list>li').then(function ($lis) {
  837.         expect($lis).to.have.length(3)
  838.         expect($lis.eq(0)).to.contain('Walk the dog')
  839.         expect($lis.eq(1)).to.contain('Feed the cat')
  840.         expect($lis.eq(2)).to.contain('Write JavaScript')
  841.       })
  842.     })
  843.   })
  844.  
  845.   context('Aliasing', function () {
  846.     beforeEach(function () {
  847.       cy.visit('https://example.cypress.io/commands/aliasing')
  848.     })
  849.  
  850.     // We alias a DOM element for use later
  851.     // We don't have to traverse to the element
  852.     // later in our code, we just reference it with @
  853.  
  854.     it('.as() - alias a route or DOM element for later use', function () {
  855.       // this is a good use case for an alias,
  856.       // we don't want to write this long traversal again
  857.  
  858.       // https://on.cypress.io/as
  859.       cy.get('.as-table').find('tbody>tr')
  860.         .first().find('td').first().find('button').as('firstBtn')
  861.  
  862.       // maybe do some more testing here...
  863.  
  864.       // when we reference the alias, we place an
  865.       // @ in front of it's name
  866.       cy.get('@firstBtn').click()
  867.  
  868.       cy.get('@firstBtn')
  869.         .should('have.class', 'btn-success')
  870.         .and('contain', 'Changed')
  871.     })
  872.   })
  873.  
  874.   context('Waiting', function () {
  875.     beforeEach(function () {
  876.       cy.visit('https://example.cypress.io/commands/waiting')
  877.     })
  878.     // BE CAREFUL of adding unnecessary wait times.
  879.  
  880.     // https://on.cypress.io/wait
  881.     it('cy.wait() - wait for a specific amount of time', function () {
  882.       cy.get('.wait-input1').type('Wait 1000ms after typing')
  883.       cy.wait(1000)
  884.       cy.get('.wait-input2').type('Wait 1000ms after typing')
  885.       cy.wait(1000)
  886.       cy.get('.wait-input3').type('Wait 1000ms after typing')
  887.       cy.wait(1000)
  888.     })
  889.  
  890.     // Waiting for a specific resource to resolve
  891.     // is covered within the cy.route() test below
  892.   })
  893.  
  894.   context('Network Requests', function () {
  895.     beforeEach(function () {
  896.       cy.visit('https://example.cypress.io/commands/network-requests')
  897.     })
  898.  
  899.     // Manage AJAX / XHR requests in your app
  900.  
  901.     it('cy.server() - control behavior of network requests and responses', function () {
  902.       // https://on.cypress.io/server
  903.       cy.server().should(function (server) {
  904.         // the default options on server
  905.         // you can override any of these options
  906.         expect(server.delay).to.eq(0)
  907.         expect(server.method).to.eq('GET')
  908.         expect(server.status).to.eq(200)
  909.         expect(server.headers).to.be.null
  910.         expect(server.response).to.be.null
  911.         expect(server.onRequest).to.be.undefined
  912.         expect(server.onResponse).to.be.undefined
  913.         expect(server.onAbort).to.be.undefined
  914.  
  915.         // These options control the server behavior
  916.         // affecting all requests
  917.  
  918.         // pass false to disable existing route stubs
  919.         expect(server.enable).to.be.true
  920.         // forces requests that don't match your routes to 404
  921.         expect(server.force404).to.be.false
  922.         // whitelists requests from ever being logged or stubbed
  923.         expect(server.whitelist).to.be.a('function')
  924.       })
  925.  
  926.       cy.server({
  927.         method: 'POST',
  928.         delay: 1000,
  929.         status: 422,
  930.         response: {},
  931.       })
  932.  
  933.       // any route commands will now inherit the above options
  934.       // from the server. anything we pass specifically
  935.       // to route will override the defaults though.
  936.     })
  937.  
  938.     it('cy.request() - make an XHR request', function () {
  939.       // https://on.cypress.io/request
  940.       cy.request('https://jsonplaceholder.typicode.com/comments')
  941.         .should(function (response) {
  942.           expect(response.status).to.eq(200)
  943.           expect(response.body).to.have.length(500)
  944.           expect(response).to.have.property('headers')
  945.           expect(response).to.have.property('duration')
  946.         })
  947.     })
  948.  
  949.     it('cy.route() - route responses to matching requests', function () {
  950.       let message = 'whoa, this comment doesn\'t exist'
  951.       cy.server()
  952.  
  953.       // **** GET comments route ****
  954.  
  955.       // https://on.cypress.io/route
  956.       cy.route(/comments\/1/).as('getComment')
  957.  
  958.       // we have code that fetches a comment when
  959.       // the button is clicked in scripts.js
  960.       cy.get('.network-btn').click()
  961.  
  962.       // **** Wait ****
  963.  
  964.       // Wait for a specific resource to resolve
  965.       // continuing to the next command
  966.  
  967.       // https://on.cypress.io/wait
  968.       cy.wait('@getComment').its('status').should('eq', 200)
  969.  
  970.       // **** POST comment route ****
  971.  
  972.       // Specify the route to listen to method 'POST'
  973.       cy.route('POST', '/comments').as('postComment')
  974.  
  975.       // we have code that posts a comment when
  976.       // the button is clicked in scripts.js
  977.       cy.get('.network-post').click()
  978.       cy.wait('@postComment')
  979.  
  980.       // get the route
  981.       cy.get('@postComment').then(function (xhr) {
  982.         expect(xhr.requestBody).to.include('email')
  983.         expect(xhr.requestHeaders).to.have.property('Content-Type')
  984.         expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()')
  985.       })
  986.  
  987.       // **** Stubbed PUT comment route ****
  988.       cy.route({
  989.         method: 'PUT',
  990.         url: /comments\/\d+/,
  991.         status: 404,
  992.         response: { error: message },
  993.         delay: 500,
  994.       }).as('putComment')
  995.  
  996.       // we have code that puts a comment when
  997.       // the button is clicked in scripts.js
  998.       cy.get('.network-put').click()
  999.  
  1000.       cy.wait('@putComment')
  1001.  
  1002.       // our 404 statusCode logic in scripts.js executed
  1003.       cy.get('.network-put-comment').should('contain', message)
  1004.     })
  1005.   })
  1006.  
  1007.   context('Files', function () {
  1008.     beforeEach(function () {
  1009.       cy.visit('https://example.cypress.io/commands/files')
  1010.     })
  1011.     it('cy.fixture() - load a fixture', function () {
  1012.       // Instead of writing a response inline you can
  1013.       // connect a response with a fixture file
  1014.       // located in fixtures folder.
  1015.  
  1016.       cy.server()
  1017.  
  1018.       // https://on.cypress.io/fixture
  1019.       cy.fixture('example.json').as('comment')
  1020.  
  1021.       cy.route(/comments/, '@comment').as('getComment')
  1022.  
  1023.       // we have code that gets a comment when
  1024.       // the button is clicked in scripts.js
  1025.       cy.get('.fixture-btn').click()
  1026.  
  1027.       cy.wait('@getComment').its('responseBody')
  1028.         .should('have.property', 'name')
  1029.         .and('include', 'Using fixtures to represent data')
  1030.  
  1031.       // you can also just write the fixture in the route
  1032.       cy.route(/comments/, 'fixture:example.json').as('getComment')
  1033.  
  1034.       // we have code that gets a comment when
  1035.       // the button is clicked in scripts.js
  1036.       cy.get('.fixture-btn').click()
  1037.  
  1038.       cy.wait('@getComment').its('responseBody')
  1039.         .should('have.property', 'name')
  1040.         .and('include', 'Using fixtures to represent data')
  1041.  
  1042.       // or write fx to represent fixture
  1043.       // by default it assumes it's .json
  1044.       cy.route(/comments/, 'fx:example').as('getComment')
  1045.  
  1046.       // we have code that gets a comment when
  1047.       // the button is clicked in scripts.js
  1048.       cy.get('.fixture-btn').click()
  1049.  
  1050.       cy.wait('@getComment').its('responseBody')
  1051.         .should('have.property', 'name')
  1052.         .and('include', 'Using fixtures to represent data')
  1053.     })
  1054.  
  1055.     it('cy.readFile() - read a files contents', function () {
  1056.       // You can read a file and yield its contents
  1057.       // The filePath is relative to your project's root.
  1058.  
  1059.       // https://on.cypress.io/readfile
  1060.       cy.readFile('cypress.json').then(function (json) {
  1061.         expect(json).to.be.an('object')
  1062.       })
  1063.  
  1064.     })
  1065.  
  1066.     it('cy.writeFile() - write to a file', function () {
  1067.       // You can write to a file with the specified contents
  1068.  
  1069.       // Use a response from a request to automatically
  1070.       // generate a fixture file for use later
  1071.       cy.request('https://jsonplaceholder.typicode.com/users')
  1072.         .then(function (response) {
  1073.           // https://on.cypress.io/writefile
  1074.           cy.writeFile('cypress/fixtures/users.json', response.body)
  1075.         })
  1076.       cy.fixture('users').should(function (users) {
  1077.         expect(users[0].name).to.exist
  1078.       })
  1079.  
  1080.       // JavaScript arrays and objects are stringified and formatted into text.
  1081.       cy.writeFile('cypress/fixtures/profile.json', {
  1082.         id: 8739,
  1083.         name: 'Jane',
  1084.         email: 'jane@example.com',
  1085.       })
  1086.  
  1087.       cy.fixture('profile').should(function (profile) {
  1088.         expect(profile.name).to.eq('Jane')
  1089.       })
  1090.     })
  1091.   })
  1092.  
  1093.   context('Local Storage', function () {
  1094.     beforeEach(function () {
  1095.       cy.visit('https://example.cypress.io/commands/local-storage')
  1096.     })
  1097.     // Although local storage is automatically cleared
  1098.     // to maintain a clean state in between tests
  1099.     // sometimes we need to clear the local storage manually
  1100.  
  1101.     it('cy.clearLocalStorage() - clear all data in local storage', function () {
  1102.       // https://on.cypress.io/clearlocalstorage
  1103.       cy.get('.ls-btn').click().should(function () {
  1104.         expect(localStorage.getItem('prop1')).to.eq('red')
  1105.         expect(localStorage.getItem('prop2')).to.eq('blue')
  1106.         expect(localStorage.getItem('prop3')).to.eq('magenta')
  1107.       })
  1108.  
  1109.       // clearLocalStorage() yields the localStorage object
  1110.       cy.clearLocalStorage().should(function (ls) {
  1111.         expect(ls.getItem('prop1')).to.be.null
  1112.         expect(ls.getItem('prop2')).to.be.null
  1113.         expect(ls.getItem('prop3')).to.be.null
  1114.       })
  1115.  
  1116.       // **** Clear key matching string in Local Storage ****
  1117.       cy.get('.ls-btn').click().should(function () {
  1118.         expect(localStorage.getItem('prop1')).to.eq('red')
  1119.         expect(localStorage.getItem('prop2')).to.eq('blue')
  1120.         expect(localStorage.getItem('prop3')).to.eq('magenta')
  1121.       })
  1122.  
  1123.       cy.clearLocalStorage('prop1').should(function (ls) {
  1124.         expect(ls.getItem('prop1')).to.be.null
  1125.         expect(ls.getItem('prop2')).to.eq('blue')
  1126.         expect(ls.getItem('prop3')).to.eq('magenta')
  1127.       })
  1128.  
  1129.       // **** Clear key's matching regex in Local Storage ****
  1130.       cy.get('.ls-btn').click().should(function () {
  1131.         expect(localStorage.getItem('prop1')).to.eq('red')
  1132.         expect(localStorage.getItem('prop2')).to.eq('blue')
  1133.         expect(localStorage.getItem('prop3')).to.eq('magenta')
  1134.       })
  1135.  
  1136.       cy.clearLocalStorage(/prop1|2/).should(function (ls) {
  1137.         expect(ls.getItem('prop1')).to.be.null
  1138.         expect(ls.getItem('prop2')).to.be.null
  1139.         expect(ls.getItem('prop3')).to.eq('magenta')
  1140.       })
  1141.     })
  1142.   })
  1143.  
  1144.   context('Cookies', function () {
  1145.     beforeEach(function () {
  1146.       Cypress.Cookies.debug(true)
  1147.  
  1148.       cy.visit('https://example.cypress.io/commands/cookies')
  1149.  
  1150.       // clear cookies again after visiting to remove
  1151.       // any 3rd party cookies picked up such as cloudflare
  1152.       cy.clearCookies()
  1153.     })
  1154.  
  1155.     it('cy.getCookie() - get a browser cookie', function () {
  1156.       // https://on.cypress.io/getcookie
  1157.       cy.get('#getCookie .set-a-cookie').click()
  1158.  
  1159.       // cy.getCookie() yields a cookie object
  1160.       cy.getCookie('token').should('have.property', 'value', '123ABC')
  1161.     })
  1162.  
  1163.     it('cy.getCookies() - get browser cookies', function () {
  1164.       // https://on.cypress.io/getcookies
  1165.       cy.getCookies().should('be.empty')
  1166.  
  1167.       cy.get('#getCookies .set-a-cookie').click()
  1168.  
  1169.       // cy.getCookies() yields an array of cookies
  1170.       cy.getCookies().should('have.length', 1).should(function (cookies) {
  1171.  
  1172.         // each cookie has these properties
  1173.         expect(cookies[0]).to.have.property('name', 'token')
  1174.         expect(cookies[0]).to.have.property('value', '123ABC')
  1175.         expect(cookies[0]).to.have.property('httpOnly', false)
  1176.         expect(cookies[0]).to.have.property('secure', false)
  1177.         expect(cookies[0]).to.have.property('domain')
  1178.         expect(cookies[0]).to.have.property('path')
  1179.       })
  1180.     })
  1181.  
  1182.     it('cy.setCookie() - set a browser cookie', function () {
  1183.       // https://on.cypress.io/setcookie
  1184.       cy.getCookies().should('be.empty')
  1185.  
  1186.       cy.setCookie('foo', 'bar')
  1187.  
  1188.       // cy.getCookie() yields a cookie object
  1189.       cy.getCookie('foo').should('have.property', 'value', 'bar')
  1190.     })
  1191.  
  1192.     it('cy.clearCookie() - clear a browser cookie', function () {
  1193.       // https://on.cypress.io/clearcookie
  1194.       cy.getCookie('token').should('be.null')
  1195.  
  1196.       cy.get('#clearCookie .set-a-cookie').click()
  1197.  
  1198.       cy.getCookie('token').should('have.property', 'value', '123ABC')
  1199.  
  1200.       // cy.clearCookies() yields null
  1201.       cy.clearCookie('token').should('be.null')
  1202.  
  1203.       cy.getCookie('token').should('be.null')
  1204.     })
  1205.  
  1206.     it('cy.clearCookies() - clear browser cookies', function () {
  1207.       // https://on.cypress.io/clearcookies
  1208.       cy.getCookies().should('be.empty')
  1209.  
  1210.       cy.get('#clearCookies .set-a-cookie').click()
  1211.  
  1212.       cy.getCookies().should('have.length', 1)
  1213.  
  1214.       // cy.clearCookies() yields null
  1215.       cy.clearCookies()
  1216.  
  1217.       cy.getCookies().should('be.empty')
  1218.     })
  1219.   })
  1220.  
  1221.   context('Spies, Stubs, and Clock', function () {
  1222.     it('cy.spy() - wrap a method in a spy', function () {
  1223.       // https://on.cypress.io/spy
  1224.       cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
  1225.  
  1226.       let obj = {
  1227.         foo () {},
  1228.       }
  1229.  
  1230.       let spy = cy.spy(obj, 'foo').as('anyArgs')
  1231.  
  1232.       obj.foo()
  1233.  
  1234.       expect(spy).to.be.called
  1235.  
  1236.     })
  1237.  
  1238.     it('cy.stub() - create a stub and/or replace a function with a stub', function () {
  1239.       // https://on.cypress.io/stub
  1240.       cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
  1241.  
  1242.       let obj = {
  1243.         foo () {},
  1244.       }
  1245.  
  1246.       let stub = cy.stub(obj, 'foo').as('foo')
  1247.  
  1248.       obj.foo('foo', 'bar')
  1249.  
  1250.       expect(stub).to.be.called
  1251.  
  1252.     })
  1253.  
  1254.     it('cy.clock() - control time in the browser', function () {
  1255.       // create the date in UTC so its always the same
  1256.       // no matter what local timezone the browser is running in
  1257.       let now = new Date(Date.UTC(2017, 2, 14)).getTime()
  1258.  
  1259.       // https://on.cypress.io/clock
  1260.       cy.clock(now)
  1261.       cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
  1262.       cy.get('#clock-div').click()
  1263.         .should('have.text', '1489449600')
  1264.     })
  1265.  
  1266.     it('cy.tick() - move time in the browser', function () {
  1267.       // create the date in UTC so its always the same
  1268.       // no matter what local timezone the browser is running in
  1269.       let now = new Date(Date.UTC(2017, 2, 14)).getTime()
  1270.  
  1271.       // https://on.cypress.io/tick
  1272.       cy.clock(now)
  1273.       cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
  1274.       cy.get('#tick-div').click()
  1275.         .should('have.text', '1489449600')
  1276.       cy.tick(10000) // 10 seconds passed
  1277.       cy.get('#tick-div').click()
  1278.         .should('have.text', '1489449610')
  1279.     })
  1280.   })
  1281.  
  1282.   context('Utilities', function () {
  1283.     beforeEach(function () {
  1284.       cy.visit('https://example.cypress.io/utilities')
  1285.     })
  1286.  
  1287.     it('Cypress._.method() - call a lodash method', function () {
  1288.       // use the _.chain, _.map, _.take, and _.value functions
  1289.       // https://on.cypress.io/_
  1290.       cy.request('https://jsonplaceholder.typicode.com/users')
  1291.         .then(function (response) {
  1292.           let ids = Cypress._.chain(response.body).map('id').take(3).value()
  1293.  
  1294.           expect(ids).to.deep.eq([1, 2, 3])
  1295.         })
  1296.     })
  1297.  
  1298.     it('Cypress.$(selector) - call a jQuery method', function () {
  1299.       // https://on.cypress.io/$
  1300.       let $li = Cypress.$('.utility-jquery li:first')
  1301.  
  1302.       cy.wrap($li)
  1303.         .should('not.have.class', 'active')
  1304.         .click()
  1305.         .should('have.class', 'active')
  1306.     })
  1307.  
  1308.     it('Cypress.moment() - format or parse dates using a moment method', function () {
  1309.       // use moment's format function
  1310.       // https://on.cypress.io/cypress-moment
  1311.       let time = Cypress.moment().utc('2014-04-25T19:38:53.196Z').format('h:mm A')
  1312.  
  1313.       cy.get('.utility-moment').contains('3:38 PM')
  1314.         .should('have.class', 'badge')
  1315.     })
  1316.  
  1317.     it('Cypress.Blob.method() - blob utilities and base64 string conversion', function () {
  1318.       cy.get('.utility-blob').then(function ($div) {
  1319.         // https://on.cypress.io/blob
  1320.         // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
  1321.         // get the dataUrl string for the javascript-logo
  1322.         return Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
  1323.           .then(function (dataUrl) {
  1324.             // create an <img> element and set its src to the dataUrl
  1325.             let img = Cypress.$('<img />', { src: dataUrl })
  1326.             // need to explicitly return cy here since we are initially returning
  1327.             // the Cypress.Blob.imgSrcToDataURL promise to our test
  1328.             // append the image
  1329.             $div.append(img)
  1330.  
  1331.             cy.get('.utility-blob img').click()
  1332.             .should('have.attr', 'src', dataUrl)
  1333.           })
  1334.       })
  1335.     })
  1336.  
  1337.     it('new Cypress.Promise(function) - instantiate a bluebird promise', function () {
  1338.       // https://on.cypress.io/promise
  1339.       let waited = false
  1340.  
  1341.       function waitOneSecond () {
  1342.         // return a promise that resolves after 1 second
  1343.         return new Cypress.Promise(function (resolve, reject) {
  1344.           setTimeout(function () {
  1345.             // set waited to true
  1346.             waited = true
  1347.  
  1348.             // resolve with 'foo' string
  1349.             resolve('foo')
  1350.           }, 1000)
  1351.         })
  1352.       }
  1353.  
  1354.       cy.then(function () {
  1355.         // return a promise to cy.then() that
  1356.         // is awaited until it resolves
  1357.         return waitOneSecond().then(function (str) {
  1358.           expect(str).to.eq('foo')
  1359.           expect(waited).to.be.true
  1360.         })
  1361.       })
  1362.     })
  1363.   })
  1364.  
  1365.  
  1366.   context('Cypress.config()', function () {
  1367.     beforeEach(function () {
  1368.       cy.visit('https://example.cypress.io/cypress-api/config')
  1369.     })
  1370.  
  1371.     it('Cypress.config() - get and set configuration options', function () {
  1372.       // https://on.cypress.io/config
  1373.       let myConfig = Cypress.config()
  1374.  
  1375.       expect(myConfig).to.have.property('animationDistanceThreshold', 5)
  1376.       expect(myConfig).to.have.property('baseUrl', null)
  1377.       expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
  1378.       expect(myConfig).to.have.property('requestTimeout', 5000)
  1379.       expect(myConfig).to.have.property('responseTimeout', 30000)
  1380.       expect(myConfig).to.have.property('viewportHeight', 660)
  1381.       expect(myConfig).to.have.property('viewportWidth', 1000)
  1382.       expect(myConfig).to.have.property('pageLoadTimeout', 60000)
  1383.       expect(myConfig).to.have.property('waitForAnimations', true)
  1384.  
  1385.       expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
  1386.  
  1387.       // this will change the config for the rest of your tests!
  1388.       Cypress.config('pageLoadTimeout', 20000)
  1389.  
  1390.       expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
  1391.  
  1392.       Cypress.config('pageLoadTimeout', 60000)
  1393.     })
  1394.   })
  1395.  
  1396.   context('Cypress.env()', function () {
  1397.     beforeEach(function () {
  1398.       cy.visit('https://example.cypress.io/cypress-api/env')
  1399.     })
  1400.  
  1401.     // We can set environment variables for highly dynamic values
  1402.  
  1403.     // https://on.cypress.io/environment-variables
  1404.     it('Cypress.env() - get environment variables', function () {
  1405.       // https://on.cypress.io/env
  1406.       // set multiple environment variables
  1407.       Cypress.env({
  1408.         host: 'veronica.dev.local',
  1409.         api_server: 'http://localhost:8888/v1/',
  1410.       })
  1411.  
  1412.       // get environment variable
  1413.       expect(Cypress.env('host')).to.eq('veronica.dev.local')
  1414.  
  1415.       // set environment variable
  1416.       Cypress.env('api_server', 'http://localhost:8888/v2/')
  1417.       expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
  1418.  
  1419.       // get all environment variable
  1420.       expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
  1421.       expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
  1422.     })
  1423.   })
  1424.  
  1425.   context('Cypress.Cookies', function () {
  1426.     beforeEach(function () {
  1427.       cy.visit('https://example.cypress.io/cypress-api/cookies')
  1428.     })
  1429.  
  1430.     // https://on.cypress.io/cookies
  1431.     it('Cypress.Cookies.debug() - enable or disable debugging', function () {
  1432.       Cypress.Cookies.debug(true)
  1433.  
  1434.       // Cypress will now log in the console when
  1435.       // cookies are set or cleared
  1436.       cy.setCookie('fakeCookie', '123ABC')
  1437.       cy.clearCookie('fakeCookie')
  1438.       cy.setCookie('fakeCookie', '123ABC')
  1439.       cy.clearCookie('fakeCookie')
  1440.       cy.setCookie('fakeCookie', '123ABC')
  1441.     })
  1442.  
  1443.     it('Cypress.Cookies.preserveOnce() - preserve cookies by key', function () {
  1444.       // normally cookies are reset after each test
  1445.       cy.getCookie('fakeCookie').should('not.be.ok')
  1446.  
  1447.       // preserving a cookie will not clear it when
  1448.       // the next test starts
  1449.       cy.setCookie('lastCookie', '789XYZ')
  1450.       Cypress.Cookies.preserveOnce('lastCookie')
  1451.     })
  1452.  
  1453.     it('Cypress.Cookies.defaults() - set defaults for all cookies', function () {
  1454.       // now any cookie with the name 'session_id' will
  1455.       // not be cleared before each new test runs
  1456.       Cypress.Cookies.defaults({
  1457.         whitelist: 'session_id',
  1458.       })
  1459.     })
  1460.   })
  1461.  
  1462.   context('Cypress.dom', function () {
  1463.     beforeEach(function () {
  1464.       cy.visit('https://example.cypress.io/cypress-api/dom')
  1465.     })
  1466.  
  1467.     // https://on.cypress.io/dom
  1468.     it('Cypress.dom.isHidden() - determine if a DOM element is hidden', function () {
  1469.       let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
  1470.       let visibleP = Cypress.$('.dom-p p.visible').get(0)
  1471.  
  1472.       // our first paragraph has css class 'hidden'
  1473.       expect(Cypress.dom.isHidden(hiddenP)).to.be.true
  1474.       expect(Cypress.dom.isHidden(visibleP)).to.be.false
  1475.     })
  1476.   })
  1477.  
  1478.   context('Cypress.Server', function () {
  1479.     beforeEach(function () {
  1480.       cy.visit('https://example.cypress.io/cypress-api/server')
  1481.     })
  1482.  
  1483.     // Permanently override server options for
  1484.     // all instances of cy.server()
  1485.  
  1486.     // https://on.cypress.io/cypress-server
  1487.     it('Cypress.Server.defaults() - change default config of server', function () {
  1488.       Cypress.Server.defaults({
  1489.         delay: 0,
  1490.         force404: false,
  1491.         whitelist (xhr) {
  1492.           // handle custom logic for whitelisting
  1493.         },
  1494.       })
  1495.     })
  1496.   })
  1497. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top