A few requested updates and Report Tweaks.

Updates Include:
---

- [X] Adds new `viewport` config option that lets you set the screen size of the browser
- [X] Adds new `runInBrowser` config option that will open the tests in a new Chrome window so you can see the tests being run
- [X] Adds check for Actions that use `screen capture filename.jpg` that do not set absolute path and corrects path to output folder
- [X] Updates Documentation for new Config Options
- [X] Updates Screenshot Styling on HTML Report by aligning image to top

Author: manifestinteractive

bin/cli.js

@@ -83,6 +83,18 @@ const argv = yargs
       describe: 'Include Warnings in Report',
       type: 'boolean',
       default: true
+    },
+    runInBrowser: {
+      alias: 'b',
+      describe: 'Run Tests in Browser Window',
+      type: 'boolean',
+      default: false
+    },
+    viewport: {
+      alias: 'V',
+      describe: 'Viewport Screen Size',
+      type: 'string',
+      default: 'desktop'
     }
   })
   .command('*', 'Run A11Y Tests using Options')

commands/a11y.js

@@ -113,7 +113,19 @@ module.exports = async options => {
           opts.ignore = test.ignore
         }
 
+        // Set actions if they are there, and do a quick check for common issues
         if (test.actions && Array.isArray(test.actions)) {
+          test.actions.forEach((action, index) => {
+            if (action.startsWith('screen capture ')) {
+              const parts = action.split(' ')
+
+              // Check if the file name has a path, if not, we need to set it
+              if (parts.length === 3 && parts[2].indexOf('/') === -1 && parts[2].indexOf('\\') === -1) {
+                test.actions[index] = `screen capture ${path.join(opts.output, parts[2])}`
+              }
+            }
+          })
+
           opts.actions = test.actions
         }
 
@@ -158,6 +170,47 @@ module.exports = async options => {
           }
         }
 
+        // Run in Browser
+        if (opts.runInBrowser) {
+          // Add Chrome Settings
+          opts.chromeLaunchConfig = {
+            headless: false
+          }
+        }
+
+        // Set Screenshot Viewport Size
+        if (opts.viewport && ['desktop', 'tablet', 'tablet-landscape', 'tablet-portrait', 'mobile'].indexOf(opts.viewport) !== -1) {
+          const sizes = {
+            'desktop': {
+              width: 1366,
+              height: 768,
+              isMobile: false
+            },
+            'tablet': {
+              width: 1024,
+              height: 768,
+              isMobile: true
+            },
+            'tablet-landscape': {
+              width: 1024,
+              height: 768,
+              isMobile: true
+            },
+            'tablet-portrait': {
+              width: 768,
+              height: 1024,
+              isMobile: true
+            },
+            'mobile': {
+              width: 360,
+              height: 640,
+              isMobile: true
+            }
+          }
+
+          opts.viewport = sizes[opts.viewport]
+        }
+
         if (opts.screenCapture) {
           const timestamp = moment().format('YYYYMMDD_HHmmssSSSS')
           opts.screenCapture = path.join(opts.output, `screenshot_${website.host}_${timestamp}.jpg`)
@@ -193,7 +246,8 @@ module.exports = async options => {
                 logger(() => { console.log(status.message) })
                 spinner.succeed(`${chalk.green.bold('Testing Complete')}\n`)
 
-                if (options.open) {
+                // Open report if requested, unless compressing ( not required )
+                if (options.open && !options.compress) {
                   open(status.file)
                 }
               } else if (testResults.settings.format === 'cli') {

docs/cmd-a11y.md

@@ -16,16 +16,18 @@ Options:
 Name           | JSON Param      | CLI Param & Alias        | Default   | Definition
 ---------------|-----------------|--------------------------|-----------|----------------------------------------------
 Actions        | `actions`       | `--actions`, `-a`        | `[]`      | Test Actions ( [Learn More](actions.md) )
+Compress       | `compress`      | `--compress`, `-C`       | `false`   | Compress Report ( Only works on HTML Format )
 Config         |                 | `--config`, `-c`         |           | Absolute Path to Configuration File
 Format         | `format`        | `--format`, `-f`         | `cli`     | Output Format of Report [ `cli`, `csv`, `html`, `jira`, `json`, `md`, `xml` ]
-Compress       | `compress`      | `--compress`, `-C`       | `false`   | Compress Report ( Only works on HTML Format )
 Ignore         | `ignore`        | `--ignore`, `-i`         |  `[]`     | Error Codes to Ignore ( `WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail` )
 Notices        | `notices`       | `--notices`, `-n`        | `true`    | Include Notices in Report ( `--notices=false` or `--no-notices` to disable )
-Open           | `open`          | `--open`, `-O`           | `false`   | Open Report after Creation
+Open           | `open`          | `--open`, `-O`           | `false`   | Open Report after Creation ( disabled if using `--compress` )
 Output         | `output`        | `--output`, `-o`         |           | Absolute Path to Output Directory for Report ( `cwd` if not provided )
+Run in Browser | `runInBrowser`  | `--run-in-browser`, `-b` | `false`   | Run Tests in Browser ( helpful for tests that require sessions / authentication )
 Screen Capture | `screenCapture` | `--screen-capture`, `-S` | `false`   | Whether to add a Screen Capture for Report
 Standard       | `standard`      | `--standard`, `-s`       | `WCAG2AA` | Accessibility Standard [ `Section508`, `WCAG2A`, `WCAG2AA`, `WCAG2AAA` ]
 Timeout        | `timeout`       | `--timeout`, `-t`        | `30000`   | Test Timeout in Milliseconds
+Viewport       | `viewport`      | `--viewport`, `-V`       | `desktop` | Viewport Screen Size [ `desktop`, `tablet-landscape`, `tablet-portrait`, `mobile` ]
 Wait           | `wait`          | `--wait`, `-W`           | `0`       | Page Load Wait in Milliseconds
 Warnings       | `warnings`      | `--warnings`, `-w`       | `true`    | Include Warnings in Report ( `--warnings=false` or `--no-warnings` to disable )
 
@@ -152,4 +154,15 @@ It's possible to overload settings in your `config` file by passing in CLI param
 ```bash
 rvw-a11y --config=/path/to/config.json --output=/path/to/other/folder
 rvw-a11y -c /path/to/config.json -o /path/to/other/folder
-```
+```
+
+
+Viewport Screen Sizes:
+---
+
+Size               | Width | Height
+-------------------|-------|---------
+`desktop`          | 1366  | 768
+`tablet-landscape` | 1024  | 768
+`tablet-portrait`  | 768   | 1024
+`mobile`           | 360   | 640

lib/config.js

@@ -102,6 +102,14 @@ module.exports = async options => {
     config.includeWarnings = options.warnings
   }
 
+  if (typeof options.runInBrowser === 'boolean') {
+    config.runInBrowser = options.runInBrowser
+  }
+
+  if (options.viewport && ['desktop', 'tablet', 'tablet-landscape', 'tablet-portrait', 'mobile'].indexOf(options.viewport) !== -1) {
+    config.viewport = options.viewport
+  }
+
   // Map any arguments passed via CLI that were not flags and check if they are URL's to test
   if (options['_'] && options['_'].length > 0) {
     // Initialize Tests if not already present

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rvw-accessibility-tester",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Automated Accessibility Tester for Client Websites",
   "homepage": "https://github.com/redvanworkshop/accessibility-tester#readme",
   "license": "MIT",

package.json

@@ -328,7 +328,7 @@
         display: block;
         width: 200px;
         height: 125px;
-        background: center center no-repeat;
+        background: top center no-repeat;
         background-size: cover;
         box-shadow: 0 0 4px rgba(0,0,0,0.25);
       }