Use persistent Puppeteer instance (#63)

* Install puppeteer

* Export puppeteer instance from config

Also make config async

* Create separate getPa11yOpts function

* Handle browser instance in pluginCore

Author: mxmason

package-lock.json

@@ -11,6 +11,7 @@
     "pa11y": "^6.1.1",
     "path-type": "^4.0.0",
     "picocolors": "^1.0.0",
+    "puppeteer": "~9.1.1",
     "readdirp": "^3.6.0"
   },
   "scripts": {

package.json

@@ -1,4 +1,5 @@
 // @ts-check
+const puppeteer = require('puppeteer')
 
 const DEFAULT_CHECK_PATHS = ['/']
 const DEFAULT_FAIL_WITH_ISSUES = true
@@ -17,14 +18,27 @@ const getConfiguration = ({
 		checkPaths: checkPaths || DEFAULT_CHECK_PATHS,
 		ignoreDirectories: ignoreDirectories || DEFAULT_IGNORE_DIRECTORIES,
 		failWithIssues: failWithIssues !== undefined ? failWithIssues : DEFAULT_FAIL_WITH_ISSUES,
-		pa11yOpts: {
-			runners: PA11Y_RUNNERS,
-			userAgent: PA11Y_USER_AGENT,
-			standard: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,
-		},
+		wcagLevel: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,
+	}
+}
+
+const getPa11yOpts = async (wcagLevel) => {
+	const browser = await puppeteer.launch({
+		// NB: Allows iframes to load when HTML page is visited from filesystem.
+		// Without this, a page with an iframe will crash pa11y
+		args: ['--disable-web-security'],
+		ignoreHTTPSErrors: true,
+	})
+
+	return {
+		browser,
+		runners: PA11Y_RUNNERS,
+		userAgent: PA11Y_USER_AGENT,
+		standard: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,
 	}
 }
 
 module.exports = {
 	getConfiguration,
+	getPa11yOpts,
 }

src/config.js

@@ -7,7 +7,7 @@ const pico = require('picocolors')
 module.exports = {
 	async onPostBuild({ constants, inputs, utils: { build } }) {
 		try {
-			const { publishDir, checkPaths, ignoreDirectories, pa11yOpts, failWithIssues } = getConfiguration({
+			const { publishDir, checkPaths, ignoreDirectories, wcagLevel, failWithIssues } = getConfiguration({
 				constants,
 				inputs,
 			})
@@ -20,7 +20,7 @@ module.exports = {
 			const { report, issueCount } = await pluginCore.runPa11y({
 				build,
 				htmlFilePaths,
-				pa11yOpts,
+				wcagLevel,
 			})
 			const reportSummary =
 				`${issueCount === 0 ? 'No' : issueCount} accessibility issues found!` +

src/index.js

@@ -5,14 +5,17 @@ const { extname, join } = require('path')
 const { isDirectory, isFile } = require('path-type')
 const { results: cliReporter } = require('./reporter')
 const readdirp = require('readdirp')
+const { getPa11yOpts } = require('./config')
 
 const EMPTY_ARRAY = []
 const ASTERISK = '*'
 const HTML_EXT = '.html'
 const GLOB_HTML = '*.html'
 
-exports.runPa11y = async function ({ htmlFilePaths, pa11yOpts, build }) {
+exports.runPa11y = async function ({ build, htmlFilePaths, wcagLevel }) {
+	const pa11yOpts = await getPa11yOpts(wcagLevel)
 	let issueCount = 0
+
 	const results = await Promise.all(
 		htmlFilePaths.map(async (path) => {
 			try {
@@ -27,6 +30,8 @@ exports.runPa11y = async function ({ htmlFilePaths, pa11yOpts, build }) {
 		}),
 	)
 
+	await pa11yOpts.browser.close()
+
 	return {
 		issueCount,
 		report: results.join(''),

src/pluginCore.js

@@ -6,8 +6,8 @@ Object {
   "report": "
 Results for file: ./tests/runPa11y/publishDir/index.html
 
-[31m • Error:[39m Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
-[90m ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H37[39m
+[31m • Error:[39m Images must have alternate text (https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI)
+[90m ├── image-alt[39m
  ├── html > body > img
  └── <img src=\\"https://placekitten.com/200/300\\">