Version情報

"@playwright/test": "^1.34.0"
"parcel-bundler": "^1.12.5",
"typescript": "^5.0.4"

起こったこと

PCとスマホで要素が異なるサイトをE2Eテストしたい。

PlayWrightでスマホ版を動かさないといけない。

そんな中、PlayWrightのテスト内パラメータに「isMobile」があるということがわかった。

ドキュメント

playwright.dev

こんな感じ

ページはスマホビューだとお知らせ（スマホ）、PCビューだとお知らせ（PC）と表示されるとする。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element {
      display: none;
    }

    @media (max-width: 767px) {
      .element-sp {
        display: block;
      }
    }

    @media (min-width: 768px) {
      .element-pc {
        display: block;
      }
    }
  </style>
  <title>Document</title>
</head>

<body>
  <div class="element element-pc">お知らせ（PC）</div>
  <div class="element element-sp">お知らせ（スマホ）</div>
</body>

</html>

Playwrightコンフィグでモバイルのエミュレータの設定を行う

...
  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
      },
    },
    {
      name: "Mobile Chrome", // この辺り
      use: {
        ...devices["Pixel 5"],
      },
    },
  ],
...

テストコードはこのような感じ

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

test.beforeEach(async ({ page }) => {
  await page.goto("/sp.html");
});

test("お知らせのテスト", async ({ page, isMobile }) => { // isMobileを使用する
  if (isMobile) {
    const notice = page.locator(".element-sp");
    await expect(notice).toHaveText("お知らせ（スマホ）");
  } else {
    const notice = page.locator(".element-pc");
    await expect(notice).toHaveText("お知らせ（PC）");
  }
});