Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Element is not clickable at point (1307, 27) would like to know more about this type of error


#1

@bdo script has $browser.sleep and $browser.wait to , but error still shown.

console.log('waiting for the overlay to go away');
	return $browser.sleep(2000);
}).then(function() {
	console.log('checking title');
	return $browser.wait(until.titleIs('SRC:CLR'), 5000, 'asserting that title is correct');
}).then(function() {
	console.log('waiting on logout button');
	return $browser.wait(until.elementLocated(By.css('[data-e2e="logout-button"]'), 'waiting on logout button'));
}).then(function() {
 console.log('clicking to log out');
	return $browser.findElement(By.css('[data-e2e="logout-button"]')).click();

Error: unknown error
#2

Hi Natalie

I would assume you page is still loading when you are trying to interact with it. Based on your error message, the element that would receive the click seems to be a full screen loading light box.

You may want to use the $browser.wait function to wait for some condition that will be met when your page has fully loaded before interacting with it.

Cheers,

Benoit


#3

@bdo:
My script has $browser.sleep and $browser.wait. But the error still displayed.

	console.log('waiting for the overlay to go away');
	return $browser.sleep(2000);
}).then(function() {
	console.log('checking title');
	return $browser.wait(until.titleIs('SRC:CLR'), 5000, 'asserting that title is correct');
}).then(function() {
	console.log('waiting on logout button');
	return $browser.wait(until.elementLocated(By.css('[data-e2e="logout-button"]'), 'waiting on logout button'));
}).then(function() {
 console.log('clicking to log out');
	return $browser.findElement(By.css('[data-e2e="logout-button"]')).click();

#4

And I dont understand sometimes in passed sometimes it failed?


#5

@natalie - Based on your script snippet you have above it looks like you are having the browser sleep until an overlay loads, then checking the title. One thing to recall is that Synthetics scripts are based on Selenium Webdriver, which is what actually determines when each “step” is complete and then moves on basically instantaneously (compared to a real person having to move a mouse and click on things) to the next step. This is particularly problematic on any site that is dynamically updating or has animations.

My guess is that on your site there are some animations or other dynamic elements that are still loading after your overlay goes away and so the step to check the title and check for the presence of the logout button fire instantly after the $browser.sleep ends but sometimes your site is still loading and so you end up with the intermittent error. The best way to work around this this would be to add another step to wait for a particular element that is only visible once the animations and dynamic elements are done loading but if there is nothing else you can check for, you might just end up needing to add another $browser.sleep after the logout button locator but before you click on the element.


#6

HI @sdelight from the code above I have $browser.sleep . Your point is that I had to add sleep before clicking the button return $browser.findElement(By.css('[data-e2e="logout-button"]')).click();?


#7

@natalie - That is where your script is generating the error, when it goes to actually click the logout button, correct? If that’s the case, then you can certainly add a $browser.sleep there to try and account for delays but the best way to address these types of issues is to instead have your script look for an element or something that indicates whatever you are waiting for is actually complete. The problem with static sleep statements is that if whatever you are sleeping for taking longer than the stated time then you may end up with another failure so if at all possible you want to use another method to delay the script action until the page is ready.


#8

I guess its here :

console.log('waiting on logout button');
	return $browser.wait(until.elementLocated(By.css('[data-e2e="logout-button"]'), 'waiting on logout button'));

#9

Continuing the discussion from Element is not clickable at point (1307, 27) would like to know more about this type of error:

How do I know, sometimes it enough, sometimes monitor is failing. If I’m going to create a bunch of sleep all over my monitor, not sure this is a good way of doing it? In this case the purpose of monitoring and statistics doesn’t have a value.


#10

@natalie - Writing effective scripts for dynamic websites requires some knowledge about what the website is doing. The best way for effective repeatable scripts is to be able to write your script to look for some event that denotes that the site has finished loading any dynamic content or animations that may prevent a click action from completely successfully.

If there are no such events that can be coded for with your website, sometimes the only solution is to add $browser.sleep statements to your script but I would encourage that as a last resort as anything static will always be more error prone and more likely to generate a failed result.


#11

Hi All, I have the similar issue with the element not being clickable: Here’s the protractor/jasmine test i’m trying to migrate to Synthetics:

describe(’/news’, function () {
var articleCount = 25;
beforeEach(function () {
browser.driver.get(‘http://’ + host + ‘/news’);
});
describe(‘articles’, function () {
describe(‘should have working articles’, function () {
beforeEach(function(){
var indexItems = element.all(by.css(’.indexItem > .imgph >a’));
var testItem = indexItems.get(Math.floor(Math.random()*articleCount)+1);
testItem.click();

            });
            for(var i = 0; i<5; i++){
                it('Random art '+i, function () {
                    browser.driver.getCurrentUrl().then(function (theUrl) {
                        testNewsArticlePage(theUrl);
                    });
                });
            }
        });
    });
});

My current Synthetics code looks as bellow:

$browser.get(“http://”+ host +"/news").then(function(){
console.log(‘Find links to articles’);
return $browser.findElements(By.css(".indexItem > .imgph >a"));

}).then(function(articleLinks){
console.log(‘Picking random article’);
var testItem = articleLinks[Math.floor(Math.random()*25)+1];
$browser.sleep(2000);
return testItem.click();

}).then(function(){
console.log(‘Run article page tests’);
});

I’d be grateful for any suggestions,
Tomasz


#12

@tomasz_witkowski based on the scripts you posted, it sounds like picking a random article on the page could possibly be outside of the view-able area of the browser, and further down the page. You can fix this by making sure to scroll so the element you’re trying to click is within the view-able area.


#13

Ah ok, so with NR finding an element doesn’t automatically scroll it into the view, correct?
Is there a webdriver function I should use or shall I call executeScript and pass js function to handle the scroll?


#14

I ran into this very issue with another customer. It seems to be a “bug” in ChromeDriver. Here’s how I dealt with it - I found the element on the page and scrolled to it before clicking on it. Here is a from their script where I did that:

$browser.waitForAndFindElement(By.id("options_form_goal_code"), DefaultTimeout); })
.then(function (elloc) {
  elloc.getLocation().then(function(location) {
    $browser.manage().window().setPosition(0, location.y);
  });
}).then(function () {
  $browser.findElement(By.id("options_form_goal_code")).then(function (el) {
    el.click();
  });
})

Hope this helps!
–Seth


Page scroll up/down
Synthetics always fail element not clickable or not visible if i run manual validation it works fine
Not able to click() on a div tag discovered using xPath
#15

this actually helped. Thanks.
To optimise you can store the reference of elloc and call a click on it.


#16

@bdo

I tried to locate and click element by class,xpath ,css but its giving error at validation time that "Element is not clickable ", below is my script, please provide solution for this , every time its giving same error .
There is no (name,id) attribute.

$browser.waitForElement($driver.By.linkText(“Show Rooms”),60000);
$browser.findElement($driver.By.linkText(“Show Rooms”)).click();

$browser.waitForElement($driver.By.xpath(’//*[@id=“dvHotelBox123”]/div[3]/div[2]/div[6]/div[2]/div[3]/div[1]/div[2]/div[2]/div’),50000);

(Trying to click here)
$browser.waitForAndFindElement($driver.By.xpath(’//*[@id=“dvHotelBox123”]/div[3]/div[2]/div[6]/div[2]/div[3]/div[1]/div[2]/div[2]/div’)).click();


#17

Hey @DoctorChocolate I’m trying to use the function that you posted but my monitor throws me the next message TypeError: Cannot read property ‘getLocation’ of undefined . How can I correct this error message?

Thanks in advance!


#18

Hey @carlos_sanchez - Are you using getLocation() in the returned promise for waitForAndFindElement() or another function? If it not waitForAndFindElement(), would you be able to share a snippet of the script or link to the monitor in question so we could look at it further? If you’d prefer to discuss the monitor specifics privately, I would be happy to create a ticket-- just let me know.

Thanks!