cy.click() failed because it requires a DOM element?

Viewed 1850
  it('TC01 - ', () => {
    const dataToTest = productCatalogData.case1
    createGLCode(dataToTest)
    toastMessageIsEqualsTo('GL Code Created!')
  });

  it('TC02 - ', () => {
    const dataToTest = productCatalogData.case2
    editGLCode(dataToTest)
    //toastMessageIsEqualsTo('GL Code Updated!')
  });

  it('TC03 - ', () => {
    const dataToTest = productCatalogData.case3
    deleteGLCode(dataToTest)
    toastMessageIsEqualsTo('GL Code Deleted!')

I have logout function in afterEach hook.

But at the time of 3rd test case, it is showing me an error of "cy.click() failed because it requires a DOM element." and "The subject received was: undefined".

However, when I run the same test case again, it works perfectly fine.

| export const clickLogout = () => {
> 5 |   cy.get('[id=logoutBtn]').click({ force: true });
    |                            ^
  6 | };

Giving error here.

1 Answers

It looks like cy.get('[id=logoutBtn]') is missing from the DOM because of the logout in the afterEach().

I presume somewhere in those custom methods you are logging in. (BTW you should do it explicitly in the test to make it easier to understand your tests).

If so, add a visibility check to the logout button

cy.get('[id=logoutBtn]')
  .should('be.visible')
  .click({ force: true })

If that's not it, you will have to add all the custom code to the question, as the problem lies somewhere in there.

Related