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.