[cypress] Work around SIGSEGV in Chrome 117 w/ headless mode

ramosbugs · ramosbugs · commit 56acafcf56b9 · 2023-09-23T16:45:18.000-07:00
The latest Chrome 117 release (now rolled out to GitHub Actions runners) broke interoperability with Cypress <= 12.14 in headless mode. See cypress-io/cypress#27804. This change implements the workaround in cypress-io/cypress#27804 (comment), which replaces `--headless` with `--headless=new`. See also the underlying Chrome bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1483163
diff --git a/packages/cypress-plugin/test/integration-input-esm/config-js/headless.js b/packages/cypress-plugin/test/integration-input-esm/config-js/headless.js
@@ -0,0 +1,31 @@
+// Copyright (c) 2023 Developer Innovations, LLC
+
+/**
+ * Workaround for https://github.com/cypress-io/cypress/issues/27804.
+ *
+ * @param {Cypress.PluginEvents} on
+ * @returns void
+ */
+export const fixHeadlessChrome = (on) => {
+  on(
+    "before:browser:launch",
+    /**
+     * @param {Cypress.Browser} browser,
+     * @param {Cypress.BrowserLaunchOptions} launchOptions
+     * @returns {void | Cypress.BrowserLaunchOptions}
+     */
+    (browser, launchOptions) => {
+      if (
+        browser.family === "chromium" &&
+        browser.name !== "electron" &&
+        browser.isHeadless
+      ) {
+        launchOptions.args = launchOptions.args.map((arg) =>
+          arg === "--headless" ? "--headless=new" : arg
+        );
+      }
+
+      return launchOptions;
+    }
+  );
+};
diff --git a/packages/cypress-plugin/test/integration-input-esm/config/headless.ts b/packages/cypress-plugin/test/integration-input-esm/config/headless.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2023 Developer Innovations, LLC
+
+// Workaround for https://github.com/cypress-io/cypress/issues/27804.
+export const fixHeadlessChrome = (on: Cypress.PluginEvents): void => {
+  on(
+    "before:browser:launch",
+    (
+      browser: Cypress.Browser,
+      launchOptions: Cypress.BrowserLaunchOptions
+    ): void | Cypress.BrowserLaunchOptions => {
+      if (
+        browser.family === "chromium" &&
+        browser.name !== "electron" &&
+        browser.isHeadless
+      ) {
+        launchOptions.args = launchOptions.args.map((arg) =>
+          arg === "--headless" ? "--headless=new" : arg
+        );
+      }
+
+      return launchOptions;
+    }
+  );
+};
diff --git a/packages/cypress-plugin/test/integration-input-esm/cypress-config.cjs b/packages/cypress-plugin/test/integration-input-esm/cypress-config.cjs
@@ -17,6 +17,9 @@ module.exports = {
        * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
        */
       async setupNodeEvents(on, _config) {
+        const { fixHeadlessChrome } = await import("./config-js/headless.js");
+
+        fixHeadlessChrome(on);
         registerCosmiconfigMock();
         registerSimpleGitMock();
 
@@ -38,6 +41,9 @@ module.exports = {
        * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
        */
       async setupNodeEvents(on, _config) {
+        const { fixHeadlessChrome } = await import("./config-js/headless.js");
+
+        fixHeadlessChrome(on);
         registerCosmiconfigMock();
         registerSimpleGitMock();
 
diff --git a/packages/cypress-plugin/test/integration-input-esm/cypress-config.js b/packages/cypress-plugin/test/integration-input-esm/cypress-config.js
@@ -5,6 +5,7 @@ import { registerTasks } from "./config-js/tasks.js";
 import webpackConfig from "./config-js/webpack.js";
 import { registerSimpleGitMock } from "unflakable-test-common/dist/git.js";
 import { registerCosmiconfigMock } from "unflakable-test-common/dist/config.js";
+import { fixHeadlessChrome } from "./config-js/headless.js";
 
 /**
  * @type {Cypress.ConfigOptions}
@@ -17,6 +18,7 @@ export default {
      * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
      */
     setupNodeEvents(on, _config) {
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
@@ -35,6 +37,7 @@ export default {
      * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
      */
     setupNodeEvents(on, _config) {
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input-esm/cypress.config.ts b/packages/cypress-plugin/test/integration-input-esm/cypress.config.ts
@@ -8,10 +8,12 @@ import { registerTasks } from "./config/tasks.js";
 import webpackConfig from "./config/webpack.js";
 import { registerSimpleGitMock } from "unflakable-test-common/dist/git.js";
 import { registerCosmiconfigMock } from "unflakable-test-common/dist/config.js";
+import { fixHeadlessChrome } from "./config/headless.js";
 
 export default defineConfig({
   component: {
     setupNodeEvents(on: Cypress.PluginEvents, _config) {
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
@@ -31,6 +33,7 @@ export default defineConfig({
       | Promise<Cypress.PluginConfigOptions | void>
       | Cypress.PluginConfigOptions
       | void {
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input-manual/config/headless.js b/packages/cypress-plugin/test/integration-input-manual/config/headless.js
@@ -0,0 +1,33 @@
+// Copyright (c) 2023 Developer Innovations, LLC
+
+module.exports = {
+  /**
+   * Workaround for https://github.com/cypress-io/cypress/issues/27804.
+   *
+   * @param {Cypress.PluginEvents} on
+   * @returns void
+   */
+  fixHeadlessChrome: (on) => {
+    on(
+      "before:browser:launch",
+      /**
+       * @param {Cypress.Browser} browser,
+       * @param {Cypress.BrowserLaunchOptions} launchOptions
+       * @returns {void | Cypress.BrowserLaunchOptions}
+       */
+      (browser, launchOptions) => {
+        if (
+          browser.family === "chromium" &&
+          browser.name !== "electron" &&
+          browser.isHeadless
+        ) {
+          launchOptions.args = launchOptions.args.map((arg) =>
+            arg === "--headless" ? "--headless=new" : arg
+          );
+        }
+
+        return launchOptions;
+      }
+    );
+  },
+};
diff --git a/packages/cypress-plugin/test/integration-input-manual/cypress-config.mjs b/packages/cypress-plugin/test/integration-input-manual/cypress-config.mjs
@@ -8,6 +8,7 @@ import { registerCosmiconfigMock } from "unflakable-test-common/dist/config.js";
 import { registerUnflakable } from "@unflakable/cypress-plugin";
 import semverGte from "semver/functions/gte.js";
 import path from "path";
+import headless from "./config/headless.js";
 import cypressOnFix from "cypress-on-fix";
 
 /**
@@ -22,6 +23,7 @@ export default {
      */
     setupNodeEvents(baseOn, config) {
       const on = cypressOnFix(baseOn);
+      headless.fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       tasks.registerTasks(on);
@@ -43,6 +45,7 @@ export default {
      */
     setupNodeEvents(baseOn, config) {
       const on = cypressOnFix(baseOn);
+      headless.fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       tasks.registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input-manual/cypress.config.js b/packages/cypress-plugin/test/integration-input-manual/cypress.config.js
@@ -11,6 +11,7 @@ const semverGte = require("semver/functions/gte");
 
 const { registerUnflakable } = require("@unflakable/cypress-plugin");
 const path = require("path");
+const { fixHeadlessChrome } = require("./config/headless");
 const cypressOnFix = require("cypress-on-fix");
 
 module.exports = {
@@ -25,6 +26,7 @@ module.exports = {
      */
     setupNodeEvents(baseOn, config) {
       const on = cypressOnFix(baseOn);
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
@@ -46,6 +48,7 @@ module.exports = {
      */
     setupNodeEvents(baseOn, config) {
       const on = cypressOnFix(baseOn);
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input/config-js/headless.js b/packages/cypress-plugin/test/integration-input/config-js/headless.js
@@ -0,0 +1,33 @@
+// Copyright (c) 2023 Developer Innovations, LLC
+
+module.exports = {
+  /**
+   * Workaround for https://github.com/cypress-io/cypress/issues/27804.
+   *
+   * @param {Cypress.PluginEvents} on
+   * @returns void
+   */
+  fixHeadlessChrome: (on) => {
+    on(
+      "before:browser:launch",
+      /**
+       * @param {Cypress.Browser} browser,
+       * @param {Cypress.BrowserLaunchOptions} launchOptions
+       * @returns {void | Cypress.BrowserLaunchOptions}
+       */
+      (browser, launchOptions) => {
+        if (
+          browser.family === "chromium" &&
+          browser.name !== "electron" &&
+          browser.isHeadless
+        ) {
+          launchOptions.args = launchOptions.args.map((arg) =>
+            arg === "--headless" ? "--headless=new" : arg
+          );
+        }
+
+        return launchOptions;
+      }
+    );
+  },
+};
diff --git a/packages/cypress-plugin/test/integration-input/config/headless.ts b/packages/cypress-plugin/test/integration-input/config/headless.ts
@@ -0,0 +1,24 @@
+// Copyright (c) 2023 Developer Innovations, LLC
+
+// Workaround for https://github.com/cypress-io/cypress/issues/27804.
+export const fixHeadlessChrome = (on: Cypress.PluginEvents): void => {
+  on(
+    "before:browser:launch",
+    (
+      browser: Cypress.Browser,
+      launchOptions: Cypress.BrowserLaunchOptions
+    ): void | Cypress.BrowserLaunchOptions => {
+      if (
+        browser.family === "chromium" &&
+        browser.name !== "electron" &&
+        browser.isHeadless
+      ) {
+        launchOptions.args = launchOptions.args.map((arg) =>
+          arg === "--headless" ? "--headless=new" : arg
+        );
+      }
+
+      return launchOptions;
+    }
+  );
+};
diff --git a/packages/cypress-plugin/test/integration-input/cypress-config.js b/packages/cypress-plugin/test/integration-input/cypress-config.js
@@ -7,6 +7,7 @@ const { registerSimpleGitMock } = require("unflakable-test-common/dist/git");
 const {
   registerCosmiconfigMock,
 } = require("unflakable-test-common/dist/config");
+const { fixHeadlessChrome } = require("config-js/headless");
 
 module.exports = {
   /**
@@ -20,6 +21,7 @@ module.exports = {
        * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
        */
       setupNodeEvents(on, _config) {
+        fixHeadlessChrome(on);
         registerCosmiconfigMock();
         registerSimpleGitMock();
         registerTasks(on);
@@ -38,6 +40,7 @@ module.exports = {
        * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
        */
       setupNodeEvents(on, _config) {
+        fixHeadlessChrome(on);
         registerCosmiconfigMock();
         registerSimpleGitMock();
         registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input/cypress-config.mjs b/packages/cypress-plugin/test/integration-input/cypress-config.mjs
@@ -5,6 +5,7 @@ import tasks from "./config-js/tasks.js";
 import webpackConfig from "./config-js/webpack.js";
 import { registerSimpleGitMock } from "unflakable-test-common/dist/git.js";
 import { registerCosmiconfigMock } from "unflakable-test-common/dist/config.js";
+import headless from "./config-js/headless.js";
 
 /**
  * @type {Cypress.ConfigOptions}
@@ -17,6 +18,7 @@ export default {
      * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
      */
     setupNodeEvents(on, _config) {
+      headless.fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       tasks.registerTasks(on);
@@ -35,6 +37,7 @@ export default {
      * @returns {Promise<Cypress.PluginConfigOptions | void> | Cypress.PluginConfigOptions | void}
      */
     setupNodeEvents(on, _config) {
+      headless.fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       tasks.registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input/cypress.config.ts b/packages/cypress-plugin/test/integration-input/cypress.config.ts
@@ -12,10 +12,14 @@ import { openDevToolsOnLaunch } from "config/devtools";
 import webpackConfig from "config/webpack";
 // eslint-disable-next-line import/no-unresolved
 import { registerTasks } from "config/tasks";
+// eslint-disable-next-line import/no-unresolved
+import { fixHeadlessChrome } from "config/headless";
+import cypressOnFix from "cypress-on-fix";
 
 export default defineConfig({
   component: {
     setupNodeEvents(on: Cypress.PluginEvents, _config) {
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
@@ -30,12 +34,20 @@ export default defineConfig({
   },
   e2e: {
     setupNodeEvents(
-      on: Cypress.PluginEvents,
+      baseOn: Cypress.PluginEvents,
       _config
     ):
       | Promise<Cypress.PluginConfigOptions | void>
       | Cypress.PluginConfigOptions
       | void {
+      // Due to https://github.com/cypress-io/cypress/issues/22428, only the last event handler
+      // registered for each event type will be called. This means we'll clobber any event handlers
+      // the user registers. To avoid this, we use cypress-on-fix.
+      // NB: Our plugin ordinarily does this for us, but we use this package to test what happens
+      // when the plugin is disabled.
+      const on = cypressOnFix(baseOn);
+
+      fixHeadlessChrome(on);
       registerCosmiconfigMock();
       registerSimpleGitMock();
       registerTasks(on);
diff --git a/packages/cypress-plugin/test/integration-input/tsconfig.json b/packages/cypress-plugin/test/integration-input/tsconfig.json
@@ -11,6 +11,7 @@
     "types": ["cypress", "node"]
   },
   "include": [
+    "../../cypress-on-fix.d.ts",
     ".eslintrc.js",
     "config",
     "config-js",
