Chrome: Support `true` headless mode

[Lokideos]

What would you like?

Context

In a recent update, Chrome updated the headless mode.

According to the article, Google had two separate builds for Chrome: one for headless, and one for headful modes, which might have potentially created problems for automation engineers since there might've been differences between Chrome behavior in the test environment and in the production environment.

After the recent update, it is no longer the case.

Implementation

Mathias and Peter describe in the article how to opt to the new headless mode for Puppeteer and Selenium-WebDriver, but, unfortunately, don't do it for Cypress.
Though, I think that implementation examples can give a general idea of how to do it in Cypress.

Why is this needed?

To avoid potential inconsistencies between the test environment, in which we run Cypres tests, and the production environment.

Other

No response

[nagash77]

Hi @Lokideos , thanks for submitting this feature request. This is something we have been discussing internally as well. There are no firm timelines on when this will be done, but we are definitely aware and hope to prioritize it in the future. I am going to close this issue as we have internal resources dedicated to this initiative.

[nagash77]

Reopening! Going to use this as the public facing ticket for this work and add it to our Cypress App Priorities Board. Thanks again @Lokideos for submitting this!

[jennifer-shehane]

Another user posted this workaround. I haven't tried it specifically, but it looks like it should be a workaround to make passing the new headless flag work today until we get this built into the product as the default.

we can use these new options ** right now ** by overriding the behavior of Cypress' --headless in before:browser:launch like this in cypress.config.js. Don't forget this is nested in the e2e section most likely.

setupNodeEvents: function setupNodeEvents(on, config) {
  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'chrome' && browser.isHeadless) {
      const version = parseInt(browser.majorVersion);
      if(version >= 109) {
        launchOptions.args.push('--headless=new');
      } else if(version >= 96 && version < 109) {
        launchOptions.args.push('--headless=chrome');
      } else {
        launchOptions.args.push('--headless')
      }
    }
    return launchOptions;
  });
}

[chrishalebarnes]

Author of the above workaround here. Been having some problems running with this new option in an oddly specific circumstance.

If the last page visited has a YouTube embed, it fails to close the remote debugging socket and hangs forever, but cannot reproduce this locally, only in CI. And it happens like 80% of the time, so it seems to be a timing issue? Without --headless=new it passes 100% of the time.

It gets here but never gets here.

It seems as if it tries to close Chrome via CRI, and then the YouTube embed (in an iframe) makes some requests after that attempt, which interferes in some way. Is this reconnect logic, stuck in a loop perhaps?

Also open to providing debug logs if that helps, let me know.

If anyone else experiences something like this running with --headless=new, please chime in!

[jennifer-shehane]

@chrishalebarnes Thanks for bringing this up. We intend to update Cypress to pass headless=new by default, so there's still some investigation needed on our side to make sure there isn't any unexpected behavior when we turn it on. We'll try to take a look at the issue you surfaced.