feat: gate WebKit behind experimentalWebKitSupport in prod (#23711)

circle.yml

@@ -36,8 +36,7 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'correct-dashboard-results', << 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 >>
@@ -46,7 +45,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << 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 +65,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 +130,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "correct-dashboard-results" ]]; 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
@@ -2883,6 +2883,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-experiment 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/app/src/main.ts

@@ -22,7 +22,7 @@ const app = createApp(App)
 
 const config = getRunnerConfigFromWindow()
 
-const ws = createWebsocket(config.socketIoRoute)
+const ws = createWebsocket(config)
 
 window.ws = ws
 

packages/app/src/runner/index.ts

@@ -30,18 +30,11 @@ import { useStudioStore } from '../store/studio-store'
 
 let _eventManager: EventManager | undefined
 
-export function createWebsocket (socketIoRoute: string) {
-  const socketConfig = {
-    path: socketIoRoute,
-    transports: ['websocket'],
-  }
-
-  const ws = client(socketConfig)
-
-  ws.on('connect_error', () => {
-    // fall back to polling if websocket fails to connect (webkit)
-    // https://github.com/socketio/socket.io/discussions/3998#discussioncomment-972316
-    ws.io.opts.transports = ['polling', 'websocket']
+export function createWebsocket (config: Cypress.Config) {
+  const ws = client({
+    path: config.socketIoRoute,
+    // TODO(webkit): the websocket socket.io transport is busted in WebKit, need polling
+    transports: config.browser.family === 'webkit' ? ['polling'] : ['websocket'],
   })
 
   ws.on('connect', () => {

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/data-context/src/data/ProjectLifecycleManager.ts

@@ -380,6 +380,8 @@ export class ProjectLifecycleManager {
   }
 
   private _setCurrentProject (projectRoot: string) {
+    process.chdir(projectRoot)
+
     this._projectRoot = projectRoot
     this._initializedProject = undefined
 

packages/driver/cypress.config.ts

@@ -1,22 +1,23 @@
 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',
     '*.barbaz.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/driver/cypress/e2e/cypress/proxy-logging.cy.ts

@@ -321,7 +321,8 @@ describe('Proxy Logging', () => {
         })
       })
 
-      it('works with forceNetworkError', () => {
+      // TODO(webkit): fix forceNetworkError and unskip
+      it('works with forceNetworkError', { browser: '!webkit' }, () => {
         const logs: any[] = []
 
         cy.on('log:added', (log) => {

packages/driver/cypress/e2e/webkit.cy.ts

@@ -0,0 +1,31 @@
+describe('WebKit-specific behavior', { browser: 'webkit' }, () => {
+  it('cy.origin() is disabled', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.origin()` is not currently supported in experimental WebKit.')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/webkit-experiment')
+      done()
+    })
+
+    cy.origin('foo', () => {})
+  })
+
+  it('cy.session() is disabled', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.equal('`cy.session()` is not currently supported in experimental WebKit.')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/webkit-experiment')
+      done()
+    })
+
+    cy.session('foo', () => {})
+  })
+
+  it('cy.session() is disabled', (done) => {
+    cy.on('fail', (err) => {
+      expect(err.message).to.include('`forceNetworkError` was passed, but it is not currently supported in experimental WebKit.')
+      expect(err.docsUrl).to.equal('https://on.cypress.io/intercept')
+      done()
+    })
+
+    cy.intercept('http://foo.com', { forceNetworkError: true })
+  })
+})

packages/driver/src/cy/commands/origin/index.ts

@@ -54,6 +54,10 @@ export default (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy, state: State
 
   Commands.addAll({
     origin<T> (urlOrDomain: string, optionsOrFn: { args: T } | (() => {}), fn?: (args?: T) => {}) {
+      if (Cypress.isBrowser('webkit')) {
+        return $errUtils.throwErrByPath('webkit.origin')
+      }
+
       const userInvocationStack = state('current').get('userInvocationStack')
 
       // store the invocation stack in the case that `cy.origin` errors

packages/driver/src/cy/commands/sessions/index.ts

@@ -53,6 +53,10 @@ export default function (Commands, Cypress, cy) {
 
   Commands.addAll({
     session (id, setup?: Function, options: { validate?: Function } = {}) {
+      if (Cypress.isBrowser('webkit')) {
+        return $errUtils.throwErrByPath('webkit.session')
+      }
+
       throwIfNoSessionSupport()
 
       if (!id || !_.isString(id) && !_.isObject(id)) {

packages/driver/src/cy/net-stubbing/static-response-utils.ts

@@ -24,6 +24,10 @@ export function validateStaticResponse (cmd: string, staticResponse: StaticRespo
     err('`forceNetworkError`, if passed, must be the only option in the StaticResponse.')
   }
 
+  if (forceNetworkError && Cypress.isBrowser('webkit')) {
+    err('`forceNetworkError` was passed, but it is not currently supported in experimental WebKit.')
+  }
+
   if (body && fixture) {
     err('`body` and `fixture` cannot both be set, pick one.')
   }

packages/driver/src/cypress/error_messages.ts

@@ -2297,6 +2297,12 @@ export default {
     },
   },
 
+  webkit: {
+    docsUrl: 'https://on.cypress.io/webkit-experiment',
+    origin: '`cy.origin()` is not currently supported in experimental WebKit.',
+    session: '`cy.session()` is not currently supported in experimental WebKit.',
+  },
+
   window: {
     iframe_doc_undefined: 'The remote iframe\'s document is `undefined`',
     iframe_undefined: 'The remote iframe is `undefined`',

packages/driver/src/cypress/script_utils.ts

@@ -17,7 +17,11 @@ const extractSourceMap = ([script, contents]) => {
   const sourceMap = $sourceMapUtils.extractSourceMap(script, contents)
 
   return $sourceMapUtils.initializeSourceMapConsumer(script, sourceMap)
-  .return([script, contents])
+  .catch((_err) => {
+    // if WebAssembly is missing, we can't consume source maps, but it shouldn't block Cy
+    // like in WebKit on Windows: https://github.com/microsoft/playwright/issues/2876
+  })
+  .then(() => [script, contents])
 }
 
 const evalScripts = (specWindow, scripts: any = []) => {

packages/driver/src/cypress/source_map_utils.ts

@@ -1,6 +1,5 @@
 import _ from 'lodash'
 import { SourceMapConsumer } from 'source-map'
-import Promise from 'bluebird'
 
 // @ts-ignore
 import mappingsWasm from 'source-map/lib/mappings.wasm'
@@ -12,19 +11,19 @@ const regexDataUrl = /data:[^;\n]+(?:;charset=[^;\n]+)?;base64,([a-zA-Z0-9+/]+={
 
 let sourceMapConsumers = {}
 
-const initializeSourceMapConsumer = (file, sourceMap) => {
-  if (!sourceMap) return Promise.resolve(null)
+const initializeSourceMapConsumer = async (file, sourceMap) => {
+  if (!sourceMap) return null
 
   // @ts-ignore
   SourceMapConsumer.initialize({
     'lib/mappings.wasm': mappingsWasm,
   })
 
-  return Promise.resolve(new SourceMapConsumer(sourceMap)).then((consumer) => {
-    sourceMapConsumers[file.fullyQualifiedUrl] = consumer
+  const consumer = await new SourceMapConsumer(sourceMap)
 
-    return consumer
-  })
+  sourceMapConsumers[file.fullyQualifiedUrl] = consumer
+
+  return consumer
 }
 
 const extractSourceMap = (file, fileContents) => {

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/e2e/e2ePluginSetup.ts

@@ -174,6 +174,7 @@ async function makeE2ETasks () {
      * Called before each test to do global setup/cleanup
      */
     async __internal__beforeEach () {
+      process.chdir(cachedCwd)
       testState = {}
       await DataContext.waitForActiveRequestsToFlush()
       await globalPubSub.emitThen('test:cleanup')

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",