Nightwatch tests do not find elements in Headless chrome mode - selenium

Question

I am trying to get my tests (written in Nightwatch.js) to run locally in headless chrome.
However, the tests fail since they are not able to find the elements in headless mode (they work without headless mode though).
If I check the failure screenshots I only get a white screen.
But if test checks for the "body" element, it actually pass. So I think the page is loaded, but maybe headless chrome, for some reason, cannot load the javascript? Later I wait for divs and buttons etc to be visible for several seconds, but it does not find them.
Do you have any ideas what could be wrong?
I have added the --headless and --disable-gpu flags in desiredCapabilities in the nightwatch config file.

Answer 1

So, as I said in my reply I had the same issue yesterday, I was just trying to do a dummy test on google homepage. This morning with a fresh brain I tried to tackle that. I had the brilliant idea to take a screenshot just before nightwatch fails to find an element.
It turns out the "normal" chrome had the home page in English, and the "headless" chrome had the homepage in french, for some reason.
I found this: https://bugs.chromium.org/p/chromedriver/issues/detail?id=1925 may be explaining why.
The workaround I found to always have the correct language is:
"chromeOptions" : {
"args" : ["--lang=fr", "--headless"]
}
I still have a hard time setting it in english (weirdly) but I hope this will save someone a couple of hours in the future

Answer 2

I think you should declare binary path in Nightwatch.js
If you are on linux please try this, it works perfectly for me :
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true,
"chromeOptions": {
"args": [
"headless", "disable-gpu"
],
"binary": "/usr/bin/google-chrome"
}
}
If you are on Mac, replace your binary path, eg /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome