javascript - 使用 Puppeteer 和 Node 从 DOM 中选择元素

Question

我正在使用 Node 和 Puppeteer 从网页中抓取一些信息，但在选择正确的元素时遇到问题。

这描述了确切的情况。我只想选择始终位于第一个子项中的“Hello”文本。唯一的区别是，大约有 50 个与此完全相同的 DOM，我想选择其中每一个的“Hello”。

<span class='first'>
<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Hello</a>
        </span>
    </span>
</span>

<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Some text</a>
        </span>
    </span>
</span>

<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Different text</a>
        </span>
    </span>
</span>

Answer 1

如果重点是“Hello”文本，那么您可以使用 XPath selector与 contains()使用 page.$x 查找具有特定文本的元素的方法:

await page.$x("//a[contains(text(), 'Hello')]")

您还可以通过以下方式仅获取第一个 child :

await page.$('body > span > span:nth-child(1) > span > span > a')

您可以使用 page.evaluate 来评估其内容:

const text = await page.evaluate(el => el.innerText, await page.$(selector))

你知道吗？如果右键单击 Chrome DevTools“元素”选项卡中的某个元素并选择“复制”:您可以在其中复制元素的确切选择器或 xpath。之后，您可以切换到“控制台”选项卡，并使用 Chrome api 测试选择器的内容，以便为您的 puppeteer 脚本做好准备。例如: $x("//a[contains(text(), 'Hello')]").innerText 或 $('body > span > span:nth-child(1 ) > span > span > a').innerText 应该显示您期望单击的链接，否则您需要更改访问权限，或者您需要检查是否有更多具有相同选择器的元素等.这可能有助于找到更合适的选择器。