木偶师(PuppeteerSharp)如何点击?

时间:2021-06-22 13:30:54

标签: puppeteer puppeteer-sharp

如果所有 id 都是随机的,如何点击一个元素? 唯一 - 只有带有描述的文本。

这是一个列表,其中包含您可以用鼠标单击的各种项目。例如,我不知道如何在包含文本“Some Unique Text 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>

有什么想法吗?

1 个答案:

答案 0 :(得分: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();
  });
});