Skip to content

aria/ selector slowness in finding elements #14662

@fpereira1

Description

@fpereira1

I have experienced significant delays of 8 seconds when finding elements using the aria/ selectors. I thought I would share my findings here to see if others are experiencing the same issue and to contribute to solutions.

For example, in the code below, the the aria/ selector takes 8 seconds vs 103.8ms when using the span= selector

Here's the code to reproduce this issue:

import { browser, expect } from '@wdio/globals'

describe('selectors', () => {
  it('link text', async () => {
    await browser.url('/stackoverflow.html')

    console.time('=questions');
    const link = await $('=Questions')
    console.timeEnd('=questions');
    await expect(link).toHaveText('Questions')
  })

  it('element text', async () => {
    await browser.url('/stackoverflow.html')

    let link = await $('span=Questions')
    await expect(link).toHaveText('Questions')
  })

  it('aria', async () => {
    await browser.url('/stackoverflow.html')

    console.time('aria');
    const elem = await $('aria/Questions')
    console.timeEnd('aria');
    await expect(elem).toHaveText('Questions')
  })
})

This issue can also be reproduced in https://github.com/fpereira1/example-recipes/pull/1/files

When I look deeper into how the aria/ selectors work, I see that a few of xpath queries are taking the longest as seen below:

  • .//*[@aria-labelledby=(//*[normalize-space(text()) = "Questions"]/@id)]: 3411.576904296875 ms
  • .//*[@aria-describedby=(//*[normalize-space(text()) = "Questions"]/@id)]: 3430.876953125 ms
  • .//*[@aria-label = "Questions"]: 0.373046875 ms
  • .//input[@id = (//label[normalize-space() = "Questions"]/@for)]: 2.85400390625 ms
  • .//textarea[@id = (//label[normalize-space() = "Questions"]/@for)]: 2.350830078125 ms
  • .//input[ancestor::label[normalize-space(text()) = "Questions"]]: 0.072021484375 ms
  • .//textarea[ancestor::label[normalize-space(text()) = "Questions"]]: 0.072998046875 ms
  • .//input[@placeholder="Questions"]: 0.070068359375 ms
  • .//textarea[@placeholder="Questions"]: 0.069091796875 ms
  • .//input[@aria-placeholder="Questions"]: 0.068115234375 ms
  • .//textarea[@aria-placeholder="Questions"]: 0.070068359375 ms
  • .//*[not(self::label)][@title="Questions"]: 0.844970703125 ms
  • .//img[@alt="Questions"]: 0.0771484375 ms
  • .//*[not(self::label)][normalize-space(text()) = "Questions"]: 1.152099609375 ms

Can anything be done to improve performance here, or are all of those xpath queries necessary?

If there's a known performance impact when using aria/, it would be helpful for the documentation to reflect this. Many teams (ours included) have adopted aria/ selectors assuming they are best practice, and while they are in terms of maintainability, they currently come with a significant performance penalty.

WebdriverIO Version

9.1.2

Node.js Version

22.16.0

Is there an existing issue for this?

  • I have searched the existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs InvestigationIssues that require more information on the problem.help wantedIssues that are free to take by anyone interested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions