Scoping in axe Expert

Define a scope in axe Expert Extension when you want to only test certain portions of a page instead of the entire page. On many websites, there are elements or "template" areas that are common to many pages of a site. This can be used to specifically test common template components, or to ignore them in order to focus on the content that is not a part of the common components (for example, header, footer, or navigation sections). Version 1.1 and later of the axe Expert Extension were designed and implemented using Cascading Style Sheet (CSS) selectors for the purpose of defining scope.

XPath Version Support

axe Monitor v6.0 or later supports both CSS selector and XPath technologies, due to the fact that previously, version 1.0 of XPath was supported by version 1.0 of axe Expert Extension. For more information, see XML Path Language (XPath) Version 1.0 - W3C.

To avoid violation duplication when analyzing multiple pages, the Scope definition feature of axe Expert Extension provides you with a way to limit what is being analyzed to one or more specific sections of a page, while ignoring the common, repeated content that is not selected as a part of the scope. By having the scope definitions defined during scripted analysis it will have the same effect as static analysis. In other words, only including the defined portions of the page in the script. This process is particularly useful when testing only scope definitions that cover the content areas of the page, which eliminates the repetitious issues found in testing templates.

Enabling Scope functionality without logging into axe Monitor

Employ the following steps to enable Scope functionality display on the Settings panel without logging into axe Monitor:

1. Select Scope on the axe Expert Extension overflow menu to access the Settings tab:

   

2. The extension displays the empty axe Expert Extension Scope tab on first access:

   

   Do NOT login to axe Monitor. Instead, create a new project-less scope using the described Option Descriptions and Column Descriptions:

   

Enabling Scope Functionality while logged into axe Monitor

Employ the following steps to enable Scope functionality display on the Settings panel while logged into axe Monitor:

1. Sign in to axe Monitor on the Settings tab in the axe Expert panel. For complete details, see Sign In to axe Monitor.

   After you sign in, the Project selection section appears on the Settings panel.

2. Select a Project by using the Select a project menu and button on the Settings panel. For complete details, see Select an axe Monitor Project.

   The Scope Definitions functionality appears below the project selection and issue download sections on the Settings panel.

   

Option Descriptions

Once enabled, you will see the Scope section on the Settings panel in axe Expert Extension, which displays an Analyze scope radio button option group with the following three available options from which to select:

• Entire page: Select to refine the defined scope when performing an analysis on the Analysis panel to the entire page that is loaded in the browser.
• Content only: Select to refine the scope when performing an analysis on the Analyze panel to only the content items not a part of any templates defined in the Scope Definitions table below.
• Template only: Select this option to refine the analysis performed on the Analyze panel to everything except the content definitions on the loaded page under test.

Column Descriptions

Below the Analyze scope options section, you will see the scope definitions table section, which displays a table with the following six columns of information:

• Name: A text entry field used to give the scope definition a name that is clear and meaningful (for example, 'Header').
• Category: A drop-down menu field used to specify the type of scope. Options include 'Template 1-4' (whole page) and 'Content 1-4' (body of page). These can be used to group related scope definitions together so that they can be easily sorted.
• URL pattern: A text entry field used to specify a part or parts of a website that uses a different template set than the main portion of the site (for example, a shopping or secure member services area), defined with a string of text that appears immediately after the domain name in the page address for a pattern that uses a wildcard match (for example, '/products' would match '/products' as well as any string of text that comes after it).
• CSS Selector(s): A text entry field used to specify the locator of the content to be targeted (for example, /html/body for the body of the document, or html to specify the whole page). Generally, you must know the id of the element you want to evaluate. For example:
  • **/section[@id='content']** identifies a section tag with an id of "content": <section id="content">
  • **/div[@id='header-panel']** identifies a div with an id of "header-panel": <div id="header-panel">
  • **/div[@id='right-column']** identifies a div with an id of "right-column": <div id="right-column">
  • **/html/body/section/div[2]/div[3]** identifies an item without an id: the third div inside the second div inside the section tag inside the body of the html
• + Frame: Click to add a new line below that provides a text entry field you can use to enter a selected CSS selector locator (the DOM node region data) if the region is within a frame. The plus symbol becomes a minus to indicate it is possible to remove the line after it has been added.
• Actions: Within a blank row, the Save button appears in the Actions column, which allows you to add your selection/entries as a new scope definition row. After a row has been added, the Edit and Delete buttons appear.

Add a scope definition

Follow this procedure any time you want to limit or restrict the portion of the page you are analyzing to a CSS selector or URL pattern categorized by content, template, or the entire page. Adding a scope definition is a matter of populating five columns of information in the Scope section table on the Settings panel in axe Expert, then selecting the Save button.

Scope Definitions and auto-Association with axe Monitor projects

The Scope section of the Settings panel only appears after a connection with axe Monitor has been established and a project selected. Defining and saving a scope by following this procedure adds the Scope Definition to the selected project in axe Monitor so that when you subsequently select the project again in the axe Expert Extension, the existing scope definitions automatically load on the Settings tab. Any time you select the project, this scope definition will automatically download into axe Expert Extension from axe Monitor.

Added scope definitions refine the analysis performed on the Analyze panel in Axe Expert Extension to the areas of the loaded page that match the scope.

Before you begin, it is important that you understand how to enable the scope definitions functionality and understand the purpose of each option and table column field.

1. In the Scope section of the Settings panel, enter meaningful text in the Name column (for example, 'Header').

2. In the Category column, access the drop-down menu options, and then select an item in the list (for example, 'Template 1').

   The Category drop-down list closes and your selection is populated in the field display.

3. In the URL pattern field, enter the text string after the domain name, if desired (for example, '/html/head').

4. Optionally, select + Frame to cause a new, blank CSS Selector field to display on a new line below, then enter the selector for the component, if it is contained in a frame.

   

5. In the CSS Selector(s) field, enter the selector you have selected using your tool of choice (for example, via right-click > Copy > Copy selector in Chrome DevTools after highlighting the source code in the Elements tool).

6. In the Actions column, select Save.

   

The scope you added appears as a new row in the table, and the Actions column displays buttons that allow you to either Edit or Delete it. Additionally, a new, blank line appears below your saved scope line, which allows you to specify and save another, etc.

You may now select the desired option in the Analyze scope section above the table, then perform an analysis on the loaded page that is defined by the scope you specified.

Edit a scope definition

Edit a scope definition when you want to modify an existing scope definition by changing one or more of five fields of information. Select Edit in the Actions column of the Scope section table on the Settings panel in axe Expert allows you to change the scope of what will be targeted when performing an analysis of the loaded page on the Analyze panel. This also changes what is stored in axe Monitor accordingly.

1. Activate Edit in the Actions column of the Scope section table.

   

   The fields become editable in each column, and the Actions column displays a Save and a Cancel button.

2. Make changes to one or more column fields as desired, then activate Save in the Actions column.

   

The changes you saved are displayed as a read-only line in the table and are automatically synchronized with axe Monitor.

New as of Attest Browser Extension v2.8: The ANALYZE AGAIN button is disabled when the scope of analysis isn't saved.

It is too easy to overlook whether or not a user saved the scope of the current analysis before clicking ANALYZE AGAIN.

To solve this, we moved the Save button next to the ANALYZE AGAIN and Back buttons. The ANALYZE AGAIN button is disabled and the Save button is enabled when a user writes a new scope line. The ANALYZE AGAIN button is re-enabled and the Save button disabled when the user saves the new scope. These two buttons will never be enabled at the same time in axe Expert Extension.

Delete a scope definition

Delete a scope definition to remove a row from the Scope section table on the Settings panel. This action also removes the scope definition from axe Monitor.

In the Actions column, in the row of the existing scope definition you want to delete, select Delete.

The row is removed from the Scope Definitions section table.