-
Notifications
You must be signed in to change notification settings - Fork 383
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add Chrome for Testing example
- Loading branch information
1 parent
c8e7465
commit f048452
Showing
8 changed files
with
2,881 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
FROM cypress/base | ||
COPY . /opt/app | ||
WORKDIR /opt/app | ||
# Install Cypress binary | ||
RUN npx cypress install | ||
# Install Chrome for Testing | ||
ARG CHROME_VERSION=stable | ||
RUN INSTALL_OUTPUT=$(npx @puppeteer/browsers install chrome@${CHROME_VERSION} --path /tmp/chrome-for-testing) && \ | ||
DOWNLOAD_DIR=$(echo "$INSTALL_OUTPUT" | grep -o '\/.*\/chrome-linux64') && \ | ||
mv $DOWNLOAD_DIR /opt/chrome-for-testing | ||
RUN ln -fs /opt/chrome-for-testing/chrome /usr/local/bin/chrome | ||
RUN rm -rf /tmp/chrome-for-testing |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
# examples/chrome-for-testing | ||
|
||
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. | ||
|
||
Note that Chrome for Testing is currently not available for the `linux/arm64` platform. | ||
|
||
## Docker | ||
|
||
### Docker build and run | ||
|
||
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. | ||
|
||
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: | ||
|
||
```dockerfile | ||
FROM cypress/base | ||
COPY . /opt/app | ||
WORKDIR /opt/app | ||
# Install Cypress binary | ||
RUN npx cypress install | ||
# Install Chrome for Testing | ||
ARG CHROME_VERSION=stable | ||
RUN INSTALL_OUTPUT=$(npx @puppeteer/browsers install chrome@${CHROME_VERSION} --path /tmp/chrome-for-testing) && \ | ||
DOWNLOAD_DIR=$(echo "$INSTALL_OUTPUT" | grep -o '\/.*\/chrome-linux64') && \ | ||
mv $DOWNLOAD_DIR /opt/chrome-for-testing | ||
RUN ln -fs /opt/chrome-for-testing/chrome /usr/local/bin/chrome | ||
RUN rm -rf /tmp/chrome-for-testing | ||
``` | ||
|
||
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: | ||
|
||
```shell | ||
cd examples/chrome-for-testing # Use a pre-configured simple Cypress E2E project | ||
npm ci # Install all dependencies | ||
docker build -t test-chrome-for-testing . # Build a new image | ||
docker run --rm --entrypoint bash test-chrome-for-testing -c "npx cypress run --browser chrome-for-testing" # Run Cypress test using Chrome for Testing | ||
``` | ||
|
||
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: | ||
- an explicit full version e.g. `131.0.6778.204` | ||
- a major version e.g. `131` | ||
- a channel alias: | ||
- `stable` | ||
- `beta` | ||
- `dev` | ||
- `canary` | ||
|
||
The value can be changed by: | ||
- editing the [Dockerfile](./Dockerfile) and replacing the version in `ARG CHROME_VERSION=` or | ||
- adding the version as a `build-arg` to the build command line, for example: | ||
|
||
```shell | ||
docker build --build-arg CHROME_VERSION=beta -t test-chrome-for-testing . | ||
``` | ||
|
||
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. | ||
|
||
## Test | ||
|
||
To test a set of Chrome for Testing version selections (channel alias: `stable`, `beta`, `dev`, `canary`, explicit full version & major version), execute: | ||
|
||
```shell | ||
cd examples/chrome-for-testing | ||
./scripts/test.sh | ||
``` | ||
|
||
## References | ||
|
||
Google Chrome for Testing: | ||
|
||
- [Blog](https://developer.chrome.com/blog/chrome-for-testing/) | ||
- [List of current versions](https://googlechromelabs.github.io/chrome-for-testing/) | ||
- [Repository](https://github.com/GoogleChromeLabs/chrome-for-testing) | ||
- [Available downloads](https://googlechromelabs.github.io/chrome-for-testing/files) | ||
|
||
Installation using | ||
|
||
- [@puppeteer/browsers](https://pptr.dev/browsers-api) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
const { defineConfig } = require('cypress') | ||
|
||
module.exports = defineConfig({ | ||
fixturesFolder: false, | ||
e2e: { | ||
supportFile: false, | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
describe('test local demo page', () => { | ||
it('heading', () => { | ||
cy.visit('index.html') | ||
cy.contains('h2', 'Test') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<title>Test for Cypress Docker images</title> | ||
</head> | ||
|
||
<body> | ||
<h1>Purpose</h1> | ||
<p>This page is used for demonstrating Cypress Docker images.</p> | ||
<h2>Test heading</h2> | ||
<p>This is a test page</p> | ||
</body> | ||
</html> |
Oops, something went wrong.