ElementClickInterceptedException is encountered when running script in headless state

Question

I am trying to click a dropdown menu. But encounters ElementClickInterceptedException only when in headless state. And when I checked the screenshot when the error is encountered, the dropdown menu was clicked but is not being found. Which was weird.

This is the code I used for using headless

Open Browser Window
    [Arguments]    ${LANGUAGE_CODE}
# NOTE: Chrome Options is needed for Jenkins to have the 1920 x 1080 size
    Open Browser    ${LOGIN URL}    ${BROWSER}  options=add_argument("--lang\=${LANGUAGE_CODE}");add_argument("--headless");add_argument("--window-size=1920,1080");
    Maximize Browser Window

And this is the code used to click the dropdown

    ${visible}  Run Keyword And Return Status  Element Should Be Visible  ${ppp_cmbGrid}
    Run Keyword If  ${visible}
    ...  Click Element    ${ppp_cmbGrid}

I looked other same issues here in stackoverflow and already tried these:

Open Browser Window
    [Arguments]    ${LANGUAGE_CODE}
# NOTE: Chrome Options is needed for Jenkins to have the 1920 x 1080 size
    Open Browser    ${LOGIN URL}    ${BROWSER}  options=add_argument("--lang\=${LANGUAGE_CODE}");add_argument("--window-size=1920,1080");add_argument("--start-maximized");add_argument("--headless")

And added these: add_argument('--disable-blink-features=AutomationControlled')

But still getting this error

ElementClickInterceptedException: Message: element click intercepted: Element <div class="combobox custom" style="width: calc(100% - 1px); text-align: left;">...</div> is not clickable at point (951, 224). Other element would receive the click: <span class="dropdown-placeholder" style="height: 45px;">...</span>
  (Session info: headless chrome=114.0.5735.198)
Stacktrace:
Backtrace:
    GetHandleVerifier [0x00728893+48451]
    (No symbol) [0x006BB8A1]
    (No symbol) [0x005C5058]
    (No symbol) [0x005F4BA4]
    (No symbol) [0x005F36E8]
    (No symbol) [0x005F1EEB]
    (No symbol) [0x005F12FE]
    (No symbol) [0x005E9AAC]
    (No symbol) [0x0060A2BC]
    (No symbol) [0x005E9586]
    (No symbol) [0x0060A614]
    (No symbol) [0x0061C482]
    (No symbol) [0x0060A0B6]
    (No symbol) [0x005E7E08]
    (No symbol) [0x005E8F2D]
    GetHandleVerifier [0x00988E3A+2540266]
    GetHandleVerifier [0x009C8959+2801161]
    GetHandleVerifier [0x009C295C+2776588]
    GetHandleVerifier [0x007B2280+612144]
    (No symbol) [0x006C4F6C]
    (No symbol) [0x006C11D8]
    (No symbol) [0x006C12BB]
    (No symbol) [0x006B4857]
    BaseThreadInitThunk [0x75EA7D59+25]
    RtlInitializeExceptionChain [0x77CEB74B+107]
    RtlClearBits [0x77CEB6CF+191]

score 0 · Answer 1 · answered Jun 29 '23 at 09:28

The ElementClickInterceptedException occurs when an element on the webpage is not clickable because another element is overlapping or intercepting the click action. This issue often arises when running tests in a headless mode because the layout and rendering can be different compared to running in a regular browser window.

You can try the following:

Wait for the element to be clickable by adding a wait before clicking the dropdown element to ensure it is fully loaded and visible.
When running in headless mode, capture a screenshot when the error occurs and examine it closely. Verify if there are any unexpected elements overlapping the dropdown.

score 0 · Answer 2 · answered Jun 29 '23 at 11:38

This error message...

ElementClickInterceptedException: Message: element click intercepted: Element <div class="combobox custom" style="width: calc(100% - 1px); text-align: left;">...</div> is not clickable at point (951, 224). Other element would receive the click: <span class="dropdown-placeholder" style="height: 45px;">...</span>

...implies that you have tried to invoke click on the <div> element:

<div class="combobox custom" style="width: calc(100% - 1px); text-align: left;">

identified as ${ppp_cmbGrid}.

Ideally <div> elements aren't clickable unless special circumstances. As a result the click is obscured by:

<span class="dropdown-placeholder" style="height: 45px;">...</span>

Solution

To click the dropdown menu you need to invoke the click on the <span> tag.

score 0 · Answer 3 · answered Aug 17 '23 at 03:05

If your issue doesn't occur when using regular Chrome, but does occur when using headless Chrome, then you could try using Chrome's newer headless mode, which functions exactly like regular Chrome:

Instead of using:

add_argument("--headless")

Use this instead:

add_argument("--headless=new")

For more info, see: https://stackoverflow.com/a/73840130/7058266

ElementClickInterceptedException is encountered when running script in headless state

3 Answers3

Solution