feat: add support for chrome for testing browser (#30751)

Author: mschile

.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 the [Google Chrome for Testing](https://github.com/GoogleChromeLabs/chrome-for-testing) browser. Assuming the browser is in a location where it can be [auto-detected](https://on.cypress.io/troubleshooting-launching-browsers), it can be launched by providing the `--browser chrome-for-testing` option. If it can't be auto-detected, the path to the browser can also be provided. Previously [customizing the available browsers](https://on.cypress.io/customize-browsers) was required. 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.cy.tsx

@@ -2,7 +2,7 @@ import LayeredBrowserIcons from './LayeredBrowserIcons.vue'
 import type { BrowserType } from './LayeredBrowserIcons.vue'
 
 describe('<LayeredBrowserIcons/>', () => {
-  const browsers: BrowserType[] = ['CHROME', 'CHROME-CANARY', 'CHROME BETA', 'FIREFOX', 'WEBKIT', 'EDGE', 'ELECTRON']
+  const browsers: BrowserType[] = ['CHROME', 'CHROME BETA', 'CANARY', 'CHROME CANARY', 'CHROME FOR TESTING', 'CUSTOM CHROME FOR TESTING', 'CHROMIUM', 'CUSTOM CHROMIUM', 'EDGE', 'EDGE BETA', 'EDGE CANARY', 'EDGE DEV', 'ELECTRON', 'FIREFOX', 'FIREFOX DEVELOPER EDITION', 'FIREFOX NIGHTLY', 'WEBKIT']
 
   it('mounts correctly for single browser', () => {
     browsers.forEach((ele) => {
@@ -21,11 +21,11 @@ describe('<LayeredBrowserIcons/>', () => {
       <div class='bg-gray-50 p-[24px]'>
         <LayeredBrowserIcons browsers={browsers} />
         <LayeredBrowserIcons browsers={['CHROME', 'FIREFOX', 'EDGE']}/>
-        <LayeredBrowserIcons browsers={['CHROME-CANARY', 'WEBKIT', 'ELECTRON']} />
+        <LayeredBrowserIcons browsers={['CHROME CANARY', 'WEBKIT', 'ELECTRON']} />
         <LayeredBrowserIcons browsers={['FIREFOX', 'WEBKIT', 'EDGE']}/>
-        <LayeredBrowserIcons browsers={['FIREFOX', 'EDGE', 'CHROME-CANARY', 'WEBKIT']}/>
+        <LayeredBrowserIcons browsers={['FIREFOX', 'EDGE', 'CHROME CANARY', 'WEBKIT']}/>
         <LayeredBrowserIcons browsers={['EDGE', 'CHROME', 'WEBKIT', 'ELECTRON']}/>
-        <LayeredBrowserIcons browsers={['CHROME', 'CHROME BETA', 'CHROME-CANARY']} />
+        <LayeredBrowserIcons browsers={['CHROME', 'CHROME BETA', 'CHROME CANARY']} />
       </div>
     ))
 

packages/app/src/debug/LayeredBrowserIcons.vue

@@ -20,20 +20,19 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { IconBrowserChrome,
+import {
+  IconBrowserChrome,
+  IconBrowserChromeBeta,
   IconBrowserChromeCanary,
-  IconBrowserSafari,
   IconBrowserMozillaFirefox,
   IconBrowserEdge,
   IconBrowserWebkit,
   IconBrowserElectronLight,
-  IconBrowserChromeBeta,
+  IconGeneralGlobe,
 } from '@cypress-design/vue-icon'
 
-// 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'
+// Note: These browser names should map to the list of logoPaths found at https://github.com/cypress-io/cypress-services/blob/develop/packages/common/src/logos/getLogoPath.ts
+export type BrowserType = 'CHROME' | 'CHROME BETA' | 'CANARY' | 'CHROME CANARY' | 'CHROME FOR TESTING' | 'CUSTOM CHROME FOR TESTING' | 'CHROMIUM' | 'CUSTOM CHROMIUM' | 'EDGE' | 'EDGE BETA' | 'EDGE CANARY' | 'EDGE DEV' | 'ELECTRON' | 'FIREFOX' | 'FIREFOX DEVELOPER EDITION' | 'FIREFOX NIGHTLY' | 'WEBKIT'
 
 interface LayeredProps {
   browsers: BrowserType[]
@@ -45,7 +44,7 @@ const results = computed(() => {
   if (props.browsers) {
     return props.browsers.map((browserType) => {
       return {
-        icon: BROWSER_MAP[browserType],
+        icon: BROWSER_MAP[browserType] || IconGeneralGlobe,
         name: `browser-icon-${browserType.toLowerCase().replaceAll(' ', '_')}`,
       }
     })
@@ -54,15 +53,25 @@ const results = computed(() => {
   return []
 })
 
+// TODO: Add correct icons for firefox, edge, and chromium
 const BROWSER_MAP: Record<BrowserType, any> = {
   'CHROME': IconBrowserChrome,
   'CHROME BETA': IconBrowserChromeBeta,
-  'CHROME-CANARY': IconBrowserChromeCanary,
-  'SAFARI': IconBrowserSafari,
-  'FIREFOX': IconBrowserMozillaFirefox,
+  'CANARY': IconBrowserChromeCanary,
+  'CHROME CANARY': IconBrowserChromeCanary,
+  'CHROME FOR TESTING': IconBrowserChrome,
+  'CUSTOM CHROME FOR TESTING': IconBrowserChrome,
+  'CHROMIUM': IconGeneralGlobe,
+  'CUSTOM CHROMIUM': IconGeneralGlobe,
   'EDGE': IconBrowserEdge,
-  'WEBKIT': IconBrowserWebkit,
+  'EDGE BETA': IconBrowserEdge,
+  'EDGE CANARY': IconBrowserEdge,
+  'EDGE DEV': IconBrowserEdge,
   'ELECTRON': IconBrowserElectronLight,
+  'FIREFOX': IconBrowserMozillaFirefox,
+  'FIREFOX DEVELOPER EDITION': IconBrowserMozillaFirefox,
+  'FIREFOX NIGHTLY': IconBrowserMozillaFirefox,
+  'WEBKIT': IconBrowserWebkit,
 }
 
 </script>