What

モバイルの場合だけ表示／PCだけ表示のテストをしたかったので、その方法のメモ。

公式Doc

playwright.config.tsでまずはSafariを有効化。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 13'],
      },
    },
  ],
});

isMobile

これも足しておく。


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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // It is important to define the `isMobile` property after destructuring `devices`,
        // since devices also define the `isMobile` for that device.
        isMobile: false,
      },
    },
  ]
});

hosaka313

 ネットサーフィン
 Stack Overflowtest.skip(!isMobile, 'is not mobile');
grepで統一した規則を持たせる。

https://stackoverflow.com/questions/74277705/how-to-run-a-playwright-test-on-specific-browsers-and-viewport

 Issuemobileだけのテストをしたい時用にtagをつけると良い

https://github.com/microsoft/playwright/issues/23676

 Geminiあまりやりたくはない。
  test('should display correctly on mobile', async ({ page, browserName }) => {
    // モバイルデバイスのみでテストを実行するための条件チェック
    if (browserName !== 'webkit') { // webkit以外（デスクトップブラウザ）の場合はスキップ
      test.skip();
      return;
    }

hosaka313

結果

下記のようなテストを書いてみた。

import { describe } from "node:test";
import { expect, test } from "@playwright/test";
import { FooterPage } from "../pages/footer.page";
import { ConcertsIndexPage } from "../pages/concerts/index.page";
import { getBaseUrl } from "../config";

test.describe("mobile-only-features", () => {
  describe("footer", () => {
    test("SNSリンクが表示されていること", async ({ page }, testInfo) => {
      test.skip(!testInfo.project.use.isMobile, "This test is only for mobile");
      const concertsPage = new ConcertsIndexPage(page);
      await concertsPage.step.visit(getBaseUrl());
      const footerPage = new FooterPage(page);
      const snsLinks = footerPage.snsLinks();
      expect(await snsLinks.count()).toBe(2);
    });
  });
});