feat: gate WebKit behind experimentalWebKitSupport in prod

circle.yml

@@ -35,8 +35,7 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'tbiethman/22272-globbing-working-dir', << pipeline.git.branch >> ]
-    - equal: [ 'skip-or-fix-flaky-tests-2', << pipeline.git.branch >> ]
+    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -45,8 +44,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ "lmiller/experimental-single-tab-component-testing", << pipeline.git.branch >> ]
-    - equal: [ 'skip-or-fix-flaky-tests-2', << pipeline.git.branch >> ]
+    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -66,8 +64,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
-    - equal: [ 'lmiller/fixing-flake-1', << pipeline.git.branch >> ]
-    - equal: [ 'skip-or-fix-flaky-tests-2', << pipeline.git.branch >> ]
+    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -132,7 +129,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "tbiethman/23380-root-spec-pattern" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "webkit-experimental" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

cli/types/cypress.d.ts

@@ -82,7 +82,7 @@ declare namespace Cypress {
 
   type BrowserChannel = 'stable' | 'canary' | 'beta' | 'dev' | 'nightly' | string
 
-  type BrowserFamily = 'chromium' | 'firefox'
+  type BrowserFamily = 'chromium' | 'firefox' | 'webkit'
 
   /**
    * Describes a browser Cypress can control
@@ -2876,6 +2876,11 @@ declare namespace Cypress {
      * @default false
      */
     experimentalStudio: boolean
+    /**
+     * Adds support for testing in the WebKit browser engine used by Safari. See https://on.cypress.io/webkit for more information.
+     * @default false
+     */
+    experimentalWebKitSupport: boolean
     /**
      * Number of times to retry a failed test.
      * If a number is set, tests will retry in both runMode and openMode.

packages/config/__snapshots__/index.spec.ts.js

@@ -40,6 +40,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   "experimentalSourceRewriting": false,
   "experimentalSingleTabRunMode": false,
   "experimentalStudio": false,
+  "experimentalWebKitSupport": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -123,6 +124,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   "experimentalSourceRewriting": false,
   "experimentalSingleTabRunMode": false,
   "experimentalStudio": false,
+  "experimentalWebKitSupport": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -202,6 +204,7 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   "experimentalSourceRewriting",
   "experimentalSingleTabRunMode",
   "experimentalStudio",
+  "experimentalWebKitSupport",
   "fileServerFolder",
   "fixturesFolder",
   "excludeSpecPattern",

packages/config/src/options.ts

@@ -227,6 +227,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'browser',
+  }, {
+    name: 'experimentalWebKitSupport',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    requireRestartOnChange: 'server',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',

packages/config/test/project/utils.spec.ts

@@ -1044,6 +1044,7 @@ describe('config/src/project/utils', () => {
             experimentalSingleTabRunMode: { value: false, from: 'default' },
             experimentalStudio: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
+            experimentalWebKitSupport: { value: false, from: 'default' },
             fileServerFolder: { value: '', from: 'default' },
             fixturesFolder: { value: 'cypress/fixtures', from: 'default' },
             hosts: { value: null, from: 'default' },
@@ -1137,6 +1138,7 @@ describe('config/src/project/utils', () => {
             experimentalSingleTabRunMode: { value: false, from: 'default' },
             experimentalStudio: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
+            experimentalWebKitSupport: { value: false, from: 'default' },
             env: {
               foo: {
                 value: 'foo',

packages/data-context/src/data/ProjectConfigManager.ts

@@ -500,14 +500,22 @@ export class ProjectConfigManager {
       }
 
       fullConfig.browsers = fullConfig.browsers?.map((browser) => {
-        if (browser.family === 'chromium' || fullConfig.chromeWebSecurity) {
-          return browser
+        if (browser.family === 'webkit' && !fullConfig.experimentalWebKitSupport) {
+          return {
+            ...browser,
+            disabled: true,
+            warning: '`playwright-webkit` is installed and WebKit is detected, but `experimentalWebKitSupport` is not enabled in your Cypress config. Set it to `true` to use WebKit.',
+          }
         }
 
-        return {
-          ...browser,
-          warning: browser.warning || getError('CHROME_WEB_SECURITY_NOT_SUPPORTED', browser.name).message,
+        if (browser.family !== 'chromium' && fullConfig.chromeWebSecurity) {
+          return {
+            ...browser,
+            warning: browser.warning || getError('CHROME_WEB_SECURITY_NOT_SUPPORTED', browser.name).message,
+          }
         }
+
+        return browser
       })
 
       // If we have withBrowsers set to false, it means we're coming from the legacy config.get API

packages/driver/cypress.config.ts

@@ -1,21 +1,22 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  'projectId': 'ypt4pf',
-  'experimentalStudio': true,
-  'hosts': {
+  projectId: 'ypt4pf',
+  experimentalStudio: true,
+  experimentalWebKitSupport: true,
+  hosts: {
     '*.foobar.com': '127.0.0.1',
     '*.idp.com': '127.0.0.1',
     'localalias': '127.0.0.1',
   },
-  'reporter': 'cypress-multi-reporters',
-  'reporterOptions': {
-    'configFile': '../../mocha-reporter-config.json',
+  reporter: 'cypress-multi-reporters',
+  reporterOptions: {
+    configFile: '../../mocha-reporter-config.json',
   },
-  'e2e': {
-    'setupNodeEvents': (on, config) => {
+  e2e: {
+    setupNodeEvents: (on, config) => {
       return require('./cypress/plugins')(on, config)
     },
-    'baseUrl': 'http://localhost:3500',
+    baseUrl: 'http://localhost:3500',
   },
 })

packages/errors/src/errors.ts

@@ -86,7 +86,7 @@ export const AllCypressErrors = {
   },
   CHROME_WEB_SECURITY_NOT_SUPPORTED: (browser: string) => {
     return errTemplate`\
-        Your project has set the configuration option: ${fmt.highlight(`chromeWebSecurity`)} to ${fmt.highlightTertiary(`false`)}
+        Your project has set the configuration option: \`chromeWebSecurity\` to \`false\`.
 
         This option will not have an effect in ${fmt.off(_.capitalize(browser))}. Tests that rely on web security being disabled will not run as expected.`
   },

packages/frontend-shared/cypress/fixtures/config.json

@@ -43,8 +43,7 @@
         "displayName": "Electron",
         "version": "94.0.4606.81",
         "path": "",
-        "majorVersion": 94,
-        "info": "Electron is the default browser that comes with Cypress. This is the default browser that runs in headless mode. Selecting this browser is useful when debugging. The version number indicates the underlying Chromium version that Electron uses."
+        "majorVersion": 94
       }
     ],
     "from": "default",
@@ -103,6 +102,11 @@
     "from": "default",
     "field": "experimentalSessionAndOrigin"
   },
+  {
+    "value": false,
+    "from": "default",
+    "field": "experimentalWebKitSupport"
+  },
   {
     "value": "",
     "from": "default",

packages/frontend-shared/src/locales/en-US.json

@@ -507,6 +507,10 @@
       "experimentalStudio": {
         "name": "Studio",
         "description": "Generate and save commands directly to your test suite by interacting with your app as an end user would."
+      },
+      "experimentalWebKitSupport": {
+        "name": "WebKit Support",
+        "description": "Adds support for testing in the WebKit browser engine used by Safari. See https://on.cypress.io/webkit for more information."
       }
     },
     "device": {

packages/graphql/src/schemaTypes/objectTypes/gql-Browser.ts

@@ -8,7 +8,7 @@ export const Browser = objectType({
   definition (t) {
     t.nonNull.string('channel')
     t.nonNull.boolean('disabled', {
-      resolve: () => false,
+      resolve: (source) => source.disabled || false,
     })
 
     t.nonNull.boolean('isSelected', {

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -27,7 +27,7 @@
           }"
         >
           <Tooltip
-            v-if="!browser.isVersionSupported"
+            v-if="browser.warning"
             popper-class="max-w-lg"
           >
             <i-cy-circle-bg-question-mark_x16
@@ -37,7 +37,10 @@
             />
             <template #popper>
               <div class="text-center p-2 text-gray-300 text-size-14px leading-20px">
-                <div class="font-medium text-white mb-2">
+                <div
+                  v-if="!browser.isVersionSupported"
+                  class="font-medium text-white mb-2"
+                >
                   Unsupported browser
                 </div>
                 {{ browser.warning }}

packages/server/index.js

@@ -23,7 +23,7 @@ if (process.env.CY_NET_PROFILE && isRunningElectron) {
   process.stdout.write(`Network profiler writing to ${netProfiler.logPath}\n`)
 }
 
-require('./lib/unhandled_exceptions')
+require('./lib/unhandled_exceptions').handle()
 
 process.env.UV_THREADPOOL_SIZE = 128
 

packages/server/lib/browsers/index.ts

@@ -100,6 +100,8 @@ export = {
 
   formatBrowsersToOptions: utils.formatBrowsersToOptions,
 
+  setFocus,
+
   _setInstance (_instance: BrowserInstance) {
     // for testing
     instance = _instance
@@ -110,15 +112,6 @@ export = {
     return instance
   },
 
-  getAllBrowsersWith (nameOrPath?: string) {
-    debug('getAllBrowsersWith %o', { nameOrPath })
-    if (nameOrPath) {
-      return utils.ensureAndGetByNameOrPath(nameOrPath, true)
-    }
-
-    return utils.getBrowsers()
-  },
-
   async connectToExisting (browser: Browser, options: BrowserLaunchOpts, automation: Automation): Promise<BrowserInstance | null> {
     const browserLauncher = await getBrowserLauncher(browser, options.browsers)
 
@@ -196,5 +189,4 @@ export = {
 
     return instance
   },
-  setFocus,
 } as const

packages/server/lib/browsers/utils.ts

@@ -204,10 +204,10 @@ const getWebKitBrowserVersion = async () => {
   }
 }
 
-const getWebKitBrowser = async () => {
+async function getWebKitBrowser () {
   try {
     const modulePath = require.resolve('playwright-webkit', { paths: [process.cwd()] })
-    const mod = require(modulePath) as typeof import('playwright-webkit')
+    const mod = await import(modulePath) as typeof import('playwright-webkit')
     const version = await getWebKitBrowserVersion()
 
     const browser: FoundBrowser = {
@@ -218,7 +218,7 @@ const getWebKitBrowser = async () => {
       version,
       path: mod.webkit.executablePath(),
       majorVersion: version.split('.')[0],
-      warning: 'WebKit support is not currently available in production.',
+      warning: 'WebKit support is currently experimental. Some functions may not work as expected.',
     }
 
     return browser
@@ -232,8 +232,12 @@ const getWebKitBrowser = async () => {
 const getBrowsers = async () => {
   debug('getBrowsers')
 
-  const browsers = await launcher.detect()
-  let majorVersion
+  const [browsers, wkBrowser] = await Promise.all([
+    launcher.detect(),
+    getWebKitBrowser(),
+  ])
+
+  if (wkBrowser) browsers.push(wkBrowser)
 
   debug('found browsers %o', { browsers })
 
@@ -243,8 +247,8 @@ const getBrowsers = async () => {
     return browsers
   }
 
-  // @ts-ignore
   const version = process.versions.chrome || ''
+  let majorVersion
 
   if (version) {
     majorVersion = getMajorVersion(version)
@@ -258,17 +262,10 @@ const getBrowsers = async () => {
     version,
     path: '',
     majorVersion,
-    info: 'Electron is the default browser that comes with Cypress. This is the default browser that runs in headless mode. Selecting this browser is useful when debugging. The version number indicates the underlying Chromium version that Electron uses.',
   }
 
   browsers.push(electronBrowser)
 
-  if (process.env.CYPRESS_INTERNAL_ENV !== 'production') {
-    const wkBrowser = await getWebKitBrowser()
-
-    if (wkBrowser) browsers.push(wkBrowser)
-  }
-
   return browsers
 }