Protractor: Failed: element not interactable in headless chrome

[Kappyh]

Bug report

I have this error output if a run any test in headless mode, in normal chrome the tests works.

• Node Version: 10.16.0
• Protractor Version: 5.4.2
• Angular Version: 6.1.0
• Browser(s): Chrome
• Operating System and Version Windows 10
• Your protractor configuration file

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      args: ['--headless', '--disable-gpu','--disable-dev-shm-usage','--no-sandbox']
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

• Karma configuration

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, '../coverage'),
            reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome', 'HeadlessChrome'],
        customLaunchers: {
            HeadlessChrome: {
                base: "ChromeHeadless",
                flags: [
                    "--no-sandbox", // required to run without privileges in Docker
                    "--disable-web-security",
                    "--disable-gpu",
                    "--remote-debugging-port=9222"
                ]
            }
        },
        singleRun: true,
        autoWatch: false,
    });
};

• Output from running the test

i ｢wdm｣: Compiled with warnings.
[16:31:12] I/update - chromedriver: file exists C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\node_modules\webdriver-manager\selenium\chromedriver_75.0.3770.8.zip
[16:31:12] I/update - chromedriver: unzipping chromedriver_75.0.3770.8.zip
[16:31:12] I/update - chromedriver: chromedriver_75.0.3770.8.exe up to date
[16:31:12] I/launcher - Running 1 instances of WebDriver
[16:31:12] I/direct - Using ChromeDriver directly...

DevTools listening on ws://127.0.0.1:52931/devtools/browser/b5107746-3db2-4ead-b4c3-732f1c40d001
Jasmine started
[0702/163125.625:INFO:CONSOLE(41938)] "Angular is running in the development mode. Call enableProdMode() to enable the production mode.", source: http://localhost:4200/vendor.js (41938)
[0702/163125.984:INFO:CONSOLE(124480)] "[WDS] Warnings while compiling.", source: http://localhost:4200/vendor.js (124480)[0702/163125.985:INFO:CONSOLE(124486)] "./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(6:213674) start value has mixed support, consider using flex-start instead", source: http://localhost:4200/vendor.js (124486)
[0702/163125.992:INFO:CONSOLE(124486)] "./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(6:216111) start value has mixed support, consider using flex-start instead", source: http://localhost:4200/vendor.js (124486)

  Login, com usuário BBI
    × Login com sucesso
      - Failed: element not interactable
        (Session info: headless chrome=75.0.3770.100)
        (Driver info: chromedriver=75.0.3770.8 (681f24ea911fe754973dda2fdc6d2a2e159dd300-refs/branch-heads/3770@{#40}),platform=Windows NT 10.0.18362 x86_64)
        (Session info: headless chrome=75.0.3770.100)
        (Driver info: chromedriver=75.0.3770.8 (681f24ea911fe754973dda2fdc6d2a2e159dd300-refs/branch-heads/3770@{#40}),platform=Windows NT 10.0.18362 x86_64)
          at Object.checkLegacyResponse (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\error.js:546:15)
          at parseHttpResponse (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\http.js:509:13)
          at doSend.then.response (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\http.js:441:30)
          at process._tickCallback (internal/process/next_tick.js:68:7)
      From: Task: WebElement.sendKeys()
          at Driver.schedule (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\webdriver.js:807:17)
          at WebElement.schedule_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\webdriver.js:2010:25)
          at WebElement.sendKeys (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\webdriver.js:2174:19)
          at actionFn (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\built\element.js:89:44)
          at Array.map (<anonymous>)
          at actionResults.getWebElements.then (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\built\element.js:461:65)
          at ManagedPromise.invokeCallback_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:1376:14)
          at TaskQueue.execute_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:3084:14)
          at TaskQueue.executeNext_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:3067:27)
          at asyncRun (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:2927:27)Error
          at ElementArrayFinder.applyAction_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\built\element.js:459:27)
          at ElementArrayFinder.(anonymous function).args [as sendKeys] (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\built\element.js:91:29)
          at ElementFinder.(anonymous function).args [as sendKeys] (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\protractor\built\element.js:831:22)
          at LoginPO.doLogin (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\e2e\src\login\login.po.ts:11:33)
          at UserContext.<anonymous> (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\e2e\src\login\login.e2e-spec.ts:26:19)
          at new ManagedPromise (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:1077:7)
          at ControlFlow.promise (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:2505:12)
          at TaskQueue.execute_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:3084:14)
      From: Task: Run it("Login com sucesso") in control flow
          at ControlFlow.emit (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\events.js:62:21)
          at ControlFlow.shutdown_ (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:2674:10)
          at shutdownTask_.MicroTask (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\selenium-webdriver\lib\promise.js:2599:53)
      From asynchronous test:
      Error
          at Suite.<anonymous> (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\e2e\src\login\login.e2e-spec.ts:24:5)
          at Object.<anonymous> (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\e2e\src\login\login.e2e-spec.ts:8:1)
          at Module._compile (internal/modules/cjs/loader.js:776:30)
          at Module.m._compile (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\ts-node\src\index.ts:400:23)
          at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
          at Object.require.extensions.(anonymous function) [as .ts] (C:\Users\Gabriela\Documents\santander-tags\santander-tags\front\node_modules\ts-node\src\index.ts:403:12)

**************************************************
*                    Failures                    *
**************************************************

1) Login, com usuário BBI Login com sucesso
  - Failed: element not interactable
    (Session info: headless chrome=75.0.3770.100)
    (Driver info: chromedriver=75.0.3770.8 (681f24ea911fe754973dda2fdc6d2a2e159dd300-refs/branch-heads/3770@{#40}),platform=Windows NT 10.0.18362 x86_64)

**************************************************
*                    Pending                     *
**************************************************

1) Login, com usuário BBI Login com senha inválida
  Temporarily disabled with xit

Executed 1 of 24 specs (1 FAILED) (1 PENDING) (22 SKIPPED) in 13 secs.
[16:31:31] I/launcher - 0 instance(s) of WebDriver still running
[16:31:31] I/launcher - chrome #01 failed 1 test(s)
[16:31:31] I/launcher - overall: 1 failed spec(s)
[16:31:31] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] e2e: `ng e2e`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Gabriela\AppData\Roaming\npm-cache\_logs\2019-07-02T19_31_32_138Z-debug.log

• Steps to reproduce the bug
  Run any test in chrome headless mode

[Kappyh]

I just solved my problem with "--window-size=1920,1080" param in protractor.conf.js.

Reference:
https://stackoverflow.com/questions/47776774/element-is-not-clickable-at-point-in-headless-mode-but-when-we-remove-headless

[ZCplayground]

I meet the same issue when trying to redirect to a new tab in Chrome. Thank you very much for your solution. It saves my day!!