木偶戏(PuppeteerSharp)怎么点击？

Question

如果所有的id都是随机的，如何点击一个元素？唯一-仅包含说明的文本。

这是一个列表，其中包含您可以用鼠标单击的各种项目。我不知道如何点击，例如，在一个包含文本"Some Unique 3“的元素上

<section class="css-1kyhqub">
    <ul data-testid="categories-list" data-cy="categories-list" class="css-jfja6s">
        <li data-cy="cy-im-parent" class="css-xedlmo">
        <div class="css-17fti8"><span>
            <p class="css-1jek2ew-Text eu5v0x0">Some Unique Text 1</p></span>
            <span font-size="p4" class="css-my4n3k"></span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="css-1mougrc">
            </svg></li><li data-cy="cy-im-parent" class="css-xedlmo">
        <div class="css-17fti8"><span><p class="css-1jek2ew-Text eu5v0x0">Some Unique Text 2</p></span>
            <span font-size="p4" class="css-my4n3k"></span></div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="css-1mougrc">
            </svg></li>
        <li data-cy="cy-im-child" data-testid="nested-category-item" class="css-12lzvy8">
        <div class="css-19rredd">
        <section class="css-u2ayx9">
            <p class="css-1jek2ew-Text eu5v0x0">Some Unique Text 3</p>
        </section>
        <span font-size="p4" class="css-6zq905"></span></div></li>
        <li data-cy="cy-im-parent" class="css-xedlmo">
            <div class="css-17fti8"><span><p class="css-1jek2ew-Text eu5v0x0">Some Unique Text 4</p></span>
            <span font-size="p4" class="css-my4n3k"></span></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="css-1mougrc">
            </li><li data-cy="cy-im-child" data-testid="nested-category-item" class="css-12lzvy8">
        <div class="css-19rredd">
        <section class="css-u2ayx9">
            <p class="css-1jek2ew-Text eu5v0x0">Some Unique Text 5</p>
        </section>
    <span font-size="p4" class="css-6zq905"></span></div></li></ul>
</section>

有什么想法吗？

Answer 1

如果你只想点击一个包含特定文本的段落元素，你可以尝试一下。

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('p')];
  const targetElement = elements.find(e => e.innerText == 'Some Unique Text 3');
  if (targetElement) targetElement.click();
});

或者，如果你想点击包含特定文本的多个段落元素，试试这个。

await page.evaluate(() => {
  Array.from(document.querySelectorAll('p')).filter(p => {
    return p.innerText == 'Some Unique Text 3'
  }).forEach(element => {
    if (element) element.click();
  });
});