feat: install Cypress binary in the preBuild step

README.md

@@ -23,8 +23,26 @@ And then add the plugin's name to the list of build plugins in `netlify.yml` fil
 
 ### basic
 
+Here is the most basic Netlify config file `netlify.yml` in YAML format with just Cypress plugin
+
+```yaml
+plugins:
+  # local Cypress plugin will test our site after it is built
+  - package: netlify-plugin-cypress
+```
+
+and its equivalent TOML format `netlify.toml`
+
+```toml
+[[plugins]]
+  package = "netlify-plugin-cypress"
+```
+
+### recommended
+
+We strongly recommend setting `CYPRESS_CACHE_FOLDER` to place the Cypress binary _inside the node_modules_ folder to [cache it between builds](https://on.cypress.io/caching)
+
 ```yaml
-# Netlify config file
 build:
   command: "npm run build"
   publish: "build"
@@ -132,11 +150,6 @@ Set environment variable `DEBUG=netlify-plugin-cypress` to see the debug logs. T
   variable <code>CYPRESS_CACHE_FOLDER = "./node_modules/CypressBinary"</code>.
 </details>
 
-<details>
-  <summary>Cypress binary is missing</summary>
-  If you see error messages from `cypress` NPM module <code>Error: The cypress npm package is installed, but the Cypress binary is missing.</code> add to your repository <code>package.json</code> scripts <code>"postinstall": "cypress install"</code> command. See <a href="https://github.com/cypress-io/netlify-plugin-cypress-example/blob/master/package.json">netlify-plugin-cypress-example</a> for instance.
-</details>
-
 <details>
   <summary>Several versions of Cypress are installed according to the build logs</summary>
   From the Netlify UI under Deploys, pick "Trigger Deploy" and select "Clear cache and deploy site". This should cleanly install new "node_modules" and remove old Cypress versions.

circle.yml

@@ -35,3 +35,4 @@ workflows:
             branches:
               only:
                 - master
+                - beta

index.js

@@ -1,6 +1,7 @@
 // @ts-check
 const ecstatic = require('ecstatic')
 const http = require('http')
+const execa = require('execa')
 const debug = require('debug')('netlify-plugin-cypress')
 const debugVerbose = require('debug')('netlify-plugin-cypress:verbose')
 
@@ -27,71 +28,92 @@ async function runCypressTests (baseUrl, record, spec) {
   })
 }
 
+async function preBuild() {
+  debug('installing Cypress binary just in case')
+  if (debug.enabled) {
+    await execa('npx', ['cypress', 'install'], {stdio: 'inherit'})
+  } else {
+    await execa('npx', ['cypress', 'install'])
+  }
+}
+
+async function postBuild({ fullPublishFolder, record, spec, failBuild }) {
+  const port = 8080
+  const server = serveFolder(fullPublishFolder, port)
+  debug('local server listening on port %d', port)
+
+  const baseUrl = `http://localhost:${port}`
+
+  const results = await runCypressTests(baseUrl, record, spec)
+
+  await new Promise((resolve, reject) => {
+    server.close(err => {
+      if (err) {
+        return reject(err)
+      }
+      debug('closed local server on port %d', port)
+      resolve()
+    })
+  })
+
+  // seems Cypress TS definition does not have "failures" and "message" properties
+  if (results.failures) {
+    // Cypress failed without even running the tests
+    console.error('Problem running Cypress')
+    console.error(results.message)
+
+    return failBuild('Problem running Cypress', {
+      error: new Error(results.message)
+    })
+  }
+
+  debug('Cypress run results')
+  Object.keys(results).forEach(key => {
+    if (key.startsWith('total')) {
+      debug('%s:', key, results[key])
+    }
+  })
+
+  // results.totalFailed gives total number of failed tests
+  if (results.totalFailed) {
+    return failBuild('Failed Cypress tests', {
+      error: new Error(`${results.totalFailed} test(s) failed`)
+    })
+  }
+}
+
 module.exports = function cypressPlugin (pluginConfig) {
   debugVerbose('cypressPlugin config %o', pluginConfig)
 
   return {
     name: 'cypress netlify plugin',
+    preBuild,
     postBuild: async (arg) => {
       debugVerbose('postBuild arg %o', arg)
 
       const fullPublishFolder = arg.netlifyConfig.build.publish
       debug('folder to publish is "%s"', fullPublishFolder)
 
-      const port = 8080
-      const server = serveFolder(fullPublishFolder, port)
-      debug('local server listening on port %d', port)
-
       // only if the user wants to record the tests and has set the record key
       // then we should attempt recording
       const record =
         typeof process.env.CYPRESS_RECORD_KEY === 'string' &&
         Boolean(pluginConfig.record)
-      const baseUrl = `http://localhost:${port}`
-      const spec = pluginConfig.spec
-
-      const results = await runCypressTests(baseUrl, record, spec)
 
-      await new Promise((resolve, reject) => {
-        server.close(err => {
-          if (err) {
-            return reject(err)
-          }
-          debug('closed local server on port %d', port)
-          resolve()
-        })
-      })
+      const spec = pluginConfig.spec
 
       const exitWithError = (message, info) => {
         console.error('Exit with error: %s', message)
         throw info.error
       }
       const failBuild = arg.utils && arg.utils.build && arg.utils.build.failBuild || exitWithError
 
-      // seems Cypress TS definition does not have "failures" and "message" properties
-      if (results.failures) {
-        // Cypress failed without even running the tests
-        console.error('Problem running Cypress')
-        console.error(results.message)
-
-        return failBuild('Problem running Cypress', {
-          error: new Error(results.message)
-        })
-      }
-
-      debug('Cypress run results')
-      Object.keys(results).forEach(key => {
-        if (key.startsWith('total')) {
-          debug('%s:', key, results[key])
-        }
+      return postBuild({
+        fullPublishFolder,
+        record,
+        spec,
+        failBuild
       })
-
-      // results.totalFailed gives total number of failed tests
-      if (results.totalFailed) {
-        return failBuild('Failed Cypress tests', {
-          error: new Error(`${results.totalFailed} test(s) failed`)
-        })
-      }
     }
   }
 }