提问人：vish176 提问时间：11/16/2023 最后编辑：ggorlenvish176 更新时间：11/18/2023 访问量：55
如何使用 Playwright JavaScript 验证多个图像（图像列表）是否可见
How to verify that Multiple Images (List of images) are visible using Playwright JavaScript
问：
定位器 page.locator（'.inner-blocks div.img-block'） 返回 3 张图片。我想逐一验证所有三张图片在页面上是否可见。我正在使用页面对象模式。我的页面对象类如下所示
仪表板：.js
class dashboardPage{
constructor(page)
{
this.ImageBlocks = page.locator('.inner-blocks div.img-block')
}
async verifytopSectionThreeBlocks()
{
const totalblocks = await this.ImageBlocks.count()
console.log("total count:"+totalblocks)
for(let i=0;i<totalblocks;i++)
{
return (await this.ImageBlocks.nth(i))
}
}
}
module.exports ={dashboardPage};
在测试类中，我试图断言所有图像都是可见的。
const result = dashboardpage.verifytopSectionThreeBlocks()
await except (result).toBeVisible()
这是给出错误。谁能指出它并解决这里的问题。
答：
1赞
Vladislav Utkin
11/16/2023
#1
你用 return 语句编写了循环;但是，函数只能返回一个值。这意味着您的循环将只执行一次迭代，然后停止，因为函数的执行将结束。因此，您将始终只收到第一张图像。
尝试运行此代码以确认：
function test() {
for(let i = 0; i < 5; i++) {
return i
}
}
console.log(test())要检查所有图像，您可以修改代码以返回图像数组。然后，在测试中，您可以遍历数组以执行必要的检查。
const imageBlocks = page.locator('.inner-blocks div.img-block');
for (const imageBlock of await imageBlocks.all()) {
await expect(imageBlock).toBeVisible();
}
2赞
ggorlen
11/16/2023
#2
您可以使用 和 循环：.all()
import {expect, test} from "@playwright/test"; // ^1.39.0
// sample page to prove example correctness
const html = `<!DOCTYPE html>
<html>
<body>
<div class="inner-blocks">
<div class="img-block"></div>
<div class="img-block"></div>
<div class="img-block"></div>
</div>
<script>
// make the elements visible after 2 seconds
setTimeout(() => {
document.querySelectorAll(".img-block").forEach(e => {
e.textContent = "added";
});
}, 2000);
</script>
</body>
</html>`;
test("all image blocks are eventually visible", async ({page}) => {
await page.setContent(html);
const imageBlocks = page.locator(".inner-blocks div.img-block");
await expect(imageBlocks).toHaveCount(3);
for (const imageBlock of await imageBlocks.all()) {
await expect(imageBlock).toBeVisible();
}
});
在 POM 中：
// ... same sample HTML and imports
class DashboardPage {
constructor(page) {
this.page = page;
this.imageBlocks = page.locator(".inner-blocks div.img-block");
}
goto() {
return this.page.setContent(html); // for testing; replace with goto
}
get topSectionBlocks() {
return this.imageBlocks;
}
}
// ...
test("3 image blocks are eventually visible", async ({page}) => {
const dashboard = new DashboardPage(page);
await dashboard.goto();
await expect(dashboard.topSectionBlocks).toHaveCount(3);
for (const block of await dashboard.topSectionBlocks.all()) {
await expect(block).toBeVisible();
}
});
几点说明：
return结束函数，在第一次迭代时中断循环。- 避免/。
count()nth() except应该是 。expect- 始终设置代码的格式，使其可读。
- 类名应始终为 UpperPascalCase，而不是 camelCase。同样，应该是 camelCase 而不是 UpperPascalCase，所以 .
this.ImageBlocksthis.imageBlocks verifytopSectionThreeBlocks实际上并没有验证任何内容，只是检索定位器。我会称它为或类似。topSectionBlocks
评论
0赞
Vishal Aggarwal
11/22/2023
这在我的一个场景中很有帮助。谢谢！
评论
exceptexpectforreturn