Google Recaptcha not shown for automation test in headless chrome - angularjs

Question

I have an Angular page which makes use of google recaptcha. I have written the automation test using Protractor for the same(And have used testing site/secret key for recaptcha) and it works fine for chrome browser.
But I have a requirement to use Xvfb to run virtualized Chrome as part of the testing process in ubuntu/jenkins. And I have the Chrome drivers installed. When I run the test with this setup and following capability setting for protractor,
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: [ "--headless", "--disable-gpu", "--window-size=1800,1800" ]
}
}
The Captcha just doesn't show up and it displays as below,
Chrome driver version is chromedriver_2.31
What am I doing wrong??

Answer 1

I ran into this same issue, attempting to get a screenshot with a reCaptcha in the page. The technologies were different but the underlying use of google-chrome headless is the same (am using Puppeteer). The fix is to set the userAgent to something compatible, like the browser you regularly use.
In my case (with puppeteer):
await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/60.0.3112.113 Chrome/60.0.3112.113 Safari/537.36')
For some other agent strings: see Chrome userAgents.
For Protractor, you can set the user agent like so:
capabilities: {
'browserName': 'chrome',
'chrome-switches' : ["--user-agent ='Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/60.0.3112.113 Chrome/60.0.3112.113 Safari/537.36'"]
},
Hope that works for you.