The item is not available for clicks at (215, 251).

Question

I have a non angular application where I click on a link and a new popup modal appears. Then I can choose to upload an image or video. I tell the protractor and / or web server to click the "Upload Photos" button.

If I use:

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

I can visually see the button pressed, but the test then failed, and the error was not pressed ... (215, 251)

So, I thought I could trick him by pressing xy position (which I assume these two numbers are in error) and I get nothing

The code I used for this:

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

He presses, but not the button.

Finally, I tried this:

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

It also does not produce results.

In addition, I get this warning:

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

However, there is only one element in the html file, I do not know what this means.

Answer 1

Please try the code below: -

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

Answer 2

Warning can be the key to solving the problem.

Make your selector more specific and wait for the download button to become interactive:

 var EC = protractor.ExpectedConditions; var addPhotos = element(by.css('#pxupload3 input#px-select-photo')); browser.wait(EC.elementToBeClickable(addPhotos), 5000); addPhotos.click(); 

An alternative would be to get all the elements using px-select-photo id and the filter visible:

 var addPhotos = element.all(by.css("#px-select-photo")).filter(function (addButton) { return addButton.isDisplayed(); }).first(); addPhotos.click();