Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[🐛 Bug]: aria/ selector fails when selecting an input related to a label when there are multiple inputs in the document #12883

Closed
3 tasks done
evankennedy opened this issue May 17, 2024 · 0 comments · Fixed by #12884
Closed
3 tasks done

[🐛 Bug]: aria/ selector fails when selecting an input related to a label when there are multiple inputs in the document #12883

evankennedy opened this issue May 17, 2024 · 0 comments · Fixed by #12884
Labels
Bug 🐛

Comments

@evankennedy
Copy link
Contributor

evankennedy commented May 17, 2024 •
edited

Have you read the Contributing Guidelines on issues?

WebdriverIO Version

latest

Node.js Version

v20.12.2

Mode

WDIO Testrunner

Which capabilities are you using?

{
  browserName: 'chrome',
  browserVersion: 'canary',
  webSocketUrl: true
}

What happened?

The XPath selector under aria/ for finding an input or textarea related to a label do not function properly in cases where there are multiple elements. I have set up test cases for various scenarios, but basically the issue is this when we have a setup like this:

<label>
    Search 1
    <textarea>Hello World! 1</textarea>
</label>
<label>
    Search 2
    <textarea>Hello World! 2</textarea>
</label>

If we want to find an input attached to the label "Search 2", we would write $('aria/Search 2').

Currently, that yields the first textarea containing Hello World! 1.

The relevant XPath selectors are:

webdriverio/packages/webdriverio/src/utils/findStrategy.ts

Lines 180 to 181 in 82b3863

`.//input[//ancestor::label[normalize-space(text()) = "${label}"]]`,
`.//textarea[//ancestor::label[normalize-space(text()) = "${label}"]]`,

I'm no XPath XPert, but I believe this XPath is essentially saying:

Find an input where an ancestor of the document root contains a label with text matching "Search 2"

In other words, the // is making XPath find every input in the document, so long as there is a label matching "Search 2".

What we want is for it to say:

Find an input where a direct ancestor of the input is a label with text matching "Search 2"

Removing the // fixes this issue in the tests.

What is your expected behavior?

No response

How to reproduce the bug.

Run the e2e test suite lit tests:

npm -C e2e run test:browser:lit

Relevant log output

Before the fix

"spec" Reporter:
------------------------------------------------------------------
[chrome 127.0.6483.0 linux #0-0] Running: chrome (v127.0.6483.0) on linux
[chrome 127.0.6483.0 linux #0-0] Session ID: 6bff94eadd96b320978f7aa937ad6fd9
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] » file:///browser-runner/lit.test.js
[chrome 127.0.6483.0 linux #0-0] Lit Component testing
[chrome 127.0.6483.0 linux #0-0]     Selector Tests
[chrome 127.0.6483.0 linux #0-0]         a11y selectors
[chrome 127.0.6483.0 linux #0-0]            ✓ input with a label
[chrome 127.0.6483.0 linux #0-0]            ✖ multiple inputs with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ textarea with a label
[chrome 127.0.6483.0 linux #0-0]            ✖ multiple textareas with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ input with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✖ multiple inputs with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✓ textarea with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✖ multiple textareas with a label as parent
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 4 passing (24.3s)
[chrome 127.0.6483.0 linux #0-0] 4 failing
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 1) a11y selectors multiple inputs with a label
[chrome 127.0.6483.0 linux #0-0] Expect  to have property value

Expected: "Hello World 2"
Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0] Error: Expect  to have property value
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] Expected: "Hello World 2"
[chrome 127.0.6483.0 linux #0-0] Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0]     at Context.<anonymous> (http://localhost:41311/home/evan/dev/webdriverio/e2e/browser-runner/lit.test.js:575:37)
[chrome 127.0.6483.0 linux #0-0]     at Context.executeAsync (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/shim.ts:329:24)
[chrome 127.0.6483.0 linux #0-0]     at Context.testFrameworkFnWrapper (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/test-framework/testFnWrapper.ts:94:18)
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 2) a11y selectors multiple textareas with a label
[chrome 127.0.6483.0 linux #0-0] Expect  to have property value

Expected: "Hello World 2"
Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0] Error: Expect  to have property value
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] Expected: "Hello World 2"
[chrome 127.0.6483.0 linux #0-0] Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0]     at Context.<anonymous> (http://localhost:41311/home/evan/dev/webdriverio/e2e/browser-runner/lit.test.js:605:37)
[chrome 127.0.6483.0 linux #0-0]     at Context.executeAsync (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/shim.ts:329:24)
[chrome 127.0.6483.0 linux #0-0]     at Context.testFrameworkFnWrapper (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/test-framework/testFnWrapper.ts:94:18)
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 3) a11y selectors multiple inputs with a label as parent
[chrome 127.0.6483.0 linux #0-0] Expect  to have property value

Expected: "Hello World! 2"
Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0] Error: Expect  to have property value
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] Expected: "Hello World! 2"
[chrome 127.0.6483.0 linux #0-0] Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0]     at Context.<anonymous> (http://localhost:41311/home/evan/dev/webdriverio/e2e/browser-runner/lit.test.js:641:37)
[chrome 127.0.6483.0 linux #0-0]     at Context.executeAsync (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/shim.ts:329:24)
[chrome 127.0.6483.0 linux #0-0]     at Context.testFrameworkFnWrapper (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/test-framework/testFnWrapper.ts:94:18)
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 4) a11y selectors multiple textareas with a label as parent
[chrome 127.0.6483.0 linux #0-0] Expect  to have property value

Expected: "Hello World! 2"
Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0] Error: Expect  to have property value
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] Expected: "Hello World! 2"
[chrome 127.0.6483.0 linux #0-0] Received: "Hello World! 1"
[chrome 127.0.6483.0 linux #0-0]     at Context.<anonymous> (http://localhost:41311/home/evan/dev/webdriverio/e2e/browser-runner/lit.test.js:677:37)
[chrome 127.0.6483.0 linux #0-0]     at Context.executeAsync (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/shim.ts:329:24)
[chrome 127.0.6483.0 linux #0-0]     at Context.testFrameworkFnWrapper (http://localhost:41311/@fs/home/evan/dev/webdriverio/packages/wdio-utils/src/test-framework/testFnWrapper.ts:94:18)


Snapshot Summary:
3 snapshot(s) unchecked.

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:29

After the fix

"spec" Reporter:
------------------------------------------------------------------
[chrome 127.0.6483.0 linux #0-0] Running: chrome (v127.0.6483.0) on linux
[chrome 127.0.6483.0 linux #0-0] Session ID: b51db7f73310e443561ae24d22dd1be9
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] » file:///browser-runner/lit.test.js
[chrome 127.0.6483.0 linux #0-0] Lit Component testing
[chrome 127.0.6483.0 linux #0-0]     Selector Tests
[chrome 127.0.6483.0 linux #0-0]         a11y selectors
[chrome 127.0.6483.0 linux #0-0]            ✓ input with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ multiple inputs with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ textarea with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ multiple textareas with a label
[chrome 127.0.6483.0 linux #0-0]            ✓ input with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✓ multiple inputs with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✓ textarea with a label as parent
[chrome 127.0.6483.0 linux #0-0]            ✓ multiple textareas with a label as parent
[chrome 127.0.6483.0 linux #0-0]
[chrome 127.0.6483.0 linux #0-0] 8 passing (4s)


Snapshot Summary:
3 snapshot(s) unchecked.

Spec Files:      1 passed, 1 total (100% completed) in 00:00:08

Code of Conduct

  • I agree to follow this project's Code of Conduct

Is there an existing issue for this?

  • I have searched the existing issues
@evankennedy evankennedy added Bug 🐛 Needs Triaging ⏳ No one has looked into the issue yet labels May 17, 2024
@evankennedy evankennedy mentioned this issue May 17, 2024
Merged
13 tasks
@christian-bromann christian-bromann removed the Needs Triaging ⏳ No one has looked into the issue yet label May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug 🐛
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Select proper input via ancestor label when multiple match evankennedy/webdriverio
2 participants
@christian-bromann @evankennedy