TestCafe - Error in fixture.beforeEach hook

Question

I'm doing some e2e testing with Testcafe for an application. For one of my fixtures I'm using a beforeEach. My Selector is waiting for an element to be present before it clicks on it on the page. Sometimes this test passes, and sometimes this test fails. It is very inconsistent.

Code:

fixture`Ingredient Details [En]`   
    .page`${url}en/something`   
    .beforeEach(async t => {              
        await t   
          .click(button1)   
          .wait(1000)
    })

Error I'm getting:

1) - Error in fixture.beforeEach hook -
      The specified selector does not match any element in the DOM tree.   

> | Selector('#accept-button')

It seems that there is some sort of timing issue, whereby it isn't waiting correctly sometimes?

Thanks.

Answer 1

Testcafe provides a debug method t.debug()that stops the test and allows you to debug the issue using the browser's developer tools. Maybe by doing so you can check if the element has been loaded at the moment you're trying to click on the button.

For more information: https://devexpress.github.io/testcafe/documentation/test-api/debugging.html#client-side-debugging: