In my past experience I have been working on accessible websites and implementing accessibility standards to make a website accessible for all users, whether they have disabilities of some kind or not. While making any web page or website accessible, the major challenge is to write code and test it against accessibility standards like Accessibility Standard US Sec 508 and WCAG2.0. I have been using many tools and libraries that provide help in developing and testing accessible websites. Google’s accessibility developer library is one of them which is a JavaScript-based open source library to test your web page against some accessibility rules or standards.
In this blog post, I am going to explain how we can configure Jenkins for Continuous Integration on Windows 7 OS and integrate with Accessibility Developer Tools to perform Accessibility Testing.
Jenkins Installation and Configuration
To install Jenkins you can download the “Jenkins.war” file here or directly download from Jenkins Official Website.
Once you download the given war file, place it into your local system drive. For example, I am placing this war file into the E:\jenkins folder.
Go to folder location (E:\jenkins) and execute the below given command into command prompt.
By default, Jenkins Server installs at port 8080. You can change the port number as per the given command below-
Use the following command at command prompt to install Jenkins on port 8090: java -jar jenkins.war –httpPort=8090
If you want to use https use the following command: java -jar jenkins.war –httpsPort=8090
Once you get a successful installation message on the command console, now connect to Jenkins by going to the following URL http://<hostname>:8080/ as I have installed Jenkins on default port 8080.
You can also install Jenkins as a Windows service by navigating to manage Jenkins > Install as Window Service.
After installation as per the above given process now you can install Jenkins as Windows service, Go To > Manage Jenkins > Install as Windows Service.
If you are unable to see the “Install as Windows Service” option, it means that Jenkins is already running on your machine as a Windows service.
By clicking on “Install as Windows Service,” the next screen will come as given below. Here you can give installation directory as per your choice.
Configuring Job in Jenkins
Now you are ready to configure your first job. To create a new job, click on New Item, then put your project name e.g. my-accessible-project and choose Freestyle project.
Clicking on the Ok button will take you to a new screen to enter your configure parameter.
Click on Discard Old Builds. By clicking on this checkbox and providing max # of builds to keep, you can delete older builds and keep only a given number of builds.
If you are using GitHub as a code repository you can install the Github plugin in your Jenkins. For more details click here .
To install the plugin in Jenkins you can navigate to Manage Jenkins > Manage plugins > Available Tab and search for required plugins.
Once you have above given plugin into your Jenkins, go to your Job Configuration window and enter path for your GitHub Project in GitHub Project.
For Source Code Management Section, Click on Git and enter your repository URL as given in below screenshot.
In the Build Triggers section, check on “Build when a change is pushed to GitHub” or you can also check on Poll SCM and provide scheduler time as per below given format.
In Build section click on Add Build Step > Execute Window batch command. Here you can write Windows batch command to perform any build steps.
Now you can click on “Save” button and you are done with configuration. You now see your job listed on home page of Jenkins. To build this project you can simply click on the build icon.
We are now done with the basic Jenkins configuration required for any project.
Now I am going to explain how we can use the tool provided by Google Chrome to perform Unit Testing for Accessibility.
Google Accessibility Developer Tools
Google’s accessibility developer tools are an open source library of accessibility related testing and utility code. The main component of this library is a collection of audit rules that check for accessibility problems and an API for running these rules in an HTML page. This accessibility test performs basic checks for Accessibility standards provided by Sec 508 like text alternative, contrast ration calculation and a few others.
This open source library can be downloaded from Github by clicking here. By default this library is indented to perform accessibility testing on one HTML page by injecting audit.js file into provided HTML file. But while integrating with Jenkins to perform accessibility Unit Testing you will need to test all HTML files placed in your resource directory.
To achieve this I have customized the default audit.js file and written a batch script which is required to iterate all HTML files present in your target directory or workspace. The customized code of the Accessibility Library from here to perform testing on all provided HTML pages.
Integration with Google Chrome Accessibility Tool
As we are already done with new project configuration, we just need to integrate the Accessibility tool into the build step. To do this, follow the below given steps:
Download customized code to perform Accessibility Testing for all HTML file present in your target directory from here.
Unzip the code at any location in your system. For example, I have placed unzipped code at E:\at-tool location in my system. As this tool uses PhantomJS you need to also install PhantomJs. You can get an installable version of PhantomJS from here.
Now go to Jenkins and navigate to Jenkins > my-accessibility-project >configuration and in the Add Build step select Execute Window batch Command and paste the below given script into the command window.
By using the above script, we are iterating all HTML files placed in your code workspace and passing these HTML files to audit.js one by one. In the given window script, %WORKSPACE% is the default variable for the current workspace.
Now click on Save and go to build option for your project and click on build option to start build. You can check your Jenkins console Output screen to check logs.
If all your HTML pages pass all test cases written in the accessibility library, your build be successful, or else you will be able to see warning/error for failed test cases on console.
You can also add your custom test cases based on your requirement and use it for your project in the Google Accessibility Tool’s Test cases.
Hence we are done with our goal to configure Jenkins and integrate it with Google Chrome Accessibility to perform accessibility testing.
Happy learning!!
The post Accessibility Testing Using Jenkins and Google Accessibility Developer Tools appeared first on 3Pillar Global.