CODEWITHSUNDEEP
accessibilityprotractorangularjs-e2e
Rajesh Yarlagadda
Rajesh Yarlagadda

Reputation: 223

Protractor - Accessibility Test Results - Analyzing results

I'm using Accessibility Plugin + Protractor.

As listed below, I am seeing a few accessibility errors after running some smoke tests and I'm not sure, if the accessibility audit is actually performed in each webpage during the E2E Test.

As I am new to this, kindly advise if there is any way to trigger accessibility audit, after navigating to a new webpage during E2E Tests.

e2e-tests $ grunt protractor:websiteSmokeTests --website="https://testsite/"

Running "protractor:websiteSmokeTests" (protractor) task Using the selenium server at http://localhost:4444/wd/hub [launcher] Running 1 instances of WebDriver

website home page functionality
Homepage - check invalid search return 0 Results - pass
Check Webmaster tools - BingSiteAuth and Google - pass
WebMaster Tools - Check Robots.txt - pass

website onpage feedback functionality
Check on page feedback for an Article - Give No - pass

Finished in 28.875 seconds 8 tests, 101 assertions, 0 failure

plugin: 0 (teardown) Chrome A11Y - This element does not support ARIA roles, states and properties Chrome A11Y - aria-owns should not be used if ownership is implicit in the DOM Chrome A11Y - Elements with ARIA roles must be in the correct scope Chrome A11Y - Audio elements should have controls Chrome A11Y - This element has an invalid ARIA attribute Chrome A11Y - ARIA state and property values must be valid

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">Close 

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04
Chrome A11Y - Elements with ARIA roles must use a valid, non-abstract ARIA role
Chrome A11Y - Controls and media elements should have labels
Chrome A11Y - An element's ID must be unique in the DOM
Chrome A11Y - (WARNING) These elements are focusable but either invisible or obscured by another element (10 elements failed)
Chrome A11Y - The web page should have the content's human language indicated in the markup
Chrome A11Y - Images should have an alt attribute
Chrome A11Y - (WARNING) The purpose of each link should be clear from the link text (3 elements failed)
Chrome A11Y - (WARNING) Text elements should have a reasonable contrast ratio (4 elements failed)
Chrome A11Y - role=main should only appear on significant elements
Chrome A11Y - Meaningful images should not be used in element backgrounds
Chrome A11Y - An element's ID must not be present in more that one aria-owns attribute at any time
Chrome A11Y - ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">Close 

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_02

Chrome A11Y - This element has an unsupported ARIA attribute

    2 elements failed:
    <div id="cookie-notice" class="notification" aria-describedby="cookieinfo">
    <div class="cont ... " id="close-cookie-notification" class="close-notification">Close</button>
    </div>
</div>
    <div id="decommissioned-site-notice" class="notification strong hidden" aria-describedby="decommissi ... -site-notification"

class="close-notification">Close 

    https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_10
Chrome A11Y - Video elements should use <track> elements to provide captions [launcher] 0 instance(s) of WebDriver still running

[launcher] chrome #1 failed 4 test(s) [launcher] overall: 4 failed spec(s) [launcher] Process exited with error code 1

Test failed but keep the grunt process alive.

Done, without errors.

Upvotes: 4

Views: 897

Answers (4)

James Pizzurro
James Pizzurro

Reputation: 365

If you're willing to go your own and not use the accessibility plugin you're having difficulty with, webaccessibility.com has a free implementation example of 'Continuum for Protractor' that might be a good place to get started; you can use it to integrate automated accessibility testing into your existing Protractor tests, or easily write new ones. Here's some more information if you're interested.

Upvotes: 0

sachams
sachams

Reputation: 33

I had the same problem and so wrote a derivative of the protractor-accessibility-plugin: protractor-axe-report-plugin. It only generates reports using the aXe engine, but can be run for multiple pages in your test.

Upvotes: 0

Marcy Sutton
Marcy Sutton

Reputation: 917

The way to trigger an audit is to write tests that the Accessibility plugin can piggy-back onto...it doesn't crawl your site to run audits.

Upvotes: 0

Chris Traynor
Chris Traynor

Reputation: 460

When activated, the accessibility plugin runs alongside your existing protractor test and does audit each full page that your test hits. Even if your test lands on a page just to navigate to another and no functionality is executed along the way.

Side note: I'm having trouble getting the ngHint plugin to run on my tests. Any help would be appreciated.

Upvotes: 1

Related Questions