如何在操纵up的dom元素中导航？

Question

背景

我们是第一次使用puppeteer编写一些自动化的端到端测试。我们一直在仔细研究他们的API，但是对于我们感觉像系统的基本用途的东西，我们感到困惑和挣扎。

真正的问题

木偶戏如何让我们与元素互动？

• 得到他们的属性
• 在他们身上放东西
• 找到他们的特定祖先和后代

评论

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

我们发现所有不想做的指南正在做的事情是手动将代码放入大量的ID和选择器中。我知道为什么，但是出于我们的目的，我们想阅读页面上的内容，并根据页面的形状生成行为。

谢谢你的时间！

额外信用

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

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

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从现在开始处理。