Not able to click on the Add button - reactjs

Question

<div class="MuiGrid-root jss48321 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 MuiGrid-grid-xl-3">
<h4 class="MuiTypography-root jss48324 MuiTypography-h4">Decks</h4>
<button class="MuiButtonBase-root MuiFab-root jss48323 MuiFab-sizeSmall MuiFab-primary" tabindex="0" type="button" aria-label="add" title="Add">
<span class="MuiFab-label">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
</span>
<span class="MuiTouchRipple-root"></span>
</button></div>
Since it is react js application, I added
browser.waitForAngularEnabled(false);
Here I wanted to click on the add icon (+)
My test script:
describe('IEC', function () {
it('Login', function () {
browser.waitForAngularEnabled(false);
browser.get('cannot provide the url since it requires VPN');
element(by.css('input[type="text"]')).sendKeys('12345');
element(by.css('input[type="password"]')).sendKeys('Pwd');
element(by.buttonText('Login')).click();
element(by.css('button[title="Add"]')).click();
});
});
Output:
Failed: No element found using locator: By(css selector, button[title="Add"])
How can I resolve this issue?#

Answer 1

Protractor has built in waiting specific to Angular pages. Your page is react, and by running browser.waitForAngularEnabled(false); you disable that waiting
Now your code just does what you instruct it to: set username and password and click submit. Probably 5 milliseconds later you attempt to click add button? but it's not present. I'm pretty sure it's will take at least 10 seconds to load the application after logging in. So you need to add that step. Either browser.sleep(15000) which is VERY bad practice, of add explicit wait for a condition using browser.wait
Also, each line of your code returns Promise, but you don't handle it. The side effect is the order of your commands is not guaranteed. I already told you this in previous posts you need to use async/await. Unless you do so, you'll be having thousands of problems, I guarantee