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

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 调试器在 Node 的主入口文件 (main.js) 下运行相同的代码时；我能够找到“Google 搜索”按钮。

这是 playwright 调试器从 mocha 测试运行中得到的输出:

pw:api => page.goto started +0ms
pw:api navigating to "file:///C:/devel/devspace/js/myAutomation/test/src/sampleApp.html", waiting until "load" [] +3ms
pw:api navigated to "file:///C:/devel/devspace/js/myAutomation/test/src/sampleApp.html" [] +348ms
pw:api "domcontentloaded" event fired [] +7ms
pw:api "load" event fired [] +276ms
pw:api <= page.goto succeeded +6ms
pw:api => elementHandle.click started +364ms
pw:api attempting elementHandle.click action [] +2ms
pw:api waiting for element to be visible, enabled and not moving [] +2ms
pw:api element is visible, enabled and does not move [] +479ms
pw:api scrolling into view if needed [] +1ms
pw:api done scrolling [] +63ms
pw:api checking that element receives pointer events at (358.64,558.1) [] +66ms
pw:api element does receive pointer events [] +188ms
pw:api performing elementHandle.click action [] +2ms
pw:api elementHandle.click action done [] +83ms
pw:api waiting for scheduled navigations to finish [] +3ms
pw:api navigated to "https://www.google.com/" [] +293ms
pw:api navigations have finished [] +46ms
pw:api <= elementHandle.click succeeded +2ms
sleeping
sleeping finished
element Length:: 0 :: TexToFind:: Google Search
1) Test Click Functionality on Hyperlink

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

mocha 测试是什么使得元素不可搜索，或者在超链接点击将您带到新网页后验证元素时是否需要处理一些与超链接相关的基本问题？

Answer 1

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

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