On this page:

• Definition file
  • Simple example
  • Overriding global settings with link options
  • Pre-validation commands/actions with the validation DSL
    • Waiting for something to load
    • Select an option from a dropdown box
    • Write text into an element
    • Click an element
    • Pause the execution

Definition file

The definition file consist of a list of URL’s and optional commands that you can combine in order to describe how a particular web site should be prepared before testing.

Simple examples

This is the simplest form of a definition file. It consists only of an array of links.

Yaml - see alphagov.yml:

    links:
      - link: 'https://alphagov.github.io/accessibility-tool-audit/test-cases.html'

Javascript - see alphagov.js:

    exports.links = [
        {link: 'https://alphagov.github.io/accessibility-tool-audit/test-cases.html'}
    ];

Here is another example with multiple links:

Yaml - see nav.yml:

    links:
      - 'https://www.nav.no/no/NAV+og+samfunn/Kontakt+NAV/Kontakt+oss/kontakt-nav-på-telefon'
      - 'https://www.nav.no/no/Person/Arbeid/Arbeidsledig+og+jobbsoker'
      - 'https://www.nav.no/no/Person/Pensjon/Alderspensjon'

Overriding global settings with link options

Its possible to override some of the default settings on individual links by specifying extra options:

Example

Note that with Yaml, you have to start the URL with the key link:. In this example we define two links, one without options and another that configures the validator to run the validation in Firefox with only the given three rule categories (one of these tags), but without the hidden-content rule:

    links:
      - 'https://www.nav.no/no/Person/Pensjon/Alderspensjon'
      - link: 'https://www.nav.no'
        options:
          browser: "firefox"
          ignoreRules: "hidden-content"
          tags: "wcag2a,wcag2aa,best-practice"

The same example written in Javascript:

    exports.links = [
    	{ link: 'https://www.nav.no/no/Person/Pensjon/Alderspensjon' },
        { link: 'http://www.nav.no',
            options: {
                browser: "firefox",
                ignoreRules: "hidden-content",
                tags: "wcag2a,wcag2aa,best-practice"
            }
        }
    ];

Preforming commands/actions before validation

These examples shows how to define options to customize the behaviour of the test execution. The options are tasks that are run by Selenium before the validation is executed using Axe. The way this works is by first loading the specified link, then executing any tasks specified under the commands list in the given order and then finally validating the resulting web page.

This is the list of supported commands:

See examples of valid CSS-selectors:

https://www.testingexcellence.com/css-selectors-selenium-webdriver/ https://saucelabs.com/resources/articles/selenium-tips-css-selectors

waitFor - Waiting for something to load

In this example we tell Validator to go to the link given and then wait for the element named .content to become visible before it executes the validation. The value of the waitFor option is a fully qualified CSS selector. If the element .content does not exist, an error is thrown and the validator exists with status code 1.

Yaml:

    links:
      - link: 'http://localhost:3000/lorem/ipsum'
        options:
          commands:
              - waitFor: '.content'

Javascript:

    exports.links = [ {
            link: 'http://localhost:3000/lorem/ipsum',
            options: {
                commands: [
                    { waitFor: '.content' }
                ]
            }
        } ];

selectOption - Select an option from a dropdown box

In this example we tell Validator to go to the link and then select the option with the text ‘Lorem Ipsum’. The value of selectOption.from is a fully qualified CSS selector.

Yaml:

    links:
      - link: 'http://localhost:3000/lorem/ipsum'
        options:
          commands:
            - selectOption:
                from: '#header select'
                option: 'Lorem Ipsum'

Javascript:

    exports.links = [
        {
            link: 'http://localhost:3000/lorem/ipsum',
            options: {
                commands: [
                    { selectOption: { from: '#header select', option: 'Lorem Ipsum' } }
                ]
            }
        }
    ];

type - Write text into an element

In this example we write the text ‘Lorem Ipsum’ into text element specified in the property typeInto. The value of type.into is a fully qualified CSS selector.

Yaml:

    links:
      - link: 'http://localhost:3000/lorem/ipsum'
        options:
          commands:
            - type:
                into: '#username'
                text: 'Lorem Ipsum'

Javascript:

    exports.links = [
        {
            link: 'http://localhost:3000/lorem/ipsum',
            options: {
                commands: [
                    { type: { into: '#username', text: 'Lorem Ipsum' } }
                ]
            }
        }
    ];

You can also specify an optional control key that will be pressed on the keyboard. You can do this by adding the extra key option. The value of the key should be any of the stateless keys on the keyboard: enter, tab, esc, backspace, delete.

Yaml - see typeinto.yml:

links:
  - link: "http://www.nav.no"
    options:
      commands:
        - waitFor: '.siteheader'
        - type:
            into: "#site-search-input"
            text: "Pensjon"
            key: "enter"

clickOn - Click an element

In this example we click on the element #btnNextPage. The validation of the page is then executed right after. If the element #btnNextPage does not exist, an error is thrown and the validator exists with status code 1. The values of clickOn is a fully qualified CSS selectors.

Yaml:

    links:
      - link: 'http://localhost:3000/lorem/ipsum'
        options:
          commands:
            - clickOn: '#btnNextPage'

Javascript

    exports.links = [
        {
            link: 'http://localhost:3000/lorem/ipsum',
            options: {
                commands: [
                    { clickOn: '#btnNextPage' }
                ]
            }
        }
    ];

pause - Pause the execution

In this example we click on the element #btnNextPage and then pause the execution for 3 seconds to give the browser some time to load data or finish the execution of f.ex. animations on the page. The value of pause is a millis integer.

Yaml:

    links:
      - link: 'http://localhost:3000/lorem/ipsum'
        options:
          commands:
            - clickOn: '#btnNextPage'
            - pause: 3000

Javascript

    exports.links = [
        {
            link: 'http://localhost:3000/lorem/ipsum',
            options: {
                commands: [
                    { clickOn: '#btnNextPage' },
                    { pause: 3000 }
                ]
            }
        }
    ];

Table of contents