Playwright中如何统计可见元素数量？原count方法包含隐藏元素

我需要完成两项任务：

• 检查某个元素是否在屏幕上可见（已有可正常运行的代码）
• 统计屏幕上可见元素的数量

最初使用的代码如下：

test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens (i.e mobile breakpoint)', async ({ page, isMobile }) => {
    test.skip(isMobile)
    await page.goto(url);
    const buttonsCount = await page.getByText('(Optimal on desktop / tablet)').count();
    expect(buttonsCount).toBe(0);
});

但该方法会统计所有隐藏状态的元素，导致预期结果为0时实际返回1。虽然.toBeVisible()可以解决单个元素的可见性检查，但.toBeVisible()没有可访问的count属性，请问如何基于.toBeVisible()统计数量？或者是否应该通过循环计数后传入.toBe()？

解决方案 #

方法1：使用filter()筛选可见元素后统计 #

Playwright的Locator支持filter()方法，可结合isVisible()条件筛选出可见元素，再调用count()统计数量：

test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page, isMobile }) => {
    test.skip(isMobile);
    await page.goto(url);
    // 筛选可见元素并统计
    const visibleButtonsCount = await page.getByText('(Optimal on desktop / tablet)')
        .filter(async locator => await locator.isVisible())
        .count();
    expect(visibleButtonsCount).toBe(0);
});

方法2：遍历元素逐个判断可见性 #

先获取所有匹配元素，再循环检查每个元素的可见性并计数：

test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page, isMobile }) => {
    test.skip(isMobile);
    await page.goto(url);
    const allButtons = page.getByText('(Optimal on desktop / tablet)');
    const totalCount = await allButtons.count();
    let visibleCount = 0;

    for (let i = 0; i < totalCount; i++) {
        if (await allButtons.nth(i).isVisible()) {
            visibleCount++;
        }
    }

    expect(visibleCount).toBe(0);
});

方法3：直接断言可见元素数量 #

如果仅需验证数量，可直接用toHaveCount结合过滤后的可见元素定位器：

test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page, isMobile }) => {
    test.skip(isMobile);
    await page.goto(url);
    const visibleButtons = page.getByText('(Optimal on desktop / tablet)')
        .filter(async locator => await locator.isVisible());
    await expect(visibleButtons).toHaveCount(0);
});

内容的提问来源于stack exchange，提问作者Carl Bruiners