search

modernweb-dev / web

Guides, tools and libraries for modern web development.
https://modern-web.dev
MIT License
2.22k stars 289 forks source link

How to setup a test with axe? #1911

Open Alex-Jongman opened 2 years ago

Alex-Jongman commented 2 years ago

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.

LarsDenBakker commented 2 years ago

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.

Alex-Jongman commented 2 years ago

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?