feat: implement webdriver BiDi for Firefox versions 135 and greater (#30870)

* feat: implement BiDi automation client base (without full extension cutover). [run ci]

* chore: implement suggestions from code review. [run ci]

* update error text to be in line with documentation

* address comments from code review

* address comments from code review

* make bidi, cdp, and both active protocols object enumerations to make the code easier to read

* address additional comments from code review

* fix errors from refactor

* update firefox warning

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-2-10-25
+2-12-25

.circleci/workflows.yml

@@ -36,7 +36,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - /^release\/\d+\.\d+\.\d+$/
-        - chore/update_wdio_deps
+        - feat/implement_bidi
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
         - 'ryanm/chore/add_internal_studio'
@@ -50,7 +50,7 @@ macWorkflowFilters: &darwin-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
+      - equal: [ 'feat/implement_bidi', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -61,7 +61,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
+      - equal: [ 'feat/implement_bidi', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -84,7 +84,7 @@ windowsWorkflowFilters: &windows-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
+      - equal: [ 'feat/implement_bidi', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -160,7 +160,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "ryanm/chore/add_internal_studio" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/implement_bidi" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
@@ -651,10 +651,19 @@ commands:
         description: chrome channel to install
         type: string
         default: 'stable'
+      firefox-version:
+        description: firefox version to install
+        type: string
+        default: *firefox-stable-version
       inject-document-domain:
         description: run subset of tests with injectDocumentDomain config enabled
         type: boolean
         default: false
+      is-firefox-cdp:
+        description: whether or not the group should be associated to the firefox CDP
+          run or not. This is determined by the browser version.
+        type: boolean
+        default: false
 
     steps:
       - restore_cached_workspace
@@ -678,6 +687,7 @@ commands:
           steps:
             - install-browsers:
                 install-firefox: true
+                firefox-version: << parameters.firefox-version >>
       - when:
           condition:
             equal: [ webkit, << parameters.browser >> ]
@@ -695,6 +705,9 @@ commands:
             if << parameters.inject-document-domain >> ; then
               YARN_CMD="cypress:run:inject-document-domain"
               PARALLEL="--parallel --group 5x-driver-inject-document-domain-<<parameters.browser>>"
+            elif << parameters.is-firefox-cdp >> ; then
+              YARN_CMD="cypress:run"
+              PARALLEL="--parallel --group 5x-driver-cdp-<<parameters.browser>>"
             else
               YARN_CMD="cypress:run"
               PARALLEL="--parallel --group 5x-driver-<<parameters.browser>>"
@@ -2182,6 +2195,18 @@ jobs:
       - run-driver-integration-tests:
           browser: firefox
 
+  # Runs the driver tests using firefox 134, which does NOT use WebDriver BiDi
+  # This is to test and make sure there aren't regressions with the old CDP driver
+  driver-integration-tests-firefox-cdp:
+    <<: *defaults
+    resource_class: medium+
+    parallelism: 5
+    steps:
+      - run-driver-integration-tests:
+          browser: firefox
+          firefox-version: "134.0.2"
+          is-firefox-cdp: true
+
   driver-integration-tests-electron:
     <<: *defaults
     parallelism: 5
@@ -2990,6 +3015,7 @@ linux-x64-workflow: &linux-x64-workflow
           - run-webpack-dev-server-integration-tests
           - run-vite-dev-server-integration-tests
           - driver-integration-tests-firefox
+          - driver-integration-tests-firefox-cdp
           - driver-integration-tests-chrome
           - driver-integration-tests-chrome-inject-document-domain
           - driver-integration-tests-chrome-beta-inject-document-domain
@@ -3065,6 +3091,10 @@ linux-x64-workflow: &linux-x64-workflow
         context: test-runner:cypress-record-key
         requires:
           - build
+    - driver-integration-tests-firefox-cdp:
+        context: test-runner:cypress-record-key
+        requires:
+          - build
     - driver-integration-tests-electron:
         context: test-runner:cypress-record-key
         requires:
@@ -3207,6 +3237,7 @@ linux-x64-workflow: &linux-x64-workflow
           - linux-lint
           - percy-finalize
           - driver-integration-tests-firefox
+          - driver-integration-tests-firefox-cdp
           - driver-integration-tests-chrome
           - driver-integration-tests-chrome-beta
           - driver-integration-tests-chrome-inject-document-domain
@@ -3461,6 +3492,10 @@ linux-x64-contributor-workflow: &linux-x64-contributor-workflow
         context: test-runner:cypress-record-key
         requires:
           - contributor-pr
+    - driver-integration-tests-firefox-cdp:
+        context: test-runner:cypress-record-key
+        requires:
+          - contributor-pr
     - driver-integration-tests-electron:
         context: test-runner:cypress-record-key
         requires:
@@ -3602,6 +3637,7 @@ linux-x64-contributor-workflow: &linux-x64-contributor-workflow
           - linux-lint
           - percy-finalize
           - driver-integration-tests-firefox
+          - driver-integration-tests-firefox-cdp
           - driver-integration-tests-chrome
           - driver-integration-tests-chrome-beta
           - driver-integration-tests-electron

cli/CHANGELOG.md

@@ -1,8 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 14.0.4
+## 14.1.0
 
 _Released 2/25/2025 (PENDING)_
 
+**Features:**
+
+- Firefox versions 135 and up are now automated with [WebDriver BiDi](https://www.w3.org/TR/webdriver-bidi/) instead of [Chrome Devtools Protocol](https://chromedevtools.github.io/devtools-protocol/). Addresses [#30220](https://github.com/cypress-io/cypress/issues/30220).
+
 **Misc:**
 
 - Viewport width, height, and scale now display in a badge above the application under test. The dropdown describing how to set viewport height and width has been removed from the UI. Additionally, component tests now show a notice about URL navigation being disabled in component tests. Addresses [#30999](https://github.com/cypress-io/cypress/issues/30999). Addressed in [#31119](https://github.com/cypress-io/cypress/pull/31119).

packages/driver/cypress/e2e/e2e/service-worker.cy.js

@@ -711,6 +711,9 @@ describe('service workers', { defaultCommandTimeout: 1000, pageLoadTimeout: 1000
     })
 
     cy.visit('fixtures/service-worker.html')
-    cy.get('#output').should('have.text', 'done')
+    cy.get('#output', {
+      // request takes a little longer with WebDriver BiDi to return (Firefox 135+ only)
+      timeout: 8000,
+    }).should('have.text', 'done')
   })
 })

packages/errors/src/errors.ts

@@ -1180,6 +1180,9 @@ export const AllCypressErrors = {
   CDP_RETRYING_CONNECTION: (attempt: string | number, browserName: string, connectRetryThreshold: number) => {
     return errTemplate`Still waiting to connect to ${fmt.off(_.capitalize(browserName))}, retrying in 1 second ${fmt.meta(`(attempt ${attempt}/${connectRetryThreshold})`)}`
   },
+  CDP_FIREFOX_DEPRECATED: () => {
+    return errTemplate`Since Firefox 129, Chrome DevTools Protocol (CDP) has been deprecated in Firefox. In Firefox 135 and above, Cypress defaults to automating the Firefox browser with WebDriver BiDi. Cypress will no longer support CDP within Firefox in the future and is planned for removal in Cypress 15.`
+  },
   BROWSER_PROCESS_CLOSED_UNEXPECTEDLY: (browserName: string) => {
     return errTemplate`\
       We detected that the ${fmt.highlight(browserName)} browser process closed unexpectedly.

packages/errors/test/unit/visualSnapshotErrors_spec.ts

@@ -1112,6 +1112,11 @@ describe('visual error templates', () => {
         default: [1, 'chrome', 62],
       }
     },
+    CDP_FIREFOX_DEPRECATED: () => {
+      return {
+        default: [],
+      }
+    },
     BROWSER_PROCESS_CLOSED_UNEXPECTEDLY: () => {
       return {
         default: ['chrome'],

packages/extension/app/v2/background.js

@@ -31,6 +31,23 @@ const checkIfFirefox = async () => {
   return name === 'Firefox'
 }
 
+// this check only applies to firefox versioning!
+const isBiDiEnabled = async (config) => {
+  if (!browser || !get(browser, 'runtime.getBrowserInfo') || config.IS_CDP_FORCED_FOR_FIREFOX) {
+    return false
+  }
+
+  const { version } = await browser.runtime.getBrowserInfo()
+
+  if (version) {
+    const [majorVersion] = version.split('.').map(Number)
+
+    return majorVersion >= 135
+  }
+
+  return false
+}
+
 const connect = function (host, path, extraOpts) {
   const listenToCookieChanges = once(() => {
     return browser.cookies.onChanged.addListener((info) => {
@@ -147,10 +164,16 @@ const connect = function (host, path, extraOpts) {
     const isFirefox = await checkIfFirefox()
 
     listenToCookieChanges()
-    // Non-Firefox browsers use CDP for these instead
     if (isFirefox) {
+      // Non-Firefox browsers use CDP for this instead
       listenToDownloads()
-      listenToOnBeforeHeaders()
+      // if BiDi is enabled, BiDi will handle the network interception.
+      // Otherwise, CDP does not support it for Firefox and we need to listen for it here.
+      const isBiDiTurnedOn = await isBiDiEnabled(config)
+
+      if (!isBiDiTurnedOn) {
+        listenToOnBeforeHeaders()
+      }
     }
   })