codeceptjs react testing - Clickable element was not found by text|CSS|XPath

Question

I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following 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('ADD');
    I.seeElement('#product_form');
    I.fillField('#sku', 'SKUTest000');
    I.fillField('#name', 'NameTest000');
    I.fillField('#price', '25');
    I.waitForElement('#productType');
    I.selectOption('#productType','DVD');
    I.waitForElement('#size');
    I.fillField('#size','200');
    I.click('Save');

My add element looks like this:

<Link title="ADD" to="/add-product">ADD</Link>

Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!

Update: I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:

http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc

My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?

Answer 1

Seems like the problem was I put the whole home page's load after the rest api call by accident.