Scan a part of a page

Run accessibility scans on a specific section of a page during your automated tests using BrowserStack Accessibility Testing.

By default, BrowserStack Accessibility Testing scans the entire page during your automated tests. You can scope scans to a specific DOM element such as a form, navigation section, or modal by passing a CSS selector to the scan commands. This lets you get precise, component-level accessibility results without noise from unrelated parts of the page.

For example, if your team owns only a certain part of the page and you want to scan only that part for accessibility, you can scope scans to that specific DOM element.

Prerequisites

Before you scan a part of a page, ensure you have:

• Installed the BrowserStack SDK in your test suite.

• Enabled accessibility testing in your browserstack.yml file:

  accessibility: true
  

• Identified the CSS selector that uniquely targets the DOM element you want to scan.

How to scan a part of a page

The first step to scan a part of a page is to set autoScanning: false in your browserstack.yml file.

You can scope accessibility scans to a specific DOM element using either of the following commands:

• performScan() with a scope argument: Triggers a one-time accessibility scan at a defined step in your test script.
• startA11yScanning() with a scope argument: Automatically scans a specific DOM element on every DOM mutation within a section of your test. Always pair this with stopA11yScanning(). Supported only for wdio-mocha, wdio-cucumber, and Playwright (Node.js).

Both commands support the following scope argument:

• includePartOfPageScope: Scans only the specified DOM elements. Pass a CSS selector to scan only that part. You can add only one component in a partial scan. If no scope argument is passed, the command defaults to a full-page scan.

Use performScan() for a one-time scan

To trigger a one-time accessibility scan at a specific step, set autoScanning: false in your browserstack.yml file. If you only want to scan at specific points, then call performScan() with the includePartOfPageScope argument at that step in your test script:

performScan(includePartOfPageScope = ['#main-content > section > div > div > ol > li:nth-child(8)'])

If startA11yScanning() is already running when you call performScan(), both scans are captured and issues are automatically de-duplicated in the report.

After the test run, review the accessibility issues on the Accessibility Testing dashboard.

Use startA11yScanning() for a scoped continuous scan

To automatically scan a specific DOM element on every DOM mutation within a section of your test, call startA11yScanning() with the includePartOfPageScope argument, perform your test interactions, then call stopA11yScanning():

startA11YScanning(includePartOfPageScope = ['#main-content > section > div > div > ol > li:nth-child(8)'])

After the test run, review the accessibility issues on the Accessibility Testing dashboard.

Related links

• Get started with Automated tests
• Start and stop accessibility scans
• Specify testing scope
• Configuration options
• Add accessibility assertions