Command Line Testing Tools

axe-core CLI

The axe-core CLI is a command-line interface tool that integrates the axe-core accessibility testing engine into development workflows, enabling automated accessibility testing of web content. It allows developers to run tests, customize configurations, and generate reports efficiently.

Integrantion into the platform

Install axe-core CLI as a dev dependency:

npm install axe-core @axe-core/cli --save-dev

Create a configuration file named axe-config.json in the root directory of your Angular application.

{
  "urls": [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
  ],
  "outputDir": "accessibility-reports",
  "rules": {
    "color-contrast": { "enabled": false }
  }
}

Create a script in your package.json to run axe-core CLI with the desired URL:

"scripts": {
  "test:accessibility": "axe --config axe-config.json"
}

Run the accessibility tests:

npm run test:accessibility

Pa11y

Pa11y is a versatile accessibility testing CLI tool with advanced features like batch processing and custom configurations, ideal for ensuring web content is inclusive and compliant with accessibility standards.

Integrantion into the platform

Install Pa11y: First, install Pa11y as a dev dependency in your Angular project:

npm install pa11y --save

Create a Configuration File: Create a configuration file named pa11y-config.json in the root directory of your Angular project. This file will define your testing configurations, including URLs to test and any custom rules you want to apply.

The pa11y-config.json file can be as simple as this:

{
  "urls": [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
  ],
  "threshold": 0,
  "timeout": 30000
}

or complex as this:

{
  "urls": [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
  ],
  "threshold": "error",
  "timeout": 30000,
  "standard": "WCAG2AA",
  "hideElements": ".ad, .modal",
  "includeWarnings": true,
  "ignore": [
    "notice",
    "warning"
  ],
  "chromeLaunchConfig": {
    "args": ["--no-sandbox"]
  },
  "wait": 5000,
  "actions": [
    "click element .cookie-accept"
  ],
  "chromeLaunchOptions": {
    "headless": true,
    "ignoreHTTPSErrors": true
  },
  "reporter": "json",
  "reporterOptions": {
    "filePath": "./pa11y-reports/"
  }
}

Modify Your Package.json Script: Update the package.json file to include a script that runs Pa11y with the specified configuration file:

"scripts": {
  "test:accessibility": "pa11y -c pa11y-config.json"
}

Run Pa11y: Now, you can run Pa11y using the defined configuration file:

npm run test:accessibility

Review Reports: Pa11y will generate reports based on the accessibility testing results. Review these reports to identify and address any accessibility issues found in your Ushahidi Angular platform.

Lighthouse CLI

The Lighthouse CLI, a command-line tool developed by Google, enables users to conduct automated audits on web pages, offering detailed insights into performance, accessibility, SEO, and best practices. It leverages Google's PageSpeed Insights, providing a comprehensive analysis directly from the terminal, facilitating efficient testing and optimization workflows for web developers and performance engineers.

Integration into the platform

Install Lighthouse CLI as a Dev Dependency: Install Lighthouse CLI as a dev dependency in your Angular project:

npm install --save-dev lighthouse

Create a Lighthouse Crawler Script: Create a Node.js script (lighthouse-crawler.js) in your project's root directory to crawl all URLs of your site and run Lighthouse on each page. Here's a basic example of how you can implement it:

const fs = require('fs');
const { promisify } = require('util');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
 
const urls = [
  'https://your-angular-app-url.com/page1',
  'https://your-angular-app-url.com/page2',
  // Add more URLs of your site here
];
 
async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch();
  const options = { logLevel: 'info', output: 'json', onlyCategories: ['performance', 'accessibility', 'seo', 'best-practices'] };
  const { lhr } = await lighthouse(url, options, null);
  await chrome.kill();
  return lhr;
}
 
async function crawlAndRunLighthouse() {
  const results = [];
  for (const url of urls) {
    const result = await runLighthouse(url);
    results.push(result);
  }
  return results;
}
 
async function main() {
  const results = await crawlAndRunLighthouse();
  fs.writeFileSync('lighthouse-reports.json', JSON.stringify(results, null, 2));
}
 
main();

Create a Script to Run Lighthouse: Update your package.json file to include a script that runs Lighthouse for crawling all URLs. You can use a script like this:

"scripts": {
  "test:lighthouse": "node lighthouse-crawler.js"
}

Run the Lighthouse Crawler Script: Execute the Lighthouse crawler script using the defined npm script:

npm run test:lighthouse

Review the Reports: After the script completes execution, you'll find a JSON file named lighthouse-reports.json in your project's root directory containing the Lighthouse audit results for each crawled URL.

Tenon-CLI

Tenon-CLI is a specialized command-line interface tool designed for seamless integration with Tenon.io's accessibility testing API, offering developers streamlined access to comprehensive accessibility reports directly from the command line interface.

Integration into the platform

Install Tenon-CLI as a Dev Dependency: Begin by installing Tenon-CLI as a dev dependency in your project:

npm install --save-dev tenon-cli

Create a Tenon-Crawler Script: Now, create a Node.js script (tenon-crawler.js) in your project's root directory to crawl all URLs of your site and run Tenon-CLI on each page. Here's a basic example of how you can implement it:

const fs = require('fs');
const { execSync } = require('child_process');
 
const urls = [
  'https://your-site.com/page1',
  'https://your-site.com/page2',
  // Add more URLs of your site here
];
 
async function runTenonCLI(url) {
  const command = `tenon ${url} -k YOUR_API_KEY -f json`;
  return JSON.parse(execSync(command).toString());
}
 
async function crawlAndRunTenonCLI() {
  const results = [];
  for (const url of urls) {
    const result = await runTenonCLI(url);
    results.push(result);
  }
  return results;
}
 
async function main() {
  const results = await crawlAndRunTenonCLI();
  fs.writeFileSync('tenon-reports.json', JSON.stringify(results, null, 2));
}
 
main();

Please remember to replace 'https://your-site.com/page1 (opens in a new tab)', 'https://your-site.com/page2 (opens in a new tab)', etc., with the actual URLs of your site, and YOUR_API_KEY with your Tenon.io API key.

Create a Script to Run Tenon-CLI: Update your package.json file to include a script that runs Tenon-CLI for crawling all URLs. Add a script like this:

"scripts": {
  "test:tenon": "node tenon-crawler.js"
}

Run the Tenon-Crawler Script: Execute the Tenon-CLI crawler script using the defined npm script:

npm run test:tenon

Review the Reports: Once the script completes execution, you'll find a JSON file named tenon-reports.json in your project's root directory containing the Tenon accessibility reports for each crawled URL.

Browser tools Assistive Technologies