Consider this:
<code><select>
<option value="1">ba</option>
<option value="2">ab</option>
<option value="3">a</option>
<option value="4">b</option>
</select>
</code>
<code><select>
<option value="1">ba</option>
<option value="2">ab</option>
<option value="3">a</option>
<option value="4">b</option>
</select>
</code>
<select>
<option value="1">ba</option>
<option value="2">ab</option>
<option value="3">a</option>
<option value="4">b</option>
</select>
When I use this:
<code>await page.locator('option ::-p-text(a)')
await page.locator('option ::-p-text(b)')
</code>
<code>await page.locator('option ::-p-text(a)')
await page.locator('option ::-p-text(b)')
</code>
await page.locator('option ::-p-text(a)')
await page.locator('option ::-p-text(b)')
I got the option with ba instead of a or b. This is the intended behaviour according to the docs:
Text selectors will select “minimal” elements containing the given text,
even within (open) shadow roots. Here, “minimum” means the deepest elements
that contain a given text, but not their parents (which technically will also
contain the given text).
How to get element that has exact text instead of contains text in puppetteer?