Common Components
Testing with common components (a portion of a page that is repeated across multiple pages, such as a site's header or footer) allows you to avoid duplication of issues and reduce the testing effort by only testing a repeated component once.
Axe Auditor allows you to add common components to a test case via a simple process in which you specify a component by name and with a selector that defines the element in which the component exists.
Additionally, you must provide a URL of one of the pages that contains the component. Optionally, you may specify the less common element types that should either be targeted or ignored, and any relevant textual instructions pertaining to accessing the component to be tested.
The following table lists each field in the Add New Component dialog box in the left column, with a usage description of each in the right column.
| Field | Usage Description |
|---|---|
| Component Name | Required. Type a name that uniquely identifies the component. |
| Sample URL | Required. Type or paste in the URL of one page in which the component exists. This is necessary for automated testing. |
| Selector | Required. Paste in a Cascading Style Sheet (CSS) selector that defines the element in which the component exists to target that element in automated testing. This can be a simple selector such as a class or ID, or a selector path. If you are using CSS IDs, ensure you start the ID with a #. For a CSS class name, start with a period or full stop(.). Examples: #myidname or .myclassname. For more information, see CSS Selector. |
| Elements present on page | Check all that apply. The Forms checkbox is selected by default. This allows you to target or ignore specific types of elements and their associated accessibility rules and checkpoints to limit what is being tested. |
| Instructions | Type any detailed instructions that are important for the tester to understand/execute prior to testing the component (for example, specific information required for accessing and/or exposing the page elements to be tested). |
| Add another component | Check this box if you want to continue with this same procedure to add another common component after adding the current one. This presents you with a new, blank Add New Component dialog box form window immediately after activating the Add New Component button. |
Working with existing components
If you have bulk imported common components and pages using a CSV file upload method in the Details page, you may find existing common components on the right side of the page. To know how to edit components on an existing test run, read the topic Editing Components. To delete the exisitng component, read the topic Deleting Common Components.