AutoQA test not finding my button when it's clearly visible & not clashing any other element

Question

I'm have trouble with a QA test, it throws me this error:

Error: Clickable element "ADD" was not found by text|CSS|XPath
    at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
    at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
    at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
        I.amOnPage('/');
        I.click('MASS DELETE');
        I.click('ADD');

While this test passes:

I }) => {
        I.amOnPage('/');
        I.click('ADD');
        I.seeElement('#product_form');
        I.seeElement('#sku');
        I.seeElement('#name');
        I.seeElement('#price');
        I.seeElement('#productType');

Note I'm using react & the button is a tag from react router; I've also tried switching it for a regular < a> tag, moving it around, changing the name but nothing seems to work.

P.S this is an automated test & I have 0 control over it and can't change the test parameters, only my code, which is as follows:

   <Link className="button button--primary space ADD" to="/add-product"         
      ADD
   </Link>

Answer 1

The problem was it was pressing MASS DELETE first & I wasn't preventing the default behavior when no checkboxes were selected, & I was handling the error on the backend & not the frontend too.

Answer 2

As an alternative you can use either you can use either of the following locator strategies:

• cssSelector:

  I.click('Link.button.button--primary.space.ADD');
  

• xpath:

  I.click('//Link[@className="button button--primary space ADD"]');