Scoping in axe Expert
Refine your scans using the scope tool
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.
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.
Employ the following steps to enable Scope functionality display on the Settings panel without logging into axe Monitor:
Select Scope on the axe Expert Extension overflow menu to access the Settings tab:
The extension displays the empty axe Expert Extension Scope tab on first access:
Scopes created and saved without a connection to axe Monitor do not persist across working sessions in axe Expert Extension 3.5. The ability to save a scope allows users to work with multiple scopes in a single working session. Future axe Expert Extension may incorporate persistent scope storage without requiring the user to login to axe Monitor.
Employ the following steps to enable Scope functionality display on the Settings panel while logged into axe Monitor:
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.
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.
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.
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/bodyfor the body of the document, or
htmlto specify the whole page). Generally, you must know the
idof the element you want to evaluate. For example:
sectiontag with an
**/html/body/section/div/div**identifies an item without an
id: the third
divinside the second
sectiontag inside the
- + 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.
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.
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.
In the Scope section of the Settings panel, enter meaningful text in the
Namecolumn (for example,
Categorycolumn, access the drop-down menu options, and then select an item in the list (for example,
Categorydrop-down list closes and your selection is populated in the field display.
URL patternfield, enter the text string after the domain name, if desired (for example,
+ Frameto 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.
CSS Selector(s)field, enter the selector you have selected using your tool of choice (for example, via
right-click > Copy > Copy selectorin Chrome DevTools after highlighting the source code in the
In the Actions column, select
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 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.
Actionscolumn of the
The fields become editable in each column, and the
Actionscolumn displays a
Make changes to one or more column fields as desired, then activate
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
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 to remove a row from the
Scope section table on the
Settings panel. This action also removes the scope definition from axe Monitor.
Actions column, in the row of the existing scope definition you want to delete, select
The row is removed from the Scope Definitions section table.