javascript - Cypress getByTestId, queryByTestId, findByTestId to check if element doesn't exist - Stack Overflow

admin管理员组

文章数量:1221310

I am trying to check if element doesn't exist in a DOM Tree with Cypress and testing-library/cypress.

If I try to do cy.getByTestId("my-button").should("not.exist") test fails because it couldn't find element.

If I do cy.findByTestId("my-button").should("not.exist") it also fails because of time out.

The test does work if I do either cy.queryByTestId("my-button").should("not.exist") or

cy.get('[data-testid="my-button"]').should("not.exist").

Can someone please explain what's the difference between all 4.

Thanks

I am trying to check if element doesn't exist in a DOM Tree with Cypress and testing-library/cypress.

If I try to do cy.getByTestId("my-button").should("not.exist") test fails because it couldn't find element.

If I do cy.findByTestId("my-button").should("not.exist") it also fails because of time out.

The test does work if I do either cy.queryByTestId("my-button").should("not.exist") or

cy.get('[data-testid="my-button"]').should("not.exist").

Can someone please explain what's the difference between all 4.

Thanks

• javascript
• testing
• integration-testing
• cypress
• end-to-end

Share Improve this question Follow edited Nov 22, 2019 at 14:35 olena_k91 asked Nov 22, 2019 at 14:09 olena_k91olena_k91 10111 gold badge11 silver badge44 bronze badges 5

• 1 Some of those aren't part of the Cypress API - are you also using e.g. testing-library.com/docs/cypress-testing-library/intro? – jonrsharpe Commented Nov 22, 2019 at 14:17
• Yes, I am using "testing-library/cypress" – olena_k91 Commented Nov 22, 2019 at 14:34
• Might be worth raising an issue with the maintainers if they behave differently from the built-in methods. – jonrsharpe Commented Nov 22, 2019 at 14:52
• See this comment, says findBy*` APIs search for an element and throw an error if nothing found, so logically you cannot use cy.findByTestId(...) with .should("not.exist") – user9161752 Commented Nov 22, 2019 at 19:18
• Thanks, I found the same information in here testing-library.com/docs/react-testing-library/cheatsheet, saying that findBy and getBy return error if element isn't found that's why cannot be used for my test. queryBy returns null and doesn't fail the test. But what does cy.get('[data-testid="my-button"]') return when element is not in a DOM? – olena_k91 Commented Nov 25, 2019 at 11:44

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 12

https://testing-library.com/docs/dom-testing-library/api-queries

• getBy will throw errors if it can't find the element
• findBy will return and reject a Promise if it doesn't find an element
• queryBy will return null if no element is found:

This is useful for asserting an element that is not present.

looks like queryBy is your best choice for this problem

In the latest version of Cypress Testing Library they have removed queryBy.

Cypress Testing Library | Intro

If you want to check if something doesn't exist just use findBy, but put a should() straight afterwards. It won't time out in that case.

cy.findByText('My error message').should('not.exist')

Discussion on GitHub

本文标签：