Button not working as expected in headless mode

Question

I am using the latest chrome driver with selenium to test a web application hosted on Microsoft Azure.

The script starts by logging into the web application. An authentication window opens that requires the user to login through Azure and then press a, "Grant" button that will allow the web application to speak to a Therefore database to populate a few metadata fields.

This all works perfectly when headless mode is disabled. However, when headless mode is enabled it seems as though the, "Grant" button doesn't function. I am logging and taking screenshots during this process, which is how I know that the "Grant" button element is found and is being clicked. The button becomes highlighted when clicked, which is shown in the screenshot, but nothing happens and the authentication window times out in headless which kills the test.

I have tried different clicking methods, but this made no difference as the element is found and is being clicked. I have also pressed the, "Sign in as a different user" button on the form to ensure that the .click() method is functioning as expected, which of course works. I tried to add longer wait times but to no avail.

I have also added the following Chromium driver options:

    ChromeOptions options = new ChromeOptions();
    options.addArguments("enable-automation");
    options.addArguments("--headless");
    options.addArguments("--start-maximized");
    options.addArguments("--window-size=1920,1080");
    options.addArguments("--no-sandbox");
    options.addArguments("--disable-extensions");
    options.addArguments("--dns-prefetch-disable");
    options.addArguments("--disable-gpu");
    options.addArguments("--incognito");
    options.addArguments("--disable-web-security");
    options.addArguments("--allow-running-insecure-content");
    options.addArguments("--disable-dev-shm-usage");
    options.addArguments("--allow-insecure-localhost");
    options.addArguments("--disable-popup-blocking");
    options.setPageLoadStrategy(PageLoadStrategy.EAGER);

How I am clicking the element:

System.out.println("Grant permission...");
WebDriverWait wait = new WebDriverWait(driver, 30);
                    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[contains(text(),'Grant')]"))).click();

What baffles me is how this works seamlessly when headless is disabled but not when it's enabled. I'm wondering if this could be a Chrome driver issue? However I know that this is unlikely.

Any recommendations are appreciated, thanks.

Adding button HTML as requested:

<form method="POST">    
<p>Hello, Test</p>
<ul>

        <li class="text-left">Act with your access permissions</li>
        <li class="text-left">Allow continuous access while you are not online.</li>
</ul>
<p>
    <button type="submit" name="submit.Grant" value="Grant" class="btn btn-primary btn-block">Grant</button>
    <button type="submit" name="submit.Login" value="Sign in as different user" class="btn btn-outline-primary btn-block">Sign in as different user</button>
</p>

Answer 1

Try adding a wait. I mean use WebDriverWait to wait for the element to be clickable.
Something like:

WebDriverWait wait = new WebDriverWait(webDriver, 20);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("/html/body/div/div/div/div/div/div/div[2]/form/p[3]/button[1]"))).click();

Also you need to improve your locator.
Absolute XPaths are extremely fragile.

Answer 2

First, try to avoid very long CSS or Xpath expression. You can find the button you need to click on like this:

driver.findElement(By.xpath("//button[contains(text(),'Grant')]"));

This code is more readable. If the site will be changed and the element will be moved to another div or span - your code will not work if it relays on the structure of all the divs and spans.

Next, never just click on an element of hover over it in a Selenium test. First check if the element is clickable, then click:

WebElement term = driver.findElement(By.xpath("//button[contains(text(),'Grant')]"));
WebDriverWait wait = new WebDriverWait(webDriver, 20);
wait.until(ExpectedConditions.elementToBeClickable(term));
term.click();