From a1fe2ca632d6fbc3580e1c53e34bed2812f1cfe2 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Sat, 1 Oct 2022 21:42:08 +0100
Subject: [PATCH 1/9] Ensure `renderAndInitialise()` uses scoped page object

---
 lib/puppeteer-helpers.js                      | 28 +++++++++++++---
 src/govuk/components/button/button.test.js    | 21 ++++--------
 .../character-count/character-count.test.js   | 33 ++++++++-----------
 .../error-summary/error-summary.test.js       | 15 ++-------
 .../notification-banner.test.js               | 21 +++---------
 5 files changed, 50 insertions(+), 68 deletions(-)

diff --git a/lib/puppeteer-helpers.js b/lib/puppeteer-helpers.js
index b99bfab2f8..abf8520ba4 100644
--- a/lib/puppeteer-helpers.js
+++ b/lib/puppeteer-helpers.js
@@ -1,6 +1,9 @@
 const { componentNameToJavaScriptClassName } = require('./helper-functions.js')
 const { renderHtml } = require('./jest-helpers.js')
 
+const configPaths = require('../config/paths.js')
+const PORT = configPaths.ports.test
+
 /**
  * Render and initialise a component within test boilerplate HTML
  *
@@ -13,9 +16,9 @@ const { renderHtml } = require('./jest-helpers.js')
  *   (which lets you instantiate it a different way, like using `initAll`,
  *   or run arbitrary code)
  *
+ * @param {import('puppeteer').Page} page - Puppeteer page object
  * @param {String} componentName - The kebab-cased name of the component
  * @param {Object} options
- * @param {String} options.baseUrl - The base URL of the test server
  * @param {Object} options.nunjucksParams - Params passed to the Nunjucks macro
  * @param {Object} [options.javascriptConfig] - The configuration hash passed to
  *  the component's class for initialisation
@@ -23,10 +26,10 @@ const { renderHtml } = require('./jest-helpers.js')
  *  browser to execute arbitrary initialisation. Receives an object with the
  *  passed configuration as `config` and the PascalCased component name as
  *  `componentClassName`
- * @returns {Promise<import('puppeteer').Page>}
+ * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
-async function renderAndInitialise (componentName, options = {}) {
-  await page.goto(`${options.baseUrl}/tests/boilerplate`, { waitUntil: 'load' })
+async function renderAndInitialise (page, componentName, options = {}) {
+  await goTo(page, '/tests/boilerplate')
 
   const html = renderHtml(componentName, options.nunjucksParams)
 
@@ -51,6 +54,21 @@ async function renderAndInitialise (componentName, options = {}) {
   return page
 }
 
+/**
+ * Navigate to path
+ *
+ * @param {import('puppeteer').Page} page - Puppeteer page object
+ * @param {URL['pathname']} path - URL path
+ * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
+ */
+async function goTo (page, path) {
+  await page.goto(`http://localhost:${PORT}${path}`, { waitUntil: 'load' })
+  await page.bringToFront()
+
+  return page
+}
+
 module.exports = {
-  renderAndInitialise
+  renderAndInitialise,
+  goTo
 }
diff --git a/src/govuk/components/button/button.test.js b/src/govuk/components/button/button.test.js
index c0ebf4a5dd..548d27eccb 100644
--- a/src/govuk/components/button/button.test.js
+++ b/src/govuk/components/button/button.test.js
@@ -174,12 +174,8 @@ describe('/components/button', () => {
     })
 
     describe('using JavaScript configuration', () => {
-      let page
-
-      // To ensure
       beforeEach(async () => {
-        page = await renderAndInitialise('button', {
-          baseUrl,
+        await renderAndInitialise(page, 'button', {
           nunjucksParams: examples.default,
           javascriptConfig: {
             preventDoubleClick: true
@@ -226,11 +222,8 @@ describe('/components/button', () => {
     })
 
     describe('using JavaScript configuration, but cancelled by data-attributes', () => {
-      let page
-
-      it('does not prevent multiple submissions', async () => {
-        page = await renderAndInitialise('button', {
-          baseUrl,
+      beforeEach(async () => {
+        await renderAndInitialise(page, 'button', {
           nunjucksParams: examples["don't prevent double click"],
           javascriptConfig: {
             preventDoubleClick: true
@@ -238,7 +231,9 @@ describe('/components/button', () => {
         })
 
         await trackClicks(page)
+      })
 
+      it('does not prevent multiple submissions', async () => {
         await page.click('button')
         await page.click('button')
 
@@ -249,12 +244,8 @@ describe('/components/button', () => {
     })
 
     describe('using `initAll`', () => {
-      let page
-
-      // To ensure
       beforeEach(async () => {
-        page = await renderAndInitialise('button', {
-          baseUrl,
+        await renderAndInitialise(page, 'button', {
           nunjucksParams: examples.default,
           initialiser () {
             window.GOVUKFrontend.initAll({
diff --git a/src/govuk/components/character-count/character-count.test.js b/src/govuk/components/character-count/character-count.test.js
index 5f6c858bbb..7ff0340246 100644
--- a/src/govuk/components/character-count/character-count.test.js
+++ b/src/govuk/components/character-count/character-count.test.js
@@ -334,8 +334,7 @@ describe('Character count', () => {
 
       describe('at instantiation', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             javascriptConfig: {
               maxlength: 10
@@ -350,9 +349,9 @@ describe('Character count', () => {
           )
           expect(message).toEqual('You have 1 character too many')
         })
+
         it('configures the number of words', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             javascriptConfig: {
               maxwords: 10
@@ -367,9 +366,9 @@ describe('Character count', () => {
           )
           expect(message).toEqual('You have 1 word too many')
         })
+
         it('configures the threshold', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             javascriptConfig: {
               maxlength: 10,
@@ -386,8 +385,7 @@ describe('Character count', () => {
 
       describe('via `initAll`', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             initialiser () {
               window.GOVUKFrontend.initAll({
@@ -408,8 +406,7 @@ describe('Character count', () => {
         })
 
         it('configures the number of words', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             initialiser () {
               window.GOVUKFrontend.initAll({
@@ -428,9 +425,9 @@ describe('Character count', () => {
           )
           expect(message).toEqual('You have 1 word too many')
         })
+
         it('configures the threshold', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['to configure in JavaScript'],
             initialiser () {
               window.GOVUKFrontend.initAll({
@@ -454,8 +451,7 @@ describe('Character count', () => {
 
       describe('when data-attributes are present', () => {
         it('uses `maxlength` data attribute instead of the JS one', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples.default,
             javascriptConfig: {
               maxlength: 12 // JS configuration that would tell 1 character remaining
@@ -472,8 +468,7 @@ describe('Character count', () => {
         })
 
         it("uses `maxlength` data attribute instead of JS's `maxwords`", async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples.default, // Default example counts characters
             javascriptConfig: {
               maxwords: 12
@@ -490,8 +485,7 @@ describe('Character count', () => {
         })
 
         it('uses `maxwords` data attribute instead of the JS one', async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['with word count'],
             javascriptConfig: {
               maxwords: 12 // JS configuration that would tell 1 word remaining
@@ -508,8 +502,7 @@ describe('Character count', () => {
         })
 
         it("uses `maxwords` data attribute instead of the JS's `maxlength`", async () => {
-          await renderAndInitialise('character-count', {
-            baseUrl,
+          await renderAndInitialise(page, 'character-count', {
             nunjucksParams: examples['with word count'],
             javascriptConfig: {
               maxlength: 10
diff --git a/src/govuk/components/error-summary/error-summary.test.js b/src/govuk/components/error-summary/error-summary.test.js
index b58c946233..a611b4faca 100644
--- a/src/govuk/components/error-summary/error-summary.test.js
+++ b/src/govuk/components/error-summary/error-summary.test.js
@@ -63,11 +63,8 @@ describe('Error Summary', () => {
     })
 
     describe('using JavaScript configuration', () => {
-      let page
-
       beforeAll(async () => {
-        page = await renderAndInitialise('error-summary', {
-          baseUrl,
+        await renderAndInitialise(page, 'error-summary', {
           nunjucksParams: examples.default,
           javascriptConfig: {
             disableAutoFocus: true
@@ -108,11 +105,8 @@ describe('Error Summary', () => {
     })
 
     describe('using JavaScript configuration, but enabled via data-attributes', () => {
-      let page
-
       beforeAll(async () => {
-        page = await renderAndInitialise('error-summary', {
-          baseUrl,
+        await renderAndInitialise(page, 'error-summary', {
           nunjucksParams: examples['autofocus explicitly enabled']
         })
       })
@@ -133,11 +127,8 @@ describe('Error Summary', () => {
     })
 
     describe('using `initAll`', () => {
-      let page
-
       beforeAll(async () => {
-        page = await renderAndInitialise('error-summary', {
-          baseUrl,
+        await renderAndInitialise(page, 'error-summary', {
           nunjucksParams: examples.default,
           initialiser () {
             window.GOVUKFrontend.initAll({
diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js
index 01521db528..77fa9d1663 100644
--- a/src/govuk/components/notification-banner/notification-banner.test.js
+++ b/src/govuk/components/notification-banner/notification-banner.test.js
@@ -57,13 +57,9 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   describe('and auto-focus is disabled using JavaScript configuration', () => {
-    let page
-
     beforeAll(async () => {
-      page = await renderAndInitialise('notification-banner', {
-        baseUrl,
-        nunjucksParams:
-          examples['with type as success'],
+      await renderAndInitialise(page, 'notification-banner', {
+        nunjucksParams: examples['with type as success'],
         javascriptConfig: {
           disableAutoFocus: true
         }
@@ -84,13 +80,9 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   describe('and auto-focus is disabled using options passed to initAll', () => {
-    let page
-
     beforeAll(async () => {
-      page = await renderAndInitialise('notification-banner', {
-        baseUrl,
-        nunjucksParams:
-          examples['with type as success'],
+      await renderAndInitialise(page, 'notification-banner', {
+        nunjucksParams: examples['with type as success'],
         initialiser () {
           window.GOVUKFrontend.initAll({
             notificationBanner: {
@@ -115,11 +107,8 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   describe('and autofocus is disabled in JS but enabled in data attributes', () => {
-    let page
-
     beforeAll(async () => {
-      page = await renderAndInitialise('notification-banner', {
-        baseUrl,
+      await renderAndInitialise(page, 'notification-banner', {
         nunjucksParams: examples['auto-focus explicitly enabled, with type as success'],
         javascriptConfig: {
           disableAutoFocus: true

From 7d825d4663de17fd136f81b44be9411c980356c2 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 14:56:03 +0100
Subject: [PATCH 2/9] Add new `goTo()` and `goToComponent()` helpers

---
 lib/puppeteer-helpers.js                      | 24 +++++-
 src/govuk/all.test.js                         | 13 +--
 .../components/accordion/accordion.test.js    | 70 ++++++++++------
 src/govuk/components/button/button.test.js    | 62 ++++----------
 .../character-count/character-count.test.js   | 83 +++++++++++--------
 .../components/checkboxes/checkboxes.test.js  | 69 ++++++++++-----
 src/govuk/components/details/details.test.js  |  5 +-
 .../error-summary/error-summary.test.js       | 18 ++--
 src/govuk/components/header/header.test.js    | 33 ++++----
 .../notification-banner.test.js               | 41 +++++----
 src/govuk/components/radios/radios.test.js    | 53 ++++++++----
 src/govuk/components/tabs/tabs.test.js        | 47 ++++++-----
 12 files changed, 299 insertions(+), 219 deletions(-)

diff --git a/lib/puppeteer-helpers.js b/lib/puppeteer-helpers.js
index abf8520ba4..3c00751bae 100644
--- a/lib/puppeteer-helpers.js
+++ b/lib/puppeteer-helpers.js
@@ -62,13 +62,31 @@ async function renderAndInitialise (page, componentName, options = {}) {
  * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
  */
 async function goTo (page, path) {
-  await page.goto(`http://localhost:${PORT}${path}`, { waitUntil: 'load' })
-  await page.bringToFront()
+  const { href } = new URL(path, `http://localhost:${PORT}`)
 
+  await page.goto(href)
   return page
 }
 
+/**
+ * Navigate to component preview page
+ *
+ * @param {import('puppeteer').Page} page - Puppeteer page object
+ * @param {string} componentName - Component name
+ * @param {object} [options] - Component options
+ * @param {string} options.exampleName - Example name
+ * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
+ */
+function goToComponent (page, componentName, { exampleName } = {}) {
+  const componentPath = exampleName
+    ? `/components/${componentName}/${exampleName}/preview`
+    : `/components/${componentName}/preview`
+
+  return goTo(page, componentPath)
+}
+
 module.exports = {
   renderAndInitialise,
-  goTo
+  goTo,
+  goToComponent
 }
diff --git a/src/govuk/all.test.js b/src/govuk/all.test.js
index dc9ce9530a..dc3e3ea076 100644
--- a/src/govuk/all.test.js
+++ b/src/govuk/all.test.js
@@ -4,11 +4,12 @@
 
 const sassdoc = require('sassdoc')
 
+const { renderSass } = require('../../lib/jest-helpers')
+const { goTo } = require('../../lib/puppeteer-helpers')
+
 const configPaths = require('../../config/paths.js')
 const PORT = configPaths.ports.test
 
-const { renderSass } = require('../../lib/jest-helpers')
-
 const baseUrl = 'http://localhost:' + PORT
 
 beforeAll(() => {
@@ -24,21 +25,21 @@ beforeAll(() => {
 describe('GOV.UK Frontend', () => {
   describe('javascript', () => {
     it('can be accessed via `GOVUKFrontend`', async () => {
-      await page.goto(baseUrl + '/', { waitUntil: 'load' })
+      await goTo(page, '/')
 
       const GOVUKFrontendGlobal = await page.evaluate(() => window.GOVUKFrontend)
 
       expect(typeof GOVUKFrontendGlobal).toBe('object')
     })
     it('exports `initAll` function', async () => {
-      await page.goto(baseUrl + '/', { waitUntil: 'load' })
+      await goTo(page, '/')
 
       const typeofInitAll = await page.evaluate(() => typeof window.GOVUKFrontend.initAll)
 
       expect(typeofInitAll).toEqual('function')
     })
     it('exports Components', async () => {
-      await page.goto(baseUrl + '/', { waitUntil: 'load' })
+      await goTo(page, '/')
 
       const GOVUKFrontendGlobal = await page.evaluate(() => window.GOVUKFrontend)
 
@@ -60,7 +61,7 @@ describe('GOV.UK Frontend', () => {
       ])
     })
     it('exported Components have an init function', async () => {
-      await page.goto(baseUrl + '/', { waitUntil: 'load' })
+      await goTo(page, '/')
 
       var componentsWithoutInitFunctions = await page.evaluate(() => {
         var components = Object.keys(window.GOVUKFrontend)
diff --git a/src/govuk/components/accordion/accordion.test.js b/src/govuk/components/accordion/accordion.test.js
index 29ff7533de..1a56209905 100644
--- a/src/govuk/components/accordion/accordion.test.js
+++ b/src/govuk/components/accordion/accordion.test.js
@@ -2,6 +2,8 @@
  * @jest-environment puppeteer
  */
 
+const { goToComponent } = require('../../../../lib/puppeteer-helpers')
+
 const configPaths = require('../../../../config/paths.js')
 const PORT = configPaths.ports.test
 
@@ -19,7 +21,7 @@ describe('/components/accordion', () => {
       })
 
       it('falls back to making all accordion sections visible', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const numberOfExampleSections = 2
 
@@ -32,7 +34,7 @@ describe('/components/accordion', () => {
       })
 
       it('does not display "↓/↑" in the section headings', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const numberOfIcons = await page.evaluate(() => document.body.querySelectorAll('.govuk-accordion .govuk-accordion__section .govuk-accordion-nav__chevron').length)
         expect(numberOfIcons).toEqual(0)
@@ -46,7 +48,7 @@ describe('/components/accordion', () => {
       })
 
       it('should indicate that the sections are not expanded', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const numberOfExampleSections = 2
 
@@ -60,7 +62,7 @@ describe('/components/accordion', () => {
       })
 
       it('should change the Show all sections button to Hide all sections when both sections are opened', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
         await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(3) .govuk-accordion__section-header')
@@ -72,7 +74,7 @@ describe('/components/accordion', () => {
       })
 
       it('should open both sections when the Show all sections button is clicked', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         await page.click('.govuk-accordion__show-all')
 
@@ -86,7 +88,9 @@ describe('/components/accordion', () => {
       })
 
       it('should already have all sections open if they have the expanded class', async () => {
-        await page.goto(baseUrl + '/components/accordion/with-all-sections-already-open/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion', {
+          exampleName: 'with-all-sections-already-open'
+        })
 
         const numberOfExampleSections = 2
 
@@ -106,7 +110,7 @@ describe('/components/accordion', () => {
       it('should maintain the expanded state after a page refresh', async () => {
         const sectionHeaderButton = '.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-button'
 
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
         await page.click(sectionHeaderButton)
 
         const expandedState = await page.evaluate((sectionHeaderButton) => {
@@ -125,7 +129,7 @@ describe('/components/accordion', () => {
       })
 
       it('should transform the button span to <button>', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const buttonTag = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section-button').tagName)
 
@@ -133,7 +137,7 @@ describe('/components/accordion', () => {
       })
 
       it('should contain a heading text container', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const headingTextContainer = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section-button > .govuk-accordion__section-heading-text'))
 
@@ -142,21 +146,23 @@ describe('/components/accordion', () => {
 
       describe('focus containers', () => {
         it('should contain a heading text focus container', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const headingTextFocusContainer = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section-button .govuk-accordion__section-heading-text > .govuk-accordion__section-heading-text-focus'))
 
           expect(headingTextFocusContainer).toBeTruthy()
         })
         it('should contain a summary focus container', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-additional-descriptions/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-additional-descriptions'
+          })
 
           const summaryFocusContainer = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section-button > .govuk-accordion__section-summary > .govuk-accordion__section-summary-focus'))
 
           expect(summaryFocusContainer).toBeTruthy()
         })
         it('should contain a show/hide focus container', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const headingTextFocusContainer = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section-button .govuk-accordion__section-toggle > .govuk-accordion__section-toggle-focus'))
 
@@ -166,7 +172,7 @@ describe('/components/accordion', () => {
 
       describe('"↓/↑" icon', () => {
         it('should display "↓/↑" in the section headings', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const numberOfExampleSections = 2
           const numberOfIcons = await page.evaluate(() => document.body.querySelectorAll('.govuk-accordion .govuk-accordion__section .govuk-accordion-nav__chevron').length)
@@ -177,7 +183,7 @@ describe('/components/accordion', () => {
 
       describe('hidden comma', () => {
         it('should contain hidden comma " ," after the heading text for assistive technology', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const commaAfterHeadingTextClassName = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-heading-text').nextElementSibling.className)
 
@@ -189,7 +195,9 @@ describe('/components/accordion', () => {
         })
 
         it('should contain hidden comma " ," after the summary line for assistive technology', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-additional-descriptions/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-additional-descriptions'
+          })
 
           const commaAfterHeadingTextClassName = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-summary').nextElementSibling.className)
 
@@ -204,7 +212,9 @@ describe('/components/accordion', () => {
       describe('summary line', () => {
         describe('location of summary', () => {
           it('should move the additional description to the button text in the correct order', async () => {
-            await page.goto(baseUrl + '/components/accordion/with-additional-descriptions/preview', { waitUntil: 'load' })
+            await goToComponent(page, 'accordion', {
+              exampleName: 'with-additional-descriptions'
+            })
 
             const summaryClass = 'govuk-accordion__section-summary govuk-body'
             const firstSummaryElement = await page.evaluate(() => document.body.querySelectorAll('.govuk-accordion__section-button > span')[2].className)
@@ -214,7 +224,9 @@ describe('/components/accordion', () => {
 
         describe('div to span', () => {
           it('should have converted the div to a span tag', async () => {
-            await page.goto(baseUrl + '/components/accordion/with-additional-descriptions/preview', { waitUntil: 'load' })
+            await goToComponent(page, 'accordion', {
+              exampleName: 'with-additional-descriptions'
+            })
 
             const firstSummaryElement = await page.evaluate(() => document.body.querySelector('.govuk-accordion .govuk-accordion__section .govuk-accordion__section-summary').outerHTML)
 
@@ -224,7 +236,7 @@ describe('/components/accordion', () => {
       })
 
       it('should change the (combined) Show[ this section] text to Hide[ this section ] when sections are opened', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
         await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
         await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(3) .govuk-accordion__section-header')
 
@@ -234,7 +246,7 @@ describe('/components/accordion', () => {
       })
 
       it('should have a data-nosnippet attribute on the "Show / hide this section" container to hide it from search result snippets', async () => {
-        await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'accordion')
 
         const dataNoSnippetAttribute = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle').getAttribute('data-nosnippet'))
 
@@ -243,7 +255,7 @@ describe('/components/accordion', () => {
 
       describe('hidden text', () => {
         it('should contain hidden text " this section" for assistive technology', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const numberOfExampleSections = 2
           const hiddenText = await page.evaluate(() => document.body.querySelectorAll('.govuk-accordion .govuk-accordion__section .govuk-accordion__section-toggle-text .govuk-visually-hidden').length)
@@ -254,7 +266,7 @@ describe('/components/accordion', () => {
 
       describe('expandable content', () => {
         it('should have an aria-labelledby that matches the heading text ID', async () => {
-          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion')
 
           const ariaLabelledByValue = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-content').getAttribute('aria-labelledby'))
 
@@ -266,7 +278,9 @@ describe('/components/accordion', () => {
 
       describe('localisation', () => {
         it('should localise "Show all sections" based on data attribute', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
 
           const showAllSectionsDataAttribute = await page.evaluate(() => document.body.querySelector('.govuk-accordion').getAttribute('data-i18n.show-all-sections'))
           const allSectionsToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__show-all-text').innerHTML)
@@ -283,7 +297,9 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Hide all sections" based on data attribute', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(3) .govuk-accordion__section-header')
 
@@ -303,7 +319,9 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Show section" based on data attribute', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
 
           const showSectionDataAttribute = await page.evaluate(() => document.body.querySelector('.govuk-accordion').getAttribute('data-i18n.show-section'))
           const firstSectionToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle-text').innerHTML)
@@ -320,7 +338,9 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Hide section" based on data attribute', async () => {
-          await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
+          await goToComponent(page, 'accordion', {
+            exampleName: 'with-translations'
+          })
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
 
           const hideSectionDataAttribute = await page.evaluate(() => document.body.querySelector('.govuk-accordion').getAttribute('data-i18n.hide-section'))
diff --git a/src/govuk/components/button/button.test.js b/src/govuk/components/button/button.test.js
index 548d27eccb..604faec57a 100644
--- a/src/govuk/components/button/button.test.js
+++ b/src/govuk/components/button/button.test.js
@@ -3,19 +3,14 @@
  */
 
 const { getExamples } = require('../../../../lib/jest-helpers')
-const { renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
+const { goTo, goToComponent, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
 
 const examples = getExamples('button')
 
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
-
 describe('/components/button', () => {
   describe('mis-instantiation', () => {
     it('does not prevent further JavaScript from running', async () => {
-      await page.goto(`${baseUrl}/tests/boilerplate`, { waitUntil: 'load' })
+      await goTo(page, '/tests/boilerplate')
 
       const result = await page.evaluate(() => {
         // `undefined` simulates the element being missing,
@@ -31,10 +26,14 @@ describe('/components/button', () => {
   })
 
   describe('/components/button/link', () => {
-    it('triggers the click event when the space key is pressed', async () => {
-      await page.goto(baseUrl + '/components/button/link/preview', { waitUntil: 'load' })
+    beforeAll(async () => {
+      await goToComponent(page, 'button', {
+        exampleName: 'link'
+      })
+    })
 
-      const href = await page.evaluate(() => document.body.getElementsByTagName('a')[0].getAttribute('href'))
+    it('triggers the click event when the space key is pressed', async () => {
+      const pathname = await page.evaluate(() => document.body.getElementsByTagName('a')[0].getAttribute('href'))
 
       await page.focus('a[role="button"]')
 
@@ -46,8 +45,8 @@ describe('/components/button', () => {
         page.keyboard.press('Space')
       ])
 
-      const url = await page.url()
-      expect(url).toBe(baseUrl + href)
+      const url = new URL(await page.url())
+      expect(url.pathname).toBe(pathname)
     })
   })
 
@@ -87,19 +86,12 @@ describe('/components/button', () => {
     }
 
     describe('not enabled', () => {
-      let page
-
       beforeEach(async () => {
-        page = await browser.newPage()
+        await goToComponent(page, 'button')
+        await trackClicks(page)
       })
 
       it('does not prevent multiple submissions', async () => {
-        await page.goto(baseUrl + '/components/button/preview', {
-          waitUntil: 'load'
-        })
-
-        await trackClicks(page)
-
         await page.click('button')
         await page.click('button')
 
@@ -110,20 +102,14 @@ describe('/components/button', () => {
     })
 
     describe('using data-attributes', () => {
-      let page
-
       beforeEach(async () => {
-        page = await browser.newPage()
+        await goToComponent(page, 'button', {
+          exampleName: 'prevent-double-click'
+        })
+        await trackClicks(page)
       })
 
       it('prevents unintentional submissions when in a form', async () => {
-        await page.goto(
-          baseUrl + '/components/button/prevent-double-click/preview',
-          { waitUntil: 'load' }
-        )
-
-        await trackClicks(page)
-
         await page.click('button')
         await page.click('button')
 
@@ -133,13 +119,6 @@ describe('/components/button', () => {
       })
 
       it('does not prevent intentional multiple clicks', async () => {
-        await page.goto(
-          baseUrl + '/components/button/prevent-double-click/preview',
-          { waitUntil: 'load' }
-        )
-
-        await trackClicks(page)
-
         await page.click('button')
         await page.click('button', { delay: 1000 })
 
@@ -149,13 +128,6 @@ describe('/components/button', () => {
       })
 
       it('does not prevent subsequent clicks on different buttons', async () => {
-        await page.goto(
-          baseUrl + '/components/button/prevent-double-click/preview',
-          { waitUntil: 'load' }
-        )
-
-        await trackClicks(page)
-
         // Clone button to have two buttons on the page
         await page.evaluate(() => {
           const $button = document.querySelector('button')
diff --git a/src/govuk/components/character-count/character-count.test.js b/src/govuk/components/character-count/character-count.test.js
index 7ff0340246..e887aa6c13 100644
--- a/src/govuk/components/character-count/character-count.test.js
+++ b/src/govuk/components/character-count/character-count.test.js
@@ -3,25 +3,12 @@
  */
 
 const { getExamples } = require('../../../../lib/jest-helpers.js')
-const { renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
-
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = `http://localhost:${PORT}`
+const { goToComponent, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
 
 // The longest possible time from a keyboard user ending input and the screen
 // reader counter being updated: handleFocus interval time + last input wait time
 const debouncedWaitTime = 1500
 
-const goToExample = (exampleName = false) => {
-  const url = exampleName
-    ? `${baseUrl}/components/character-count/${exampleName}/preview`
-    : `${baseUrl}/components/character-count/preview`
-
-  return page.goto(url, { waitUntil: 'load' })
-}
-
 describe('Character count', () => {
   describe('when JavaScript is unavailable or fails', () => {
     beforeAll(async () => {
@@ -33,7 +20,7 @@ describe('Character count', () => {
     })
 
     it('shows the fallback message', async () => {
-      await goToExample()
+      await goToComponent(page, 'character-count')
       const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
       expect(message).toEqual('You can enter up to 10 characters')
@@ -43,7 +30,7 @@ describe('Character count', () => {
   describe('when JavaScript is available', () => {
     describe('on page load', () => {
       beforeAll(async () => {
-        await goToExample()
+        await goToComponent(page, 'character-count')
       })
 
       it('injects the visual counter', async () => {
@@ -64,7 +51,7 @@ describe('Character count', () => {
 
     describe('when counting characters', () => {
       it('shows the dynamic message', async () => {
-        await goToExample()
+        await goToComponent(page, 'character-count')
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 10 characters remaining')
@@ -74,7 +61,9 @@ describe('Character count', () => {
       })
 
       it('shows the characters remaining if the field is pre-filled', async () => {
-        await goToExample('with-default-value')
+        await goToComponent(page, 'character-count', {
+          exampleName: 'with-default-value'
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 67 characters remaining')
@@ -84,7 +73,7 @@ describe('Character count', () => {
       })
 
       it('counts down to the character limit', async () => {
-        await goToExample()
+        await goToComponent(page, 'character-count')
         await page.type('.govuk-js-character-count', 'A')
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
@@ -98,7 +87,7 @@ describe('Character count', () => {
       })
 
       it('uses the singular when there is only one character remaining', async () => {
-        await goToExample()
+        await goToComponent(page, 'character-count')
         await page.type('.govuk-js-character-count', 'A'.repeat(9))
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
@@ -113,7 +102,7 @@ describe('Character count', () => {
 
       describe('when the character limit is exceeded', () => {
         beforeAll(async () => {
-          await goToExample()
+          await goToComponent(page, 'character-count')
           await page.type('.govuk-js-character-count', 'A'.repeat(11))
         })
 
@@ -154,7 +143,9 @@ describe('Character count', () => {
 
       describe('when the character limit is exceeded on page load', () => {
         beforeAll(async () => {
-          await goToExample('with-default-value-exceeding-limit')
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-default-value-exceeding-limit'
+          })
         })
 
         it('shows the number of characters over the limit', async () => {
@@ -178,7 +169,9 @@ describe('Character count', () => {
 
       describe('when a threshold is set', () => {
         beforeAll(async () => {
-          await goToExample('with-threshold')
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-threshold'
+          })
         })
 
         it('does not show the limit until the threshold is reached', async () => {
@@ -210,9 +203,13 @@ describe('Character count', () => {
 
       // Errors logged to the console will cause these tests to fail
       describe('when the textarea ID starts with a number', () => {
-        it('still works correctly', async () => {
-          await goToExample('with-id-starting-with-number')
+        beforeAll(async () => {
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-id-starting-with-number'
+          })
+        })
 
+        it('still works correctly', async () => {
           const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
           expect(message).toEqual('You have 10 characters remaining')
 
@@ -222,9 +219,13 @@ describe('Character count', () => {
       })
 
       describe('when the textarea ID contains CSS syntax characters', () => {
-        it('still works correctly', async () => {
-          await goToExample('with-id-with-special-characters')
+        beforeAll(async () => {
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-id-with-special-characters'
+          })
+        })
 
+        it('still works correctly', async () => {
           const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
           expect(message).toEqual('You have 10 characters remaining')
 
@@ -235,7 +236,9 @@ describe('Character count', () => {
 
       describe('when a maxlength attribute is specified on the textarea', () => {
         beforeAll(async () => {
-          await goToExample('with-textarea-maxlength-attribute')
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-textarea-maxlength-attribute'
+          })
         })
 
         it('should not have a maxlength attribute once the JS has run', async () => {
@@ -247,7 +250,9 @@ describe('Character count', () => {
 
     describe('when counting words', () => {
       it('shows the dynamic message', async () => {
-        await goToExample('with-word-count')
+        await goToComponent(page, 'character-count', {
+          exampleName: 'with-word-count'
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 10 words remaining')
@@ -257,7 +262,9 @@ describe('Character count', () => {
       })
 
       it('counts down to the word limit', async () => {
-        await goToExample('with-word-count')
+        await goToComponent(page, 'character-count', {
+          exampleName: 'with-word-count'
+        })
         await page.type('.govuk-js-character-count', 'Hello world')
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
@@ -271,7 +278,9 @@ describe('Character count', () => {
       })
 
       it('uses the singular when there is only one word remaining', async () => {
-        await goToExample('with-word-count')
+        await goToComponent(page, 'character-count', {
+          exampleName: 'with-word-count'
+        })
         await page.type('.govuk-js-character-count', 'Hello '.repeat(9))
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
@@ -286,7 +295,9 @@ describe('Character count', () => {
 
       describe('when the word limit is exceeded', () => {
         beforeAll(async () => {
-          await goToExample('with-word-count')
+          await goToComponent(page, 'character-count', {
+            exampleName: 'with-word-count'
+          })
           await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
         })
 
@@ -522,10 +533,14 @@ describe('Character count', () => {
   })
 
   describe('custom options', () => {
+    beforeAll(async () => {
+      await goToComponent(page, 'character-count', {
+        exampleName: 'with-custom-fallback-text'
+      })
+    })
+
     it('allows customisation of the fallback message', async () => {
-      await goToExample('with-custom-fallback-text')
       const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
-
       expect(message).toEqual('Gallwch ddefnyddio hyd at 10 nod')
     })
   })
diff --git a/src/govuk/components/checkboxes/checkboxes.test.js b/src/govuk/components/checkboxes/checkboxes.test.js
index f7d8c4df7b..6677fa4473 100644
--- a/src/govuk/components/checkboxes/checkboxes.test.js
+++ b/src/govuk/components/checkboxes/checkboxes.test.js
@@ -4,19 +4,13 @@
 
 const cheerio = require('cheerio')
 
+const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
+
 const configPaths = require('../../../../config/paths.js')
 const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-const goToAndGetComponent = async (name, example) => {
-  const componentPath = `${baseUrl}/components/${name}/${example}/preview`
-  await page.goto(componentPath, { waitUntil: 'load' })
-  const html = await page.evaluate(() => document.body.innerHTML)
-  const $ = cheerio.load(html)
-  return $
-}
-
 const waitForHiddenSelector = async (selector) => {
   return page.waitForSelector(selector, {
     hidden: true,
@@ -42,7 +36,11 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('has no ARIA attributes applied', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-checkboxes')
 
       const hasAriaExpanded = $component.find('.govuk-checkboxes__input[aria-expanded]').length
@@ -53,7 +51,9 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('falls back to making all conditional content visible', async () => {
-      await goToAndGetComponent('checkboxes', 'with-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items'
+      })
 
       const isContentVisible = await waitForVisibleSelector('.govuk-checkboxes__conditional')
       expect(isContentVisible).toBeTruthy()
@@ -62,7 +62,11 @@ describe('Checkboxes with conditional reveals', () => {
 
   describe('when JavaScript is available', () => {
     it('has conditional content revealed that is associated with a checked input', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-conditional-item-checked')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-item-checked'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-checkboxes')
       const $checkedInput = $component.find('.govuk-checkboxes__input:checked')
       const inputAriaControls = $checkedInput.attr('aria-controls')
@@ -72,7 +76,11 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('has no conditional content revealed that is associated with an unchecked input', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-conditional-item-checked')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-item-checked'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-checkboxes')
       const $uncheckedInput = $component.find('.govuk-checkboxes__item').last().find('.govuk-checkboxes__input')
       const uncheckedInputAriaControls = $uncheckedInput.attr('aria-controls')
@@ -82,7 +90,9 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('indicates when conditional content is collapsed or revealed', async () => {
-      await goToAndGetComponent('checkboxes', 'with-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items'
+      })
 
       const isNotExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=false]')
       expect(isNotExpanded).toBeTruthy()
@@ -94,7 +104,11 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('toggles the conditional content when clicking an input', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-checkboxes')
       const $firstInput = $component.find('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
       const firstInputAriaControls = $firstInput.attr('aria-controls')
@@ -111,7 +125,11 @@ describe('Checkboxes with conditional reveals', () => {
     })
 
     it('toggles the conditional content when using an input with a keyboard', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-checkboxes')
       const $firstInput = $component.find('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
       const firstInputAriaControls = $firstInput.attr('aria-controls')
@@ -130,16 +148,23 @@ describe('Checkboxes with conditional reveals', () => {
 
     it('does not error when ID of revealed content contains special characters', async () => {
       // Errors logged to the console will cause this test to fail
-      await goToAndGetComponent('checkboxes', 'with-conditional-items-with-special-characters')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-conditional-items-with-special-characters'
+      })
+      cheerio.load(await page.evaluate(() => document.body.innerHTML))
     })
   })
 })
 
 describe('Checkboxes with a None checkbox', () => {
   describe('when JavaScript is available', () => {
-    it('unchecks other checkboxes when the None checkbox is checked', async () => {
-      await goToAndGetComponent('checkboxes', 'with-divider-and-None')
+    beforeEach(async () => {
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-divider-and-None'
+      })
+    })
 
+    it('unchecks other checkboxes when the None checkbox is checked', async () => {
       // Check the first 3 checkboxes
       await page.click('#with-divider-and-none')
       await page.click('#with-divider-and-none-2')
@@ -160,8 +185,6 @@ describe('Checkboxes with a None checkbox', () => {
     })
 
     it('unchecks the None checkbox when any other checkbox is checked', async () => {
-      await goToAndGetComponent('checkboxes', 'with-divider-and-None')
-
       // Check the None checkbox
       await page.click('#with-divider-and-none-5')
 
@@ -178,7 +201,11 @@ describe('Checkboxes with a None checkbox', () => {
 describe('Checkboxes with a None checkbox and conditional reveals', () => {
   describe('when JavaScript is available', () => {
     it('unchecks other checkboxes and hides conditional reveals when the None checkbox is checked', async () => {
-      const $ = await goToAndGetComponent('checkboxes', 'with-divider,-None-and-conditional-items')
+      await goToComponent(page, 'checkboxes', {
+        exampleName: 'with-divider,-None-and-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
 
       // Check the 4th checkbox, which reveals an additional field
       await page.click('#with-divider-and-none-and-conditional-items-4')
diff --git a/src/govuk/components/details/details.test.js b/src/govuk/components/details/details.test.js
index 8572fb2de9..73f0ab8260 100644
--- a/src/govuk/components/details/details.test.js
+++ b/src/govuk/components/details/details.test.js
@@ -2,6 +2,8 @@
  * @jest-environment puppeteer
  */
 
+const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
+
 const configPaths = require('../../../../config/paths.js')
 const PORT = configPaths.ports.test
 
@@ -9,13 +11,14 @@ const baseUrl = 'http://localhost:' + PORT
 
 describe('details', () => {
   it('should not polyfill when details element is available', async () => {
-    await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+    await goToComponent(page, 'details')
 
     const summaryAriaExpanded = await page.evaluate(() => {
       return document.querySelector('summary').getAttribute('aria-expanded')
     })
     expect(summaryAriaExpanded).toBe(null)
   })
+
   describe('/examples/details-polyfill', () => {
     it('should add to summary the button role', async () => {
       await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
diff --git a/src/govuk/components/error-summary/error-summary.test.js b/src/govuk/components/error-summary/error-summary.test.js
index a611b4faca..74bc6365b3 100644
--- a/src/govuk/components/error-summary/error-summary.test.js
+++ b/src/govuk/components/error-summary/error-summary.test.js
@@ -3,7 +3,7 @@
  */
 
 const { getExamples } = require('../../../../lib/jest-helpers')
-const { renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
+const { goToComponent, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
 
 const examples = getExamples('error-summary')
 
@@ -14,22 +14,19 @@ const baseUrl = 'http://localhost:' + PORT
 
 describe('Error Summary', () => {
   it('adds the tabindex attribute on page load', async () => {
-    await page.goto(baseUrl + '/components/error-summary/preview', { waitUntil: 'load' })
-
+    await goToComponent(page, 'error-summary')
     const tabindex = await page.$eval('.govuk-error-summary', el => el.getAttribute('tabindex'))
     expect(tabindex).toEqual('-1')
   })
 
   it('is automatically focused when the page loads', async () => {
-    await page.goto(`${baseUrl}/components/error-summary/preview`, { waitUntil: 'load' })
-
+    await goToComponent(page, 'error-summary')
     const moduleName = await page.evaluate(() => document.activeElement.dataset.module)
     expect(moduleName).toBe('govuk-error-summary')
   })
 
   it('removes the tabindex attribute on blur', async () => {
-    await page.goto(baseUrl + '/components/error-summary/preview', { waitUntil: 'load' })
-
+    await goToComponent(page, 'error-summary')
     await page.$eval('.govuk-error-summary', el => el.blur())
 
     const tabindex = await page.$eval('.govuk-error-summary', el => el.getAttribute('tabindex'))
@@ -39,10 +36,9 @@ describe('Error Summary', () => {
   describe('when auto-focus is disabled', () => {
     describe('using data-attributes', () => {
       beforeAll(async () => {
-        await page.goto(
-          `${baseUrl}/components/error-summary/autofocus-disabled/preview`,
-          { waitUntil: 'load' }
-        )
+        await goToComponent(page, 'error-summary', {
+          exampleName: 'autofocus-disabled'
+        })
       })
 
       it('does not have a tabindex attribute', async () => {
diff --git a/src/govuk/components/header/header.test.js b/src/govuk/components/header/header.test.js
index d315cabb59..176aa9d20a 100644
--- a/src/govuk/components/header/header.test.js
+++ b/src/govuk/components/header/header.test.js
@@ -4,10 +4,8 @@
 
 const { devices } = require('puppeteer')
 const iPhone = devices['iPhone 6']
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
 
-const baseUrl = 'http://localhost:' + PORT
+const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
 
 describe('Header navigation', () => {
   beforeAll(async () => {
@@ -17,8 +15,9 @@ describe('Header navigation', () => {
   describe('when JavaScript is unavailable or fails', () => {
     beforeAll(async () => {
       await page.setJavaScriptEnabled(false)
-      await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
-        waitUntil: 'load'
+
+      await goToComponent(page, 'header', {
+        exampleName: 'with-navigation'
       })
     })
 
@@ -47,16 +46,14 @@ describe('Header navigation', () => {
     describe('when no navigation is present', () => {
       it('exits gracefully with no errors', async () => {
         // Errors logged to the console will cause this test to fail
-        await page.goto(`${baseUrl}/components/header/preview`, {
-          waitUntil: 'load'
-        })
+        await goToComponent(page, 'header')
       })
     })
 
     describe('on page load', () => {
       beforeAll(async () => {
-        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
-          waitUntil: 'load'
+        await goToComponent(page, 'header', {
+          exampleName: 'with-navigation'
         })
       })
 
@@ -97,11 +94,11 @@ describe('Header navigation', () => {
 
     describe('when menu button is pressed', () => {
       beforeAll(async () => {
-        await Promise.all([
-          page.goto(`${baseUrl}/components/header/with-navigation/preview`, { waitUntil: 'load' }),
-          page.waitForSelector('.govuk-js-header-toggle')
-        ])
+        await goToComponent(page, 'header', {
+          exampleName: 'with-navigation'
+        })
 
+        await page.waitForSelector('.govuk-js-header-toggle')
         await page.click('.govuk-js-header-toggle')
       })
 
@@ -129,11 +126,11 @@ describe('Header navigation', () => {
 
     describe('when menu button is pressed twice', () => {
       beforeAll(async () => {
-        await Promise.all([
-          page.goto(`${baseUrl}/components/header/with-navigation/preview`, { waitUntil: 'load' }),
-          page.waitForSelector('.govuk-js-header-toggle')
-        ])
+        await goToComponent(page, 'header', {
+          exampleName: 'with-navigation'
+        })
 
+        await page.waitForSelector('.govuk-js-header-toggle')
         await page.click('.govuk-js-header-toggle')
         await page.click('.govuk-js-header-toggle')
       })
diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js
index 77fa9d1663..8f6b97701b 100644
--- a/src/govuk/components/notification-banner/notification-banner.test.js
+++ b/src/govuk/components/notification-banner/notification-banner.test.js
@@ -3,18 +3,15 @@
  */
 
 const { getExamples } = require('../../../../lib/jest-helpers')
-const { renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
+const { renderAndInitialise, goToComponent } = require('../../../../lib/puppeteer-helpers')
 
 const examples = getExamples('notification-banner')
 
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
-
 describe('Notification banner, when type is set to "success"', () => {
   it('has the correct tabindex attribute to be focused with JavaScript', async () => {
-    await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
+    await goToComponent(page, 'notification-banner', {
+      exampleName: 'with-type-as-success'
+    })
 
     const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
@@ -22,7 +19,9 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   it('is automatically focused when the page loads', async () => {
-    await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
+    await goToComponent(page, 'notification-banner', {
+      exampleName: 'with-type-as-success'
+    })
 
     const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
 
@@ -30,7 +29,9 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   it('removes the tabindex attribute on blur', async () => {
-    await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
+    await goToComponent(page, 'notification-banner', {
+      exampleName: 'with-type-as-success'
+    })
 
     await page.$eval('.govuk-notification-banner', el => el.blur())
 
@@ -40,7 +41,9 @@ describe('Notification banner, when type is set to "success"', () => {
 
   describe('and auto-focus is disabled using data attributes', () => {
     beforeAll(async () => {
-      await page.goto(`${baseUrl}/components/notification-banner/auto-focus-disabled,-with-type-as-success/preview`, { waitUntil: 'load' })
+      await goToComponent(page, 'notification-banner', {
+        exampleName: 'auto-focus-disabled,-with-type-as-success'
+      })
     })
 
     it('does not have a tabindex attribute', async () => {
@@ -130,17 +133,19 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   describe('and role is overridden to "region"', () => {
-    it('does not have a tabindex attribute', async () => {
-      await page.goto(`${baseUrl}/components/notification-banner/role=alert-overridden-to-role=region,-with-type-as-success/preview`, { waitUntil: 'load' })
+    beforeAll(async () => {
+      await goToComponent(page, 'notification-banner', {
+        exampleName: 'role=alert-overridden-to-role=region,-with-type-as-success'
+      })
+    })
 
+    it('does not have a tabindex attribute', async () => {
       const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
       expect(tabindex).toBeNull()
     })
 
     it('does not focus the notification banner', async () => {
-      await page.goto(`${baseUrl}/components/notification-banner/role=alert-overridden-to-role=region,-with-type-as-success/preview`, { waitUntil: 'load' })
-
       const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
 
       expect(activeElement).not.toBe('govuk-notification-banner')
@@ -148,9 +153,13 @@ describe('Notification banner, when type is set to "success"', () => {
   })
 
   describe('and a custom tabindex is set', () => {
-    it('does not remove the tabindex attribute on blur', async () => {
-      await page.goto(baseUrl + '/components/notification-banner/custom-tabindex/preview', { waitUntil: 'load' })
+    beforeAll(async () => {
+      await goToComponent(page, 'notification-banner', {
+        exampleName: 'custom-tabindex'
+      })
+    })
 
+    it('does not remove the tabindex attribute on blur', async () => {
       await page.$eval('.govuk-notification-banner', el => el.blur())
 
       const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
diff --git a/src/govuk/components/radios/radios.test.js b/src/govuk/components/radios/radios.test.js
index 45fa00e481..7fddc3b315 100644
--- a/src/govuk/components/radios/radios.test.js
+++ b/src/govuk/components/radios/radios.test.js
@@ -4,19 +4,13 @@
 
 const cheerio = require('cheerio')
 
+const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
+
 const configPaths = require('../../../../config/paths.js')
 const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-const goToAndGetComponent = async (name, example) => {
-  const componentPath = `${baseUrl}/components/${name}/${example}/preview`
-  await page.goto(componentPath, { waitUntil: 'load' })
-  const html = await page.evaluate(() => document.body.innerHTML)
-  const $ = cheerio.load(html)
-  return $
-}
-
 const waitForHiddenSelector = async (selector) => {
   return page.waitForSelector(selector, {
     hidden: true,
@@ -42,7 +36,11 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('has no ARIA attributes applied', async () => {
-      const $ = await goToAndGetComponent('radios', 'with-conditional-items')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-radios')
 
       const hasAriaExpanded = $component.find('.govuk-radios__input[aria-expanded]').length
@@ -53,7 +51,9 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('falls back to making all conditional content visible', async () => {
-      await goToAndGetComponent('radios', 'with-conditional-items')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items'
+      })
 
       const isContentVisible = await waitForVisibleSelector('.govuk-radios__conditional')
       expect(isContentVisible).toBeTruthy()
@@ -61,7 +61,11 @@ describe('Radios with conditional reveals', () => {
   })
   describe('when JavaScript is available', () => {
     it('has conditional content revealed that is associated with a checked input', async () => {
-      const $ = await goToAndGetComponent('radios', 'with-conditional-item-checked')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-item-checked'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-radios')
       const $checkedInput = $component.find('.govuk-radios__input:checked')
       const inputAriaControls = $checkedInput.attr('aria-controls')
@@ -71,7 +75,11 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('has no conditional content revealed that is associated with an unchecked input', async () => {
-      const $ = await goToAndGetComponent('radios', 'with-conditional-item-checked')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-item-checked'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-radios')
       const $uncheckedInput = $component.find('.govuk-radios__item').last().find('.govuk-radios__input')
       const uncheckedInputAriaControls = $uncheckedInput.attr('aria-controls')
@@ -81,7 +89,9 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('indicates when conditional content is collapsed or revealed', async () => {
-      await goToAndGetComponent('radios', 'with-conditional-items')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items'
+      })
 
       const isNotExpanded = await waitForVisibleSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=false]')
       expect(isNotExpanded).toBeTruthy()
@@ -93,7 +103,11 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('toggles the conditional content when clicking an input', async () => {
-      const $ = await goToAndGetComponent('radios', 'with-conditional-items')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-radios')
       const $firstInput = $component.find('.govuk-radios__item:first-child .govuk-radios__input')
       const firstInputAriaControls = $firstInput.attr('aria-controls')
@@ -110,7 +124,11 @@ describe('Radios with conditional reveals', () => {
     })
 
     it('toggles the conditional content when using an input with a keyboard', async () => {
-      const $ = await goToAndGetComponent('radios', 'with-conditional-items')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items'
+      })
+
+      const $ = cheerio.load(await page.evaluate(() => document.body.innerHTML))
       const $component = $('.govuk-radios')
       const $firstInput = $component.find('.govuk-radios__item:first-child .govuk-radios__input')
       const firstInputAriaControls = $firstInput.attr('aria-controls')
@@ -129,7 +147,10 @@ describe('Radios with conditional reveals', () => {
 
     it('does not error when ID of revealed content contains special characters', async () => {
       // Errors logged to the console will cause this test to fail
-      await goToAndGetComponent('radios', 'with-conditional-items-with-special-characters')
+      await goToComponent(page, 'radios', {
+        exampleName: 'with-conditional-items-with-special-characters'
+      })
+      cheerio.load(await page.evaluate(() => document.body.innerHTML))
     })
 
     describe('with multiple radio groups on the same page', () => {
diff --git a/src/govuk/components/tabs/tabs.test.js b/src/govuk/components/tabs/tabs.test.js
index 127c0c9ff6..a798d91141 100644
--- a/src/govuk/components/tabs/tabs.test.js
+++ b/src/govuk/components/tabs/tabs.test.js
@@ -4,16 +4,15 @@
 
 const { devices } = require('puppeteer')
 const iPhone = devices['iPhone 6']
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
 
-const baseUrl = 'http://localhost:' + PORT
+const { goTo, goToComponent } = require('../../../../lib/puppeteer-helpers.js')
 
 describe('/components/tabs', () => {
   describe('/components/tabs/preview', () => {
     describe('when JavaScript is unavailable or fails', () => {
       beforeAll(async () => {
         await page.setJavaScriptEnabled(false)
+        await goToComponent(page, 'tabs')
       })
 
       afterAll(async () => {
@@ -21,16 +20,17 @@ describe('/components/tabs', () => {
       })
 
       it('falls back to making all tab containers visible', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
         const isContentVisible = await page.waitForSelector('.govuk-tabs__panel', { visible: true, timeout: 1000 })
         expect(isContentVisible).toBeTruthy()
       })
     })
 
     describe('when JavaScript is available', () => {
-      it('should indicate the open state of the first tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+      beforeAll(async () => {
+        await goToComponent(page, 'tabs')
+      })
 
+      it('should indicate the open state of the first tab', async () => {
         const firstTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child .govuk-tabs__tab').getAttribute('aria-selected'))
         expect(firstTabAriaSelected).toEqual('true')
 
@@ -39,24 +39,22 @@ describe('/components/tabs', () => {
       })
 
       it('should display the first tab panel', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
-
         const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden'))
         expect(tabPanelIsHidden).toBeFalsy()
       })
 
       it('should hide all the tab panels except for the first one', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
-
         const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel ~ .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden'))
         expect(tabPanelIsHidden).toBeTruthy()
       })
     })
 
     describe('when a tab is pressed', () => {
-      it('should indicate the open state of the pressed tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+      beforeEach(async () => {
+        await goToComponent(page, 'tabs')
+      })
 
+      it('should indicate the open state of the pressed tab', async () => {
         // Click the second tab
         await page.click('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab')
 
@@ -68,8 +66,6 @@ describe('/components/tabs', () => {
       })
 
       it('should display the tab panel associated with the selected tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
-
         // Click the second tab
         await page.click('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab')
 
@@ -81,9 +77,11 @@ describe('/components/tabs', () => {
       })
 
       describe('when the tab contains a DOM element', () => {
-        it('should display the tab panel associated with the selected tab', async () => {
-          await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+        beforeAll(async () => {
+          await goToComponent(page, 'tabs')
+        })
 
+        it('should display the tab panel associated with the selected tab', async () => {
           await page.evaluate(() => {
             // Replace contents of second tab with a DOM element
             const secondTab = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab')
@@ -103,9 +101,11 @@ describe('/components/tabs', () => {
     })
 
     describe('when first tab is focused and the right arrow key is pressed', () => {
-      it('should indicate the open state of the next tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+      beforeEach(async () => {
+        await goToComponent(page, 'tabs')
+      })
 
+      it('should indicate the open state of the next tab', async () => {
         // Press right arrow when focused on the first tab
         await page.focus('.govuk-tabs__list-item:first-child .govuk-tabs__tab')
         await page.keyboard.press('ArrowRight')
@@ -118,8 +118,6 @@ describe('/components/tabs', () => {
       })
 
       it('should display the tab panel associated with the selected tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
-
         // Press right arrow
         await page.focus('.govuk-tabs__list-item:first-child .govuk-tabs__tab')
         await page.keyboard.down('ArrowRight')
@@ -134,7 +132,7 @@ describe('/components/tabs', () => {
 
     describe('when a hash associated with a tab panel is passed in the URL', () => {
       it('should indicate the open state of the associated tab', async () => {
-        await page.goto(baseUrl + '/components/tabs/preview/#past-week', { waitUntil: 'load' })
+        await goTo(page, '/components/tabs/preview/#past-week')
 
         const currentTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').getAttribute('aria-selected'))
         expect(currentTabAriaSelected).toEqual('true')
@@ -145,8 +143,11 @@ describe('/components/tabs', () => {
         const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('govuk-tabs__panel--hidden'))
         expect(currentTabPanelIsHidden).toBeFalsy()
       })
+
       it('should only update based on hashes that are tabs', async () => {
-        await page.goto(baseUrl + '/components/tabs/tabs-with-anchor-in-panel/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'tabs', {
+          exampleName: 'tabs-with-anchor-in-panel'
+        })
 
         await page.click('[href="#anchor"]')
 
@@ -158,7 +159,7 @@ describe('/components/tabs', () => {
     describe('when rendered on a small device', () => {
       it('falls back to making the all tab containers visible', async () => {
         await page.emulate(iPhone)
-        await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
+        await goToComponent(page, 'tabs')
         const isContentVisible = await page.waitForSelector('.govuk-tabs__panel', { visible: true, timeout: 1000 })
         expect(isContentVisible).toBeTruthy()
       })

From acf8e0f6d73a88227d97bf899a21354807ffcb6a Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 08:41:06 +0100
Subject: [PATCH 3/9] Add new `goToExample()` helper

---
 lib/puppeteer-helpers.js                      | 15 +++++-
 src/govuk/all.test.js                         |  9 ++--
 .../components/accordion/accordion.test.js    | 15 ++----
 src/govuk/components/all.test.js              |  6 +--
 .../components/checkboxes/checkboxes.test.js  | 15 ++----
 src/govuk/components/details/details.test.js  | 49 +++++--------------
 .../error-summary/error-summary.test.js       |  9 +---
 src/govuk/components/radios/radios.test.js    | 21 ++++----
 .../components/skip-link/skip-link.test.js    |  7 +--
 9 files changed, 55 insertions(+), 91 deletions(-)

diff --git a/lib/puppeteer-helpers.js b/lib/puppeteer-helpers.js
index 3c00751bae..eafd5e5b1d 100644
--- a/lib/puppeteer-helpers.js
+++ b/lib/puppeteer-helpers.js
@@ -68,6 +68,18 @@ async function goTo (page, path) {
   return page
 }
 
+/**
+ * Navigate to example
+ *
+ * @param {import('puppeteer').Page} page - Puppeteer page object
+ * @param {string} exampleName - Example name
+ * @param {import('puppeteer').WaitForOptions} [options] Navigation options (optional)
+ * @returns {Promise<import('puppeteer').Page>} Puppeteer page object
+ */
+function goToExample (page, exampleName, options) {
+  return goTo(page, `/examples/${exampleName}`, options)
+}
+
 /**
  * Navigate to component preview page
  *
@@ -88,5 +100,6 @@ function goToComponent (page, componentName, { exampleName } = {}) {
 module.exports = {
   renderAndInitialise,
   goTo,
-  goToComponent
+  goToComponent,
+  goToExample
 }
diff --git a/src/govuk/all.test.js b/src/govuk/all.test.js
index dc3e3ea076..d0a72e1c9e 100644
--- a/src/govuk/all.test.js
+++ b/src/govuk/all.test.js
@@ -4,13 +4,10 @@
 
 const sassdoc = require('sassdoc')
 
-const { renderSass } = require('../../lib/jest-helpers')
-const { goTo } = require('../../lib/puppeteer-helpers')
-
 const configPaths = require('../../config/paths.js')
-const PORT = configPaths.ports.test
 
-const baseUrl = 'http://localhost:' + PORT
+const { renderSass } = require('../../lib/jest-helpers')
+const { goTo, goToExample } = require('../../lib/puppeteer-helpers')
 
 beforeAll(() => {
   // Capture JavaScript errors.
@@ -76,7 +73,7 @@ describe('GOV.UK Frontend', () => {
       expect(componentsWithoutInitFunctions).toEqual([])
     })
     it('can be initialised scoped to certain sections of the page', async () => {
-      await page.goto(baseUrl + '/examples/scoped-initialisation', { waitUntil: 'load' })
+      await goToExample(page, 'scoped-initialisation')
 
       // To test that certain parts of the page are scoped we have two similar components
       // that we can interact with to check if they're interactive.
diff --git a/src/govuk/components/accordion/accordion.test.js b/src/govuk/components/accordion/accordion.test.js
index 1a56209905..9a8e34d3e1 100644
--- a/src/govuk/components/accordion/accordion.test.js
+++ b/src/govuk/components/accordion/accordion.test.js
@@ -2,12 +2,7 @@
  * @jest-environment puppeteer
  */
 
-const { goToComponent } = require('../../../../lib/puppeteer-helpers')
-
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
+const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers')
 
 describe('/components/accordion', () => {
   describe('/components/accordion/preview', () => {
@@ -289,7 +284,7 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Show all sections" based on JavaScript configuration', async () => {
-          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await goToExample(page, 'translated')
 
           const allSectionsToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__show-all-text').innerHTML)
 
@@ -310,7 +305,7 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Hide all sections" based on JavaScript configuration', async () => {
-          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await goToExample(page, 'translated')
           await page.click('.govuk-accordion .govuk-accordion__show-all')
 
           const allSectionsToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__show-all-text').innerHTML)
@@ -330,7 +325,7 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Show section" based on JavaScript configuration', async () => {
-          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await goToExample(page, 'translated')
 
           const firstSectionToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle-text').innerHTML)
 
@@ -350,7 +345,7 @@ describe('/components/accordion', () => {
         })
 
         it('should localise "Hide section" based on JavaScript configuration', async () => {
-          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await goToExample(page, 'translated')
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
 
           const firstSectionToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle-text').innerHTML)
diff --git a/src/govuk/components/all.test.js b/src/govuk/components/all.test.js
index c1a669a415..400466d486 100644
--- a/src/govuk/components/all.test.js
+++ b/src/govuk/components/all.test.js
@@ -6,12 +6,10 @@ const { fetch } = require('undici')
 const { WebSocket } = require('ws')
 
 const { allComponents, getFiles } = require('../../../lib/file-helper')
+const { goToComponent } = require('../../../lib/puppeteer-helpers')
 
 const configPaths = require('../../../config/paths.js')
 
-const PORT = configPaths.ports.test
-const baseUrl = 'http://localhost:' + PORT
-
 describe('Visual regression via Percy', () => {
   let percySnapshot
   let componentsWithJavaScript
@@ -40,7 +38,7 @@ describe('Visual regression via Percy', () => {
       await page.setJavaScriptEnabled(true)
 
       // Screenshot preview page (with JavaScript)
-      await page.goto(baseUrl + '/components/' + component + '/preview', { waitUntil: 'load' })
+      await goToComponent(page, component)
       await percySnapshot(page, `js: ${component}`)
 
       // Check for "JavaScript enabled" components
diff --git a/src/govuk/components/checkboxes/checkboxes.test.js b/src/govuk/components/checkboxes/checkboxes.test.js
index 6677fa4473..4df2853854 100644
--- a/src/govuk/components/checkboxes/checkboxes.test.js
+++ b/src/govuk/components/checkboxes/checkboxes.test.js
@@ -4,12 +4,7 @@
 
 const cheerio = require('cheerio')
 
-const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
-
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
+const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
 const waitForHiddenSelector = async (selector) => {
   return page.waitForSelector(selector, {
@@ -233,9 +228,11 @@ describe('Checkboxes with a None checkbox and conditional reveals', () => {
 
 describe('Checkboxes with multiple groups and a None checkbox and conditional reveals', () => {
   describe('when JavaScript is available', () => {
-    it('none checkbox unchecks other checkboxes in other groups', async () => {
-      await page.goto(`${baseUrl}/examples/conditional-reveals`)
+    beforeEach(async () => {
+      await goToExample(page, 'conditional-reveals')
+    })
 
+    it('none checkbox unchecks other checkboxes in other groups', async () => {
       // Check some checkboxes in the first and second groups
       await page.click('#colour-primary-3')
       await page.click('#colour-secondary-2')
@@ -252,8 +249,6 @@ describe('Checkboxes with multiple groups and a None checkbox and conditional re
     })
 
     it('hides conditional reveals in other groups', async () => {
-      await page.goto(`${baseUrl}/examples/conditional-reveals`)
-
       // Check the second checkbox in the first group, which reveals additional content
       await page.click('#colour-primary-2')
 
diff --git a/src/govuk/components/details/details.test.js b/src/govuk/components/details/details.test.js
index 73f0ab8260..dda78f7071 100644
--- a/src/govuk/components/details/details.test.js
+++ b/src/govuk/components/details/details.test.js
@@ -2,12 +2,7 @@
  * @jest-environment puppeteer
  */
 
-const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
-
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
+const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
 describe('details', () => {
   it('should not polyfill when details element is available', async () => {
@@ -20,9 +15,11 @@ describe('details', () => {
   })
 
   describe('/examples/details-polyfill', () => {
-    it('should add to summary the button role', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
+    beforeAll(async () => {
+      await goToExample(page, 'details-polyfill')
+    })
 
+    it('should add to summary the button role', async () => {
       const summaryRole = await page.evaluate(() => {
         return document.getElementById('default').querySelector('summary').getAttribute('role')
       })
@@ -30,8 +27,6 @@ describe('details', () => {
     })
 
     it('should set the element controlled by the summary using aria-controls', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const summaryAriaControls = await page.evaluate(() => {
         return document.getElementById('default').querySelector('summary').getAttribute('aria-controls')
       })
@@ -42,8 +37,6 @@ describe('details', () => {
     })
 
     it('should set the expanded state of the summary to false using aria-expanded', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const summaryAriaExpanded = await page.evaluate(() => {
         return document.getElementById('default').querySelector('summary').getAttribute('aria-expanded')
       })
@@ -51,8 +44,6 @@ describe('details', () => {
     })
 
     it('should hide the content using display: none', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const containerDisplay = await page.evaluate(() => {
         const container = document.getElementById('default').querySelector('.govuk-details__text')
         return window.getComputedStyle(container).getPropertyValue('display')
@@ -62,8 +53,6 @@ describe('details', () => {
     })
 
     it('should indicate the open state of the content', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const detailsOpen = await page.evaluate(() => {
         return document.getElementById('default').getAttribute('open')
       })
@@ -71,9 +60,11 @@ describe('details', () => {
     })
 
     describe('when details is triggered', () => {
-      it('should indicate the expanded state of the summary using aria-expanded', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
+      beforeEach(async () => {
+        await goToExample(page, 'details-polyfill')
+      })
 
+      it('should indicate the expanded state of the summary using aria-expanded', async () => {
         await page.click('#default summary')
 
         const summaryAriaExpanded = await page.evaluate(() => {
@@ -83,8 +74,6 @@ describe('details', () => {
       })
 
       it('should make the content visible', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
         await page.click('#default summary')
 
         const containerDisplay = await page.evaluate(() => {
@@ -96,8 +85,6 @@ describe('details', () => {
       })
 
       it('should indicate the open state of the content', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
         await page.click('#default summary')
 
         const detailsOpen = await page.evaluate(() => {
@@ -109,9 +96,11 @@ describe('details', () => {
   })
 
   describe('expanded', () => {
-    it('should indicate the expanded state of the summary using aria-expanded', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
+    beforeEach(async () => {
+      await goToExample(page, 'details-polyfill')
+    })
 
+    it('should indicate the expanded state of the summary using aria-expanded', async () => {
       const summaryAriaExpanded = await page.evaluate(() => {
         return document.getElementById('expanded').querySelector('summary').getAttribute('aria-expanded')
       })
@@ -119,8 +108,6 @@ describe('details', () => {
     })
 
     it('should keep the content visible', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const containerDisplay = await page.evaluate(() => {
         const container = document.getElementById('expanded').querySelector('.govuk-details__text')
         return window.getComputedStyle(container).getPropertyValue('display')
@@ -130,8 +117,6 @@ describe('details', () => {
     })
 
     it('should indicate the open state of the content', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       const detailsOpen = await page.evaluate(() => {
         return document.getElementById('expanded').getAttribute('open')
       })
@@ -139,8 +124,6 @@ describe('details', () => {
     })
 
     it('should not be affected when clicking the revealed content', async () => {
-      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
       await page.click('#expanded .govuk-details__text')
 
       const summaryAriaExpanded = await page.evaluate(() => {
@@ -151,8 +134,6 @@ describe('details', () => {
 
     describe('when details is triggered', () => {
       it('should indicate the expanded state of the summary using aria-expanded', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
         await page.click('#expanded summary')
 
         const summaryAriaExpanded = await page.evaluate(() => {
@@ -162,8 +143,6 @@ describe('details', () => {
       })
 
       it('should hide the content using display: none', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
         await page.click('#expanded summary')
 
         const containerDisplay = await page.evaluate(() => {
@@ -175,8 +154,6 @@ describe('details', () => {
       })
 
       it('should indicate the open state of the content', async () => {
-        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
-
         await page.click('#expanded summary')
 
         const detailsOpen = await page.evaluate(() => {
diff --git a/src/govuk/components/error-summary/error-summary.test.js b/src/govuk/components/error-summary/error-summary.test.js
index 74bc6365b3..8210b84e32 100644
--- a/src/govuk/components/error-summary/error-summary.test.js
+++ b/src/govuk/components/error-summary/error-summary.test.js
@@ -3,15 +3,10 @@
  */
 
 const { getExamples } = require('../../../../lib/jest-helpers')
-const { goToComponent, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
+const { goToComponent, goToExample, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
 
 const examples = getExamples('error-summary')
 
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
-
 describe('Error Summary', () => {
   it('adds the tabindex attribute on page load', async () => {
     await goToComponent(page, 'error-summary')
@@ -174,7 +169,7 @@ describe('Error Summary', () => {
 
   describe.each(inputTypes)('when linking to %s', (_, inputId, legendOrLabelSelector) => {
     beforeAll(async () => {
-      await page.goto(`${baseUrl}/examples/error-summary`, { waitUntil: 'load' })
+      await goToExample(page, 'error-summary')
       await page.click(`.govuk-error-summary a[href="#${inputId}"]`)
     })
 
diff --git a/src/govuk/components/radios/radios.test.js b/src/govuk/components/radios/radios.test.js
index 7fddc3b315..9af77e0bce 100644
--- a/src/govuk/components/radios/radios.test.js
+++ b/src/govuk/components/radios/radios.test.js
@@ -4,12 +4,7 @@
 
 const cheerio = require('cheerio')
 
-const { goToComponent } = require('../../../../lib/puppeteer-helpers.js')
-
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
+const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
 const waitForHiddenSelector = async (selector) => {
   return page.waitForSelector(selector, {
@@ -154,9 +149,11 @@ describe('Radios with conditional reveals', () => {
     })
 
     describe('with multiple radio groups on the same page', () => {
-      it('toggles conditional reveals in other groups', async () => {
-        await page.goto(baseUrl + '/examples/multiple-radio-groups', { waitUntil: 'load' })
+      beforeEach(async () => {
+        await goToExample(page, 'multiple-radio-groups')
+      })
 
+      it('toggles conditional reveals in other groups', async () => {
         // Select red in warm colours
         await page.click('#warm')
 
@@ -168,8 +165,6 @@ describe('Radios with conditional reveals', () => {
       })
 
       it('toggles conditional reveals when not in a form', async () => {
-        await page.goto(baseUrl + '/examples/multiple-radio-groups', { waitUntil: 'load' })
-
         // Select first input in radios not in a form
         await page.click('#question-not-in-form')
 
@@ -182,9 +177,11 @@ describe('Radios with conditional reveals', () => {
 
 describe('Radios with multiple groups and conditional reveals', () => {
   describe('when JavaScript is available', () => {
-    it('hides conditional reveals in other groups', async () => {
-      await page.goto(`${baseUrl}/examples/conditional-reveals`)
+    beforeEach(async () => {
+      await goToExample(page, 'conditional-reveals')
+    })
 
+    it('hides conditional reveals in other groups', async () => {
       // Choose the second radio in the first group, which reveals additional content
       await page.click('#fave-primary-2')
 
diff --git a/src/govuk/components/skip-link/skip-link.test.js b/src/govuk/components/skip-link/skip-link.test.js
index bca346c696..65d5e8dd61 100644
--- a/src/govuk/components/skip-link/skip-link.test.js
+++ b/src/govuk/components/skip-link/skip-link.test.js
@@ -2,15 +2,12 @@
  * @jest-environment puppeteer
  */
 
-const configPaths = require('../../../../config/paths.js')
-const PORT = configPaths.ports.test
-
-const baseUrl = 'http://localhost:' + PORT
+const { goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
 describe('/examples/template-default', () => {
   describe('skip link', () => {
     beforeAll(async () => {
-      await page.goto(`${baseUrl}/examples/template-default`, { waitUntil: 'load' })
+      await goToExample(page, 'template-default')
       await page.keyboard.press('Tab')
       await page.keyboard.press('Enter')
     })

From 31c637347423bda9e35bdfcc5d11e1d8071ffcf7 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 15:30:53 +0100
Subject: [PATCH 4/9] =?UTF-8?q?Remove=20custom=20=E2=80=9Cwait=20for=20sel?=
 =?UTF-8?q?ector=E2=80=9D=20helpers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Suggestion during code review that `page.waitForSelector()` can be used instead
---
 .../components/checkboxes/checkboxes.test.js  | 56 +++++++------------
 src/govuk/components/radios/radios.test.js    | 40 +++++--------
 2 files changed, 34 insertions(+), 62 deletions(-)

diff --git a/src/govuk/components/checkboxes/checkboxes.test.js b/src/govuk/components/checkboxes/checkboxes.test.js
index 4df2853854..473804092d 100644
--- a/src/govuk/components/checkboxes/checkboxes.test.js
+++ b/src/govuk/components/checkboxes/checkboxes.test.js
@@ -6,20 +6,6 @@ const cheerio = require('cheerio')
 
 const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
-const waitForHiddenSelector = async (selector) => {
-  return page.waitForSelector(selector, {
-    hidden: true,
-    timeout: 1000
-  })
-}
-
-const waitForVisibleSelector = async (selector) => {
-  return page.waitForSelector(selector, {
-    visible: true,
-    timeout: 1000
-  })
-}
-
 describe('Checkboxes with conditional reveals', () => {
   describe('when JavaScript is unavailable or fails', () => {
     beforeAll(async () => {
@@ -50,7 +36,7 @@ describe('Checkboxes with conditional reveals', () => {
         exampleName: 'with-conditional-items'
       })
 
-      const isContentVisible = await waitForVisibleSelector('.govuk-checkboxes__conditional')
+      const isContentVisible = await page.waitForSelector('.govuk-checkboxes__conditional', { visible: true })
       expect(isContentVisible).toBeTruthy()
     })
   })
@@ -66,7 +52,7 @@ describe('Checkboxes with conditional reveals', () => {
       const $checkedInput = $component.find('.govuk-checkboxes__input:checked')
       const inputAriaControls = $checkedInput.attr('aria-controls')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${inputAriaControls}"]:not(.govuk-checkboxes__conditional--hidden)`)
+      const isContentVisible = await page.waitForSelector(`[id="${inputAriaControls}"]:not(.govuk-checkboxes__conditional--hidden)`, { visible: true })
       expect(isContentVisible).toBeTruthy()
     })
 
@@ -80,7 +66,7 @@ describe('Checkboxes with conditional reveals', () => {
       const $uncheckedInput = $component.find('.govuk-checkboxes__item').last().find('.govuk-checkboxes__input')
       const uncheckedInputAriaControls = $uncheckedInput.attr('aria-controls')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${uncheckedInputAriaControls}"].govuk-checkboxes__conditional--hidden`)
+      const isContentHidden = await page.waitForSelector(`[id="${uncheckedInputAriaControls}"].govuk-checkboxes__conditional--hidden`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -89,12 +75,12 @@ describe('Checkboxes with conditional reveals', () => {
         exampleName: 'with-conditional-items'
       })
 
-      const isNotExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=false]')
+      const isNotExpanded = await page.waitForSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=false]', { visible: true })
       expect(isNotExpanded).toBeTruthy()
 
       await page.click('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
 
-      const isExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=true]')
+      const isExpanded = await page.waitForSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=true]', { visible: true })
       expect(isExpanded).toBeTruthy()
     })
 
@@ -110,12 +96,12 @@ describe('Checkboxes with conditional reveals', () => {
 
       await page.click('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentVisible = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { visible: true })
       expect(isContentVisible).toBeTruthy()
 
       await page.click('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentHidden = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -132,12 +118,12 @@ describe('Checkboxes with conditional reveals', () => {
       await page.focus('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
       await page.keyboard.press('Space')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentVisible = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { visible: true })
       expect(isContentVisible).toBeTruthy()
 
       await page.keyboard.press('Space')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentHidden = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -169,13 +155,13 @@ describe('Checkboxes with a None checkbox', () => {
       await page.click('#with-divider-and-none-5')
 
       // Expect first 3 checkboxes to have been unchecked
-      const firstCheckboxIsUnchecked = await waitForVisibleSelector('[id="with-divider-and-none"]:not(:checked)')
+      const firstCheckboxIsUnchecked = await page.waitForSelector('[id="with-divider-and-none"]:not(:checked)', { visible: true })
       expect(firstCheckboxIsUnchecked).toBeTruthy()
 
-      const secondCheckboxIsUnchecked = await waitForVisibleSelector('[id="with-divider-and-none-2"]:not(:checked)')
+      const secondCheckboxIsUnchecked = await page.waitForSelector('[id="with-divider-and-none-2"]:not(:checked)', { visible: true })
       expect(secondCheckboxIsUnchecked).toBeTruthy()
 
-      const thirdCheckboxIsUnchecked = await waitForVisibleSelector('[id="with-divider-and-none-3"]:not(:checked)')
+      const thirdCheckboxIsUnchecked = await page.waitForSelector('[id="with-divider-and-none-3"]:not(:checked)', { visible: true })
       expect(thirdCheckboxIsUnchecked).toBeTruthy()
     })
 
@@ -187,7 +173,7 @@ describe('Checkboxes with a None checkbox', () => {
       await page.click('#with-divider-and-none')
 
       // Expect the None checkbox to have been unchecked
-      const noneCheckboxIsUnchecked = await waitForVisibleSelector('[id="with-divider-and-none-5"]:not(:checked)')
+      const noneCheckboxIsUnchecked = await page.waitForSelector('[id="with-divider-and-none-5"]:not(:checked)', { visible: true })
       expect(noneCheckboxIsUnchecked).toBeTruthy()
     })
   })
@@ -209,18 +195,18 @@ describe('Checkboxes with a None checkbox and conditional reveals', () => {
       const conditionalContentId = $checkedInput.attr('aria-controls')
 
       // Expect conditional content to have been revealed
-      const isConditionalContentVisible = await waitForVisibleSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentVisible = await page.waitForSelector(`[id="${conditionalContentId}"]`, { visible: true })
       expect(isConditionalContentVisible).toBeTruthy()
 
       // Check the None checkbox
       await page.click('#with-divider-and-none-and-conditional-items-6')
 
       // Expect the 4th checkbox to have been unchecked
-      const forthCheckboxIsUnchecked = await waitForVisibleSelector('[id="with-divider-and-none-and-conditional-items-4"]:not(:checked)')
+      const forthCheckboxIsUnchecked = await page.waitForSelector('[id="with-divider-and-none-and-conditional-items-4"]:not(:checked)', { visible: true })
       expect(forthCheckboxIsUnchecked).toBeTruthy()
 
       // Expect conditional content to have been hidden
-      const isConditionalContentHidden = await waitForHiddenSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentHidden = await page.waitForSelector(`[id="${conditionalContentId}"]`, { hidden: true })
       expect(isConditionalContentHidden).toBeTruthy()
     })
   })
@@ -241,10 +227,10 @@ describe('Checkboxes with multiple groups and a None checkbox and conditional re
       await page.click('#colour-other-3')
 
       // Expect the checkboxes in the first and second groups to be unchecked
-      const firstCheckboxIsUnchecked = await waitForVisibleSelector('[id="colour-primary-3"]:not(:checked)')
+      const firstCheckboxIsUnchecked = await page.waitForSelector('[id="colour-primary-3"]:not(:checked)', { visible: true })
       expect(firstCheckboxIsUnchecked).toBeTruthy()
 
-      const secondCheckboxIsUnchecked = await waitForVisibleSelector('[id="colour-secondary-2"]:not(:checked)')
+      const secondCheckboxIsUnchecked = await page.waitForSelector('[id="colour-secondary-2"]:not(:checked)', { visible: true })
       expect(secondCheckboxIsUnchecked).toBeTruthy()
     })
 
@@ -257,18 +243,18 @@ describe('Checkboxes with multiple groups and a None checkbox and conditional re
       )
 
       // Assert that conditional reveal is visible
-      const isConditionalContentVisible = await waitForVisibleSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentVisible = await page.waitForSelector(`[id="${conditionalContentId}"]`, { visible: true })
       expect(isConditionalContentVisible).toBeTruthy()
 
       // Check the None checkbox
       await page.click('#colour-other-3')
 
       // Assert that the second checkbox in the first group is unchecked
-      const otherCheckboxIsUnchecked = await waitForVisibleSelector('[id="colour-primary-2"]:not(:checked)')
+      const otherCheckboxIsUnchecked = await page.waitForSelector('[id="colour-primary-2"]:not(:checked)', { visible: true })
       expect(otherCheckboxIsUnchecked).toBeTruthy()
 
       // Expect conditional content to have been hidden
-      const isConditionalContentHidden = await waitForHiddenSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentHidden = await page.waitForSelector(`[id="${conditionalContentId}"]`, { hidden: true })
       expect(isConditionalContentHidden).toBeTruthy()
     })
   })
diff --git a/src/govuk/components/radios/radios.test.js b/src/govuk/components/radios/radios.test.js
index 9af77e0bce..747dc63ad5 100644
--- a/src/govuk/components/radios/radios.test.js
+++ b/src/govuk/components/radios/radios.test.js
@@ -6,20 +6,6 @@ const cheerio = require('cheerio')
 
 const { goToComponent, goToExample } = require('../../../../lib/puppeteer-helpers.js')
 
-const waitForHiddenSelector = async (selector) => {
-  return page.waitForSelector(selector, {
-    hidden: true,
-    timeout: 1000
-  })
-}
-
-const waitForVisibleSelector = async (selector) => {
-  return page.waitForSelector(selector, {
-    visible: true,
-    timeout: 1000
-  })
-}
-
 describe('Radios with conditional reveals', () => {
   describe('when JavaScript is unavailable or fails', () => {
     beforeAll(async () => {
@@ -50,7 +36,7 @@ describe('Radios with conditional reveals', () => {
         exampleName: 'with-conditional-items'
       })
 
-      const isContentVisible = await waitForVisibleSelector('.govuk-radios__conditional')
+      const isContentVisible = await page.waitForSelector('.govuk-radios__conditional', { visible: true })
       expect(isContentVisible).toBeTruthy()
     })
   })
@@ -65,7 +51,7 @@ describe('Radios with conditional reveals', () => {
       const $checkedInput = $component.find('.govuk-radios__input:checked')
       const inputAriaControls = $checkedInput.attr('aria-controls')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${inputAriaControls}"]:not(.govuk-radios__conditional--hidden)`)
+      const isContentVisible = await page.waitForSelector(`[id="${inputAriaControls}"]:not(.govuk-radios__conditional--hidden)`, { visible: true })
       expect(isContentVisible).toBeTruthy()
     })
 
@@ -79,7 +65,7 @@ describe('Radios with conditional reveals', () => {
       const $uncheckedInput = $component.find('.govuk-radios__item').last().find('.govuk-radios__input')
       const uncheckedInputAriaControls = $uncheckedInput.attr('aria-controls')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${uncheckedInputAriaControls}"].govuk-radios__conditional--hidden`)
+      const isContentHidden = await page.waitForSelector(`[id="${uncheckedInputAriaControls}"].govuk-radios__conditional--hidden`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -88,12 +74,12 @@ describe('Radios with conditional reveals', () => {
         exampleName: 'with-conditional-items'
       })
 
-      const isNotExpanded = await waitForVisibleSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=false]')
+      const isNotExpanded = await page.waitForSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=false]', { visible: true })
       expect(isNotExpanded).toBeTruthy()
 
       await page.click('.govuk-radios__item:first-child .govuk-radios__input')
 
-      const isExpanded = await waitForVisibleSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=true]')
+      const isExpanded = await page.waitForSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=true]', { visible: true })
       expect(isExpanded).toBeTruthy()
     })
 
@@ -109,12 +95,12 @@ describe('Radios with conditional reveals', () => {
 
       await page.click('.govuk-radios__item:first-child .govuk-radios__input')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentVisible = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { visible: true })
       expect(isContentVisible).toBeTruthy()
 
       await page.click('.govuk-radios__item:nth-child(3) .govuk-radios__input')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentHidden = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -131,12 +117,12 @@ describe('Radios with conditional reveals', () => {
       await page.focus('.govuk-radios__item:first-child .govuk-radios__input')
       await page.keyboard.press('Space')
 
-      const isContentVisible = await waitForVisibleSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentVisible = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { visible: true })
       expect(isContentVisible).toBeTruthy()
 
       await page.keyboard.press('ArrowRight')
 
-      const isContentHidden = await waitForHiddenSelector(`[id="${firstInputAriaControls}"]`)
+      const isContentHidden = await page.waitForSelector(`[id="${firstInputAriaControls}"]`, { hidden: true })
       expect(isContentHidden).toBeTruthy()
     })
 
@@ -160,7 +146,7 @@ describe('Radios with conditional reveals', () => {
         // Select blue in cool colours
         await page.click('#cool')
 
-        const isWarmConditionalRevealHidden = await waitForHiddenSelector('#conditional-warm')
+        const isWarmConditionalRevealHidden = await page.waitForSelector('#conditional-warm', { hidden: true })
         expect(isWarmConditionalRevealHidden).toBeTruthy()
       })
 
@@ -168,7 +154,7 @@ describe('Radios with conditional reveals', () => {
         // Select first input in radios not in a form
         await page.click('#question-not-in-form')
 
-        const isConditionalRevealVisible = await waitForVisibleSelector('#conditional-question-not-in-form')
+        const isConditionalRevealVisible = await page.waitForSelector('#conditional-question-not-in-form', { visible: true })
         expect(isConditionalRevealVisible).toBeTruthy()
       })
     })
@@ -190,14 +176,14 @@ describe('Radios with multiple groups and conditional reveals', () => {
       )
 
       // Assert conditional reveal is visible
-      const isConditionalContentVisible = await waitForVisibleSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentVisible = await page.waitForSelector(`[id="${conditionalContentId}"]`, { visible: true })
       expect(isConditionalContentVisible).toBeTruthy()
 
       // Choose a different radio with the same name, but in a different group
       await page.click('#fave-other-3')
 
       // Expect conditional content to have been hidden
-      const isConditionalContentHidden = await waitForHiddenSelector(`[id="${conditionalContentId}"]`)
+      const isConditionalContentHidden = await page.waitForSelector(`[id="${conditionalContentId}"]`, { hidden: true })
       expect(isConditionalContentHidden).toBeTruthy()
     })
   })

From 0d865ec0c79913ad544c65844c0d43118a8f0063 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 15:42:45 +0100
Subject: [PATCH 5/9] Ensure page JavaScript is enabled again after screenshots

---
 src/govuk/components/all.test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/govuk/components/all.test.js b/src/govuk/components/all.test.js
index 400466d486..e41847786c 100644
--- a/src/govuk/components/all.test.js
+++ b/src/govuk/components/all.test.js
@@ -33,6 +33,10 @@ describe('Visual regression via Percy', () => {
       .map(([component]) => component)
   })
 
+  afterAll(async () => {
+    await page.setJavaScriptEnabled(true)
+  })
+
   it('generate screenshots', async () => {
     for (const component of allComponents) {
       await page.setJavaScriptEnabled(true)

From 759eaa39f47519618566b9a51dc0252a5388cb42 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 15:42:11 +0100
Subject: [PATCH 6/9] Fix focus detection via `document.activeElement` for
 non-headless test runs

Although parallel browser test runs will still push windows from foreground to background, this change ensures that initial `.focus()` events will still fire
---
 lib/puppeteer-helpers.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/puppeteer-helpers.js b/lib/puppeteer-helpers.js
index eafd5e5b1d..7e04fb32b7 100644
--- a/lib/puppeteer-helpers.js
+++ b/lib/puppeteer-helpers.js
@@ -65,6 +65,8 @@ async function goTo (page, path) {
   const { href } = new URL(path, `http://localhost:${PORT}`)
 
   await page.goto(href)
+  await page.bringToFront()
+
   return page
 }
 

From 7e353d3b736e038c418e58dd51f471ec9bf74263 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 5 Oct 2022 16:06:51 +0100
Subject: [PATCH 7/9] Adjust `debouncedWaitTime` (with key typing delay) when
 not running headless

Timers in background pages will be aligned, clamped or throttled

https://developer.chrome.com/blog/background_tabs
https://github.com/whatwg/html/issues/7941
---
 .../character-count/character-count.test.js   | 94 +++++++++++++++----
 1 file changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/govuk/components/character-count/character-count.test.js b/src/govuk/components/character-count/character-count.test.js
index e887aa6c13..a46d59b158 100644
--- a/src/govuk/components/character-count/character-count.test.js
+++ b/src/govuk/components/character-count/character-count.test.js
@@ -2,12 +2,22 @@
  * @jest-environment puppeteer
  */
 
+const jestPuppeteerConfig = require('../../../../jest-puppeteer.config.js')
 const { getExamples } = require('../../../../lib/jest-helpers.js')
 const { goToComponent, renderAndInitialise } = require('../../../../lib/puppeteer-helpers')
 
+// Detect when browser has been launched headless
+const { headless = true } = jestPuppeteerConfig.launch
+
 // The longest possible time from a keyboard user ending input and the screen
 // reader counter being updated: handleFocus interval time + last input wait time
-const debouncedWaitTime = 1500
+// but raised to the nearest whole second when browser is not headless as timers
+// in background pages will be aligned, clamped or throttled
+const debouncedWaitTime = headless ? 1500 : 2000
+
+// When headless, keydown-to-keyup time appears to affect event throttling,
+// affecting `lastInputTimestamp` and screen reader status message updates
+const keyupWaitTime = headless ? 0 : 50
 
 describe('Character count', () => {
   describe('when JavaScript is unavailable or fails', () => {
@@ -74,7 +84,10 @@ describe('Character count', () => {
 
       it('counts down to the character limit', async () => {
         await goToComponent(page, 'character-count')
-        await page.type('.govuk-js-character-count', 'A')
+
+        await page.type('.govuk-js-character-count', 'A', {
+          delay: keyupWaitTime
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 9 characters remaining')
@@ -88,7 +101,10 @@ describe('Character count', () => {
 
       it('uses the singular when there is only one character remaining', async () => {
         await goToComponent(page, 'character-count')
-        await page.type('.govuk-js-character-count', 'A'.repeat(9))
+
+        await page.type('.govuk-js-character-count', 'A'.repeat(9), {
+          delay: keyupWaitTime
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 1 character remaining')
@@ -103,7 +119,10 @@ describe('Character count', () => {
       describe('when the character limit is exceeded', () => {
         beforeAll(async () => {
           await goToComponent(page, 'character-count')
-          await page.type('.govuk-js-character-count', 'A'.repeat(11))
+
+          await page.type('.govuk-js-character-count', 'A'.repeat(11), {
+            delay: keyupWaitTime
+          })
         })
 
         it('shows the number of characters over the limit', async () => {
@@ -118,7 +137,9 @@ describe('Character count', () => {
         })
 
         it('uses the plural when the limit is exceeded by 2 or more', async () => {
-          await page.type('.govuk-js-character-count', 'A')
+          await page.type('.govuk-js-character-count', 'A', {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
           expect(message).toEqual('You have 2 characters too many')
@@ -187,7 +208,9 @@ describe('Character count', () => {
         })
 
         it('becomes visible once the threshold is reached', async () => {
-          await page.type('.govuk-js-character-count', 'A'.repeat(8))
+          await page.type('.govuk-js-character-count', 'A'.repeat(8), {
+            delay: keyupWaitTime
+          })
 
           const visibility = await page.$eval('.govuk-character-count__status', el => window.getComputedStyle(el).visibility)
           expect(visibility).toEqual('visible')
@@ -265,7 +288,10 @@ describe('Character count', () => {
         await goToComponent(page, 'character-count', {
           exampleName: 'with-word-count'
         })
-        await page.type('.govuk-js-character-count', 'Hello world')
+
+        await page.type('.govuk-js-character-count', 'Hello world', {
+          delay: keyupWaitTime
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 8 words remaining')
@@ -281,7 +307,10 @@ describe('Character count', () => {
         await goToComponent(page, 'character-count', {
           exampleName: 'with-word-count'
         })
-        await page.type('.govuk-js-character-count', 'Hello '.repeat(9))
+
+        await page.type('.govuk-js-character-count', 'Hello '.repeat(9), {
+          delay: keyupWaitTime
+        })
 
         const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
         expect(message).toEqual('You have 1 word remaining')
@@ -298,7 +327,10 @@ describe('Character count', () => {
           await goToComponent(page, 'character-count', {
             exampleName: 'with-word-count'
           })
-          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
+
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
+            delay: keyupWaitTime
+          })
         })
 
         it('shows the number of words over the limit', async () => {
@@ -313,7 +345,9 @@ describe('Character count', () => {
         })
 
         it('uses the plural when the limit is exceeded by 2 or more', async () => {
-          await page.type('.govuk-js-character-count', 'World')
+          await page.type('.govuk-js-character-count', 'World', {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval('.govuk-character-count__status', el => el.innerHTML.trim())
           expect(message).toEqual('You have 2 words too many')
@@ -352,7 +386,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(11))
+          await page.type('.govuk-js-character-count', 'A'.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -369,7 +405,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -387,7 +425,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(8))
+          await page.type('.govuk-js-character-count', 'A'.repeat(8), {
+            delay: keyupWaitTime
+          })
 
           const visibility = await page.$eval('.govuk-character-count__status', el => window.getComputedStyle(el).visibility)
           expect(visibility).toEqual('visible')
@@ -407,7 +447,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(11))
+          await page.type('.govuk-js-character-count', 'A'.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -428,7 +470,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -450,7 +494,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(8))
+          await page.type('.govuk-js-character-count', 'A'.repeat(8), {
+            delay: keyupWaitTime
+          })
 
           const visibility = await page.$eval(
             '.govuk-character-count__status',
@@ -469,7 +515,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(11))
+          await page.type('.govuk-js-character-count', 'A'.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -486,7 +534,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'A'.repeat(11))
+          await page.type('.govuk-js-character-count', 'A'.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -503,7 +553,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',
@@ -520,7 +572,9 @@ describe('Character count', () => {
             }
           })
 
-          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
+            delay: keyupWaitTime
+          })
 
           const message = await page.$eval(
             '.govuk-character-count__status',

From 28e1c88e567f9b3c00e7d6a6136786d798d1d8e9 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 4 Oct 2022 14:23:53 +0100
Subject: [PATCH 8/9] Increase browser test timeout from 5s to 15s

Allows more time for slower machines to complete the entire test suite without individual tests timing out
---
 jest.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/jest.config.js b/jest.config.js
index f5feb8c22d..6b2a38b1fc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -66,6 +66,9 @@ module.exports = {
         '!**/*.unit.test.{js,mjs}'
       ],
 
+      // Browser test increased timeout (5s to 15s)
+      testTimeout: 15000,
+
       // Web server and browser required
       globalSetup: './config/jest/browser/open.mjs',
       globalTeardown: './config/jest/browser/close.mjs'

From 3d885e7b81d4e1a6e5fe60a9368bc6440f995ad4 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 4 Oct 2022 14:10:43 +0100
Subject: [PATCH 9/9] Prevent empty browser startup windows during test runs

---
 jest-puppeteer.config.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
index ad8ce8ec36..a88e00d007 100644
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -2,12 +2,20 @@ module.exports = {
   browserContext: 'incognito',
   browserPerWorker: true,
   launch: {
-    // we use --no-sandbox --disable-setuid-sandbox as a workaround for the
-    // 'No usable sandbox! Update your kernel' error
-    // see more https://github.com/Googlechrome/puppeteer/issues/290
     args: [
+      /**
+       * Workaround for 'No usable sandbox! Update your kernel' error
+       * see more https://github.com/Googlechrome/puppeteer/issues/290
+       */
       '--no-sandbox',
-      '--disable-setuid-sandbox'
-    ]
+      '--disable-setuid-sandbox',
+
+      /**
+       * Prevent empty Chromium startup window
+       * Tests use their own `browser.newPage()` instead
+       */
+      '--no-startup-window'
+    ],
+    waitForInitialPage: false
   }
 }