The system wasn't allowing me to create new issues, so here is the description:

Headless Chromedriver fails to locate components


Issue Description:
When using "regular" chromedriver to run my protractor test on angular page, I have not problem finding components.
When switching to "headless" chromedriver, it fails to locate components on page. I got screenshot enabled, and I can see the is element displayed.

Steps to reproduce:
Scenario 1) - When playing locally the automated tests with "visible" chromedriver browser, I can see that the page is displayed correctly and element are present.

If pause the browser and select elements in the console with "$ctrl.showRefs(result, $event)" , the element is correctly found. Selenium reports element is found.

Scenario 2) - When playing locally the automated tests with "headless/invisible" chromedriver browser, script fails. Selenium reports element is NOT found:=> NoSuchElementError: No element found using locator: By(css selector, button[ng-click="$ctrl.showRefs(result, $event)"])

Here is how the locator is defined:
this.csmGlobalSearchReferenceNumbersLink = element(by.css('button[ng-click="$ctrl.showRefs(result, $event)"]'));

This is how I use the locator in order to find the component and click it:

When(/^Global Search - I click on the Reference Numbers link$/, function(){
  if (self.referenceNumbersDisplay){
	gspo.csmGlobalSearchReferenceNumbersLink.click();
  }else{
        console.log('Component not found');
		
  };
 return;
});

--------------------
I tested it with phantomjs, with firefox, with regular visible chrome and works fine. But with headless chrome FAILS.

Deleted: Phantom.png 53.2 KB

	Phantom.png 53.2 KB View Download

Deleted: ResultLog_NORMALChrome.JPG 41.3 KB

	ResultLog_NORMALChrome.JPG 41.3 KB View Download

Deleted: HeadlessChrome.png 23.4 KB

	HeadlessChrome.png 23.4 KB View Download

Deleted: ResultLog_HEADLESSChrome.JPG 54.8 KB

	ResultLog_HEADLESSChrome.JPG 54.8 KB View Download

The 2 first screenshots I submitted show how Phantomjs and "Regular-Visible" Chrome display the same screen.

The last 2 screenshots, show how "Headless" Chrome FAILS to render the same screen Phantomjs and "Regular-Visible" Chrome did successfully.

Does it occur on multiple sites: Yes, there are several pages where this behavior repeats.

Is it a problem with a plugin? No, it's Headless Chrome who is defective.

Did this work before? With other browsers works perfectly. Regular Chrome works just fine. Headless Chrome FAILS.

Does this work in other browsers? With other browsers works perfectly. Regular Chrome works just fine. Headless Chrome FAILS. Look at the screenshots.

I am using protractor to run my tests. I disabled "Chromedriver" from my script to isolate the issue to the chrome browser, and confirmed that headless chrome is the reason for the failure.

This is my configuration file:

var featsLocation = 'features/';
var stepsLocation = 'steps/';

exports.config = {
		//directConnect: true,
		//chromeDriver: './node_modules/chromedriver/lib/chromedriver/chromedriver.exe',
		//seleniumServerJar: './node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone.jar',
		rootElement: 'html',
		params:{
			authURL: 'http://www.test.net',		
			login:{
				email:'test@test.com',
				passw:'somepassword'
			}
		},
		resultJsonOutputFile:'',
		getPageTimeout: 30000,
		allScriptsTimeout: 30000,
		framework: 'custom',
		frameworkPath: require.resolve('protractor-cucumber-framework'),
		capabilities: {
			/**/'browserName': 'chrome',
				chromeOptions:{
					args:["--headless"]  //[]
				}
		},
		
		onPrepare: function(){
			global.EC = protractor.ExpectedConditions;
		},
		
		specs: [  
		          featsLocation+'authenticateCSM.feature'		        
                        , featsLocation+'globalSearch.feature'		
		 ],

		 baseUrl: '',

		 cucumberOpts: {
			 tags: '',//'(@smoke or @rt) and (not @ignore)',
			 require: [
			           stepsLocation+'*.js'
			],
            monochrome: true,
            strict: true,
            plugin: "json"
		 },
};

--------------------------------------------------

This is a failed test using "Headless" chrome:

$ protractor ./FM_IntTest_UI_conf.js
(node:23060) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[14:17:35] I/launcher - Running 1 instances of WebDriver
[14:17:35] I/local - Starting selenium standalone server...
[14:17:37] I/local - Selenium standalone server started at <IP address I cant share>
Feature: Authentication to CSM

...
...


Failures:

1) Scenario: Validate Global Search Results display Reference Numbers as expected - features\globalSearch.feature:33
   Step: And Global Search - Results display Reference Numbers - features\globalSearch.feature:35
   Step Definition: steps\globalSearch\globalSearch.spec.js:281
   Message:
     NoSuchElementError: No element found using locator: By(css selector, button[ng-click="$ctrl.showRefs(result, $event)"])
         at elementArrayFinder.getWebElements.then (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\lib\element.ts:851:17)
         at ManagedPromise.invokeCallback_ (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1366:14)
         at TaskQueue.execute_ (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2970:14)
         at TaskQueue.executeNext_ (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2953:27)
         at asyncRun (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2813:27)
         at C:\Users\me\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:676:7
         at process._tickCallback (internal/process/next_tick.js:103:7)Error
         at ElementArrayFinder.applyAction_ (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\lib\element.ts:482:23)
         at ElementArrayFinder.(anonymous function) [as isDisplayed] (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\lib\element.ts:96:21)
         at ElementFinder.(anonymous function) [as isDisplayed] (C:\Users\me\AppData\Roaming\npm\node_modules\protractor\lib\element.ts:873:14)
         at World.<anonymous> (C:\workspace\project\steps\globalSearch.spec.js:284:44)

4 scenarios (1 failed, 3 passed)
28 steps (1 failed, 5 skipped, 22 passed)
3m16.212s

----------------------------------------

This is a successful test, running the same script using "Regular-Visible" Chrome:
$ protractor ./FM_IntTest_UI_conf.js
(node:16868) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[09:37:49] I/launcher - Running 1 instances of WebDriver
[09:37:49] I/local - Starting selenium standalone server...
[09:37:54] I/local - Selenium standalone server started at http://172.30.75.73:50304/wd/hub

....
....
4 scenarios (4 passed)
28 steps (28 passed)
4m25.218s
Cucumber HTML report ./index.html generated successfully.
[09:42:34] I/local - Shutting down selenium standalone server.
[09:42:34] I/launcher - 0 instance(s) of WebDriver still running
[09:42:34] I/launcher - chrome #01 passed

Not aware how to triage this issue, requesting some one from internals team to look in to this issue.

Thanks!

Issue has not been modified or commented on in the last 365 days, please re-open or file a new bug if this is still an issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot