forked from cypress-io/cypress-docker-images
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add firefox-esr example (cypress-io#1195)
- Loading branch information
1 parent
36e50fa
commit 13ac73a
Showing
8 changed files
with
2,105 additions
and
13 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
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 @@ | ||
FROM cypress/base | ||
COPY . /opt/app | ||
WORKDIR /opt/app | ||
RUN apt-get update # Update package index | ||
RUN apt-get install firefox-esr -y # Install Firefox ESR | ||
RUN npx cypress install # Install Cypress binary |
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,67 @@ | ||
# examples/firefox-esr | ||
|
||
This directory contains a simple example of a Cypress E2E test with one test spec `cypress/e2e/spec.cy.js` running using the [Mozilla Firefox](https://www.mozilla.org/firefox) browser from the ESR (Extended Support Release) channel. | ||
|
||
[Choosing a Firefox update channel](https://support.mozilla.org/en-US/kb/choosing-firefox-update-channel) explains the Firefox "Extended Support Release (ESR)". | ||
|
||
## Non-Docker demonstration | ||
|
||
Install Firefox ESR on your host system. | ||
|
||
Use regular [Cypress CLI commands](https://docs.cypress.io/guides/guides/command-line) to run Cypress with Firefox (ESR): | ||
|
||
```shell | ||
cd examples/firefox-esr | ||
npm ci | ||
npx cypress run --browser firefox | ||
npx cypress open --e2e --browser firefox | ||
``` | ||
|
||
## Docker | ||
|
||
In the Docker examples below, the Firefox ESR browser is installed from [Debian](https://www.debian.org/distrib/packages) distribution sources. See the [firefox-esr package](https://packages.debian.org/search?keywords=firefox-esr) (`bookworm (stable)` section) covering `amd64 arm64 armhf i386 mips64el ppc64el s390x` processor architectures. | ||
|
||
### Docker interactive | ||
|
||
In this example we first run the unchanged image `cypress/base` as a container: | ||
|
||
```shell | ||
cd examples/firefox-esr # Use a pre-configured simple Cypress E2E project | ||
npm ci # Install Cypress | ||
docker run -it --rm -v .:/e2e -w /e2e cypress/base # Run image as container | ||
``` | ||
|
||
At the `bash` prompt `:/e2e#`, we can then enter the following commands: | ||
|
||
```shell | ||
apt-get update # Update package index | ||
apt-get install firefox-esr -y # Install Firefox ESR | ||
unset CI # Allows to see installation progress | ||
npx cypress install # Install Cypress binary into running Docker container | ||
npx cypress run --browser firefox # Run Cypress test | ||
exit | ||
``` | ||
|
||
### 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 Firefox ESR and the Cypress binary into the image. | ||
|
||
The file is [examples/firefox-esr/Dockerfile](./Dockerfile) and it has the following contents: | ||
|
||
```dockerfile | ||
FROM cypress/base | ||
COPY . /opt/app | ||
WORKDIR /opt/app | ||
RUN apt-get update # Update package index | ||
RUN apt-get install firefox-esr -y # Install Firefox ESR | ||
RUN npx cypress install # Install Cypress binary | ||
``` | ||
|
||
We build the new image, run the container from the image and execute the Cypress command `npx cypress run --browser firefox` to run the test using Firefox ESR: | ||
|
||
```shell | ||
cd examples/firefox-esr # Use a pre-configured simple Cypress E2E project | ||
npm ci # Install all dependencies | ||
docker build . -t test-firefox-esr # Build a new image | ||
docker run -it --rm --entrypoint bash test-firefox-esr -c "npx cypress run --browser firefox" # Run Cypress test using Firefox ESR | ||
``` |
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.