Selenium accessibility testing

Selenium accessibility testing

accessibility testing

Beside of the normal usage, Selenium WebDriver has a lot of extra capabilities. The one of the most clever and not usual use of end-to-end testing is checking if web page fulfills accessibility testing rules.

Accessibility is a very broad topic, but there are some guidelines how to create the web application, that people with some disabilities (visual, hearing or manual) can use it. If we learn how to do this and on what elements we should focus to provide the accessible website, it turns out to be very simple. There is few number of rules keep and that’s it. Screen readers or other software will take care of the rest.

Checking compliance with Accessibility rules

However, it would be very beneficial to have a tool to automatic check compliance with accessibility standards. Of course, we shouldn’t implement all rules by ourselves. The best idea would be to use some library for this purpose. In our example, we will use a WAVE Evaluator. It is a Chrome extension, but we can use it directly from WebDriver test code.

We can install this extension to Chrome and check how it works.

wave_translate

It marks elements that do not comply with the rules. It highlights errors and warnings, but only the firs one will be important for us.

Accessibility testing automation

Our test will use this WAVE Evaluator extension. It will have simple logic.

  1. Open web page to check
  2. Start WAVE Evaluator
  3. Check if it highlights some errors

Looks very simple. The hardest part would be running this extension directly from test code. At first, we should download the extension in crx format. Place it in the main project directory.

Then we can use following code:

[Test]
public void AccessibilityTest()
{
    // 1
    ChromeOptions options = new ChromeOptions();
    options.AddExtension(@"WAVE-Evaluation-Tool_v1.0.1.crx");
    var driver = new ChromeDriver(options);

    // 2 - setup key shourtcut for extension
    driver.Navigate().GoToUrl("chrome://extensions-frame/");
    driver.FindElement(By.XPath("//a[@class='extension-commands-config']"))
        .Click();
    driver.FindElement(By.XPath("//span[@class='command-shortcut-text']"))
        .SendKeys(Keys.Control + "m");
    driver.FindElement(By.Id("extension-commands-dismiss"))
        .Click();

    // 3
    driver.Navigate().GoToUrl("http://www.google.pl");
    // 4 - open WAVE extension 
    new Actions(driver).KeyDown(Keys.Control).SendKeys("m").Build().Perform();

    // 5
    var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementExists(By.ClassName("wave5icon")));

    // 6
    var waveTips = driver.FindElements(By.ClassName("wave5icon"));
    if (waveTips.Count == 0) Assert.Fail(
        "Could not locate any WAVE validations - " +
        "please ensure that WAVE is installed correctly");
    foreach (var waveTip in waveTips)
    {
        if (!waveTip.GetAttribute("alt").StartsWith("ERROR")) continue;

        var fileName = String.Format("{0}{1}{2}", 
            "WAVE", DateTime.Now.ToString("HHmmss"), ".png");
        var screenShot = ((ITakesScreenshot)driver).GetScreenshot();
        screenShot.SaveAsFile(
            Path.Combine(System.IO.Path.GetTempPath(), fileName), ImageFormat.Png);
        driver.Close();
        Assert.Fail(
            "WAVE errors were found on the page. Please see screenshot for details");
    }
    driver.Close();
}

It consists of 6 parts:

  1. Open ChromeDriver with appropriate extension enabled
  2. Setup keyboard shortcut to run WAVE Evaluator
  3. Open testing website
  4. Press keyboard shortcut to run evaluator
  5. Wait for WAVE to finish analysis
  6. Check if exists any highlight with category – error

You can see also a short example how we can use extensions in our tests above. The idea to do this is taken from this blog post. I improve it and make it work for current WebDriver versions.

You can find more information about end-to-end testing in my book

The power of end-to-end testing

cover6_small
See more
End-to-end testing is a great improvement in quality testing automation. It reflects the user experience the most of all tests.

This book is a complete guide to Selenium tools. Both for beginners and experienced developers.

It just makes sure that system works fine, saving your time after all.

%d bloggers like this: