How to use getChapters method in Cypress

Testing it via the Selector Playground (as N. suggested) is a good step. What you also can do is investigate screenshots which Cypress can make on failure. That shows the exact state of the application when the failure happened. That usually gives a good hint to the problem.

Besides that you can also try to set the wait to an absurt value like 10000. If Cypress can find the element at that case, the application is slow and therefor Cypress is not waiting long enough.

You asked a lot of questions, I don't even know if I understood them all well, but let's see some of the answers.

.should() vs .expect()

.should() is considered an implicit assertion and .expect() explicit. It's more in detail explained here. .should() is great in that it waits and retries, which you can't achieve with .expect(), nor with .then().

Typically, you use .expect() when you want to perform multiple assertions on the same subject. Like you want to assert that a response status code is 200 and that there's some particular property in the response body:

cy
  .request(url)
  .then(res => {
    expect(res.statusCode).to.equal(200);
    expect(response.body).to.have.property('name', 'pavel');
  });

cy.wrap()

cy.wrap() really allows you to keep chaining Cypress commands, just like you did with .find(). There're examples in the documentation, have a look.

I'm not sure I have all the facts, but if for example this DOM

<ul>
  <li id="1"></li>
  <li id="2"></li>
  <li id="3"></li>
</ul>

you could test with

const targetId = '2';

cy.get('ul li')
  .should($els => expect([...$els].some(el => el.id === targetId)).to.eq(true))

to explain,

• .should() with and expect in the callback will retry until true (or timeout)
• [...$els].some(...) applies the test inside to every item, returns true if any succeed

A shorter way would be

cy.get('ul li#' + targetId);

In this selector, only the one with the targetId matches. If targetId is not there, test fails.

I found some solutions.

Add reference

Put this at the top of each file test script

/// <reference types="cypress" />

Eslint extension

• yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)

• Add these lines to .eslintrc

{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Specify cy in eslintrc globals

{
  "globals": {
    "cy": true
  }
}

Add this to .eslintrc

cy is a global variable. Much like location. So really it is window.cy. You can add it to the globals in Eslint. Don't import cy from cypress.

Reference: ESLint: 'cy' is not defined (Cypress)

You can set the scrollBehavior globally or per test(-suite).

I'm disabling it on a per tests basis like so:

it('check something w/ autoscroll disabled', { scrollBehavior: false }, () => {
  cy.get('.tab').click();
  // do something else ...
});

Docs: https://docs.cypress.io/guides/references/configuration#Actionability

If what you want is to wait for a specific xhr you can do it making use of cy.route(). I use this in some scenarios and it is really useful. The general steps to use it are:

• cy.server()
• cy.route('GET','**/api/my-call/**').as('myXHR');
• Do things in the UI such as clicking on a button that will trigger such api calls
• cy.wait(@myXHR)

This way if such call isn't triggered your test will fail. You can find extensive documentation about this here

Code below will help you to stub window.open and further assert it that function has been triggered:

it('opens the about page', () => {
  cy.visit('/')
  cy.window().then(win => {
    cy.stub(win, 'open').as('Open')
  })
  cy.get('.your-selector').click()
  cy.get('@Open').should('have.been.calledOnceWithExactly', yourUrl)
})

You also can stub window.open in cy.on hook as you did, what helps you to yield new window object each time after page reload. However, if you want to actually open the new Url in existing tab instead of new one you can use this code below by passing "_self" param to overwrite old "_blank":

cy.window().then(win => {
          cy.stub(win, 'open').callsFake((url) => {
            return win.open.wrappedMethod.call(win, url, '_self');
          }).as('Open');
        });

callsFake function dynamically withdraws url which has been placed into original window.open(url, "_blank"), or you can manually change url inside .call(win, url, '_self'); with static one, so regardless on which link or button you clicked, which triggers window.open, they all will open the same url.

For text comparison, instead of using OR approach, I suggest using lowercase comparison by having the expected text and actual text to be compared in the lowercase version. This is a cleaner approach.

cy.get(element).invoke('text').should(text => {
  expect(text.toLowerCase()).to.contain(search_word.toLowerCase());
})

another alternative is using regex

cy.get(element).invoke('text').should('match', /(h|H)ot/);

You need to iterate through the td elements and extract the text content. Since I use .find('td') it finds all the td elements, and with .each() you can iterate through them one-by-one, selecting the elements you want (in this case I am skipping the element with index 0 as it's just an empty string):

let values = []
cy.visit('stackoverflow/table.html')
cy.get('tbody > tr')
  .find('td')
  .each(($el, $index) => {
     cy.wrap($el)
      .invoke('text')
      .then(text => {
          if($index!==0)
            values.push(text.trim())
          })
       })
      .then(() => expect(values).to.deep.eq(["Value1", "Value2", "Value3"]))