dequelabs / dequelabs/axe-core

[Feature request] @axe-core/playwright relative path selectors for nested shadow dom tree

Open
#3,909 12 comments 0 reactions 0 assignees View on GitHub
feat
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

**Product**: @axe-core/playwright 4.6.0

We started using the [support for shadow dom selectors](https://github.com/dequelabs/axe-core-npm/issues/615). It is a great feature that we were looking forward to. We have a feature request how to make it even better.

Our shadow dom tree example:
![element path](https://user-images.githubusercontent.com/107934934/217053832-1cd8fe31-d004-4747-a454-55733f56584b.png)

**Expectation**: We would like to be able to use relative path selectors even for a nested tree. Such as:
```
axeBuilder.include([['sports-card']]);
```

**Actual**: It seems that a full node path must be specified to test a shadow tree node. Only this worked for our case:
```
axeBuilder.include([['edge-chromium-page', 'grid-view-feed', 'cs-super-container', 'cs-personalized-feed', 'cs-feed-layout', 'fluent-card[style="grid-area:slot4;contain:unset;content-visibility:visible"]']]);
```

**Motivation**: Tests start to fail if shadow dom tree structure changes on the page. Using absolute path selectors makes test owners to do extra work every time the page is re-arranged. It would save a lot of test maintenance time to use relative path selectors. Requesting to add support for relative path selectors.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.