[BUG] Issue with chained selectors -- text selector doesn't work

[jmtoung]

Context:

• Playwright Version: "@playwright/test": "^0.162.0"
• Operating System: [e.g. Windows, Linux or Mac]
• Node.js version: [e.g. 10.12, 10.14]
• Browser: [e.g. All, Chromium, Firefox, WebKit]
• Extra: [any specific details about your environment]

Describe the bug

When I use chained selectors, I observe the following behavior. Not sure if this is intended or what.

await page.click('div[role="radiogroup"] >> "No"') // DOES NOT WORK, I expect it to work though.
await page.click('div[role="radiogroup"] >> No') // DOES NOT WORK. This is expected since the `text=` engine is only inferred for double quoted text.

await page.click('div[role="radiogroup"] >> text="No"') // DOES NOT WORK, I expect it to work though.
await page.click('div[role="radiogroup"] >> text=No') // WORKS

I have attached a screenshot of my DOM.

[dgozman]

Could you please try printing element's text content? I expect that your target element has line breaks, and therefore "No" that performs strict equality check does not match. You can read about quoted vs unquoted text selectors in the docs.

console.log(await page.textContent('div[role="radiogroup"] >> text=No'))

Also note that 'div[role="radiogroup"] >> No' will not work because it expects the text= qualifier before No. We only infer text selector for quoted text. You can read more about selector short forms in the docs. There should be a useful error message in this case, is it missing?

[jmtoung]

Thank you @dgozman for the quick response.

1. You are right! As you can see in my screenshot, the 'No' radio button we want to select is wrapped in a div (<div>No</div>) but for some reason, it adds a white space after the text, which is why it wasn't working.
2. I updated my original post, you are right, the selector 'div[role="radiogroup"] >> No' should not work.
3. It seems that await page.click('div[role="radiogroup"] >> text=No') works because it is not case sensitive. Is this to be expected? In other words, when you have text=value and value is not quoted, the resulting match is not case sensitive?
4. I didn't see a useful error message

await page.click('div[role="radiogroup"] >> "No"') // DOES NOT WORK, I expect it to work though -- TURNS OUT REASON IT DIDNT WORK IS BECAUSE WE HAD AN EXTRA WHITE SPACE.
await page.click('div[role="radiogroup"] >> No') // DOES NOT WORK. This is expected since the `text=` engine is only inferred for double quoted text.

await page.click('div[role="radiogroup"] >> text="No"') // DOES NOT WORK, I expect it to work though.
await page.click('div[role="radiogroup"] >> text=No') // WORKS

[dgozman]

await page.click('div[role="radiogroup"] >> text="No"') // DOES NOT WORK, I expect it to work though.

I do not expect this snippet to work, because it requires strict match while text has whitespace inside.

It seems that await page.click('div[role="radiogroup"] >> text=No') works because it is not case sensitive. Is this to be expected? In other words, when you have text=value and value is not quoted, the resulting match is not case sensitive?

Yes, it works because matching without quotes is relaxed. Quoting the docs: "By default, the match is case-insensitive, ignores leading/trailing whitespace and searches for a substring".