javascript - 如何在 puppeteer 中导航 dom 元素?

标签 javascript testing dom automated-tests puppeteer

背景

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

真正的问题

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

  • 获取他们的属性
  • 给他们放东西
  • 找到他们的特定祖先和后代

评论

我真正想要的是针对我们各种用途的更精简的 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

最佳答案

您可以尝试将您的 promise 包装在 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 从现在开始处理。

关于javascript - 如何在 puppeteer 中导航 dom 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50993337/

相关文章:

javascript - 如何在页面加载期间调用 JavaScript 函数?

javascript - 使用 HTML5 文件 API 在浏览器中创建音频列表

javascript - phonegap 的 childBrowser.jar 插件在 : settings. setPluginState(true) 中抛出错误;

perl - 是否可以在分发测试之前安装 perl 先决条件以及如何安装?

android - 等待并单击按钮以在 Playstore 中安装和打开

java - SpringBoot 测试模块不在正确的类路径中搜索 log4j2 配置

java - 当无效的 XML 时,如何在 java 中解析 XMP?

jquery - 检测资源何时通过ajax加载

javascript - Jquery 使用多个文本框、文本框数组

java - 获取 xml 模式中定义的元素属性的数量