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

Question

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

这描述了确切的情况。我只想 select 始终位于第一个 child 中的 'Hello' 文本。唯一不同的是，像这样的 DOM 有 50 个，我想 select 每个 '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

如果强调的是“你好”文本，那么您可以使用 XPath selector with contains() method that looks for the element with the specific text using 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“元素”选项卡中的一个元素，然后 select“复制”：您可以在那里复制元素的确切 selector 或 xpath。之后，您可以切换到“控制台”选项卡，使用 Chrome api 您可以测试 selector 的内容，以便为您的人偶脚本做好准备。例如：$x("//a[contains(text(), 'Hello')]").innerText 或 $('body > span > span:nth-child(1) > span > span > a').innerText 应该显示 link 您期望点击的内容，否则您需要更改访问权限，或者您需要检查是否有更多相同的元素selector 等。这可能有助于找到更合适的 selectors.

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

Selecting element from DOM with Puppeteer and Node

javascript

node.js

selectors-api

puppeteer