背景

我们是第一次与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中的任何子输入中键入span标签的人.

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

解决方法:

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

因此,不是返回结果,而是返回Promise.all(result),一旦获得所有数据,它将解析.

此外,有许多不同的方式可以通过列表或选择器.

$$EVAL

这将在页面中运行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处理.