2. WHO I’M I?
2
TOMAS JAKELIS
(FRONTEND ENGINEER)
@tomas_jakelis
Testing with pa11y-ci
MMT Tech Meetup @tomas_jakelis |
#MMT_TechMeetup
CONTACT TOMAS
3. WHATARE WE GOING TO BE COVERING?
3
• What is pa11y-ci?
• Getting started with pa11y-ci
• Examples of how to use it
• pa11y-ci takeaways
@tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
4. WHY USE AUTOMATED ACCESSIBILITY TESTING?
4
• Accelerates detection of common issues in new features
• Reduces regressions in existing features
• Avoids manual testing
• Tests common accessibility issues
• Catches accessibility problems
@tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
8. GETTING STARTED WITH PA11Y-CI
8 @tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
• “urls” – an array of urls to scan and report (each url can have its own options)
• “sitemap” – gets all urls from sitemap and scans them
• “sitemap-exclude” – excludes urls which don’t need to be tested (like documents)
• “threshold” – allows number of errors, warnings and notices, otherwise reports failure
• “viewport” – sets custom viewport size
• “screenCapture” – saves a screen shot of the tested url
Some useful config options:
10. PA11Y-CI RUNNERS
10 @tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
• HTMLCS – default test runner
• AXE – another test runner available out of the box
• Custom runner
Available options:
11. PA11Y-CI ACTIONS (BETA)
11 @tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
Interesting new feature which is worth keeping an eye on. Actions will allow to fire events
on elements, wait for some elements to be loaded, fill form fields etc.
12. GOTCHAS
12 @tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
• Sitemap path can’t be defined in json config
• HTMLCS runner doesn’t deal properly with RGBA colours
(https://github.com/pa11y/pa11y/issues/442)
13. TAKEAWAYS
13
• Accelerates detection of common issues in new features
• Reduces regressions in existing features
• Frees up engineering time
• Covers common defects that are often overlooked
• Detects problems early on
• It is easy, fast and cheap
@tomas_jakelis |
#MMT_TechMeetup
MMT Tech Meetup
Testing with pa11y-ci
14. THANK YOU
14 @tomas_jakelis |
#MMT_TechMeetup
CONTACT TOMASTOMAS JAKELIS
(FRONTEND ENGINEER)
@tomas_jakelis
MMT Tech Meetup
Testing with pa11y-ci
Editor's Notes
Client dissatisfaction
Reoccurring bugs
Small bugs turning into larger ones
Past working functionality broke
Lots of time wasted testing
Manual testing failed to pick up certain issues
The previous example was just a single browser example. Selenium grid for multiple browsers as a single browser is not good enough these days
NightwatchJS have SeliniumGrid
The communication can also be facilitated by the Selenium Server (also known as Selenium Grid) or a compatible cloud-based testing platform (like Browserstack, SauceLabs, CrossBrowserTesting, or LambdaTest).
WebDrivers get installed into Node Modules folder
Selenium Server for Grid / if you want to run multiple browsers
Install Java
nightwatch.conf.js – path to where WebDriver is installed
Basic commands to use
Element expect – Chai Framework
AXE won’t work with WCAG2AAA standard
Basic commands to use
Element expect – Chai Framework
Client dissatisfaction
Reoccurring bugs
Small bugs turning into larger ones
Past working functionality broke
Lots of time wasted testing
Manual testing failed to pick up certain issues
