如何在运行测试前检查视口

Question

我在playwright中有这个配置，可以为相同的测试运行不同的浏览器。

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: "Desktop Safari",
      use: {
        browserName: "webkit",
        viewport: { width: 1200, height: 750 },
        headless: false,
        baseURL: BASE_URL,
        httpCredentials,
      },
    },
    // Test against mobile viewports.
    {
      name: "Mobile Chrome",
      use: { ...devices["Pixel 5"], baseURL: BASE_URL, httpCredentials },
    },
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"], baseURL: BASE_URL, httpCredentials },
    },
    {
      name: "Desktop Firefox",
      use: {
        browserName: "firefox",
        viewport: { width: 800, height: 600 },
        httpCredentials,
      },
    },
  ],

现在，我知道如果我在桌面上，一个元素应该出现，但如果我在移动上，就不是这样了。如何在视口上进行检查，然后才能在视口中显示元素？

如下所示：

test("Test home page", async ({ page }) => {
  await page.goto(BASE_URL);
  const inMobile =await page.$$("text='I am mobile'");;
  const inDesktop = await page.$$("I am desktop");
if (testing mobile)
  expect(inMobile).toBeTruthy()
else expect(inDesktop).toBeTruthy()
});

Answer 1

您可以使用isMobile设备来检测它是否是移动设备。这是在使用设备时内部设置的，就像您在项目配置中所做的那样。请参见以下示例：

test("Test home page", async ({ page, isMobile }) => {
  console.log(isMobile);
});

查看此处以供参考：https://playwright.dev/docs/api/class-fixtures#fixtures-is-mobile