Element is Not clickable at point(215, 251) error

Question

I have a non-angular app where I click a link and a new popup modal appears. I then can select to upload a picture or video. I tell protractor and/or webdriver to click on the upload photos button.

If I use:

var addPhotos = element(by.css('#px-select-photo')).click();

I can visually see the button being pressed down however the test is then failed and the error not clickable at...(215, 251)

So then I thought I could trick it into clicking x y position (which I'm assuming those two numbers in the error are) and I get nothing

Code I used for that is:

browser.actions().mouseMove({
  x: 702,
  y: 621
}).click().perform();

It clicks, but not on the button.

Lastly I tried this:

var addPhotos = element(by.css('#px-select-photo'));
browser.executeScript('arguments[0].scrollIntoView()', addPhotos.getWebElement());
browser.actions().mouseMove(addPhotos).click().perform();

Which also yields no results.

Also, I am receiving this warning:

WARNING - more than one element found for locator By.cssSelector("#px-select-photo") - the first result will be used

However, there is only one element in the html file, don't know what thats all about either.

Answer 1

Please try below code:-

browser.executeScript('arguments[0].click()', addPhotos.getWebElement()); 
browser.actions().mouseMove(addPhotos).click().perform();