Not able to click on the element

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. element(by.css('svg[class="MuiSvgIcon-root"]')).click();

Output: Failed: No element found using locator: By(css selector, svg[class="MuiSvgIcon-root"])

Can anyone please help me in resolving this issue.

is there an iframe on your page – Sergey Pleshakov Feb 11 '21 at 14:06 — Sergey Pleshakov, Feb 11 '21 at 14:06

score 0 · Answer 1 · answered Feb 11 '21 at 14:10

0

try this

it('test case', async () => {
  let plusIcon = element(by.css('svg[class="MuiSvgIcon-root"]'))
  await browser.waitForAngularEnabled(false); 
  // your steps prior to click
  await browser.wait(
    ExpectedConditions.presenseOf(plusIcon),
    15000
  );
  await plusIcon.click();
});

answered Feb 11 '21 at 14:10

Sergey Pleshakov

7,964
2
17
40

is suggest to use visisiblityOf instead of presenseOf as presenseOf means "An expectation for checking that an element is present on the DOM of a page. This does not necessarily mean that the element is visible." if not visible means not clickable – kishor sharma Feb 12 '21 at 03:40
Hi @ Sergey pleshakov, getting the error(Failed: ExpectedConditions.presenseOf is not a function) after trying with your code. – Explorer Feb 12 '21 at 04:33
I assume you know how to import missing packages – Sergey Pleshakov Feb 12 '21 at 19:19
i am not aware of it, can u please help me in that – Explorer Feb 15 '21 at 10:19

kishor sharma · Answer 2 · 2021-02-17T22:15:47.287

0

Assuming your application is not using iFrame.

please try the following code:

onPrepare: function() {
browser.manage().window().setSize(1920, 1080);
}


describe('Click plusIcon', () => {
it('Click PlusIcon', async () => {
let plusIcon = element(by.css('svg[class="MuiSvgIcon-root"]'))
const EC = protractor.ExpectedConditions;
var a = await browser.wait(EC.visibilityOf(plusIcon), 90000);
console.log("the value of a is:", a);
await plusIcon.click();
 });
});

let's find the actual issue here.

First, let's print the value of a.

if a is true, then plusIcon is visible. And, if you get the error for not clicking the button then you either need to maximize the browser or scroll to the button.

if a is false, then plusIcon is not visible yet. Either we need to wait for some more extra time.

edited Feb 17 '21 at 22:15

answered Feb 12 '21 at 03:39

kishor sharma

179
2
17

Hi @ Kishor sharma, getting the error(SyntaxError: await is only valid in async function) after trying with your code – Explorer Feb 12 '21 at 04:29
@ramarajuvarma sorry, I was expecting you had your describe and it function. I have updated the answer – kishor sharma Feb 12 '21 at 05:11
Hi @Kisore sharma now i am getting " Error: Error: describe expects a function argument; received [object AsyncFunction]" after following the above mentioned code – Explorer Feb 12 '21 at 10:25
@ramarajuvarma will you try removing async from describe function? I assume you have imported the necessary dependencies. For more info https://jasmine.github.io/tutorials/async – kishor sharma Feb 14 '21 at 22:36
i removed async from describe function. getting error(Failed: element click intercepted: Element is not clickable at point (36, 32). Other element would receive the click:
...
). i didn't import any dependencies. i will look into the link which you shared. thanks! – Explorer Feb 15 '21 at 05:01
Hi @Kishor sharma, i have tried your answere. a is true. but getting error [ Failed: element click intercepted: Element is not clickable at point (36, 32). Other element would receive the click:
...
] I have maximized the browser aswell – Explorer Feb 16 '21 at 05:04
@ramarajuvarma good. if a is true, then it means your plusIcon is visible. I have updated the code. will you please try that one. We need to increase the browser size so that the plusIcon can be clicked. Further info @ https://stackoverflow.com/questions/26211751/protractor-chrome-driver-element-is-not-clickable-at-point – kishor sharma Feb 17 '21 at 22:17

Not able to click on the element

2 Answers2