Playwright 可以根据运行它的浏览器进行条件测试吗？

Question

我正在学习如何使用具有 Selenium 和 Cypress 背景的 Playwright，并测试该工具以了解它在简单测试中的表现：

test.describe('IMDB:', () => {
    const movieName = 'Forrest Gump';

    await page.goto('https://www.imdb.com/');

    await page.fill('#suggestion-search', movieName);

    expect(await page.textContent('data-testid=search-result--const')).toContain(movieName);
  });
});

它只是转到 IMDB，搜索电影，然后断言找到了该电影。

我还创建了一个配置文件，在其中定义了我要使用多个浏览器：

const config: PlaywrightTestConfig = {
  timeout: 30000,
  use: {
      headless: false
  },
  projects: [
    {
      name: 'Desktop Chromium',
      use: {
        browserName: 'chromium',
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: 'Desktop Firefox',
      use: {
        browserName: 'firefox',
        viewport: { width: 1280, height: 720 },
      }
    },
     {
      name: 'Mobile Chrome',
      use: devices['Pixel 5'],
    },
  ],
};

export default config;

但是，当我运行测试时，由于搜索栏隐藏在移动网站上的按钮后面。移动 Chrome 测试失败。

有没有办法可以进行条件测试来判断是否正在使用特定设备，执行额外的步骤？

Answer 1

您可以通过以下方式从

browserName

访问

test()

    import { test, expect } from '@playwright/test'
    
    test('Your test', async ({ page, browserName }) => {
      if (browserName === 'webkit') {
         // Do Something
      // Rest of the test code
    })

但就您而言，如果它是移动视口，您似乎想跳过测试，因此您可以使用该测试。

skip()

看这里：https://playwright.dev/docs/api/class-test#test-skip-2

Answer 2

有没有办法可以进行条件测试来判断是否正在使用特定设备，执行额外的步骤？

要在测试中执行额外的步骤（如您的情况一样，正在测试移动设备），可以使用

isMobile

测试选项

来实现

来自文档 - 是否考虑元视口标签并启用触摸事件。 isMobile 是设备的一部分，因此您实际上不需要手动设置它。默认为 false，Firefox 不支持。

test('movie is found', async ({page, isMobile}) => {

  ...

  if(isMobile) {
    // open search field behind button
    ...
  }

  ...
})