Skip to content

Commit

Permalink
feat: add support for chrome for testing browser (#30751)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mschile
mschile authored Dec 16, 2024
1 parent 68c5714 commit 0c3c497
Show file tree
Hide file tree
Showing 32 changed files with 598 additions and 312 deletions.
10 changes: 5 additions & 5 deletions .circleci/workflows.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 >>
Expand All @@ -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 >>
Expand All @@ -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 >>
Expand Down Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion cli/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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).
Expand Down
8 changes: 4 additions & 4 deletions packages/app/cypress/e2e/top-nav.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})

Expand Down Expand Up @@ -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')
})
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/debug/LayeredBrowserIcons.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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>
))

Expand Down
33 changes: 21 additions & 12 deletions packages/app/src/debug/LayeredBrowserIcons.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[]
Expand All @@ -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(' ', '_')}`,
}
})
Expand All @@ -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>
9 changes: 5 additions & 4 deletions packages/errors/__snapshot-html__/BROWSER_NOT_FOUND_BY_NAME - canary.html
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

5 comments on commit 0c3c497

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0c3c497 Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.17.0/linux-x64/develop-0c3c497c1d8904dc0070321cd622a853822b14c7/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0c3c497 Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.17.0/linux-arm64/develop-0c3c497c1d8904dc0070321cd622a853822b14c7/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0c3c497 Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.17.0/darwin-arm64/develop-0c3c497c1d8904dc0070321cd622a853822b14c7/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0c3c497 Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.17.0/darwin-x64/develop-0c3c497c1d8904dc0070321cd622a853822b14c7/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0c3c497 Dec 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.17.0/win32-x64/develop-0c3c497c1d8904dc0070321cd622a853822b14c7/cypress.tgz

Please sign in to comment.