HTML CODE:
<button class="MuiButtonBase-root MuiFab-root jss47 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>
Here i need to click on the add button. Its displayed but not able to click on it.
Test Script:
it('Login', function() {
browser.waitForAngularEnabled(false); //Since it is React JS application
browser.driver.manage().window().maximize();
browser.get('');
var username = element(by.css('input[type="text"]'));
var password = element(by.css('input[type="password"]'));
var logInBtn = element(by.buttonText('Login'));
username.sendKeys('');
password.sendKeys('');
logInBtn.click();
var EC = protractor.ExpectedConditions;
var add = element(by.css('button[title="Add"]'));
browser.wait(EC.visibilityOf(add), 5000);
expect(add.isDisplayed()).toBe(true); // Output = True
add.click(); //Output = Issue exists
});
Output:
Failed: element click intercepted: Element ... is not clickable at point (210, 100). Other element would receive the click: ... (Session info: chrome=89.0.4389.90) (Driver info: chromedriver=88.0.4324.27 (6347fe8bf1e48bd0c54d07dc55ca011cf40861c9-refs/branch-heads/4324@{#450}),platform=Windows NT 10.0.19042 x86_64)
