Skip to content

feat: add option to use Chromium browser (#110) #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 8, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ And then add the plugin's name to the list of build plugins in `netlify.toml` fi

*note:* this plugin assumes you have already installed Cypress as a dev NPM dependency.

### Chromium install

This plugin installs [via Puppeteer](https://github.com/puppeteer/puppeteer) Chromium browser, which is also cached inside `./node_modules` folder.

## How does it work

When Netlify Build runs, it "knows" the output folder name and calls the `netlify-plugin-cypress` after the build has finished with that folder. Then the plugin runs Cypress tests using its [NPM module API](https://on.cypress.io/module-api). If the tests pass, the plugin finishes and the Netlify deploy starts.
Expand Down Expand Up @@ -173,6 +177,27 @@ package = "netlify-plugin-cypress"

See [cypress-example-kitchensink](https://github.com/cypress-io/cypress-example-kitchensink) for instance.

### Chromium

By default all tests run using built-in Electron browser. If you want to use Chromium:

```toml
[build]
command = "npm run build"
publish = "build"
[build.environment]
# cache Cypress binary in local "node_modules" folder
# so Netlify caches it
CYPRESS_CACHE_FOLDER = "./node_modules/CypressBinary"
# set TERM variable for terminal output
TERM = "xterm"

[[plugins]]
package = "netlify-plugin-cypress"
[plugins.inputs]
browser = "chromium"
```

### testing SPA routes

SPAs need catch-all redirect setup to make non-root paths accesssible by tests. You can enable this with `spa` parameter.
Expand Down
17 changes: 17 additions & 0 deletions circle.yml
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,19 @@ jobs:
environment:
DEBUG: netlify-plugin-cypress

'test-using-chromium':
executor: cypress/base-12-14-0
steps:
# all dependencies were installed in previous job
- attach_workspace:
at: ~/
- run:
name: Netlify Build 🏗
command: npx netlify build
working_directory: tests/use-chromium
environment:
DEBUG: netlify-plugin-cypress

routing:
executor: cypress/base-12-14-0
steps:
Expand Down Expand Up @@ -123,6 +136,9 @@ workflows:
- 'test-prebuild-only':
requires:
- cypress/install
- test-using-chromium:
requires:
- cypress/install
- routing:
requires:
- cypress/install
Expand All @@ -134,6 +150,7 @@ workflows:
- 'recording test'
- 'test-twice'
- 'test-prebuild-only'
- test-using-chromium
- 'routing'
filters:
branches:
Expand Down
5 changes: 5 additions & 0 deletions manifest.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ inputs:
# by default run the tests
- name: skip
default: false
# by default the tests run in Electron
# but because of the dependency we download Chromium
# so you can set "browser = electron"
- name: browser
default: electron

# tells the plugin how to start the server using custom command
# and waiting for an url, record to the dashboard, tag, etc
Expand Down
5 changes: 3 additions & 2 deletions netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ publish = "public"
[[plugins]]
# local Cypress plugin will test our site after it is built
package = "."
# [plugins.inputs]
# spec = 'cypress/integration/spec.js'
[plugins.inputs]
# browser = "electron"
# spec = 'cypress/integration/spec.js'
# [plugins.inputs.preBuild]
# start = 'npm start'
# wait-on = 'http://localhost:5000'
Expand Down
Loading