feat: add support for chrome for testing browser

.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'
-        - 'renovate/yarn-1.x'
+        - 'mschile/chrome_for_testing'
         - '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: [ 'renovate/yarn-1.x', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/chrome_for_testing', << 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: [ 'renovate/yarn-1.x', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/chrome_for_testing', << 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: [ 'renovate/yarn-1.x', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/chrome_for_testing', << 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/experiment/esm" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "mschile/chrome_for_testing" ]]; 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

@@ -1,8 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 13.16.2
+## 13.17.0
 
 _Released 12/17/2024 (PENDING)_
 
+**Features:**
+
+- Added official support for Google Chrome for Testing browser. Addresses [#28123](https://github.com/cypress-io/cypress/issues/28123) and [#28554](https://github.com/cypress-io/cypress/issues/28554).
+
 **Bugfixes:**
 
 - Fixed an issue where targets may hang if `Network.enable` is not implemented for the target. Addresses [#29876](https://github.com/cypress-io/cypress/issues/29876).

packages/app/cypress/e2e/top-nav.cy.ts

@@ -44,7 +44,7 @@ describe('App Top Nav Workflows', () => {
         .should('have.attr', 'src')
         .and('contain', 'firefox')
 
-        cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 5')
+        cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 6')
       })
     })
 
@@ -82,19 +82,19 @@ describe('App Top Nav Workflows', () => {
 
         cy.get('@browserItems').eq(1)
         .should('contain', 'Edge')
-        .and('contain', 'Version 8')
+        .and('contain', 'Version 9')
         .findByTestId('top-nav-browser-list-selected-item')
         .should('not.exist')
 
         cy.get('@browserItems').eq(2)
         .should('contain', 'Electron')
-        .and('contain', 'Version 12')
+        .and('contain', 'Version 13')
         .findByTestId('top-nav-browser-list-selected-item')
         .should('not.exist')
 
         cy.get('@browserItems').eq(3)
         .should('contain', 'Firefox')
-        .and('contain', 'Version 5')
+        .and('contain', 'Version 6')
         .findByTestId('top-nav-browser-list-selected-item')
         .should('not.exist')
       })

packages/app/src/debug/LayeredBrowserIcons.vue

@@ -33,7 +33,7 @@ import { IconBrowserChrome,
 // Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/46073cb5c387af3b203404280a1664a85e233b93/packages/common/src/logos/getLogoPath.ts
 // Some of these are currently incorrect (ex: CHROME-CANARY).
 // We are also missing browsers from the list as well
-export type BrowserType = 'CHROME' | 'SAFARI' | 'FIREFOX' | 'CHROME-CANARY' | 'CHROME BETA' | 'EDGE' | 'WEBKIT' | 'ELECTRON'
+export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME-FOR-TESTING' | 'CUSTOM-CHROME-FOR-TESTING' | 'SAFARI' | 'FIREFOX' | 'EDGE' | 'WEBKIT' | 'ELECTRON'
 
 interface LayeredProps {
   browsers: BrowserType[]
@@ -57,7 +57,10 @@ const results = computed(() => {
 const BROWSER_MAP: Record<BrowserType, any> = {
   'CHROME': IconBrowserChrome,
   'CHROME BETA': IconBrowserChromeBeta,
-  'CHROME-CANARY': IconBrowserChromeCanary,
+  'CANARY': IconBrowserChromeCanary,
+  'CHROME CANARY': IconBrowserChromeCanary,
+  'CHROME FOR TESTING': IconBrowserChrome,
+  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
   'SAFARI': IconBrowserSafari,
   'FIREFOX': IconBrowserMozillaFirefox,
   'EDGE': IconBrowserEdge,

packages/errors/src/errors.ts

@@ -120,7 +120,7 @@ export const AllCypressErrors = {
         Browser: ${fmt.highlight(browser)} was not found on your system or is not supported by Cypress.
 
         Cypress supports the following browsers:
-        ${fmt.listItems(['electron', 'chrome', 'chromium', 'chrome:canary', 'edge', 'firefox'])}
+        ${fmt.listItems(['electron', 'chrome', 'chromium', 'chrome-for-testing', 'edge', 'firefox'])}
 
         You can also use a custom browser: https://on.cypress.io/customize-browsers
 

packages/frontend-shared/src/assets/browserLogos.ts

@@ -4,6 +4,7 @@ import edgeIcon from 'browser-logos/src/edge/edge.svg?url'
 import electronIcon from 'browser-logos/src/electron/electron.svg?url'
 import canaryIcon from 'browser-logos/src/chrome-canary/chrome-canary.svg?url'
 import chromeBetaIcon from 'browser-logos/src/chrome-beta/chrome-beta.svg?url'
+import chromeTestIcon from 'browser-logos/src/chrome-test/chrome-test.svg?url'
 import chromiumIcon from 'browser-logos/src/chromium/chromium.svg?url'
 import edgeBetaIcon from 'browser-logos/src/edge-beta/edge-beta.png'
 import edgeCanaryIcon from 'browser-logos/src/edge-canary/edge-canary.png'
@@ -16,11 +17,12 @@ import genericBrowserLogo from '@packages/frontend-shared/src/assets/logos/gener
 export const allBrowsersIcons = {
   'Electron': electronIcon,
   'Chrome': chromeIcon,
+  'Chrome Beta': chromeBetaIcon,
+  'Chrome Canary': canaryIcon,
+  'Chrome for Testing': chromeTestIcon,
   'Firefox': firefoxIcon,
   'Edge': edgeIcon,
   'Chromium': chromiumIcon,
-  'Canary': canaryIcon,
-  'Chrome Beta': chromeBetaIcon,
   'Firefox Nightly': firefoxNightlyIcon,
   'Firefox Developer Edition': firefoxDeveloperEditionIcon,
   'Edge Canary': edgeCanaryIcon,