Automated local accessibility testing using WAVE and WebDriver

Automated local accessibility testing using WAVE and WebDriver
http://watirmelon.com/2012/11/02/automated-wcag-2-0-accessibility-testing-in-the-build-pipeline/

I wrote a while back about automated WCAG 2.0 accessibility testing in our build pipeline.

My solution involved capturing the HTML of each unique page in our application visited via WebDriver, then navigating to the online WAVE tool to check the accessibility of each chunk of HTML, all done during a dedicated accessibility stage of our build pipeline.

That was working pretty well until I noticed our IP address was starting to become blocked by WAVE due to a unreasonable number of checks… Doh!

Locally we’ve all been using the Firefox WAVE toolbar, as it’s very easy to run against a locally running instance of our application. Which made me think: how do I automate the Firefox WAVE toolbar to avoid having to use the WAVE web site alltogether?

Today I changed our accessibility tests to use the WAVE toolbar. It was a bit of a pain since we use Windows and the WAVE toolbar seems to be broken in configuring Firefox shortcut keys to trigger accessibility checks.

What I ended up doing is firing the keystrokes needed to run the check via the Tools menu in Firefox. I then check the DOM to ensure there are no WAVE errors and screenshot it and fail the test if there are. Quite simple really, and it works very reliably and quickly.

Makes me think I should have done this to start with, but a good outcome nonetheless.

Some C# WebDriver code to do this follows. This should be easy to adapt to another language.

01using System;
02using Microsoft.VisualStudio.TestTools.UnitTesting;
03using OpenQA.Selenium;
04using OpenQA.Selenium.Firefox;
05using System.Drawing.Imaging;
06 
07namespace Dominos.OLO.Html5.Tests.Acceptance
08{
09    [TestClass]
10    public class AccessibilityTests
11    {
12        [TestMethod]
13        public void AccessibilityTest()
14        {
15            var profile = new FirefoxProfile();
16            profile.AddExtension("wavetoolbar1_1_8_en.xpi");
17            var driver = new FirefoxDriver(profile);
18 
19            driver.Navigate().GoToUrl("http://apple.com");
20 
21            var b = driver.FindElement(By.TagName("body"));
22            b.SendKeys(Keys.Alt + "T");
23            b.SendKeys(Keys.ArrowDown);
24            b.SendKeys(Keys.ArrowDown);
25            b.SendKeys(Keys.ArrowDown);
26            b.SendKeys(Keys.ArrowDown);
27            b.SendKeys(Keys.ArrowRight);
28            b.SendKeys(Keys.Enter);
29 
30            var waveTips = driver.FindElements(By.ClassName("wave4tip"));
31            if (waveTips.Count == 0) Assert.Fail("Could not locate any WAVE validations - please ensure that WAVE is installed correctly");
32            foreach (var waveTip in waveTips)
33            {
34                if (!waveTip.GetAttribute("alt").StartsWith("ERROR:")) continue;
35                var fileName = String.Format("{0}{1}{2}", "WAVE", DateTime.Now.ToString("HHmmss"), ".png");
36                var screenShot = ((ITakesScreenshot)driver).GetScreenshot();
37                screenShot.SaveAsFile(fileName, ImageFormat.Png);
38                Assert.Fail("WAVE errors were found on the page. Please see screenshot for details");
39            }
40        }
41    }
42}

and finally the resulting screenshot: