testcafe: Check for something after every click

Question

I am testing a web app that renders some of its errors as HTML and gives no other indication that a problem occurred. After every click, I would like to see if a .error element exists.

I know I could manually add this after every click, but it's going to obfuscate my test and it will be easy to forget some instances. Is there a way to tell testcafe that a certain condition should make the test fail, even if I'm not explicitly checking for it?

Answer 1

I did something like this:

const scriptContent = `
window.addEventListener('click', function () {
  if($('.error').length > 0) {
    throw new Error($('.error').text());
  }
});
`;
fixture`Main test`
  .page`../../dist/index.html`.clientScripts(
    { content: scriptContent }
);

This injects a script onto the page I am testing. After every click, it uses jQuery to see if an error class exists. If it does, it throws an error on the page I'm testing. Testcafe reports the message of that error.

I'm hoping there's a better way.