使用剧作家导航后元素不可见

Question

我正在使用 playwright 进行浏览器自动化。

我点击了一个超链接，将我带到 Google.com，我想在导航后验证“Google 搜索”按钮是否存在。 这是我的代码。

const textToClick = "Visit Google"
const textToVerify = "Google Search"
const elements = await page.$$(`text=${textToClick}`)
await element[0].click()
const elements = await page.$$(`text=${textToVerify}`)
const elementLength = elements.length
console.log("Element Length::",elementLength, ":: TexToFind::",textToVerify)

当我使用 mocha 测试运行它时，找不到“Google 搜索”按钮。

但是当我在节点的主入口文件下通过 Visual Studio 调试器运行相同的代码时(main.js);我可以找到“Google 搜索”按钮。

这是 mocha 测试运行的 playwright 调试器的输出：

pw:api => page.goto 开始 +0ms
pw:api 导航到“file:///C:/devel/devspace/js/myAutomation/test/src/sampleApp.html”，等到“load” [] +3ms
pw:api 导航到“file:///C:/devel/devspace/js/myAutomation/test/src/sampleApp.html” [] +348ms
pw:api "domcontentloaded" 事件触发 [] +7ms
pw:api "load" 事件触发 [] +276ms
pw:api pw:api => elementHandle.click 开始 +364ms
pw:api 尝试 elementHandle.click 动作 [] +2ms
pw:api 等待元素可见、启用且不移动 [] +2ms
pw:api 元素可见、启用且不移动 [] +479ms
如果需要 pw:api 滚动到视图中 [] +1ms
pw:api 完成滚动 [] +63ms
pw:api 检查元素在 (358.64,558.1) [] +66ms 处接收到指针事件
pw:api 元素确实接收到指针事件 [] +188ms
pw:api 执行 elementHandle.click 动作 [] +2ms
pw:api elementHandle.click action done [] +83ms
pw:api 等待预定导航完成 [] +3ms
pw:api 导航到“https://www.google.com/”[] +293ms
pw:api 导航已完成 [] +46ms
pw:api 睡觉
睡完了
元素长度:: 0 :: TexToFind:: 谷歌搜索
1) 测试超链接的点击功能

您会注意到元素长度为零，表示未找到“Google 搜索”按钮

什么是 mocha 测试导致元素不可搜索，或者在点击超链接后验证元素时是否需要处理与超链接相关的一些基本问题？

Answer 1

单击第一个链接将导致导航。所以你需要等待页面导航到谷歌。你可以这样做：

await Promise.all([elements[0].click(), page.waitForNavigation()]);