Merge pull request #152 from Financial-Times/update-pa11yci

Improve pa11yci

README.md

@@ -91,6 +91,16 @@ Multiple user types can be specified in the TEST_USER_TYPES variable.
 If you set `TEST_USER_TYPES` environment variable to `premium,standard`, these variables will be populated in the `.env` file:
 `PREMIUM_FTSession`, `PREMIUM_FTSession_s`, `STANDARD_FTSession`, `STANDARD_FTSession_s`
 
+### Pa11y environment variables
+
+| | |
+|---|---|
+| `PA11Y_WAIT` | The time to wait before running tests in milliseconds |
+| `PA11Y_ROUTE_EXCEPTIONS` | api_key for the lambda |
+| `PA11Y_ROUTE_HEADERS` | user types to get the tokens for (options: `premium`, `standard`, `expired`) |
+| `PA11Y_HIDE` | A CSS selector to hide elements from testing, selectors can be comma separated |
+| `PA11Y_VIEWPORTS` | Set viewports for puppeteer (`w1024h768,w375h667`) |
+
 ## Bootstrapping
 
 Curious how the bootstrapping bit at top of the `Makefile` works?  Here's the annotated code:

dotfiles/.pa11yci.js

@@ -1,5 +1,8 @@
 const extend = require('node.extend');
 const querystring = require('querystring');
+const { URL } = require('url');
+const path = require('path');
+const mkdirp = require('mkdirp');
 
 const defaultViewPortSize = {
 	width: 1280,
@@ -48,7 +51,7 @@ const config = {
 			'FT-Flags': DEFAULT_FLAGS
 		},
 		timeout: 50000,
-		wait: 300 || process.env.PA11Y_WAIT,
+		wait: process.env.PA11Y_WAIT || 300,
 		hideElements: 'iframe[src*=google],iframe[src*=proxy]',
 		rules: ['Principle1.Guideline1_3.1_3_1_AAA']
 	},
@@ -152,8 +155,8 @@ for (let viewport of viewports) {
 		const resultUrl = extend(true, {viewport: viewport}, url);
 
 		if (process.env.TEST_URL.includes('local')) {
-
-			const path = resultUrl.url.substring(resultUrl.url.lastIndexOf('/'));
+			const pathname = new URL(resultUrl.url).pathname;
+			const screenshotName = pathname.substring(1).replace(/\//g, '_');
 
 			let appFlags = 'no-flags';
 
@@ -162,7 +165,10 @@ for (let viewport of viewports) {
 				appFlags = flags.substring(0, flags.indexOf(DEFAULT_FLAGS) - 1);
 			}
 
-			resultUrl.screenCapture = `./pa11y_screenCapture/${viewport.width}x${viewport.height}/${appFlags}/${path || 'root'}.png`;
+			const folderName = `/pa11y_screenCapture/${viewport.width}x${viewport.height}/${appFlags}`;
+
+			mkdirp.sync(path.join(process.cwd(), folderName));
+			resultUrl.screenCapture = `.${folderName}/${screenshotName || 'root'}.png`;
 
 		}
 

package.json

@@ -30,6 +30,7 @@
     "husky": "^0.14.3",
     "jsonfile": "^4.0.0",
     "lintspaces-cli": "^0.6.0",
+    "mkdirp": "^0.5.1",
     "npm-prepublish": "^1.2.3",
     "postcss-sass": "^0.2.0",
     "stylelint": "^8.4.0",