PlayWright以测试级别定位移动浏览器

问题描述 投票：0回答：1
我在剧作家配置设置中有2个移动浏览器来测试iPhone和Android仿真：

/* Test against mobile viewports. */ { name: 'Mobile Chrome', grep: /mobile/, use: { ...devices['Pixel 5'] }, }, { name: 'Mobile Safari', grep: /mobile/, use: { ...devices['iPhone 14 Pro'] }, }, 
当我运行此操作时，它将在桌面浏览器中运行测试，而不是移动窗口。我已经看到了按测试设置视口的示例，而不是模拟器本身。
我希望能够有1个规格文件来描述移动和桌面仿真，而不是按设备类型分开。

我可以按测试设置目标模拟器吗？


我不想使用过滤器运行；相反，我运行了测试，他们针对目标浏览器/S.
单独执行。
    

	

您的方法基本上还可以，有一些改进。对于初学者，这是您的代码作为一个充分工作的，可重复的示例。

与

example.test.js：


grep


Playwright.config.js：


typescript

playwright

playwright-test

playwright-typescript


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
import {expect, test} from "@playwright/test"; // ^1.51.0

const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="text"></div>
<script>
function updateText() {
  const textElement = document.getElementById("text");
  textElement.textContent =
    window.innerWidth <= 900 ? "mobile" : "desktop";
}
updateText();
window.addEventListener("resize", updateText);
</script>
</body>
</html>`;

test("mobile check", async ({page}) => {
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("mobile");
});

test("desktop check", async ({page}) => {
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("desktop");
});



样本运行：


import {defineConfig, devices} from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "Mobile Chrome",
      grep: /mobile/,
      use: {...devices["Pixel 5"]},
    },
    {
      name: "Mobile Safari",
      grep: /mobile/,
      use: {...devices["iPhone 14 Pro"]},
    },
  ],
});



要提及的第一个注释是
% npx playwright test

Running 2 tests using 2 workers

  ✓  1 [Mobile Chrome] › example.test.js:23:5 › mobile check (261ms)
  ✓  2 [Mobile Safari] › example.test.js:23:5 › mobile check (465ms)

  2 passed (930ms)

适用于整个测试名称，包括项目名称和文件名。因此，如果您的项目名称恰好与
grep
模式匹配，则每个测试都将进行，无论测试是否移动！

这样，首选的方法是使用thags
不太容易出现像这样的不准确性。
标签
Playwright.config.js：


grep
example.test.js：


import {defineConfig, devices} from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "Mobile Chrome",
      grep: /@mobile/,
      use: {...devices["Pixel 5"]},
    },
    {
      name: "Mobile Safari",
      grep: /@mobile/,
      use: {...devices["iPhone 14 Pro"]},
    },
  ],
});



输出：


test("mobile check", {tag: "@mobile"}, async ({page}) => {
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("mobile");
});

test("desktop check", {tag: "@desktop"}, async ({page}) => {
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("desktop");
});


和% npx playwright test

Running 2 tests using 2 workers

  ✓  1 [Mobile Safari] › example.test.js:23:5 › mobile check @mobile (531ms)
  ✓  2 [Mobile Chrome] › example.test.js:23:5 › mobile check @mobile (290ms)

  2 passed (1.1s)



isMobile
和
test.skip()
是另一个选择：
Playwright.config.js


isMobile
example.test.js


test.skip()


输出：


import {defineConfig, devices} from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "Mobile Chrome",
      use: {...devices["Pixel 5"]},
    },
    {
      name: "Desktop",
      use: {...devices["Desktop Chrome"]},
    },
  ],
});


如果您愿意，您可以在test("mobile check", async ({page, isMobile}) => {
  test.skip(!isMobile)
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("mobile");
});

test("desktop check", async ({page, isMobile}) => {
  test.skip(isMobile)
  await page.setContent(html);
  await expect(page.locator("#text")).toHaveText("desktop");
});

块级别使用这些方法来创建一组测试。
    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.