Cannot run Protractor Cucumber Tests in headless chrome

Question

I am using the protractor-cucumber framework for UI Testing. This runs fine in chrome, however when running in headless chrome my tests fail with an error message.

Is it possible to run protractor-cucumber in headless chrome? If so, how can i stop the below error message and get my tests to run successfully. I don't understand why it runs fine when chrome is not headless.

Versions I am using: Protractor:5.2.2 selenium:3.8.1 WebDriver: 12.0.6 ChromeDriver:2.35 Chrome Browser:62.0

I have included my conf.js file below

Error Message when running in headless chrome:

Scenario: :: navigate to BMK page and select a date for the previous month [15:47:41] E/protractor - Could not find Angular on page http://localhost/ : retri es looking for angular exceeded [15:47:41] E/launcher - Angular could not be found on the page http://localhost/.I f this is not an Angular application, you may need to turn off waiting for Angul ar. Please see https://github.com/angular/protractor/blob/master/docs /timeouts.md#waiting-for-angular-on-page-load [15:47:41] E/launcher - Error: Angular could not be found on the page http://ah- test/.If this is not an Angular application, you may need to turn off waiting fo r Angular. [15:47:41] E/launcher - Process exited with error code 199

Conf.js

//protractor.conf.js
exports.config = {
    //seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    getPageTimeout: 80000,
    allScriptsTimeout:  5000000,
    framework: 'custom',
    // path relative to the current config file
    frameworkPath: './index.js',
    //frameworkPath: require.resolve('protractor-cucumber-framework'),
    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            useAutomationExtension: false,
            args: [ "--headless","--disable-gpu","--window-size=800x600"],

        }

    },
    //directConnect: true,

useAllAngular2AppRoots: true,
// Spec patterns are relative to this directory.
specs: ['Features/*.feature'],

baseURL: 'http://ah-test/',

 //  onPrepare: function () {
   // browser.manage().window().maximize();
//},

cucumberOpts: {
    format: ['json:reports/reports.json', 'pretty'],
    require: 'Features/step_definitions/*.js',
    //require: 'Features/step_definitions/hooks/hooks.js',
    tags: false,
   // format: 'pretty',
    profile: false,
    'no-source': true,
},

Answer 1

This line we need in our config file in onPrepare method or before browser.get we used in our test files or step definition files. browser.ignoreSynchronization = true;

 onPrepare: () => {
    browser.ignoreSynchronization = true;
    //browser.manage().window().setSize(1640,920);
    browser.manage().window().maximize();
    Reporter.createDirectory(jsonReports);
}

If you will get a blank screen when you run in headless then you need to add lines in capabilities , this line is for headless- args: [ "--headless","--disable-gpu","--window-size=800x600"] and this line is for ssl or https enabled sites- acceptInsecureCerts : true,

 capabilities: {
    browserName: "chrome",
    acceptInsecureCerts : true,
    'chromeOptions': {
        useAutomationExtension: false,
        args: [ "--headless","--disable-gpu","--window-size=800x600"]
    }
},

You can ask any protractor related question from me. Thanks