Protractor click function isn't always working

Question

I am new in protractor. I have written a test for angular which first user login to the app and then click on specific button to calculate a number. sometimes it works and sometimes not!

This is the code:

describe('Protractor Demo App', function () {

    it('should login to app', function () {
        browser.get('http://localhost:8080/main');
        var userName = element(by.id('username'));
        var passWord = element(by.id('pwd'));
        var loginBtn = element(by.id('loginBtn'));
        userName.sendKeys('user');
        passWord.sendKeys('1');
        loginBtn.click();
        expect(browser.getCurrentUrl()).toEqual('http://localhost:8080/main/#/intro');
    });


   it('should calculate something', function () {
        browser.get('http://localhost:8080/main/#/something');
        var next = element(by.css('[ng-click="calculate()"]'));
        element(by.model('accountNo')).sendKeys('0293949223008');
        next.click();  
        expect(element(by.binding('result')).getText()).toEqual('55017000000029');
    });

    it('should show error for invalid input no', function () {
        browser.get('http://localhost:8080/main/#/something');
        var next = element(by.css('[ng-click="calculate()"]'));
        element(by.model('accountNo')).sendKeys('9999456123789');
        next.click();
        expect(element(by.css('[class="messageObject warning"]')).getText()).toEqual('message for invalid input');
    });
});

First "it" always works true but second and third one, sometimes work. It is happened that only one of them has not worked;

This is the error:

message: Failed: unknown error: Element ... is not clickable at point (1214, 275). Other element would receive the click: ... (Session info: chrome=55.0.2883.87) (Driver info: chromedriver=2.26.436362 (5476ec6bf7ccbada1734a0cdec7d570bb042aa30),platform=Windows NT 10.0.10240 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 78 milliseconds Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03' System info: host: 'user', ip: 'ip', os.name: 'Windows 8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.8.0_45' Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.26.436362 (5476ec6bf7ccbada1734a0cdec7d570bb042aa30), userDataDir='add'}, takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=55.0.2883.87, platform=WIN8_1, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true, unexpectedAlertBehaviour=}] Session ID: 45d78fbebf15daa1dde971f5f7470551

I don't know what the problem is. Can any one help me? Thanks in advance.

Answer 1

Implement browser.wait() with ExpectedConditions.isElementToBeClickable() method before just performing click operation. You follow as below:

   var EC = protractor.ExpectedConditions;

 it('should show error for invalid input no', function (){
    browser.get('http://localhost:8080/main/#/something');
    var next = element(by.css('[ng-click="calculate()"]'));
    element(by.model('accountNo')).sendKeys('9999456123789');

    browser.wait(EC.elementToBeClickable(next ), 10000,'Element not  
                                                  clickable');
    next.click();
    expect(element(by.css('[class="messageObject  
    warning"]')).getText()).toEqual('message for invalid input');
   });

Answer 2

This is an extension to Suresh Salloju's answer above, where the solution is to use Protractor's API to wait for an element to be clickable, with something like the following:

browser.wait(EC.elementToBeClickable(element), 10000,'Element not clickable');

Under certain circumstances, a similar exception can occur even when waiting for elementToBeClickable.

In my case, at certain screen sizes, a toast element was covering the element in the question - so although it was clickable, it never received the click.

Answer 3

As a last resort, you can click using javascript. Please see the tested code below .

var homelink= element(by.linkText('Home')).click(); browser.executeScript("arguments[0].click();", homelink);