feat: serve HTML static pages by default (#117)

Author: bahmutov

.gitignore

@@ -1,7 +1,7 @@
 node_modules/
-cypress/screenshots
+**/cypress/screenshots
 **/cypress/videos
 build
 
 # Local Netlify folder
-.netlify
+.netlify

README.md

@@ -266,6 +266,24 @@ If you are testing the site before building it, you probably want to skip testin
 
 Running tests in parallel **is not supported** because Netlify plugin system runs on a single machine. Thus you can record the tests on Cypress Dashboard, but not run tests in parallel. If Netlify expands its build offering by allowing multiple build machines, we could take advantage of it and run tests in parallel.
 
+### HTML files
+
+When serving the built folder, we automatically serve `.html` files. For example, if your folder has the following structure:
+
+```
+public/
+  index.html
+  pages/
+    about.html
+```
+
+The `public` folder is served automatically and the following test successfully visits both the root and the `about.html` pages:
+
+```js
+cy.visit('/')
+cy.visit('/pages/about') // visits the about.html
+```
+
 ## Example repos
 
 Name | Description
@@ -307,6 +325,11 @@ Set environment variable `DEBUG=netlify-plugin-cypress` to see the debug logs. T
   Cypress run, add an environment variable <code>TERM = xterm</code>.
 </details>
 
+<details>
+  <summary>Electron browser crashes while running tests</summary>
+  Switch to using Chromium browser that seems to be a bit more reliable. Use <code>browser = "chromium"</code> setting.
+</details>
+
 ## License
 
 This project is licensed under the terms of the [MIT license](LICENSE.md).

circle.yml

@@ -115,6 +115,19 @@ jobs:
           environment:
             DEBUG: netlify-plugin-cypress
 
+  'html-pages':
+    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/html-pages
+          environment:
+            DEBUG: netlify-plugin-cypress
+
   routing:
     executor: cypress/base-12-14-0
     steps:
@@ -137,6 +150,9 @@ workflows:
       - 'basic test':
           requires:
             - cypress/install
+      - 'html-pages':
+          requires:
+            - cypress/install
       - 'recommended test':
           requires:
             - cypress/install
@@ -162,6 +178,7 @@ workflows:
           requires:
             - build
             - 'basic test'
+            - 'html-pages'
             - 'recommended test'
             - 'recording test'
             - 'test-twice'

src/index.js

@@ -1,46 +1,10 @@
 // @ts-check
-const LocalWebServer = require('local-web-server')
 const debug = require('debug')('netlify-plugin-cypress')
 const debugVerbose = require('debug')('netlify-plugin-cypress:verbose')
-const { ping, getBrowserPath } = require('./utils')
-const fs = require('fs')
+const { ping, getBrowserPath, serveFolder } = require('./utils')
 
 const DEFAULT_BROWSER = 'electron'
 
-function serveFolder(directory, port, spa) {
-  if (typeof spa === 'boolean') {
-    if (spa) {
-      // spa parameter should be the name of the
-      // fallback file in the directory to serve
-      // typically it is "index.html"
-      spa = 'index.html'
-    } else {
-      // do not use fallback mechanism for routing
-      spa = undefined
-    }
-  }
-  debug(
-    'serving local folder %o from working directory %s',
-    {
-      directory,
-      port,
-      spa,
-    },
-    process.cwd(),
-  )
-
-  if (!fs.existsSync(directory)) {
-    throw new Error(`Cannot find folder "${directory}" to serve`)
-  }
-
-  return LocalWebServer.create({
-    // @ts-ignore
-    directory,
-    port,
-    spa,
-  }).server
-}
-
 function startServerMaybe(run, options = {}) {
   const startCommand = options.start
   if (!startCommand) {

src/serve-cli.js

@@ -0,0 +1,4 @@
+// a little utility to debug our static file server
+const { serveFolder } = require('./utils')
+
+serveFolder('./public', '8080', false)

src/utils.js

@@ -1,6 +1,8 @@
 // @ts-check
 const puppeteer = require('puppeteer')
 const debug = require('debug')('netlify-plugin-cypress')
+const LocalWebServer = require('local-web-server')
+const fs = require('fs')
 const { ping } = require('./ping')
 
 const getBrowserPath = async () => {
@@ -15,7 +17,52 @@ const getBrowserPath = async () => {
   return info.executablePath
 }
 
+/**
+ * Servers local folder
+ * @see https://github.com/lwsjs/local-web-server
+ * @param {string} directory
+ * @param {number} port
+ * @param {boolean|'index.html'} spa
+ */
+function serveFolder(directory, port, spa) {
+  if (typeof spa === 'boolean') {
+    if (spa) {
+      // spa parameter should be the name of the
+      // fallback file in the directory to serve
+      // typically it is "index.html"
+      spa = 'index.html'
+    } else {
+      // do not use fallback mechanism for routing
+      spa = undefined
+    }
+  }
+  debug(
+    'serving local folder %o from working directory %s',
+    {
+      directory,
+      port,
+      spa,
+    },
+    process.cwd(),
+  )
+
+  if (!fs.existsSync(directory)) {
+    throw new Error(`Cannot find folder "${directory}" to serve`)
+  }
+
+  return LocalWebServer.create({
+    // @ts-ignore
+    directory,
+    port,
+    spa,
+    // to debug use
+    // DEBUG=koa-send
+    staticExtensions: ['html'],
+  }).server
+}
+
 module.exports = {
   ping,
   getBrowserPath,
+  serveFolder,
 }

tests/html-pages/README.md

@@ -0,0 +1,11 @@
+# HTML pages
+
+See [#116](https://github.com/cypress-io/netlify-plugin-cypress/issues/116)
+
+In this example the public folder has both `index.html` and pages like `public/commands/about.html` which we want to visit using `cy.visit('/commands/about')` without using `.html` extension
+
+Test locally with
+
+```
+$ DEBUG=netlify-plugin-cypress ../../node_modules/.bin/netlify build
+```

tests/html-pages/cypress.json

@@ -0,0 +1,5 @@
+{
+  "pluginsFile": false,
+  "supportFile": false,
+  "fixturesFolder": false
+}

tests/html-pages/cypress/integration/spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+describe('html-pages', () => {
+  it('loads the index page', () => {
+    cy.visit('/')
+    cy.contains('Index page')
+  })
+
+  it('loads the about page', () => {
+    cy.visit('/commands/about')
+    cy.contains('About')
+  })
+})

tests/html-pages/netlify.toml

@@ -0,0 +1,8 @@
+[build]
+command = "echo 'Netlify build command ...'"
+publish = "public"
+
+[[plugins]]
+  # local Cypress plugin will test our site after it is built
+  # in production, please use: package = "netlify-plugin-cypress"
+  package = "../../"