Performance issue with Headless Chrome

Question

My scripts are failing only when the headless mode is enabled. Please suggest me the ways what all I should look while coding.

1. Most of my scripts are failed due to TimedOut.
2. Is there anything I should specifically look for locators? I believe css wont help me in this case. Would there be something else related to locators?
3. In the continuous integration server, the execution is very slow. The limitations of Timed_Out seconds are fixed to 50. This didn't work for me and even for 100. Please suggest me how to handle when I'm restricted to utilize only upto 100seconds to TimeOut and it meets exception as it requires more seconds than this.

Here are few exceptions that I receive only when I enable headless,

1. WebDriverException: unknown error: Element <input type="radio" class="wizard-input" name="5a68a4c173bb-TOTAL-1" id="5a68a4c173bb-TOTAL-1" value="1"> is not clickable at point (496, 551). Other element would receive the click: <div class="navigation-bar">...</div>

Tried to apply wait condition and even scrolled and click.

2. TimeoutException: Expected condition failed: waiting for element to be clickable: By.cssSelector: div.icon.icon-add.add-contact-button (tried for 50 second(s) with 500 MILLISECONDS interval)

Tried to apply the conditions suggested by Marcel. As told it exceeds even 100seconds

Here are few examples of my code,

public void clickForwardButton(){
    WaitTillElementToBeClickable("xpath", LoginData.Forward);
    ScrollAndClickOnElement("xpath", LoginData.Forward);
} //The error seems to be like it wont scroll properly and hence I receive element not found exception

protected void WaitTillElementToBeClickable(String locatorType, String locatorValue) {
try {
  WebDriverWait wait = new WebDriverWait(driver, TIME_OUT_IN_SECONDS);
  if (locatorType.equalsIgnoreCase("cssSelector")) {
    wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector(locatorValue)));
  } else if (locatorType.equalsIgnoreCase("xpath")) {
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath(locatorValue)));
  } else if (locatorType.equalsIgnoreCase("id")) {
    wait.until(ExpectedConditions.elementToBeClickable(By.id(locatorValue)));
  }
} catch (Exception e) {
  logger.error("Webdriver Locator Error" + e);
}
}

Answer 1

If you're not using WebDriverWait, give that a try

int seconds = 5;
WebDriverWait wait = new WebDriverWait(driver, seconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("yourID")));

You have to import OpenQA.Selenium.Support.UI to be able to use WebDriverWait.

Edit

Since the WebDriverWait method doesn't provide a solution, try adding an additional argument to your ChromeOptions to set the window size. Since the default headless window size is probably a lot smaller than your non-headless window size, it's worth a try. Additional benefit of setting a larger window size is reducing the need for scrolling.

ChromeOptions options = new ChromeOptions();
options.addArgument("headless");
options.addArgument("window-size=1920,1080");

// or

options.addArguments("headless", "window-size=1920,1080");