element click intercepted: element is not clickable at point.. other element would receive click

Question

Error: Element click intercepted only comes in headless chrome, it works fine if I run it on chrome browser without headless.

I have already tried below solutions:

Increasing window size in config chrome options to 'chromeOptions': { args: [ "headless","--disable-gpu", "--window-size=1920,1080" ] }
browser.actions().mouseMove(element).click(); and browser.actions().mouseMove(element).click().perform();
Set window size in onprepare() method: // set screen size setTimeout(function() { browser.driver.executeScript(function() { return { width: window.screen.availWidth, height: window.screen.availHeight }; }).then(function(result) { browser.driver.manage().window().setPosition(0,0); browser.driver.manage().window().setSize(result.width, result.height); }); });
Applied all types of waits: Sleep(), Implicit wait, Explicit wait, async wait: await.
Also used browser.driver.manage().window().maximize(); in before each instead of before all. But nothing of above worked. It worked for few tests but not for other.

I am running tests to check add user scenarios. Few of them are passed but not all. All tests are using same code written below only few things are changes as per test case like if it's adding a valid user, invalid user... Basic common things in all add user script is below

Email:

Search a level on which I want to add a user:

Select Role:

click Add user button.

Problem I have observed is with search box and role dropdown. I think elements in headless chrome are not easily accessible or some other element is overlapping this elements.

Please help to solve this problem. Any help is appraised.

My tests -

it('1. should not add user with invalid email',async function(){
    browser.waitForAngularEnabled(true)
    browser.wait(EC.presenceOf(basepage.Loc_user_management),5000)
    await basepage.Loc_user_management.click(); // click user management menu
    browser.waitForAngularEnabled(true);
    browser.wait(EC.presenceOf(userpage.Loc_add_user_btn),5000)
    await userpage.Loc_add_user_btn.click();
    browser.waitForAngularEnabled(true)
    await userpage.Loc_email_addr_txtbox.click();
    await userpage.Loc_email_addr_txtbox.sendKeys(loginData.users.invalid_username);
    browser.manage().timeouts().implicitlyWait(1000);
    browser.wait(EC.presenceOf(userpage.Loc_primarylevel_searchbox),5000);
    userpage.Loc_primarylevel_searchbox.isDisplayed().then(async function(){
        await userpage.Loc_primarylevel_searchbox.click();
        await userpage.Loc_primarylevel_searchbox.sendKeys('Clients');
        browser.actions().sendKeys(protractor.Key.ARROW_DOWN);
        browser.actions().sendKeys(protractor.Key.ENTER);
        //userpage.Loc_primarylevel_searchbox.click();
     })
    browser.sleep(500)
    browser.waitForAngularEnabled(true);
    browser.wait(EC.presenceOf(userpage.Loc_role_dropdown),5000)
    await userpage.Loc_role_dropdown.click();
    browser.waitForAngularEnabled(true)
    await element(by.cssContainingText('option', 'Role1')).click(); 
    browser.wait(EC.presenceOf(userpage.Loc_add_btn),5000)
    userpage.Loc_add_btn.click().then(async function(){
        expect(userpage.Loc_error_message_label.getText()).toEqual(errormessage.AddUserMessages.invalid_email_error_message);
    })
});

Sergey Pleshakov Sergey Pleshakov · Accepted Answer · 2020-09-04T15:00:03

that's LIKELY because you don't handle promises

browser.wait needs await

browser.waitForAngularEnabled also returns a promise and needs await

userpage.Loc_primarylevel_searchbox.isDisplayed().then doesn't wait until the element is displayed, it just gets a boolean if it's displayed or not and proceeds immediately. So in your case it's an extra line and complexity that doesn't do anything

sendKeys needs await

browser.sleep needs await

And don't mix .then and await. Use either one

What happens when you don't handle promises, is protractor just schedules the command, but doesn't wait until it's completed

Coincidentally, your script works with graphic interface, because chrome takes some time to load up. But when you run the same script in headless, it becomes faster (there is no UI to load) and executes one command before a previous is finished

element click intercepted: element is not clickable at point.. other element would receive click

1 Answers