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

Co-authored-by: Erez Rokah <[email protected]>

Author: bahmutov

README.md

@@ -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.
@@ -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.

circle.yml

@@ -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:
@@ -123,6 +136,9 @@ workflows:
       - 'test-prebuild-only':
           requires:
             - cypress/install
+      - test-using-chromium:
+          requires:
+            - cypress/install
       - routing:
           requires:
             - cypress/install
@@ -134,6 +150,7 @@ workflows:
             - 'recording test'
             - 'test-twice'
             - 'test-prebuild-only'
+            - test-using-chromium
             - 'routing'
           filters:
             branches:

manifest.yml

@@ -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

netlify.toml

@@ -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'