element', () => {
+// // // https://on.cypress.io/select
+
+// // // at first, no option should be selected
+// // cy.get('.action-select')
+// // .should('have.value', '--Select a fruit--')
+
+// // // Select option(s) with matching text content
+// // cy.get('.action-select').select('apples')
+// // // confirm the apples were selected
+// // // note that each value starts with "fr-" in our HTML
+// // cy.get('.action-select').should('have.value', 'fr-apples')
+
+// // cy.get('.action-select-multiple')
+// // .select(['apples', 'oranges', 'bananas'])
+// // // when getting multiple values, invoke "val" method first
+// // .invoke('val')
+// // .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+// // // Select option(s) with matching value
+// // cy.get('.action-select').select('fr-bananas')
+// // // can attach an assertion right away to the element
+// // .should('have.value', 'fr-bananas')
+
+// // cy.get('.action-select-multiple')
+// // .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+// // .invoke('val')
+// // .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+// // // assert the selected values include oranges
+// // cy.get('.action-select-multiple')
+// // .invoke('val').should('include', 'fr-oranges')
+// // })
+
+// // it('.scrollIntoView() - scroll an element into view', () => {
+// // // 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('.trigger() - trigger an event on a DOM element', () => {
+// // // https://on.cypress.io/trigger
+
+// // // To interact with a range input (slider)
+// // // we need to set its value & trigger the
+// // // event to signal it changed
+
+// // // Here, we invoke jQuery's val() method to set
+// // // the value and trigger the 'change' event
+// // cy.get('.trigger-input-range')
+// // .invoke('val', 25)
+// // .trigger('change')
+// // .get('input[type=range]').siblings('p')
+// // .should('have.text', '25')
+// // })
+
+// // it('cy.scrollTo() - scroll the window or element to a position', () => {
+// // // 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 })
+// // })
+// // })
+
+
+// // /// element in various ways
+// // .should('have.text', 'Column content')
+// // .should('contain', 'Column content')
+// // .should('have.html', 'Column content')
+// // // chai-jquery uses "is()" to check if element matches selector
+// // .should('match', 'td')
+// // // to match text content against a regular expression
+// // // first need to invoke jQuery method text()
+// // // and then match using regular expression
+// // .invoke('text')
+// // .should('match', /column content/i)
+
+// // // a better way to check element's text content against a regular expression
+// // // is to use "cy.contains"
+// // // https://on.cypress.io/contains
+// // cy.get('.assertion-table')
+// // .find('tbody tr:last')
+// // // finds first element with text content matching regular expression
+// // .contains('td', /column content/i)
+// // .should('be.visible')
+
+// // // for more information about asserting element's text
+// // // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+// // })
+
+// // it('.and() - chain multiple assertions together', () => {
+// // // https://on.cypress.io/and
+// // cy.get('.assertions-link')
+// // .should('have.class', 'active')
+// // .and('have.attr', 'href')
+// // .and('include', 'cypress.io')
+// // })
+// // })
+
+// // describe('Explicit Assertions', () => {
+// // // https://on.cypress.io/assertions
+// // it('expect - make an assertion about a specified subject', () => {
+// // // We can use Chai's BDD style assertions
+// // expect(true).to.be.true
+// // const o = { foo: 'bar' }
+
+// // expect(o).to.equal(o)
+// // expect(o).to.deep.equal({ foo: 'bar' })
+// // // matching text using regular expression
+// // expect('FooBar').to.match(/bar$/i)
+// // })
+
+// // it('pass your own callback function to should()', () => {
+// // // Pass a function to should that can have any number
+// // // of explicit assertions within it.
+// // // The ".should(cb)" function will be retried
+// // // automatically until it passes all your explicit assertions or times out.
+// // cy.get('.assertions-p')
+// // .find('p')
+// // .should(($p) => {
+// // // https://on.cypress.io/$
+// // // return an array of texts from all of the p's
+// // const texts = $p.map((i, el) => Cypress.$(el).text())
+
+// // // jquery map returns jquery object
+// // // and .get() convert this to simple array
+// // const paragraphs = texts.get()
+
+// // // array should have length of 3
+// // expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+// // // use second argument to expect(...) to provide clear
+// // // message with each assertion
+// // expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+// // 'Some text from first p',
+// // 'More text from second p',
+// // 'And even more text from third p',
+// // ])
+// // })
+// // })
+
+// // it('finds element by class name regex', () => {
+// // cy.get('.docs-header')
+// // .find('div')
+// // // .should(cb) callback function will be retried
+// // .should(($div) => {
+// // expect($div).to.have.length(1)
+
+// // const className = $div[0].className
+
+// // expect(className).to.match(/heading-/)
+// // })
+// // // .then(cb) callback is not retried,
+// // // it either passes or fails
+// // .then(($div) => {
+// // expect($div, 'text content').to.have.text('Introduction')
+// // })
+// // })
+
+// // it('can throw any error', () => {
+// // cy.get('.docs-header')
+// // .find('div')
+// // .should(($div) => {
+// // if ($div.length !== 1) {
+// // // you can throw your own errors
+// // throw new Error('Did not find 1 element')
+// // }
+
+// // const className = $div[0].className
+
+// // if (!className.match(/heading-/)) {
+// // throw new Error(`Could not find class "heading-" in ${className}`)
+// // }
+// // })
+// // })
+
+// // it('matches unknown text between two elements', () => {
+// // /**
+// // * Text from the first element.
+// // * @type {string}
+// // */
+// // let text
+
+// // /**
+// // * Normalizes passed text,
+// // * useful before comparing text with spaces and different capitalization.
+// // * @param {string} s Text to normalize
+// // */
+// // const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+// // cy.get('.two-elements')
+// // .find('.first')
+// // .then(($first) => {
+// // // save text from the first element
+// // text = normalizeText($first.text())
+// // })
+
+// // cy.get('.two-elements')
+// // .find('.second')
+// // .should(($div) => {
+// // // we can massage text before comparing
+// // const secondText = normalizeText($div.text())
+
+// // expect(secondText, 'second text').to.equal(text)
+// // })
+// // })
+
+// // it('assert - assert shape of an object', () => {
+// // const person = {
+// // name: 'Joe',
+// // age: 20,
+// // }
+
+// // assert.isObject(person, 'value is object')
+// // })
+
+// // it('retries the should callback until assertions pass', () => {
+// // cy.get('#random-number')
+// // .should(($div) => {
+// // const n = parseFloat($div.text())
+
+// // expect(n).to.be.gte(1).and.be.lte(10)
+// // })
+// // })
+// // })
+// // })
+
+
+// /// , which is lowest-level element that contains the text.
-// // In order to check the item, we'll find the
-// // by traversing up the dom to the parent element. From there, we can `find`
-// // the child checkbox element and then use the `parents` command
-// // to traverse multiple levels up the dom until we find the corresponding element.
-// // Once we get that element, we can assert that it has the completed class.
-// cy.contains('Pay electric bill')
-// .parents('li')
-// .should('have.class', 'completed')
-// })
-
-// context('with a checked task', () => {
-// beforeEach(() => {
-// // We'll take the command we used above to check off an element
-// // Since we want to perform multiple tests that start with checking
-// // one element, we put it in the beforeEach hook
-// // so that it runs at the start of every test.
-// cy.contains('Pay electric bill')
-// .parent()
-// .find('input[type=checkbox]')
-// .check()
+// cy.visit('https://example.cypress.io/commands/connectors')
+// })
+
+// it('.each() - iterate over an array of elements', () => {
+// // https://on.cypress.io/each
+// cy.get('.connectors-each-ul>li')
+// .each(($el, index, $list) => {
+// console.log($el, index, $list)
+// })
+// })
+
+// it('.its() - get properties on the current subject', () => {
+// // 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', () => {
+// // our div is hidden in our script.js
+// // $('.connectors-div').hide()
+// cy.get('.connectors-div').should('be.hidden')
+
+// // https://on.cypress.io/invoke
+// // call the jquery method 'show' on the 'div.container'
+// cy.get('.connectors-div').invoke('show')
+
+// cy.get('.connectors-div').should('be.visible')
+// })
+
+// it('.spread() - spread an array as individual args to callback function', () => {
+// // https://on.cypress.io/spread
+// const arr = ['foo', 'bar', 'baz']
+
+// cy.wrap(arr).spread((foo, bar, baz) => {
+// expect(foo).to.eq('foo')
+// expect(bar).to.eq('bar')
+// expect(baz).to.eq('baz')
// })
+// })
-// it('can filter for uncompleted tasks', () => {
-// // We'll click on the "active" button in order to
-// // display only incomplete items
-// cy.contains('Active').click()
-
-// // After filtering, we can assert that there is only the one
-// // incomplete item in the list.
-// cy.get('.todo-list li')
-// .should('have.length', 1)
-// .first()
-// .should('have.text', 'Walk the dog')
-
-// // For good measure, let's also assert that the task we checked off
-// // does not exist on the page.
-// cy.contains('Pay electric bill').should('not.exist')
+// describe('.then()', () => {
+// it('invokes a callback function with the current subject', () => {
+// // https://on.cypress.io/then
+// cy.get('.connectors-list > li')
+// .then(($lis) => {
+// expect($lis, '3 items').to.have.length(3)
+// expect($lis.eq(0), 'first item').to.contain('Walk the dog')
+// expect($lis.eq(1), 'second item').to.contain('Feed the cat')
+// expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
+// })
// })
-// it('can filter for completed tasks', () => {
-// // We can perform similar steps as the test above to ensure
-// // that only completed tasks are shown
-// cy.contains('Completed').click()
+// it('yields the returned value to the next command', () => {
+// cy.wrap(1)
+// .then((num) => {
+// expect(num).to.equal(1)
-// cy.get('.todo-list li')
-// .should('have.length', 1)
-// .first()
-// .should('have.text', 'Pay electric bill')
+// return 2
+// })
+// .then((num) => {
+// expect(num).to.equal(2)
+// })
+// })
-// cy.contains('Walk the dog').should('not.exist')
+// it('yields the original subject without return', () => {
+// cy.wrap(1)
+// .then((num) => {
+// expect(num).to.equal(1)
+// // note that nothing is returned from this callback
+// })
+// .then((num) => {
+// // this callback receives the original unchanged value 1
+// expect(num).to.equal(1)
+// })
// })
-// it('can delete all completed tasks', () => {
-// // First, let's click the "Clear completed" button
-// // `contains` is actually serving two purposes here.
-// // First, it's ensuring that the button exists within the dom.
-// // This button only appears when at least one task is checked
-// // so this command is implicitly verifying that it does exist.
-// // Second, it selects the button so we can click it.
-// cy.contains('Clear completed').click()
-
-// // Then we can make sure that there is only one element
-// // in the list and our element does not exist
-// cy.get('.todo-list li')
-// .should('have.length', 1)
-// .should('not.have.text', 'Pay electric bill')
-
-// // Finally, make sure that the clear button no longer exists.
-// cy.contains('Clear completed').should('not.exist')
+// it('yields the value yielded by the last Cypress command inside', () => {
+// cy.wrap(1)
+// .then((num) => {
+// expect(num).to.equal(1)
+// // note how we run a Cypress command
+// // the result yielded by this Cypress command
+// // will be passed to the second ".then"
+// cy.wrap(2)
+// })
+// .then((num) => {
+// // this callback receives the value yielded by "cy.wrap(2)"
+// expect(num).to.equal(2)
+// })
// })
// })
// })
-/// element', () => {
-// // https://on.cypress.io/select
+// context('Cypress.spec', () => {
+// beforeEach(() => {
+// cy.visit('https://example.cypress.io/cypress-api')
+// })
-// // at first, no option should be selected
-// cy.get('.action-select')
-// .should('have.value', '--Select a fruit--')
+// it('Get current spec information', () => {
+// // https://on.cypress.io/spec
+// // wrap the object so we can inspect it easily by clicking in the command log
+// cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
+// })
+// })
+// })
-// // Select option(s) with matching text content
-// cy.get('.action-select').select('apples')
-// // confirm the apples were selected
-// // note that each value starts with "fr-" in our HTML
-// cy.get('.action-select').should('have.value', 'fr-apples')
-// cy.get('.action-select-multiple')
-// .select(['apples', 'oranges', 'bananas'])
-// // when getting multiple values, invoke "val" method first
-// .invoke('val')
-// .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
-// // Select option(s) with matching value
-// cy.get('.action-select').select('fr-bananas')
-// // can attach an assertion right away to the element
-// .should('have.value', 'fr-bananas')
-// cy.get('.action-select-multiple')
-// .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
-// .invoke('val')
-// .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+// /// element in various ways
-// .should('have.text', 'Column content')
-// .should('contain', 'Column content')
-// .should('have.html', 'Column content')
-// // chai-jquery uses "is()" to check if element matches selector
-// .should('match', 'td')
-// // to match text content against a regular expression
-// // first need to invoke jQuery method text()
-// // and then match using regular expression
-// .invoke('text')
-// .should('match', /column content/i)
-
-// // a better way to check element's text content against a regular expression
-// // is to use "cy.contains"
-// // https://on.cypress.io/contains
-// cy.get('.assertion-table')
-// .find('tbody tr:last')
-// // finds first element with text content matching regular expression
-// .contains('td', /column content/i)
-// .should('be.visible')
-
-// // for more information about asserting element's text
-// // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
-// })
-
-// it('.and() - chain multiple assertions together', () => {
-// // https://on.cypress.io/and
-// cy.get('.assertions-link')
-// .should('have.class', 'active')
-// .and('have.attr', 'href')
-// .and('include', 'cypress.io')
-// })
+// cy.visit('https://example.cypress.io/commands/querying')
// })
-// describe('Explicit Assertions', () => {
+// // The most commonly used query is 'cy.get()', you can
+// // think of this like the '$' in jQuery
+
+// it('cy.get() - query DOM elements', () => {
+// // https://on.cypress.io/get
+
+// cy.get('#query-btn').should('contain', 'Button')
+
+// cy.get('.query-btn').should('contain', 'Button')
+
+// cy.get('#querying .well>button:first').should('contain', 'Button')
+// // ↲
+// // Use CSS selectors just like jQuery
+
+// cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+
+// // 'cy.get()' yields jQuery object, you can get its attribute
+// // by invoking `.attr()` method
+// cy.get('[data-test-id="test-example"]')
+// .invoke('attr', 'data-test-id')
+// .should('equal', 'test-example')
+
+// // or you can get element's CSS property
+// cy.get('[data-test-id="test-example"]')
+// .invoke('css', 'position')
+// .should('equal', 'static')
+
+// // or use assertions directly during 'cy.get()'
// // https://on.cypress.io/assertions
-// it('expect - make an assertion about a specified subject', () => {
-// // We can use Chai's BDD style assertions
-// expect(true).to.be.true
-// const o = { foo: 'bar' }
-
-// expect(o).to.equal(o)
-// expect(o).to.deep.equal({ foo: 'bar' })
-// // matching text using regular expression
-// expect('FooBar').to.match(/bar$/i)
-// })
+// cy.get('[data-test-id="test-example"]')
+// .should('have.attr', 'data-test-id', 'test-example')
+// .and('have.css', 'position', 'static')
+// })
-// it('pass your own callback function to should()', () => {
-// // Pass a function to should that can have any number
-// // of explicit assertions within it.
-// // The ".should(cb)" function will be retried
-// // automatically until it passes all your explicit assertions or times out.
-// cy.get('.assertions-p')
-// .find('p')
-// .should(($p) => {
-// // https://on.cypress.io/$
-// // return an array of texts from all of the p's
-// const texts = $p.map((i, el) => Cypress.$(el).text())
-
-// // jquery map returns jquery object
-// // and .get() convert this to simple array
-// const paragraphs = texts.get()
-
-// // array should have length of 3
-// expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
-
-// // use second argument to expect(...) to provide clear
-// // message with each assertion
-// expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
-// 'Some text from first p',
-// 'More text from second p',
-// 'And even more text from third p',
-// ])
-// })
+// it('cy.contains() - query DOM elements with matching content', () => {
+// // 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')
+
+// cy.get('.query-button')
+// .contains('Save Form')
+// .should('have.class', 'btn')
+// })
+
+// it('.within() - query DOM elements within a specific element', () => {
+// // https://on.cypress.io/within
+// cy.get('.query-form').within(() => {
+// cy.get('input:first').should('have.attr', 'placeholder', 'Email')
+// cy.get('input:last').should('have.attr', 'placeholder', 'Password')
// })
+// })
-// it('finds element by class name regex', () => {
-// cy.get('.docs-header')
-// .find('div')
-// // .should(cb) callback function will be retried
-// .should(($div) => {
-// expect($div).to.have.length(1)
+// it('cy.root() - query the root DOM element', () => {
+// // https://on.cypress.io/root
-// const className = $div[0].className
+// // By default, root is the document
+// cy.root().should('match', 'html')
-// expect(className).to.match(/heading-/)
-// })
-// // .then(cb) callback is not retried,
-// // it either passes or fails
-// .then(($div) => {
-// expect($div, 'text content').to.have.text('Introduction')
-// })
+// cy.get('.query-ul').within(() => {
+// // In this within, the root is now the ul DOM element
+// cy.root().should('have.class', 'query-ul')
// })
+// })
-// it('can throw any error', () => {
-// cy.get('.docs-header')
-// .find('div')
-// .should(($div) => {
-// if ($div.length !== 1) {
-// // you can throw your own errors
-// throw new Error('Did not find 1 element')
-// }
+// it('best practices - selecting elements', () => {
+// // https://on.cypress.io/best-practices#Selecting-Elements
+// cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+// // Worst - too generic, no context
+// cy.get('button').click()
-// const className = $div[0].className
+// // Bad. Coupled to styling. Highly subject to change.
+// cy.get('.btn.btn-large').click()
-// if (!className.match(/heading-/)) {
-// throw new Error(`Could not find class "heading-" in ${className}`)
-// }
-// })
+// // Average. Coupled to the `name` attribute which has HTML semantics.
+// cy.get('[name=submission]').click()
+
+// // Better. But still coupled to styling or JS event listeners.
+// cy.get('#main').click()
+
+// // Slightly better. Uses an ID but also ensures the element
+// // has an ARIA role attribute
+// cy.get('#main[role=button]').click()
+
+// // Much better. But still coupled to text content that may change.
+// cy.contains('Submit').click()
+
+// // Best. Insulated from all changes.
+// cy.get('[data-cy=submit]').click()
// })
+// })
+// })
+
+
+
+
+
+// ///
+// */
+// function waitOneSecond () {
+// // return a promise that resolves after 1 second
+// return new Cypress.Promise((resolve, reject) => {
+// setTimeout(() => {
+// // set waited to true
+// waited = true
+
+// // resolve with 'foo' string
+// resolve('foo')
+// }, 1000)
+// })
+// }
+
+// cy.then(() => {
+// // return a promise to cy.then() that
+// // is awaited until it resolves
+// return waitOneSecond().then((str) => {
+// expect(str).to.eq('foo')
+// expect(waited).to.be.true
+// })
+// })
+// })
+// })
- cy.get('.query-ul').within(() => {
- // In this within, the root is now the ul DOM element
- cy.root().should('have.class', 'query-ul')
- })
- })
- it('best practices - selecting elements', () => {
- // https://on.cypress.io/best-practices#Selecting-Elements
- cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
- // Worst - too generic, no context
- cy.get('button').click()
- // Bad. Coupled to styling. Highly subject to change.
- cy.get('.btn.btn-large').click()
- // Average. Coupled to the `name` attribute which has HTML semantics.
- cy.get('[name=submission]').click()
- // Better. But still coupled to styling or JS event listeners.
- cy.get('#main').click()
- // Slightly better. Uses an ID but also ensures the element
- // has an ARIA role attribute
- cy.get('#main[role=button]').click()
+// ///
- */
- function waitOneSecond () {
- // return a promise that resolves after 1 second
- return new Cypress.Promise((resolve, reject) => {
- setTimeout(() => {
- // set waited to true
- waited = true
+// // wait for GET comments/1
+// cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+// })
+// })
- // resolve with 'foo' string
- resolve('foo')
- }, 1000)
- })
- }
-
- cy.then(() => {
- // return a promise to cy.then() that
- // is awaited until it resolves
- return waitOneSecond().then((str) => {
- expect(str).to.eq('foo')
- expect(waited).to.be.true
- })
- })
- })
-})
-
-
-
-
-
-
-///