Puppeteer - 点击指定文本的跨度

Question

我目前正在使用 puppeteer 抓取一页。我正在尝试做一些可以加快我的工作的东西。

我的 HTML 标记看起来像这样

<div class="inner-wrapper" style="">
<div class="style-001">
    <ul role="listbox" aria-multiselectable="true" class="style-002">
    <li role="option" aria-selected="false" class="style-003">
        <span class="style-004">First Option</span>
    </li>
    <li role="option" aria-selected="false" class="style-003">
        <span class="style-004">Second Option</span>
    </li>
    <li role="option" aria-selected="false" class="style-003">
        <span class="style-004">Third Option</span>
    </li>      
    </ul>
</div>

我试图根据 span 的文本选择特定的“li”。此页面是动态的，因此有时“第三选项”会有索引 [3]，有时会有其他索引。它必须仅通过 span 的文本来选择，因为它在其他情况下不起作用。我不能使用类，因为这个网站对每个 'li' 使用相同的类。

我对 google 和 stackoverflow 进行了研究，但没有找到可行的解决方案。我尝试通过 xpath、js 选择器等进行选择。甚至我也尝试过这样的事情：

const [link] = await page.$x('//div[2]/div/div/section/div[2]/div/div/div/ul/li[2]/span[contains(text(), "First Option")]'); 
await link.click();

或

let selectOption = await page.waitForXPath(`//div[2]/div/div/section/div[2]/div/div/div/ul/li[contains(text(),'First Option')]`);
await selectOption.click();

如果有人可以帮助我，我将不胜感激。

@编辑 如果点击任何选项很重要，本网站会将 aria-selected="false" 更改为 "true"。也许它会有所帮助？

Answer 1

您可以尝试使用page.evaluate，而不是通过文本使用querySelectorAll 和filter li，而不是使用forEach 来单击带有特定文本的il。

await page.evaluate(() => {
  Array.from(document.querySelectorAll('li')).filter(li => {
    return li.innerText == 'First Option' // filter il for specific text
  }).forEach(element => {
    if (element) element.click(); // click on il with specific text
  });
});

如果第一个不行你可以试试。

await page.evaluate(() => {
  Array.from(document.querySelectorAll('div > div > ul > li')).filter(li => {
    return li.innerText == 'First Option' // filter il for specific text
  }).forEach(element => {
    if (element) element.click(); // click on il with specific text
  });
});

您也可以尝试一下，我认为这是最好的方法。

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('div > div > ul > li')];
  const targetElement = elements.find(e => e.innerText == 'First Option');
  if (targetElement) targetElement.click();
});

或

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('li')];
  const targetElement = elements.find(e => e.innerText == 'First Option');
  if (targetElement) targetElement.click();
});