Unable to Attach remote debugger to Chrome headless in Selenium WebDriver

Question

I'm running my E2E test cases using Selenium WebDriver with Chrome headless. this configuration working fine and able run test case.

My code looks like this:

 const options = {
        desiredCapabilities: {
            port: PORT,
            browserName: 'chrome',
            chromeOptions: {
                args: ['disable-infobars' 
                ,'headless',
                'disable-gpu',

            ],
            //binary: '/Applications/Google Chrome Dev.app/Contents/MacOS/Google Chrome'
            binary: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'

            }
        },
        host: envConfig.seleniumUrl,
        deprecationWarnings: false
    };
    this.browser = webdriverio
        .remote(options)
        .init()
        .url(envConfig.appUrl)
        .timeouts('script', 35000)
        .timeouts('implicit', 35000);

Some of my test case failing so i am trying to attach chrome debugger using chrome launch option

--remote-debugging-port=9222

https://developers.google.com/web/updates/2017/04/headless-chrome

After adding remote debugging port flag My E2E failing and unable to start

 const options = {
        desiredCapabilities: {
            port: PORT,
            browserName: 'chrome',
            chromeOptions: {
                args: ['disable-infobars' 
                ,'headless',
                'disable-gpu',
                '--remote-debugging-port=5552'
            ],
            //binary: '/Applications/Google Chrome Dev.app/Contents/MacOS/Google Chrome'
            binary: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'

            }
        },
        host: envConfig.seleniumUrl,
        deprecationWarnings: false
    };

Error is

  chrome not reachable
       (Driver info: chromedriver=2.36.540469 (1881fd7f8641508feb5166b7cae561d87723cfa8),platform=Mac OS X 10.12.6 x86_64) (WARNING: The server did not provide any stacktrace information)
     Command duration or timeout: 60.09 seconds
     Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:32.194Z'
     System info: host: 'xxxxxx', ip: 'xxxxxx', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.12.6', java.version: '1.8.0_161'
     Driver info: driver.version: unknownError: An unknown server-side error occurred while processing the command.
         at end() - hooks.js:47:25

how to fix this initialization issue and how to attach chrome dev tools with headless browser.

Answer 1

There are a certain things which you need to consider as follows :

• Within the desiredCapabilities you have passed the arguments disable-gpu but as per Getting Started with Headless Chrome this option is for Windows platform only.

• The chromeOptions passed as an argument should be uniform :

  • Either they shouldn't include the -- as follows :

     chromeOptions: { args: ['disable-infobars', 'headless', 'remote-debugging-port=9222' ] 

  • Or all of them should include the -- as follows :

     chromeOptions: { args: ['--disable-infobars', '--headless', 'remote-debugging-port=9222' ] 

• As per the documentation remote-debugging-port should be configured to 9222 but not 5552

• Try to keep off the unwanted lines of code by removing the commented lines :

   //binary: '/Applications/Google Chrome Dev.app/Contents/MacOS/Google Chrome' 

• Your Selenium Client version is 3.8.1 consider upgrading to version is v3.11.0

• Your ChromeDriver version is 2.36 which supports Chrome v63-65 consider upgrading to version is v2.37
• Your ChromeBrowser version is unknown to us consider upgrading to version is v65.0 .
• Clean your Project Workspace through your IDE and Rebuild your project with required dependencies only.
• Use CCleaner tool to wipe off all the OS chores before and after the execution of your test Suite .
• If your base Web Client version is too old, then uninstall it through Revo Uninstaller and install a recent GA and released version of Web Client .
• Execute your @Test .