Selenium 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.
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.
- Open web page to check
- Start WAVE Evaluator
- 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:
- Open
ChromeDriver
with appropriate extension enabled - Setup keyboard shortcut to run WAVE Evaluator
- Open testing website
- Press keyboard shortcut to run evaluator
- Wait for WAVE to finish analysis
- 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 |
|
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. |