Use Profiles in Visual Studio Code to establish a consistent editor environment wherever you use VS Code (desktop, browser, codespaces). This is my Playwright-FYI profile, setup for use in this demo. You can import this to use it as your default profile when following this tutorial.
The jQuery UI site provides a download of their comprehensive list of demos we can use for testing. In Oct 2021 maintainers announced jQuery UI 1.13 will be the final release as they transition to more modern alternatives - however they note that 73% of the top 10M popular sites still run jQuery, making this a good target for compliance.
The ijQuery demos page has 28 components with addressable ids for individual testing:
1-accordion · 2-autocomplete · 3-button · 4-button-icon · 5-radioset · 6-radio1 · 7-radio2 · 8-radio3 · 9-controlgroup · 10-car-type · 11-transmission-standard · 12-transmission-automatic · 13-insurance · 14-horizontal-spinner · 15-tabs · 16-tabs-1 · 17-tabs-2 · 18-tabs-3 · 19-dialog-link · 20-dialog · 21-icons · 22-slider · 23-datepicker · 24-progressbar · 25-selectmenu · 26-spinner · 27-menu · 28-tooltip
While jQuery dominates the market with a ~75% share, Bootstrap comes in second with a consistent presence at ~21% - making it a good second target for accessibility compliance study.
The Boostrap 5.3 examples page provides the following 41 component-specific demo pages we can test.
1-album-rtl · 2-album · 3-badges · 4-blog-rtl · 5-blog · 6-breadcrumbs · 7-buttons · 8-carousel-rtl · 9-carousel · 10-cheatsheet-rtl · 11-cheatsheet · 12-checkout-rtl · 13-checkout · 14-cover · 15-dashboard-rtl · 16-dashboard · 17-dropdowns · 18-features · 19-footers · 20-grid · 21-headers · 22-heroes · 23-jumbotron · 24-jumbotrons · 25-list-groups · 26-masonry · 27-modals · 28-navbar-bottom · 29-navbar-fixed · 30-navbar-static · 31-navbars-offcanvas · 32-navbars · 33-offcanvas-navbar · 34-offcanvas · 35-pricing · 36-product · 37-sidebars · 38-sign-in · 39-starter-template · 40-sticky-footer-navbar · 41-sticky-footer
GitHub converts Markdown documents into static HTML when deploying to GitHub pages. To test Markdown-driven static sites, we’ll use the steps folder - which happens to contain the steps for this demo/workshop.
ABOUT 👉🏽 | 1.1-Project Motivation · 1.2 Website Technologies · 1.3 Web Accessibility Content Guidelines · 1.4 aXe Testing Solution · 1.5 Playwright Testing Framework · 1.6 Assesment: Under the Hood · 1.7 Workflow: End-to-End Experience
SETUP 👉🏽 | 2.1 Environment