A gist to demonstrate how to visual check a page has images which have alt tags, inputs have associated labels and that there are no broken links on the page

visual-checking-a11y

// This Gist uses the following project to provide basic visual checking functionality
// https://github.com/vivrichards600/AutomatedVisualTesting
// This Gist is quick and dirty to show how to check a web page for:
// Images with no alt tags, Inputs with no associated labels, Broken links and Elements with duplicate ids


using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support.Extensions;
using static AutomatedVisualTesting.Utilities.Compare;

[TestClass]
public class ExampleWebPageTest
{
    [TestMethod]
    public void Sweet_Shop_Checkout_Page_Test()
    {
        // Create new instance of the Chrome Driver
        var driver = new ChromeDriver();

        // Specify the base image - how we expect the page to look
        var baseImage = "Sweet_Shop_Checkout_Page.png";

        // Navigate to the page we want to compare against the base image
        driver.Navigate().GoToUrl("https://sweetshop.netlify.com/basket.html");

        // Inject classes into page to style broken elements
        var pageAccessibilityStyles = "var css = '.broken {border: 1px solid #ff00e5;}', head = document.head || document.getElementsByTagName('head')[0],style = document.createElement('style');head.appendChild(style);style.type = 'text/css';style.appendChild(document.createTextNode(css));";
        driver.ExecuteJavaScript(pageAccessibilityStyles);

        // highlight any inputs without associated labels
        var highlightInputsWithoutLabels = "for(var inputs=document.querySelectorAll(\"input\"),labels=document.querySelectorAll(\"label\"),currentInput=0;currentInput<inputs.length;currentInput++){for(var inputHasLabel=!1,currentLabel=0;currentLabel<labels.length;currentLabel++)labels[currentLabel].htmlFor==inputs[currentInput].id&&(inputHasLabel=!0);if(0==inputHasLabel){inputs[currentInput].classList.add(\"broken\");}}";
        driver.ExecuteJavaScript(highlightInputsWithoutLabels);

        // highlight any inputs without alt tags
        var highlightImagesWithoutAltTags = "Array.prototype.slice.call (document.querySelectorAll('img')).map(function(el){if(!el.alt){el.classList.add(\"broken\");}});";
        driver.ExecuteJavaScript(highlightImagesWithoutAltTags);

        // highlight any broken links
        var highlightBrokenLinks = "var links=document.querySelectorAll(\"a\"),linkReport=[],linksChecked=0;links.forEach(function(e){var t,s,n=new XMLHttpRequest,a={url:e.getAttribute(\"href\"),status:0,message:\"\"};n.open(\"HEAD\",a.url),linkReport.push(a),n.onreadystatechange=(t=a,s=n,function(){s.readyState==s.DONE&&(t.status=s.status,linksChecked++,t.message=s.responseText+s.statusText,\"200\"!=t.status&&e.classList.add(\"broken\"))}),n.send()});var finishReport=setInterval(function(){linksChecked>=linkReport.length&&(console.table(linkReport),clearInterval(finishReport))},3e3);";
        driver.ExecuteJavaScript(highlightBrokenLinks);
        
        // highlight any elements with the same ids
        var highlightElementsWithDuplicateIds = "for(var ids={},all=document.all||document.getElementsByTagName(\"*\"),i=0,l=all.length;i<l;i++){var id=all[i].id;id&&(ids[id]?(all[i].classList.add(\"broken\"),document.getElementById(id).classList.add(\"broken\")):ids[id]=1)}";
        driver.ExecuteJavaScript(highlightElementsWithDuplicateIds);
        
        // get any differences
        var result = Differences(baseImage, driver);

        // Assert there are no differences - that we have an image match
        Assert.IsTrue(result.Match);

        driver.Quit();
    }

}