add recipe that shows server timing (#593)

Author: bahmutov

README.md

@@ -115,6 +115,7 @@ Recipe | Description
 [Visiting 2nd domain](./examples/server-communication__visit-2nd-domain) | Visiting two different domains from two different tests
 [Stream test results](./examples/server-communication__stream-tests) | Streams each test result from the browser to the plugins to an external process via IPC
 [Offline](./examples/server-communication__offline) | Test web application when the network is offline
+[Server timing](./examples/server-communication__server-timing) | Report server timing results from Cypress test
 
 ## Other Cypress Recipes
 

circle.yml

@@ -298,6 +298,8 @@ jobs:
     <<: *defaults
   server-communication__offline:
     <<: *defaults
+  server-communication__server-timing:
+    <<: *defaults
   fundamentals__dynamic-tests:
     <<: *defaults
   fundamentals__module-api:
@@ -540,6 +542,9 @@ all_jobs: &all_jobs
   - server-communication__offline:
       requires:
         - build
+  - server-communication__server-timing:
+      requires:
+        - build
   - fundamentals__dynamic-tests:
       requires:
         - build
@@ -610,6 +615,7 @@ all_jobs: &all_jobs
         - server-communication__visit-2nd-domain
         - server-communication__stream-tests
         - server-communication__offline
+        - server-communication__server-timing
         - stubbing-spying__functions
         - stubbing-spying__window-fetch
         - stubbing-spying__intercept

examples/server-communication__server-timing/README.md

@@ -0,0 +1,30 @@
+# Server Timing
+> Show server timing results from Cypress visit
+
+Imagine the server collects its performance timings while preparing and serving the `/` page. The server can send these timings using [Server-Timing](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing) header (see [index.js](index.js)), and we can inspect these numbers from the Cypress test. See [cypress/integration/spec.js](cypress/integration/spec.js) file.
+
+We can intercept the `/` load using [cy.intercept](https://on.cypress.io/intercept) and inspect the response's headers. We have to find the `server-timing` header and parse it ourselves.
+
+![Print server timings](images/print.png)
+
+Printing to the DevTools console hides the numbers, so instead we can print them to the Command Log using [cy.log](https://on.cypress.io/log)
+
+![Log server timings](images/log.png)
+
+We can also go about server timings the other way. Instead of spying on the `/` resource, we can let the page load and then access the performance object collected by the browser automatically. For example, we can get all server timings already parsed by the browser by accessing them:
+
+```js
+window.performance.getEntriesByType('navigation')[0]serverTiming
+```
+
+Which in Cypress test can be done
+
+```js
+cy.window().its('performance')
+  .invoke('getEntriesByType', 'navigation')
+  .its('0.serverTiming')
+```
+
+We can then find the desired duration and assert it is below certain limit
+
+![Checking performance](images/limit.png)

examples/server-communication__server-timing/cypress.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": false,
+  "supportFile": false,
+  "pluginsFile": false
+}

examples/server-communication__server-timing/cypress/README.md

@@ -0,0 +1,22 @@
+# Cypress.io end-to-end tests
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold end-to-end tests and supporting files for the Cypress Test Runner.
+
+- [fixtures](fixtures) holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture)
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](http://on.cypress.io/intro)

examples/server-communication__server-timing/cypress/integration/spec.js

@@ -0,0 +1,67 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="cypress" />
+
+/* eslint-disable no-console */
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing
+// for now assume it is always something like "cache;desc="my example";dur=2002"
+const parseTiming = (singleValue) => {
+  const parts = singleValue.split(';')
+
+  return {
+    name: parts[0],
+    description: parts[1].split('"')[1],
+    duration: parseFloat(parts[2].split('=')[1]), // in ms
+  }
+}
+
+const parseServerTimings = (value) => {
+  return value.split(',')
+  .map((s) => s.trim())
+  .map(parseTiming)
+}
+
+const logTiming = (timing) => {
+  return cy.log(`**${timing.name}** ${timing.description} ${timing.duration}ms`)
+}
+
+describe('Server', () => {
+  it('reports timings', function () {
+    cy.intercept('/').as('document')
+    cy.visit('/')
+    cy.wait('@document').its('response.headers.server-timing')
+    .then(parseServerTimings)
+    .then(console.table)
+  })
+
+  it('logs timings', function () {
+    cy.intercept('/').as('document')
+    cy.visit('/')
+    cy.wait('@document').its('response.headers.server-timing')
+    .then(parseServerTimings)
+    .then((timings) => {
+      timings.forEach(logTiming)
+    })
+  })
+
+  it('reports timings using performance entry', () => {
+    cy.visit('/')
+    cy.window().its('performance')
+    .invoke('getEntriesByType', 'navigation')
+    .its('0.serverTiming.0')
+    .then(logTiming)
+
+    // we can even assert that the duration is below certain limit
+    cy.window().its('performance')
+    .invoke('getEntriesByType', 'navigation')
+    .its('0.serverTiming')
+    .then((timings) => {
+      // find the cache timing among all server timings
+      return Cypress._.find(timings, { name: 'cache' })
+    })
+    .then((cacheTiming) => {
+      expect(cacheTiming).property('duration').to.be.lessThan(2100)
+    })
+  })
+})

examples/server-communication__server-timing/images/limit.png

@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+const { send, createError } = require('micro')
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing
+const formatServerTiming = (items) => {
+  const toTiming = (item) => {
+    return `${item.name};desc="${item.description}";dur=${item.duration}`
+  }
+
+  return items.map(toTiming).join(', ')
+}
+
+module.exports = async (req, res) => {
+  if (req.url === '/favicon.ico') {
+    return send(res, 404)
+  }
+
+  if (req.url === '/') {
+    res.setHeader('Content-Type', 'text/html')
+    const value = formatServerTiming([{
+      name: 'cache',
+      description: 'my example',
+      duration: 2002,
+    }])
+
+    res.setHeader('Server-Timing', value)
+
+    return send(res, 200, '<body><h1>Hi there</h1></body>')
+  }
+
+  console.log('req "%s"', req.url)
+  throw createError(500, 'Unknown path')
+}