Skip to content

Commit 99ae13d

Browse files
MikeMcC399MikeMcC399
authored
test: add Chrome for Testing example (#1270)
* test: add Chrome for Testing example * add chrome-for-testing ci tests
1 parent ea20554 commit 99ae13d

File tree

10 files changed

+2883
-0
lines changed

10 files changed

+2883
-0
lines changed

‎.github/workflows/example-tests.yml

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ jobs:
1717
directory: [
1818
basic-mini,
1919
basic,
20+
chrome-for-testing,
2021
chromium,
2122
firefox-esr,
2223
included-as-non-root

‎examples/chrome-for-testing/Dockerfile

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
FROM cypress/base
2+
COPY . /opt/app
3+
WORKDIR /opt/app
4+
# Install Cypress binary
5+
RUN npx cypress install
6+
# Install Chrome for Testing
7+
ARG CHROME_VERSION=stable
8+
RUN INSTALL_OUTPUT=$(npx @puppeteer/browsers install chrome@${CHROME_VERSION} --path /tmp/chrome-for-testing) && \
9+
DOWNLOAD_DIR=$(echo "$INSTALL_OUTPUT" | grep -o '\/.*\/chrome-linux64') && \
10+
mv $DOWNLOAD_DIR /opt/chrome-for-testing
11+
RUN ln -fs /opt/chrome-for-testing/chrome /usr/local/bin/chrome
12+
RUN rm -rf /tmp/chrome-for-testing

‎examples/chrome-for-testing/README.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# examples/chrome-for-testing
2+
3+
This directory contains a simple example of a Cypress E2E test with one test spec `cypress/e2e/spec.cy.js` running using the [Google Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) browser under the `linux/amd64` platform.
4+
5+
Note that Chrome for Testing is currently not available for the `linux/arm64` platform.
6+
7+
## Docker
8+
9+
### Docker build and run
10+
11+
In this example we use a customized `Dockerfile` which bases a new image on `cypress/base`, copies the complete Cypress project into the image, including installed dependencies, then installs the Cypress binary and Chrome for Testing into the image.
12+
13+
The file is [examples/chrome-for-testing/Dockerfile](./Dockerfile). It has the following contents which build a custom Docker image using the `stable` version of Chrome for Testing:
14+
15+
```dockerfile
16+
FROM cypress/base
17+
COPY . /opt/app
18+
WORKDIR /opt/app
19+
# Install Cypress binary
20+
RUN npx cypress install
21+
# Install Chrome for Testing
22+
ARG CHROME_VERSION=stable
23+
RUN INSTALL_OUTPUT=$(npx @puppeteer/browsers install chrome@${CHROME_VERSION} --path /tmp/chrome-for-testing) && \
24+
DOWNLOAD_DIR=$(echo "$INSTALL_OUTPUT" | grep -o '\/.*\/chrome-linux64') && \
25+
mv $DOWNLOAD_DIR /opt/chrome-for-testing
26+
RUN ln -fs /opt/chrome-for-testing/chrome /usr/local/bin/chrome
27+
RUN rm -rf /tmp/chrome-for-testing
28+
```
29+
30+
We build the new image, run the container from the image and execute the Cypress command `npx cypress run --browser chrome-for-testing` to run the test using Chrome for Testing:
31+
32+
```shell
33+
cd examples/chrome-for-testing # Use a pre-configured simple Cypress E2E project
34+
npm ci # Install all dependencies
35+
docker build -t test-chrome-for-testing . # Build a new image
36+
docker run --rm --entrypoint bash test-chrome-for-testing -c "npx cypress run --browser chrome-for-testing" # Run Cypress test using Chrome for Testing
37+
```
38+
39+
To build the Docker image with a different version of Chrome for Testing, change the value of the Docker environment variable `CHROME_VERSION.` Any value accepted by [@puppeteer/browsers](https://pptr.dev/browsers-api) is valid. This includes:
40+
- an explicit full version e.g. `131.0.6778.204`
41+
- a major version e.g. `131`
42+
- a channel alias:
43+
- `stable`
44+
- `beta`
45+
- `dev`
46+
- `canary`
47+
48+
The value can be changed by:
49+
- editing the [Dockerfile](./Dockerfile) and replacing the version in `ARG CHROME_VERSION=` or
50+
- adding the version as a `build-arg` to the build command line, for example:
51+
52+
```shell
53+
docker build --build-arg CHROME_VERSION=beta -t test-chrome-for-testing .
54+
```
55+
56+
Refer to [Chrome for Testing availability](https://googlechromelabs.github.io/chrome-for-testing/) for current versions or [available downloads](https://googlechromelabs.github.io/chrome-for-testing/files) for other versions.
57+
58+
## Test
59+
60+
To test a set of Chrome for Testing version selections (channel alias: `stable`, `beta`, `dev`, `canary`, explicit full version & major version), execute:
61+
62+
```shell
63+
cd examples/chrome-for-testing
64+
./scripts/test.sh
65+
```
66+
67+
## References
68+
69+
Google Chrome for Testing:
70+
71+
- [Blog](https://developer.chrome.com/blog/chrome-for-testing/)
72+
- [List of current versions](https://googlechromelabs.github.io/chrome-for-testing/)
73+
- [Repository](https://github.com/GoogleChromeLabs/chrome-for-testing)
74+
- [Available downloads](https://googlechromelabs.github.io/chrome-for-testing/files)
75+
76+
Installation using
77+
78+
- [@puppeteer/browsers](https://pptr.dev/browsers-api)

‎examples/chrome-for-testing/cypress.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const { defineConfig } = require('cypress')
2+
3+
module.exports = defineConfig({
4+
fixturesFolder: false,
5+
e2e: {
6+
supportFile: false,
7+
},
8+
})

‎examples/chrome-for-testing/cypress/e2e/spec.cy.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
describe('test local demo page', () => {
2+
it('heading', () => {
3+
cy.visit('index.html')
4+
cy.contains('h2', 'Test')
5+
})
6+
})

‎examples/chrome-for-testing/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Test for Cypress Docker images</title>
6+
</head>
7+
8+
<body>
9+
<h1>Purpose</h1>
10+
<p>This page is used for demonstrating Cypress Docker images.</p>
11+
<h2>Test heading</h2>
12+
<p>This is a test page</p>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)