通过定位器值的第一部分查找定位器

Question

我有以下一行代码，用于单击定位器

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

如何仅根据代码的第一部分单击相同的定位器，如下所示

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

请记住，由于某种原因，使用类似

locator("[id$=react-select-]

的内容将不起作用。完整的 html 元素是这样的：

<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;">

react-select-4-option-0

出现在html代码中的唯一方式是当鼠标悬停在其上方时，但由于某种原因

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

是唯一可以找到它的行。根据我提供的信息，有没有办法根据

react-select-

部分选择定位器？

Answer 1

你可以这样修改你的代码：

await page.$x("//*[starts-with(@id, 'react-select-')]").then((elements) => {
    elements[0].click();
});