如何在 puppeteer 中导航 dom 元素？

Question

背景

我们首次使用 puppeteer 编写一些自动化的端到端测试。我们一直在深入研究他们的 API，但我们对系统的基本用途感到困惑和挣扎。

真正的问题

puppeteer 希望我们如何与元素交互？

• 获取他们的属性
• 在上面设置东西
• 找到他们的特定祖先和后代

评论

我真正想要的是针对我们的各种用途的更精简的 API 文档，或者更好的是，一个非常流畅的教程。我们已经看了很多，但我们还没有得到这些答案。

我们发现的所有指南都在做，我们不想做的，是手动在代码中放入大量的 ID 和选择器。我明白为什么，但出于我们的目的，我们希望从页面上读取内容并根据其形状生成我们的行为。

感谢您的宝贵时间！

额外积分

我应该如何实际处理这些代码 sn-ps？什么方法/结构？

这是一个想要在所有文本输入中键入一个字符串，但获取所有输入的值。

const nodeList = await page.$$('input');
const result = nodeList.map(async node => {
    if(node.type === 'text'){
        await node.type('2018');
    }
    return await node.getAttribute('value')
})
return result

这是一个想要在该跨度的父 div 内的任何子输入中键入跨度标签的人。

const nodeList = await page.$$('span');
const result = nodeList.map(async node => {
    const parentDiv = node.NearestAncestor('div')
    const inputs = parentDiv.$$('input')
    **Use Code From Above**
})
return result

Answer 1

您可以尝试将您的承诺包装在 Promise.all 中。

因此，不是返回result，而是返回Promise.all(result)，这将在获取所有数据后解决。

此外，还有许多不同的方法可以通过列表或选择器。

$$评估

这会在页面内运行 Array.from(document.querySelectorAll(selector)) 并将其作为第一个参数传递给 pageFunction。

示例代码：

await page.$$eval('a', a => a.href)

评估

这是黄金，您可以执行任何可以在浏览器控制台上执行的代码。

const result = await page.evaluate(() =>
  [...document.querySelectorAll('input')] // or anything that you want to use normally
)

有用的 API

有几个有用的 API 可以明智地使用：

• .type：在选择器上输入文本
• .click：点击元素句柄/选择器等
• .select：从元素中选择一些东西

知道什么不起作用

elementHandle.attribute() 已在 #638 上删除。这意味着从现在开始应该由$eval 处理获取属性。