{"id":800,"date":"2021-10-20T15:40:20","date_gmt":"2021-10-20T15:40:20","guid":{"rendered":"\/blog\/?p=205"},"modified":"2025-06-23T20:12:59","modified_gmt":"2025-06-23T20:12:59","slug":"evinced-selenium-sdk-plug-and-play-a11y-testing-at-scale","status":"publish","type":"post","link":"https:\/\/www.evinced.com\/blog\/evinced-selenium-sdk-plug-and-play-a11y-testing-at-scale\/","title":{"rendered":"Our Automation SDK in a CI Pipeline with Jenkins and Selenium"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Integrating an accessibility testing tool into an existing test automation suite can be challenging. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we will suggest a simpler approach that you can use to add Evinced\u2019s accessibility engines into your tests with as little effort as possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Evinced Selenium SDK is uniquely positioned for a plug and play approach because it does not interact with test code directly. This has distinct advantages. First, because all of the needed setup is in auxiliary classes or methods, the tests stay exactly as the developer intended. This also means there is nothing needed to setup or maintain tests. This greatly reduces the friction created with the introduction of new tools and dramatically reduces the time it takes to start seeing a return on investment in accessibility testing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Adding-Evinced-accessibility-scans-to-your-existing-tests\">Adding Evinced accessibility scans to your existing tests<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">So let\u2019s dig in! But first, please note that every development environment is different and customization will likely be needed to suit individual needs. Also, this is not the ONLY way to implement the Evinced Selenium SDK, but we do feel like the concept presented provides a great solution for large organizations that have numerous teams and complex needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add evinced to our tests we simply need to add these 4 lines of code to our test framework.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>\/\/ Start Evinced\ndriver = new EvincedWebDriver(new ChromeDriver(chromeOptions));\ndriver.evStart();\n\n\/\/ Stop Evinced\nReport report = driver.evStop();\nEvincedReporter.writeEvResultsToFile(testName.getMethodName(), report, EvincedReporter.FileFormat.HTML);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Most modern test frameworks have the concept of before and after hooks\/methods that we can utilize to start and stop evinced within our framework. Using JUnit it would look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>@Before\npublic void setUp() {\n\tdriver = new EvincedWebDriver(new ChromeDriver(chromeOptions));\n\t\tdriver.evStart();\n}\n\n@After\npublic void tearDown() {\n\tReport report = driver.evStop();\n\tEvincedReporter.writeEvResultsToFile(testName.getMethodName(), report, EvincedReporter.FileFormat.HTML);\n\tdriver.quit();\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">At this point we could just simply add your tests to this script and everything would work perfectly fine. But let\u2019s think about the developers. We want them focused on their task of developing great software and not worrying about Selenium drivers, adding the Evinced engine, generating reports etc. We would recommend moving the tests to their own class that extends a base class containing these <code>Before<\/code> and <code>After<\/code> methods. Here is what an example class would look like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>imports ...\n\npublic class BaseAccessibilityTest {\n\n\tpublic EvincedWebDriver driver;\n\n\t@Before\n\tpublic void setUp() {\n\t\tChromeOptions chromeOptions = ChromeOptionsHelper.getHeadlessOptionsConfiguration();\n\t\tdriver = new EvincedWebDriver(new ChromeDriver(chromeOptions));\n\t\t\tdriver.evStart();\n\t}\n\n\t@After\n\tpublic void tearDown() {\n\t\tReport report = driver.evStop();\n\t\tEvincedReporter.writeEvResultsToFile(testName.getMethodName(), report, EvincedReporter.FileFormat.HTML);\n\t\tdriver.quit();\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then our test classes simply need to extend this base class:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>imports ...\n\npublic class SampleAccessibilityTest extends BaseAccessibilityTest {\n\t@Test\n\tpublic void demoSiteNavigationTest() {\n\t\tdriver.get(\"https:\/\/demo.evinced.com\/\");\n\t\t\/\/ interacting with the page - opening all dropdown\n\t\tWebElement firstDropdown = driver.findElement(By.cssSelector(\"div.filter-container &gt; div:nth-child(1) &gt; div &gt; div.dropdown.line\"));\n\t\tfirstDropdown.click();\n\t\tSystem.out.println(\"Clicked on first dropdown\");\n\t\tWebElement secondDropdown = driver.findElement(By.cssSelector(\"div.filter-container &gt; div:nth-child(2) &gt; div &gt; div.dropdown.line\"));\n\t\tsecondDropdown.click();\n\t\tSystem.out.println(\"Clicked on second dropdown\");\n\t\tdriver.findElement(By.cssSelector(\".react-date-picker\")).click();\n\t\tSystem.out.println(\"Clicked on third dropdown\");\n\t}\n\n\t@Test\n\tpublic void anotherTest() {\n\t\t\/\/Test Code\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Developers can focus on their work in the test classes not even having to think about the addition of Evinced accessibility scans.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"CI-Integration\">CI integration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that our tests are ready to run, what if we want to run the Selenium tests without accessibility scans? How can we configure this to happen automatically as part of a CI\/CD pipeline? These are not \u201cnice to haves\u201d when it come to implementation in an enterprise development environment, this is a minimum requirement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So let\u2019s create a mechanism that easily enables Evinced accessibility scans and just as easily disables them. Because the starting and stopping of the Evinced engine is so simple we can easily use an \u201cif\u201d statement with a flag that would indicate whether to add accessibility scans to the selected tests. One possible flag is to use an environmental variable populated on the CI node at runtime to indicate whether to add accessibility scans or not. For the purpose of this example we will use the variable <code>ADD_A11y<\/code> and set it to \u201ctrue\u201d or \u201cfalse\u201d within our base class.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>public class BaseAccessibilityTest {\n\tpublic EvincedWebDriver driver;\n\tString a11yEnabled = System.getenv(\"ADD_A11Y\");\n\n\tprivate boolean isAccessibilityEnabled() {\n\t\treturn a11yEnabled != null &amp;&amp; a11yEnabled.equals(\"true\");\n\t}\n\n\t@Before\n\tpublic void setUp() {\n\t\tChromeOptions chromeOptions = ChromeOptionsHelper.getHeadlessOptionsConfiguration();\n\t\tdriver = new EvincedWebDriver(new ChromeDriver(chromeOptions));\n\t\tif (isAccessibilityEnabled()) {\n\t\t\tdriver.evStart();\n\t\t}\n\t}\n\n\t@After\n\tpublic void tearDown() {\n\t\tif (isAccessibilityEnabled()) {\n\t\t\tReport report = driver.evStop();\n\t\t\tEvincedReporter.writeEvResultsToFile(testName.getMethodName(), report, EvincedReporter.FileFormat.HTML);\n\t\t}\n\t\tdriver.quit();\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">So here, if the <code>ADD_A11Y<\/code> variable is set to \u201c<code>true<\/code>\u201d, the Evinced engine will be started to continuously pinpoint accessibility issues throughout the tests, and if <code>ADD_A11Y<\/code> is set to \u201c<code>false<\/code>\u201d the tests will run normally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jenkins-Example\">Jenkins example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This type of variable can easily be added to the <code>environment<\/code> section of your pipeline script or set within the Jenkins UI. Below is an example pipeline script:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><button class=\"copy-code-button\" type=\"button\" aria-label=\"Copy code to clipboard\" aria-live=\"polite\">Copy<\/button><code>pipeline {\n    agent {\n        label '!windows'\n    }\n    environment {\n        ADD_A11Y = 'true'\n        \/\/ More ENV variables\n    }\n    stages {\n        stage('Test') {\n            steps {\n              \/\/ Test Build steps...\n            }\n        }\n    }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We have now implemented the Evinced SDK in a way that can take full advantage of our existing investment in Selenium. By extending the <code>BaseAccessibilityTest<\/code> class, we can add accessibility scans to any test in our framework. We can also enable or disable the addition of accessibility tests on demand as part of our CI\/CD process using a single flag.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Reports\">Reports<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At the conclusion of our tests, we get a consolidated and detailed Evinced HTML\/JSON accessibility report containing all issues found, severity levels, descriptions, effect on end users, and actionable information on how to resolve the issues.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-09-02-at-3.17.31-PM-1024x580.png\" alt=\"An example of Evinced accessibility reports with CI integration with Jenkins\" class=\"wp-image-206\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Interested in seeing this in action? Find more information in our <a href=\"https:\/\/developer.evinced.com\/sdks-for-web-apps\/selenium-java-sdk\">developer documentation<\/a> and\/or <a href=\"https:\/\/www.evinced.com\/contact\/demo-request\">contact us<\/a> to get started!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Integrating an accessibility testing tool into an existing test automation suite can be challenging. In this post, we will suggest a simpler approach that you can use to add Evinced\u2019s accessibility engines into your tests with as little effort as possible. The Evinced Selenium SDK is uniquely positioned for a plug and play approach because [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":1251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-products"],"acf":{"authors_to_show":[924]},"_links":{"self":[{"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/posts\/800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/comments?post=800"}],"version-history":[{"count":6,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/posts\/800\/revisions"}],"predecessor-version":[{"id":1313,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/posts\/800\/revisions\/1313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/media\/1251"}],"wp:attachment":[{"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/media?parent=800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/categories?post=800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.evinced.com\/blog\/wp-json\/wp\/v2\/tags?post=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}