Playwrightメモ

!playwright.md

Playwrightメモ

• GitHub Actions
• Tips: lazy-loading
• PCとモバイルで別々の設定でテストを分ける

github-actions.md

PlaywrightをGitHub Actionsで利用するときのメモ

キャッシュに気を遣う

Playwrightが設定済みの公式イメージが配布されているのでコンテナに慣れている人は一考してもいい。（自分はどうしてもエラーが解決できなかったので自前インストールとキャシュを使うことにした）

設定例

jobs:
  test:
    timeout-minutes: 10
    if: ${{!contains( github.event.pull_request.body, '[skip ci]' )}}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2.2.2
        with:
          version: 7
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Get installed Playwright version
        id: playwright-version
        run: echo "::set-output name=version::$( sh .github/scripts/get-playwright-version.sh )"
      - name: Cache playwright binaries
        uses: actions/cache@v2
        id: playwright-cache
        with:
          path: ~/.cache/ms-playwright
          key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
          restore-keys: ${{ runner.os }}-playwright-
      - name: Install Playwright browsers
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: npx playwright install --with-deps
      - name: Install Playwright system dependencies
        if: steps.playwright-cache.outputs.cache-hit == 'true'
        run: npx playwright install-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

ジョブ内のキャッシュ関連の流れ

1. @playwright/testのバージョンを出力
2. キャッシュの有無を確認
3. インストール
   • キャッシュがなければPlaywrightの依存とブラウザをインストールする
   • キャッシュがあればPlaywrightの依存をインストールする
4. テスト実行
5. キャッシュ設定

Linux環境では~/.cache/ms-playwrightにブラウザがインストールされるのでactions/cacheのパスに指定。キャッシュはブラウザのみをキャッシュしている。キャッシュがヒットした場合でもPlaywrightの依存はリストアされていないので実行できない。ワークアラウンドとして、キャッシュがヒットした場合にはPlaywrightの依存をインストールすることで解決できる。

• npx playwright install --with-deps: Playwrightの依存とブラウザをインストールする
• npx playwright install install-deps: Playwrightの依存をインストールする

Get installed Playwright versionの部分で読み込んでいるスクリプト

#!/bin/bash

cat pnpm-lock.yaml | grep "@playwright/test" | head -n 1 | tr -d ' ' | sed -e "s/'@playwright\/test'://"

手元で確認するのが楽なのでワークフローファイルに直書きせず別のファイルに定義する。ロックファイルを見てversion番号を抽出している。パッケージマネージャーに合わせて調整が必要。

lazy-loading.md

Lazy-loading

loading="lazy"な画像をスクリーンショット前に完全にロードする。

  // Load all images in the page
  await page.evaluate(async () => {
    const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
    for (let i = 0; i < document.body.scrollHeight; i += 100) {
      window.scrollTo(0, i);
      await delay(100);
    }
  });

testing-isoloation-between-pc-and-mobile.md

PCとモバイルでテストを分ける

課題

PCとモバイルで出し分けるコンポーネントがあり、どのようにテストの設定をするか考える必要があった。

現状整理

playwright.configでデバイス（ブラウザ）を指定する方式。 projectsに指定したデバイスすべてに対してテストが走る。 デバイスは@playwright/testからインポートできる。

PCとモバイルでテストを分ける方法としては次が考えられる。

1. テスト内でビューポートを見て分岐する
2. テストディレクトリとコンフィグを分ける

モバイル固有のAPIに対するテスト

ExperimentalではあるがAndroidやElectronのエミュレータがある。iOSはない。 Android | Playwright

前提

• node: v18.7.0
• @playwright/test": "1.24.2"

テスト内で分岐する

単純にpage.viewportSize()で判定する。

• メリット
  • PC用とモバイル用のテストを同一ファイルで記述できる -デメリット
  • PCとモバイルでの切り替えが複雑なUIのテストには向かない
  • モバイルにのみ適用したいテストなどがPC用のテストでも走ってしまう

テストディレクトリとコンフィグを分ける

テストディレクトリとコンフィグを分け、それぞれに最適化したテストケースを記述する。重複部分についてはPC側に共通するテストを書き、モバイル向けのテストを別に書くのが現実的か。

• メリット
  • 不要なテストケースや分岐処理がない -デメリット
  • 重複する記述が増える

playwright.config.ts(PC)

import type { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "@playwright/test";

const config: PlaywrightTestConfig = {
  testDir: "./tests/e2e/pc",
  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
      },
    },
    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"],
      },
    },
    {
      name: "webkit",
      use: {
        ...devices["Desktop Safari"],
      },
    },
  ],
  // ... rest
};

playwright.mobile.config.ts(Mobile)

import type { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "@playwright/test";

import baseConfig from "./playwright.config";

const config: PlaywrightTestConfig = {
  ...baseConfig,
  testDir: "./tests/e2e/mobile",
  projects: [
    {
      name: "Mobile Chrome",
      use: {
        ...devices["Pixel 5"],
      },
    },
    {
      name: "Mobile Safari",
      use: {
        ...devices["iPhone 13"],
      },
    },
  ],
};

-cオプションでコンフィグファイルを指定する。

    "e2e:pc": "playwright test -c playwright.config.ts",
    "e2e:mobile": "playwright test -c playwright.mobile.config.ts"

References

Playwright Library | Playwright