Html Question posted in
Some basic documentation can be found here.

Html – Finding locator by the first part of the locator value

I have the following line of code that clicks on a locator

await page.locator('#react-select-4-option-0').click();

How can i click the same locator based on only the first part of the code, something like this

await page.locator('#react-select-').click();

Please bear in mind that using something like locator("[id$=react-select-] will not work for some reason. The full html element is something like this:

<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-4-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-activedescendant="react-select-4-option-0" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">

The only way react-select-4-option-0 appears in the html code is when it is mouser over,but for some reason await page.locator('#react-select-4-option-0') is the only line that can find it. Based on what information i have given, is there any way to select the locator based on the react-select- part ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Based on the answers i received so far from everyone on this question and the other one i posted, i managed to formulate a solution and here it is

    await page.locator("[id^=react-select-][id$=option-0]").click();

    It allows me to click the option 0 of the dropdown list that is displayed, regardless of the dynamic number in the middle of the expression '#react-select-4-option-0'

    Thanks to everyone that contributed


  2. 0

    you can modify your code like this:

    await page.$x("//*[starts-with(@id, 'react-select-')]").then((elements) => {
    elements[0].click();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search