Screenshot test artifacts on CircleCI with AVA + Puppeteer

.circleci-config.yml

version: 2
jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:8.7-browsers
        environment:
          NODE_ENV: production
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-node-{{ checksum "yarn.lock" }}
            - v1-
      - run: yarn --frozen-lockfile --production=false
      - save_cache:
          key: v1-node-{{ checksum "yarn.lock" }}
          paths:
            - node_modules
      - run: mkdir -p /tmp/test-results
      - run: yarn --silent ci > /tmp/test-results/ava.xml
      - store_test_results:
          path: /tmp/test-results
      - store_artifacts:
          path: /tmp/test-results
          destination: test-results

puppeteer.js

import test from 'ava'
import puppeteer from 'puppeteer'
import devices from 'puppeteer/DeviceDescriptors'

// Create our own MacBook device
devices['MacBook Pro 12'] = {
  name: 'MacBook Pro 12',
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8',
  viewport: {
    width: 1152,
    height: 720,
    deviceScaleFactor: 2,
    isMobile: false,
    hasTouch: false,
    isLandscape: true
  }
}

export var browser = null

test.before('Launch headless Chrome using Puppeteer', async t => {
  browser = await puppeteer.launch()
})

test.after.always('Shutdown headless Chrome', t => {
  browser.close()
})

test.beforeEach(async t => {
  t.context.page = await browser.newPage()
  await t.context.page.emulate(devices['MacBook Pro 12'])
})

screenshot.js

import { ensureDir } from 'fs-extra'

export default async function screenshot (t) {
  t.context.screenshots = (t.context.screenshots || 0) + 1
  const dir = '/tmp/test-results/screenshots'
  await ensureDir(dir)
  const file = `${t.title}.${t.context.screenshots}.png`
  const path = `${dir}/${file}`
  await t.context.page.screenshot({ path: path })
  console.log(`Saved screenshot: ${file}`)
}

search.test.js

import test from 'ava'
import { baseURL } from '../helpers/nuxt'
import '../helpers/puppeteer'
import screenshot from '../helpers/screenshot'

test('Search for caserocks', async t => {
  let page = t.context.page
  let url = `${baseURL}/`
  await page.goto(url)
  await screenshot(t)
  let input = await page.$('input[name="q"]')
  await input.click()
  await page.keyboard.type('caserocks', {delay: 100})
  await screenshot(t)
  await page.waitFor('[data-result="caserocks.com"]')
  t.is(await page.title(), 'caserocks — Domainr')
})