How to use onBeforeScreenshot method in Cypress

To check if the status of the response is not 200, add the failOnStatusCode: false option.

Cypress catches internal errors and does not re-throw them so expect(...).to.throw is not going to see anything.

cy.request({
  method: 'POST',
  // url: `https://valid.url/api/items`,
  url: 'http://example.com/api/items',
  body: {name: "foo"},
  failOnStatusCode: false
})
.then(response => {
  expect(response.status).to.be.gt(299)  // status returned is 404
})

The 500: Internal Server Error is specific to your API, but cy.request is doing it's job as by default it is configured to fail the test when the request fails.

you can use children()

cy.get('.suggestion-item').children().contains('San Diego').click()

You can also view more in detail here

My mistake for not knowing or not checking the location of my cypress.json file, moved it to the top cypress folder and value is shown properly.

I tried the following command on my Mac and it worked:

npx cypress open

Accessing new windows via Cypress is intentionally not supported.

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

1. Write a test to check that when performing the action in your app, the window.open event is called by using cy.spy() to listen for a window.open event.

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'open')
  }
})

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called')

2. In a new test, use cy.visit() to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

cy.visit('http://localhost:3000/new-window')

// Do the actions you want to test in the new window

Fully working test example can be found here.

In first case it happens because invoke calls for jQuery text function, however each iterates through an array like structure (arrays or objects with a length property) - Cypress documentation.

I suggest you next solution:

 cy.get('.s-item').find('.s-item__price').each(($el) => {
    expect(parseFloat($el.text().replace(/\$/g, ''))).to.be.greaterThan(40)
        .but.to.be.lessThan(100);
 )}

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

$ele.find('.orderTemplate-name').contains('automated test title') gives an error

$ele.find(...).contains is not a function

because there is no .contains() in jQuery.

You can use the pseudo-selector :contains, but you must test the .length of the result

if ($ele.find('.orderTemplate-name:contains("automated test title")').length) {

cy.get('#deleteBtn').click() is a bit dodgy because it always searches from the top of the document, not within the row.

If the delete action is slow to remove the row, it might still find the previous delete button because .each() will run quite fast.

Add .within() to fix that

cy.get('tbody tr').each(($row) => {
  if ($row.find('.orderTemplate-name:contains("automated test title")').length) {
    cy.wrap($row).within(() => {
      cy.get('#deleteBtn').click()
    })
  }
})

Simpler to add :contains() condition inside the row selector

cy.get('tbody tr:contains("automated test title")').each(($row) => {
  cy.wrap($row).find('#deleteBtn').click()
})

I agree with your comment, detached-from-DOM error is most likely due to re-render after a delete.

This function might get better results

const deleteRow = (selector, rowsToDelete) => {

  if (rowsToDelete === 0) return

  // Fresh query each iteration
  cy.get('tbody tr:contains("automated test title")').eq(0)
    .as('rowDeleted')
    .find('#deleteBtn').click()
  
  // Need some way to make sure delete action has finished
  cy.get('@rowDeleted')
    .should('not.exist')

  // Do the next one
  deleteRow(selector, --rowsToDelete) 
}

const selector = 'tbody tr:contains("automated test title")'

cy.get(selector).then($rows => {  
  const rowsToDelete = $rows.length  // obtain the count
  deleteRow(selector, rowsToDelete)
})

I'm not sure about timeout in Cypress's custom commands, but you could use a workaround by passing a default param into your custom command like so:

Cypress.Commands.add("login", (waitTimer = 1000) => {
  Auth.signIn(username, password)
    .then(() => {
        cy.wait(waitTimer);
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

Note: Beware that passing timeouts or arbitrarily waiting for an x amount of seconds is not considered good practice. You should instead check for the response's status & assert it returns a 200 status or use route aliases.

Example:

......
.then(response => {
    if (response.status !== 200) {
      cy.log('An error happened while logging in');
    }