misc: implement webdriver on top of geckodriver in order to reduce ov…

…erhead maintenance and code (#30324)

* misc: implement webdriver npm package as the client for the webdriver specification

* misc: go back to xulstore to save browser preferences [run ci]

* add changelog [run ci]

* chore: fix screenshot resolution [run ci]

* fix check-ts issues [run ci]

* run windows ci [run ci]

* run ci

* add comments [run ci]

* build binaries for webdriver impl [run ci]

* fix Cypress namespace missing issue. see 6d7ba97

* chore: updating v8 snapshot cache

* chore: updating v8 snapshot cache

* chore: updating v8 snapshot cache

* patch edgedriver and preserve dependency paths for webdriver so they are included in the binary [run ci]

* fix issues with firefox profile not being created in open mode when old profile exists from previous cypress versions where they are no longer compatible [run ci]

* address comments that came up in review [run ci]

* see if this fixes extension test [run ci]

* make sure process kill emits the exit event [run ci]

* update geckodriver to include contribution patch to types [run ci]

* fix misapplication of geckodriver package (accidentally deleted) [run ci]

* empty commit to trigger ci [run ci]

* address comments from code review [run ci]

---------

Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com>

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-09-30-24-windows-patch-server-2022
+10-08-24-webdriver2

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'ryanm/fix/find-process'
+        - 'misc/use_webdriver'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,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/fix/find-process', << pipeline.git.branch >> ]
+    - equal: [ 'misc/use_webdriver', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,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/fix/find-process', << pipeline.git.branch >> ]
+    - equal: [ 'misc/use_webdriver', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +76,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/fix/find-process', << pipeline.git.branch >> ]
+    - equal: [ 'misc/use_webdriver', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,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/fix/find-process" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "misc/use_webdriver" ]]; 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

cli/CHANGELOG.md

@@ -10,6 +10,7 @@ _Released 10/1/2024 (PENDING)_
 **Misc:**
 
 - Cypress now consumes [geckodriver](https://firefox-source-docs.mozilla.org/testing/geckodriver/index.html) to help automate the Firefox browser instead of [marionette-client](https://github.com/cypress-io/marionette-client). Addresses [#30217](https://github.com/cypress-io/cypress/issues/30217).
+- Cypress now consumes [webdriver](https://github.com/webdriverio/webdriverio/tree/main/packages/webdriver) to help automate the Firefox browser and [firefox-profile](https://github.com/saadtazi/firefox-profile-js) to create a firefox profile and convert it to Base64 to save user screen preferences via `xulstore.json`. Addresses [#30300](https://github.com/cypress-io/cypress/issues/30300) and [#30301](https://github.com/cypress-io/cypress/issues/30301).
 - Pass spec information to protocol's `beforeSpec` to improve troubleshooting when reporting on errors. Addressed in [#30316](https://github.com/cypress-io/cypress/pull/30316).
 
 **Dependency Updates:**

package.json

@@ -245,6 +245,7 @@
       "scripts"
     ],
     "nohoist": [
+      "**/@wdio/*",
       "**/webpack-preprocessor/babel-loader",
       "**/webpack-preprocessor/**/merge-source-map",
       "**/webpack-preprocessor/**/patch-package",
@@ -262,6 +263,7 @@
     "**/@types/cheerio": "0.22.21",
     "**/@types/enzyme": "3.10.5",
     "**/@types/react": "16.9.50",
+    "**/@wdio/logger": "9.0.0",
     "**/jquery": "3.4.1",
     "**/pretty-format": "26.4.0",
     "**/sharp": "0.29.3",

packages/data-context/src/DataContext.ts

@@ -181,7 +181,7 @@ export class DataContext {
   @cached
   get cloud () {
     return new CloudDataSource({
-      fetch: (...args) => this.util.fetch(...args),
+      fetch: (...args: [RequestInfo | URL, (RequestInit | undefined)?]) => this.util.fetch(...args),
       getUser: () => this.coreData.user,
       logout: () => this.actions.auth.logout().catch(this.logTraceError),
       invalidateClientUrqlCache: () => this.graphql.invalidateClientUrqlCache(this),

packages/frontend-shared/src/graphql/urqlFetchSocketAdapter.ts

@@ -3,7 +3,7 @@ import type { SocketShape } from '@packages/socket/lib/types'
 import type { ClientOptions } from '@urql/core'
 
 export const urqlFetchSocketAdapter = (io: SocketShape): ClientOptions['fetch'] => {
-  return (url, fetchOptions = {}) => {
+  return (url, fetchOptions: RequestInit = {}) => {
     return new Promise<Response>((resolve, reject) => {
       // Handle aborted requests
       if (fetchOptions.signal) {

packages/server/lib/browsers/firefox-util.ts

@@ -6,9 +6,9 @@ import Foxdriver from '@benmalka/foxdriver'
 import * as protocol from './protocol'
 import { CdpAutomation } from './cdp_automation'
 import { BrowserCriClient } from './browser-cri-client'
+import type { Client as WebDriverClient } from 'webdriver'
 import type { Automation } from '../automation'
 import type { CypressError } from '@packages/errors'
-import type { WebDriverClassic } from './webdriver-classic'
 
 const debug = Debug('cypress:server:browsers:firefox-util')
 
@@ -20,7 +20,7 @@ let timings = {
   collections: [] as any[],
 }
 
-let webDriverClassic: WebDriverClassic
+let webdriverClient: WebDriverClient
 
 const getTabId = (tab) => {
   return _.get(tab, 'browsingContextID')
@@ -103,11 +103,11 @@ async function connectToNewTabClassic () {
   // For versions 124 and above, a new tab is not created, so @packages/extension creates one for us.
   // Since the tab is always available on our behalf,
   // we can connect to it here and navigate it to about:blank to set it up for CDP connection
-  const handles = await webDriverClassic.getWindowHandles()
+  const handles = await webdriverClient.getWindowHandles()
 
-  await webDriverClassic.switchToWindow(handles[0])
+  await webdriverClient.switchToWindow(handles[0])
 
-  await webDriverClassic.navigate('about:blank')
+  await webdriverClient.navigateTo('about:blank')
 }
 
 async function connectToNewSpec (options, automation: Automation, browserCriClient: BrowserCriClient) {
@@ -140,7 +140,7 @@ async function setupCDP (remotePort: number, automation: Automation, onError?: (
 }
 
 async function navigateToUrlClassic (url: string) {
-  await webDriverClassic.navigate(url)
+  await webdriverClient.navigateTo(url)
 }
 
 const logGcDetails = () => {
@@ -213,17 +213,17 @@ export default {
     url,
     foxdriverPort,
     remotePort,
-    webDriverClassic: wdcInstance,
+    webdriverClient: wdInstance,
   }: {
     automation: Automation
     onError?: (err: Error) => void
     url: string
     foxdriverPort: number
     remotePort: number
-    webDriverClassic: WebDriverClassic
+    webdriverClient: WebDriverClient
   }): Promise<BrowserCriClient> {
     // set the WebDriver classic instance instantiated from geckodriver
-    webDriverClassic = wdcInstance
+    webdriverClient = wdInstance
     const [, browserCriClient] = await Promise.all([
       this.setupFoxdriver(foxdriverPort),
       setupCDP(remotePort, automation, onError),