Getting started with Accessibility Testing in Sauce Labs

Testing Technology

Sauce Labs and Deque support many of the same testing technologies, making the addition of Accessibility testing to your existing tests simple!

For this guide we’ll focus on WebdriverIO

The first thing we’ll need is just one dependency for our Accessibility (or a11y) tests, shown below:

"@axe-core/webdriverio": "4.1.2-alpha.106"
//**or the latest version

As well as the saucelabs service which you likely already have in your project:

"@wdio/sauce-service"

The next step will be making sure our configuration file for SauceLabs contains the required browser configurations (as well as our API key. You’ve likely already worked with a file like this, and more information can be found in the SauceLabs documentation, just remember that you’ll need your API key, as well as your desired region (see below)

// You'll need your user and api key for this section -
config.user = "yourUserName";
config.key = "yourAPIKey";
// If you run your tests on Sauce Labs you can specify the region you want to run your tests
// in via the `region` property. Available short handles for regions are `us` (default) and `eu`.
// These regions are used for the Sauce Labs VM cloud and the Sauce Labs Real Device Cloud.
// If you don't provide the region, it defaults to `us`.
config.region = process.env.REGION || 'us';

In this wdio.conf file we have created an axeWdio object that creates a new AxeWebdriverIO instance which will take the current browser (or client) object from WDIO. This allows axe-core to be injected into the current page, and when analyze() is called, axe-core then will scan the current page content.  There are many ways to do this and we encourage you to get creative. It is perfectly fine to scan the entire page as  you get accustomed to working with the a11y results, but you may want to go further later; specifically with end-to-end tests that modify the state or the UI. For now I’ll keep it simple and show you this function:

  before: function (capabilities, specs, browser) {
        const axeWdio = new AxeWebdriverIO({
            client: browser
        })

        // set up command to run axe
        browser.addCommand('getAxeResults', async () => {
            return axeWdio.analyze()
            .then(async (result) => {
              
             
                return result
            })
            .catch(err => {
                console.log(err)
            })
        })

    },

Now anywhere in my actual tests, all I have to do is call

browser.getAxeResults()