所以我想用Playwright写一个e2e测试，这就是网站的功能（我用的是React）：
- 当它第一次渲染时，它从一个API中获取一个随机的事实，然后它使用前三个字作为查询从另一个API中获取一个随机的图片，获取后事实和图片都会显示出来。
- 还有一个按钮可以通过新的获取请求获取新的事实，因此它也会通过使用新事实中的三个单词来给你一个不同的画面，所以就像再次重新加载页面一样。
我想写的测试必须检查当用户单击按钮时，新的获取是否成功，新的事实和图像是否与以前的不同（我已经有了一个测试来检查是否有初始的事实和图像）。
我试着把第一段和图片保存在一些变量中，然后点击按钮，等待响应，得到新的段落和图片，并期望它们与以前的不同。
测试尝试的代码：
const button = await page.getByRole('button')
const prevText = await page.getByRole('paragraph')
const prevImage = await page.getByRole('img')
await button.click()
page.waitForResponse(res => res.status() === 200)
const newText = await page.getByRole('paragraph')
const newImage = await page.getByRole('img')
await expect(newText).not.toEqual(prevText)
await expect(newImage).not.toEqual(prevImage)我也试过有一个承诺内的点击和waitForResponse。所有，但它也没有工作
网站代码：https://github.com/krst221/test2部署：https://test2-krst221.vercel.app/
1条答案
按热度按时间3b6akqbq1#
看看你在你的问题提供的片段，我看到两个主要的潜在罪犯，可能会给你的问题。
1 -响应实际上没有得到
await艾德waitForResponse方法返回了一个承诺，这个承诺需要进行await处理，否则代码/test实际上并没有等待它。而且，等待和承诺需要在你点击之前开始，然后进行await处理，以便在观察响应的同时真正到达点击。因此，你需要将代码修改为如下所示：剧作家在waitForResponse上的文档也给予了这样的例子。
2 -定位器是惰性的
在Playwright中，Locator是惰性的，它只存储如何定位元素（s）而不实际执行，直到对它们执行类似于单击的操作。因此，您的new和prev实际上是等效的。另外，要检查new与prev是否不同，您可能需要检查它们的内容。无论哪种方式，您都必须使用定位符来获取信息，然后进行比较。例如用于段落的
locator.textContent()。希望能有所帮助！