Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add severity levels to fail on #137

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add severity levels to fail on #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e33973
Add an array of severity levels to fail on
roc Jul 28, 2022
b199dc2
allow various levels of failure: all, none, or SeverityLevels
roc Jul 28, 2022
88255e1
explain failure levels
roc Jul 28, 2022
1672a81
update package to fork
roc Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,11 @@ Allows you to define a callback that receives the violations for custom side-eff

**NOTE:** _This respects the `includedImpacts` filter and will only execute with violations that are included._

##### skipFailures (optional, defaults to false)
##### failOn (optional, defaults to 'any')

Disables assertions based on violations and only logs violations to the console output. This enabled you to see violations while allowing your tests to pass. This should be used as a temporary measure while you address accessibility violations.
Set a level to fail on. Options are 'any', 'none' or an array of levels ['minor', 'moderate', 'serious', 'critical'];

Reference : https://github.com/component-driven/cypress-axe/issues/17
Allows you to set the level of severity to fail on. If set to 'any', any level of violation will fail, whilst 'none' will allow all violations to pass. You can fine tune this with a severity array, e.g. `['serious', 'critical']` will only fail on errors at the serious or critical level. This allows you to log all violations using e.g. `cy.checkA11y(null, null, terminalLog)` whilst only failing for a particular severity level.

### Examples

Expand Down Expand Up @@ -175,7 +175,12 @@ it('Has no a11y violations after button click', () => {

it('Only logs a11y violations while allowing the test to pass', () => {
// Do not fail the test when there are accessibility failures
cy.checkA11y(null, null, null, true)
cy.checkA11y(null, null, null, 'none')
})

it('Only logs a11y violations of level "critical"', () => {
// Do not fail the test when there are accessibility failures below the 'critical' level
cy.checkA11y(null, null, ['critical'])
})
```

Expand Down
148 changes: 74 additions & 74 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,76 @@
{
"name": "cypress-axe",
"version": "0.8.1",
"license": "MIT",
"description": "Test accessibility with axe-core in Cypress",
"homepage": "https://github.com/component-driven/cypress-axe",
"repository": "component-driven/cypress-axe",
"files": [
"dist"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc",
"lint": "eslint . --cache --fix",
"pretest": "npm run lint",
"test": "npm run test:e2e:ci",
"posttest": "npm run format",
"format": "prettier --loglevel warn --write \"**/*.{js,md}\"",
"prepublishOnly": "npm run build",
"start": "http-server test",
"cypress": "cypress open",
"cypress:headless": "cypress run --browser chrome --headless",
"test:e2e": "start-server-and-test start 8080 cypress",
"test:e2e:ci": "start-server-and-test start 8080 cypress:headless"
},
"engines": {
"node": ">=10"
},
"dependencies": {},
"peerDependencies": {
"axe-core": "^3 || ^4",
"cypress": "^10"
},
"devDependencies": {
"@types/node": "^14.14.8",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"axe-core": "^4.0.2",
"cypress": "^10.1.0",
"eslint": "^7.12.0",
"eslint-config-tamia": "^7.2.6",
"http-server": "^0.12.3",
"husky": "^4.3.0",
"lint-staged": "^10.5.0",
"prettier": "^2.1.2",
"start-server-and-test": "^1.11.5",
"typescript": "^4.0.5"
},
"authors": [
{
"name": "Andy Van Slaars",
"url": "https://vanslaars.io"
},
{
"name": "Artem Sapegin",
"url": "https://sapegin.me"
}
],
"keywords": [
"a11y",
"accessibility",
"axe",
"axe-core",
"cypress"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.{js,md}": "prettier --write"
}
"name": "@-ralph/cypress-axe",
"version": "1.0.0rc",
"license": "MIT",
"description": "Test accessibility with axe-core in Cypress",
"homepage": "https://github.com/component-driven/cypress-axe",
"repository": "component-driven/cypress-axe",
"files": [
"dist"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc",
"lint": "eslint . --cache --fix",
"pretest": "npm run lint",
"test": "npm run test:e2e:ci",
"posttest": "npm run format",
"format": "prettier --loglevel warn --write \"**/*.{js,md}\"",
"prepublishOnly": "npm run build",
"start": "http-server test",
"cypress": "cypress open",
"cypress:headless": "cypress run --browser chrome --headless",
"test:e2e": "start-server-and-test start 8080 cypress",
"test:e2e:ci": "start-server-and-test start 8080 cypress:headless"
},
"engines": {
"node": ">=10"
},
"dependencies": {},
"peerDependencies": {
"axe-core": "^3 || ^4",
"cypress": "^10"
},
"devDependencies": {
"@types/node": "^14.14.8",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"axe-core": "^4.0.2",
"cypress": "^10.1.0",
"eslint": "^7.12.0",
"eslint-config-tamia": "^7.2.6",
"http-server": "^0.12.3",
"husky": "^4.3.0",
"lint-staged": "^10.5.0",
"prettier": "^2.1.2",
"start-server-and-test": "^1.11.5",
"typescript": "^4.0.5"
},
"authors": [
{
"name": "Andy Van Slaars",
"url": "https://vanslaars.io"
},
{
"name": "Artem Sapegin",
"url": "https://sapegin.me"
}
],
"keywords": [
"a11y",
"accessibility",
"axe",
"axe-core",
"cypress"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.{js,md}": "prettier --write"
}
}
48 changes: 32 additions & 16 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export interface Options extends axe.RunOptions {
includedImpacts?: string[];
}

export type SeverityLevels = ['minor' | 'moderate' | 'serious' | 'critical'];

export type AlertLevels = 'any' | 'none' | SeverityLevels;

export const injectAxe = () => {
const fileName =
typeof require?.resolve === 'function'
Expand All @@ -46,11 +50,23 @@ function isEmptyObjectorNull(value: any) {
return Object.entries(value).length === 0 && value.constructor === Object;
}

const assertOnViolations = (violations: any[], failLevel: AlertLevels) => {
assert.equal(
violations.length,
0,
`
== ${failLevel ? 'Failure set on errors of type ' + failLevel : ''} ==
${violations.length} accessibility violation${
violations.length === 1 ? '' : 's'
} ${violations.length === 1 ? 'was' : 'were'} detected`
);
};

const checkA11y = (
context?: axe.ElementContext,
options?: Options,
violationCallback?: (violations: axe.Result[]) => void,
skipFailures = false
failOn: AlertLevels = 'any'
) => {
cy.window({ log: false })
.then((win) => {
Expand Down Expand Up @@ -100,21 +116,21 @@ const checkA11y = (
return cy.wrap(violations, { log: false });
})
.then((violations) => {
if (!skipFailures) {
assert.equal(
violations.length,
0,
`${violations.length} accessibility violation${
violations.length === 1 ? '' : 's'
} ${violations.length === 1 ? 'was' : 'were'} detected`
);
} else if (violations.length) {
Cypress.log({
name: 'a11y violation summary',
message: `${violations.length} accessibility violation${
violations.length === 1 ? '' : 's'
} ${violations.length === 1 ? 'was' : 'were'} detected`,
});
if (failOn === 'none') {
return;
}
if (failOn === 'any') {
assertOnViolations(violations, failOn);
} else {
const violated =
failOn &&
Array.isArray(failOn) &&
Boolean(failOn.length) &&
violations.filter((v) => v.impact && failOn.includes(v.impact));

if (violated) {
assertOnViolations(violated, failOn);
}
}
});
};
Expand Down