如何在 puppeteer 中导航 dom 个元素？
How do I navigate dom elements in puppeteer?
背景
我们第一次使用 puppeteer 编写一些自动化的端到端测试。我们一直在深入挖掘他们的 API，但我们对系统的基本用途感到困惑和挣扎。
真正的问题
puppeteer 希望我们如何与元素互动？
- 获取他们的属性
- 给他们装东西
- 找到他们的特定祖先和后代
评论
我真正想要的是针对我们各种用途的更加精简的 API 文档，或者更好的是，一个非常流畅的教程。我们已经看了很多，但我们还没有得到这类答案。
我们发现的所有指南都在做，但我们不想做的是手动将大量 ID 和选择器放入代码中。我明白为什么，但出于我们的目的，我们想要读取页面上的内容并根据它的形状生成我们的行为。
感谢您的宝贵时间！
额外学分
我应该如何处理这些代码片段？什么methods/structures?
这里有一个想要在所有文本输入中键入一个字符串，但获取所有输入的值。
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
您可以尝试将您的承诺包装在 Promise.all.
中
因此，不是 returning result，而是 return 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：点击elementhandle/selector等.select: 从元素中选择一些东西
知道什么行不通
elementHandle.attribute() 已在 #638 上删除。这意味着从现在起应该由 $eval 处理获取属性。
背景
我们第一次使用 puppeteer 编写一些自动化的端到端测试。我们一直在深入挖掘他们的 API，但我们对系统的基本用途感到困惑和挣扎。
真正的问题
puppeteer 希望我们如何与元素互动？
- 获取他们的属性
- 给他们装东西
- 找到他们的特定祖先和后代
评论
我真正想要的是针对我们各种用途的更加精简的 API 文档，或者更好的是，一个非常流畅的教程。我们已经看了很多，但我们还没有得到这类答案。
我们发现的所有指南都在做，但我们不想做的是手动将大量 ID 和选择器放入代码中。我明白为什么，但出于我们的目的，我们想要读取页面上的内容并根据它的形状生成我们的行为。
感谢您的宝贵时间！
额外学分
我应该如何处理这些代码片段？什么methods/structures?
这里有一个想要在所有文本输入中键入一个字符串，但获取所有输入的值。
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
您可以尝试将您的承诺包装在 Promise.all.
因此，不是 returning result，而是 return 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：点击elementhandle/selector等.select: 从元素中选择一些东西
知道什么行不通
elementHandle.attribute() 已在 #638 上删除。这意味着从现在起应该由 $eval 处理获取属性。