Protractor: Not able to click angular webelement after upgrade

[stemkar123]

Hi,

Recently I have upgraded Chrome & started facing issue with Protractor tests. I am not able to click any webelement with click() function. No error displayed in console

I have to use javascript executor [browser.executeScript()] to click the webelement & it is working fine.

Current configuration I am using:
Chrome- V66
Protractor- 5.3.0
Selenium server standalone jar- 3.12.0
Chromedriver- 2.38/2.37
Jasmine- 3.1.0
Windows- 10

can anyone help me on this.

[IgorSasovets]

Hi, @stemkar123 ! Can you please provide test case example?

[stemkar123]

@IgorSasovets I have tried simple case as below. sendkeys() working fine but click() not working.

Spec:

describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[href="http://angular.io"]')).click();
});
});

Conf:

exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect: true,
specs: ['todo-spec.js'],
};

[IgorSasovets]

@stemkar123 , I modified your scripts and now all works as expected. So, try this code:
protractor.conf.js

'use strict';

exports.config = {
    directConnect: true,
    specs: ['todo-spec.js'] 
}

todo-spec.js

describe('angularjs homepage todo list', function() {
    it('should add a todo', function() {
        browser.get('https://angularjs.org');
        element(by.model('todoList.todoText')).sendKeys('write first protractor test');
        return browser.executeScript('document.querySelector(\'.hero>h2\').scrollIntoView(true)')
            .then(() => $('[href="http://angular.io"]').click());
    });
});

[stemkar123]

@IgorSasovets Thanks for looking into this. I have used modified code & works fine now. But the problem is I wont be able to change the click method throught the script as there are around 400+ test scripts & click is used number of times. :(

Also one observation: If I keep original code as it is & just add "directConnect: true" then also normal click() works fine. Code looks below:

Spec:

describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[href="http://angular.io"]')).click();
});
});

Conf:

exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect: true,
specs: ['todo-spec.js'],
};

I just want to understand what is the harm if I use "directConnect: true" in conf file.

[IgorSasovets]

Actually, when you're using directConnect option you don't need to specify seleniumAddress property. "directConnect: true" tells protractor to get selenium driver in its default location and use it. When you specified seleniumAddress, you tell protractor address of a running selenium server. Regarding number of tests, problem was not in click() function, element was just not visible to browser, that's why I used scrollIntoView.

[arjunUnniumbath]

@IgorSasovets : the scroll into view should happen automatically right? I'm facing similar issues after upgrading to latest driver files.

[IgorSasovets]

Hi, @arjun1092 ! Actually, not always (at least based on my experience). sendKeys() event has aditional focus action because user can't input text in unvisible to him field. That's why we don't need to use scrollIntoView() when using this function. Same requirements for click() action. When you want to click on element you should see it, isn't it? But click() function doesn't include additional focus event (first time I faced with such behaviour more than 1 year ago), so you need to add scrollIntoView() function.
There is solution which allows you to click on element without scrollIntoView() function even if it isn't visible on part of screen but presented in DOM. You can just add small wrapper (or create separate function) where using browser.executeScript() perform click on element. Small example:
navigate to angular page, there is link "Try the new Angular" at top of the page with selector '.button.button-large.button-primary.has-shield.has-shadow'. Function looks like

function clickOnElement(elementSelector) {
   return browser.executeScript('document.querySelector(arguments[0]).click();', elementSelector);
}

To try this just navigate to angularjs page, scroll down to middle of page (link should be unvisible to you) and run

document.querySelector('.button.button-large.button-primary.has-shield.has-shadow').click()

in console. Same for input field (focus event example), navigate to top of this page and run

document.querySelector('input[placeholder=\'add new todo here\']').focus()

command to see result.

[arjunUnniumbath]

@IgorSasovets : let me try this out in my repo. will give you an update by today EOD.

[IgorSasovets]

@arjunUnniumbath , any updates on this?

[CrispusDH]

@IgorSasovets have you tried update Chrome to 67 version?

[IgorSasovets]

Hi, @CrispusDH ! Yes, I ran it on latest Chrome version but if we don't use additional scrollIntoView() event here, problem still exists.

[CrispusDH]

Oh, this is not a problem. If button isn't visible you can't click on it. Think like a User, how he will click on a button? Firstly, he will scroll and then click. You should do the same. If protractor will scroll and click automatically I will suggest this behavior as a bug.

[arjunUnniumbath]

@IgorSasovets The issue still persists. Sorry for the delay.

[wswebcreation]

@stemkar123

What's the exact error message you are getting?

@CrispusDH
Chromdriver automatically scrolls to an element to click on it. This was broken on version 2.31 and was fixed in 2.32, see http://chromedriver.chromium.org/downloads

Based on the errormessage we can determine if it is a Protractor bug or a Chromedriver bug, most likely a Chromedriver bug.

[IgorSasovets]

@CrispusDH , did you read one of my comments to this issue? In previous comment I said the same. It's not my problem) I posted suggested solution.

[IgorSasovets]

@wswebcreation , here is error message:

 Message:
    Failed: unknown error: Element <a href="http://angular.io" target="_blank" class="button button-large button-primary has-shield has-shadow">...</a> is not clickable at point (592, 28). Other element would receive the click: <div class="container">...</div>
      (Session info: chrome=67.0.3396.79)
      (Driver info: chromedriver=2.39.562713 (dd642283e958a93ebf6891600db055f1f1b4f3b2),platform=Mac OS X 10.12.6 x86_64)
  Stack:

Also I can provide small project example.

[wswebcreation]

@IgorSasovets

Tnx, ok, first step would be to check if the element is clickable when it is in the view, if it is then there is a problem with the Chromedriver behaviour.
Please file an issue on the Chromedriver site, because this is then not an issue with Protractor.

Tnx

[IgorSasovets]

@wswebcreation , I tested it and can confirm that element is clickable. Seem like there are some problems with chromedriver autoscrolling.

[wswebcreation]

@IgorSasovets

Then it could be related to the issue Chromedriver had with version 2.31.

[IgorSasovets]

Chromedriver issue - link

[stemkar123]

@wswebcreation I did not get any error message. Sendkeys() not working whereas click() was working perfectly.