Not sure to understand how .exclude() works... 🤔

[soykje]

Product

webdriverjs

Question

Hi there 👋

I'm currently working on a a11y script based on webdriverjs. But I'm having troubles using the .exclude() method. As I understood, it can take an array of CSS selectors, right?
In my actual setup I have something like:

const results = await new AxeBuilder(driver)
        .options({
          resultTypes: ['violations', 'incomplete'],
          rules: {
            // 'meta-viewport': { enabled: false },
            'page-has-heading-one': { enabled: false },
            'landmark-one-main': { enabled: false },
            region: { enabled: false },
            'color-contrast': { enabled: false },
          },
          runOnly: ['best-practice', 'wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
          reporter: 'v2',
        })
        .exclude('*:not(.docs-story)')
        .analyze()

In my current setup (I'm working on a Design System documented with Storybook), I want to only check .docs-story DOM nodes. Afaik the selector should work, but for some reason I end with a page-has-heading-one error, which should not pop as not related to the defined excluding perimeter, right?

I'll be very gratefull to get some more detailed infos about how this works, to be sure I'm building my script correctly! 👍

Thx in advance! 🙏

[straker]

Thanks for the issue (and moving it for us :)). Out of curiosity, would the include option make more sense for your use case? You could do .include('.docs-story') and it should only evaluate that subtree.

[soykje]

@straker Thx for you quick answer! Well... If I'm not wrong, just including doesn't means that the rest of the DOM would be omitted, right?
In my case I have this kind of page: https://sparkui.vercel.app/?path=/docs/components-snackbar--docs which I want to parse, but for obvious reasons only the examples blocks (``.docs-story`).
I tried this:

.exclude('*')
.include('.docs-story')

But this didn't seem to work either. My final attempt (.include('*:not(.docs-story)')) apparently does the job. On my understanding this declaration means that we will only parse DOM nodes that matches *:not(.docs-story) selector, but if so I don't understand why I still get errors related to html tag, for example... But maybe it's me (not native english reader) that misunderstand something? 🙂

[straker]

Just including actually means to test just that part of the DOM you are including. include and exclude are passed directly to axe-core as the context option. You can read more about the context option in axe-core's context documentation.

[soykje]

@straker Wow! Thx a lot for sharing this resource, I didn't knew it was there! Things are a lot clearer to me right now, thx again! 🙏

[padmavemulapati]

User Question