web icon indicating copy to clipboard operation
web copied to clipboard

How to setup a test with axe?

Open Alex-Jongman opened this issue 2 years ago • 2 comments

I want to add an accessibility test based on the axe linter to my package.json scripts. I installed axe with npm install @axe-core/cli -g and added the following lines to the package.json:

"start": "web-dev-server --node-resolve --watch --open",
"test:a11y": "axe http://localhost:8000"

The axe based test however requires the web server to be running on a specific port, and I wonder if it is possible to start the web server together with the accessibility test in a single script, and have axe automatically use the url and port of that web server.

Alex-Jongman avatar Mar 31 '22 08:03 Alex-Jongman

You can specify a port using --port. You can run them together in the same bash script, but you still need a way to sync the ports.

LarsDenBakker avatar Mar 31 '22 13:03 LarsDenBakker

Tried to use the life cycle of npm script by defining the scripts:

    "prea11y": "web-dev-server --node-resolve --port 8000",
    "a11y": "axe localhost:8000",

in the package.json. But when I run npm run a11y the pre script never finishes, because the web-dev-server doesn't finish until I hit Ctrl+C.

Also tried the npm package 'concurrently', but than the I got a timing problem, because the axe script already started before the web server was up.

Any suggestions on how I could setup the package.json to test with axe?

Alex-Jongman avatar Apr 10 '22 20:04 Alex-Jongman