axe-checkpoint-executor

MANUAL CHECKPOINTS AUTOMATION

​

REQUIREMENTS

​

1. Node (v12.18.3 or higher) [https://nodejs.org/en/download/]
2. Git (To download the code from git repo) [https://git-scm.com/download] ​

SETUP

​

1. In terminal/Command prompt, go to "a11y-regression-framework/Axe-Report-IGT-Automation" location.
2. Execute the command "npm install"

​

STEPS TO USE

DEMO APP

This framework uses the locally development demo app to verify the manual checkpoints. To run this demo app follow below steps.

1. Open command prompt.
2. Navigate to project root directory
3. Execute "npm run start-demo-app" command.
4. Open "http://localhost:8080/" in browser.

If you want to change the port number, you can update it in demo-app/server.js.

Note: If you want to do automation on other websites you no need to run demo-app. ​

Check points Automation

This framework will help you to tests the below check points for the given fields in the web page.

1. Content on Hover or Focus (1.4.13.a)
2. Identify Input Purpose (1.3.5.a)
3. Non-Text Contrast - Active User Interface Components (1.4.11.a)
4. Non-Text Contrast - Graphical Objects (1.4.11.c)
5. Non-Text Contrast - States of User Interface Components (1.4.11.b)
6. Status Messages (4.1.3.a)
7. Text Spacing (1.4.12.a)

Steps to automate and run each checkpoint:

1. Create one json file and place it under "/scripted-tests/test-data/" folder. To create this test data file use the template which was described at below section (Data template to provide test data).
2. Go to "/scripted-tests/checkpoints-test-runner.json" folder and update the "test-data-file" value with above created file name.

3. To Execute run below command

   * npm test

Data template to provide test data

[
    {
        "url": "",
        "navigationFunction": "",
        "content-on-hover-or-focus-list": [
            {
                "functionToInvoke": "",
                "type": "",
                "value": ""
            }
        ],
        "non-text-contrast-graphic-objects-list": [
            {
                "functionToInvoke": "",
                "targetElement": {
                    "type": "",
                    "value": ""
                },
                "compareElement": {
                    "type": "",
                    "value": ""
                }
            }

        ],
        "identify-input-purpose-check-list": [
            {
                "functionToInvoke": "",
                "type": "",
                "value": "",
                "expectedAutoCompleteValue": ""
            }
        ],
        "non-text-contrast-list": [
            {
                "functionToInvoke": "",
                "targetElement": {
                    "type": "",
                    "value": ""
                },
                "compareElement": {
                    "type": "",
                    "value": ""
                }
            }
        ],
        "status-messages-list": [
            {
                "functionToInvoke": "",
                "type": "",
                "value": ""
            }
        ],
        "text-spacing": {
           "captureTheBaseImageBeforeTest": false,
            "nameOfTheImage": ""
        }

    }
]

Template keys description:

1. url (Mandatory): The test page url on which we want to perform checkpoints check.

2. navigationFunction (Optional): This is the customized function name which user wants to invoke before starting the acutal test execution. The main purpose of this function is it will help the user to navigate to actual state where the user wants to perfom test.

Important point: The function which was mentioned here should be implemented in /scripted-test/navigator.js file.

3. content-on-hover-or-focus-list (Optional): If user wants to perform Content on Hover or Focus (1.4.13.a) test then fill this entry.

{
   "functionToInvoke": "",
   "type": "",
   "value": ""
}

• functionToInvoke(optional): Name of the function which use wants to invoke before executing content on hover test of the above element.
• type: Refer headings data format.
• value: Refer headings data format.

4. non-text-contrast-graphic-objects-list (optional): If user wants to perform Non-Text Contrast - Active User Interface Components then fill this entry.

{
                "functionToInvoke": "",
                "targetElement": {
                    "type": "",
                    "value": ""
                },
                "compareElement": {
                    "type": "",
                    "value": ""
                }
            }

• functionToInvoke(optional): Name of the function which use wants to invoke before executing non text contrast graphic objects list test of the above element.
• targetElement: The graphic element on which we want to perform for color contrast test.
  • type: Refer headings data format.
  • value: Refer headings data format.
• compareElement: The target element(above element) background color will get compared with this element back gorund color to get the contract ratio.
  • type: Refer headings data format.
  • value: Refer headings data format.

5. identify-input-purpose-check-list (optional): If user wants to perform Identify Input Purpose check then fill this entry.

   {
      "functionToInvoke": "",
      "type": "",
      "value": "",
      "expectedAutoCompleteValue": ""
   }
   

   • functionToInvoke (optional): Custom function to run before executing the test with above parameters.
   • type (mandatory): Refer headings data format.
   • value (mandatory): Refer headings data format.

6. non-text-contrast-list(optional): If user wants to perform Non-Text Contrast - Active User Interface Components or Non-Text Contrast - States of User Interface Components check then fill this array.

   {
      "functionToInvoke": "",
      "targetElement": {
         "type": "",
         "value": ""
      },
      "compareElement": {
         "type": "",
         "value": ""
      }
   }

• functionToInvoke (optional): Custom function to run before executing the test with above parameters.
• targetElement: The element on which we want to perform for color contrast test.
  • type: Refer headings data format.
  • value: Refer headings data format.
• compareElement: The target element(above element) background color will get compared with the background color of this element to get the contract ratio.
  • type: Refer headings data format.
  • value: Refer headings data format.

7. status-messages-list(optional): If user wants to perform Status Messages check then fill this entry.

   {
      "functionToInvoke": "",
      "type": "",
      "value": ""
   }
 

• functionToInvoke (optional): Custom function to run before executing the test with above parameters.
• type: Refer headings data format.
• value: Refer headings data format.

8. text-spacing (optional): If user wants to perform Text Spacing then fill this entry.

   • captureTheBaseImageBeforeTest (optional): If the user wants to capture the base image before executing the test then set this field value as "true" or else set it to "false" (False is default value). If this field value is true then the script will take the screenshot of the page and stores it in "/scripted-tests/test-data/base-images/" folder.
   • nameOfTheImage (mandatory): Give the name of the image which was stored under "scripted-tests/test-data/base-image" folder.

   Note: The very first time you can set "captureTheBaseImageBeforeTest" as "true" and provide some name (test-home-page) to "nameOfTheImage". From next time onwards "captureTheBaseImageBeforeTest" as empty or false just provide nameOfTheImage value. Ex:

      [
         "url": "http://abcdcomputech.dequecloud.com/",
         "navigationFunction": "",
         "text-spacing": {
            "captureTheBaseImageBeforeTest": true,
            "nameOfTheImage": "abcd-home-page"
        }
   
      ]