メインコンテンツへスキップ

リリースノート

バージョン 1.52​

ハイライト​

  • 要素上の個々のクラス名を人間工学的にアサートするための新しいメソッドexpect(locator).toContainClass()。

    await expect(page.getByRole('listitem', { name: 'Ship v1.52' })).toContainClass('done');

  • Ariaスナップショットに2つの新しいプロパティが追加されました: 厳密なマッチングのための/childrenと、リンクのための/urlです。

    await expect(locator).toMatchAriaSnapshot(`
      - list
        - /children: equal
        - listitem: Feature A
        - listitem:
          - link "Feature B":
            - /url: "https://playwright.dokyumento.jp"
    `);

テストランナー​

  • 新しいプロパティtestProject.workersにより、テストプロジェクトで使用する同時ワーカープロセスの数を指定できるようになりました。プロパティtestConfig.workersのグローバル制限は引き続き適用されます。
  • 新しいtestConfig.failOnFlakyTestsオプションは、--fail-on-flaky-testsと同様に、不安定なテストが検出された場合にテスト実行を失敗させます。これは、デプロイ前にすべてのテストが安定していることを確認したいCI/CD環境で役立ちます。
  • 新しいプロパティtestResult.annotationsには、各テストリトライのアノテーションが含まれます。

その他​

  • apiRequest.newContext()に、リダイレクトの最大数を制御する新しいオプションmaxRedirectsが追加されました。
  • locator.ariaSnapshot()に、スナップショット内の各要素の参照を生成するための新しいオプションrefが追加されました。この参照は後で要素を見つけるために使用できます。
  • HTMLレポーターが!@my-tagまたは!my-file.spec.tsまたは!p:my-projectによるフィルタリング除外をサポートするようになりました。

破壊的変更​

  • page.route()のようなメソッドにおけるグロブURLパターンが、?と[]をサポートしなくなりました。代わりに正規表現を使用することをお勧めします。
  • メソッドroute.continue()がCookieヘッダーのオーバーライドを許可しなくなりました。Cookieヘッダーが提供された場合、それは無視され、クッキーはブラウザのクッキーストアからロードされます。カスタムクッキーを設定するには、browserContext.addCookies()を使用してください。
  • macOS 13 は非推奨となり、WebKit の更新を受け取らなくなります。最新の WebKit の改善を引き続き利用するためには、より新しい macOS バージョンにアップグレードしてください。

ブラウザバージョン​

  • Chromium 136.0.7103.25
  • Mozilla Firefox 137.0
  • WebKit 18.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 135
  • Microsoft Edge 135

バージョン 1.51​

IndexedDB用StorageState​

  • browserContext.storageState()に、IndexedDBの内容を保存・復元するための新しいオプションindexedDBが追加されました。これは、アプリケーションがFirebase認証のような認証トークンを保存するためにIndexedDB APIを使用している場合に便利です。

    認証ガイドに従った例を以下に示します。

    tests/auth.setup.ts
    import { test as setup, expect } from '@playwright/test';
    import path from 'path';

    const authFile = path.join(__dirname, '../playwright/.auth/user.json');

    setup('authenticate', async ({ page }) => {
      await page.goto('/');
      // ... perform authentication steps ...

      // make sure to save indexedDB
      await page.context().storageState({ path: authFile, indexedDB: true });
    });

プロンプトとしてコピー​

HTMLレポート、トレースビューアー、UIモードのエラーに新しい「プロンプトをコピー」ボタンが追加されました。クリックすると、エラーメッセージとエラー修正に役立つコンテキストが含まれた、事前入力済みのLLMプロンプトをコピーできます。

Copy prompt

表示要素のフィルタリング​

locator.filter()に、表示されている要素のみをマッチングする新しいオプションvisibleが追加されました。

example.spec.ts
test('some test', async ({ page }) => {
  // Ignore invisible todo items.
  const todoItems = page.getByTestId('todo-item').filter({ visible: true });
  // Check there are exactly 3 visible ones.
  await expect(todoItems).toHaveCount(3);
});

HTMLレポートにGit情報​

Git情報をtestConfig.metadataにキャプチャするには、オプションtestConfig.captureGitInfoを設定します。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  captureGitInfo: { commit: true, diff: true }
});

HTMLレポートには、利用可能な場合にこの情報が表示されます。

Git information in the report

テストステップの改善​

テストステップで新しいTestStepInfoオブジェクトが利用可能になりました。ステップの添付ファイルを追加したり、特定の条件でステップをスキップしたりできます。

test('some test', async ({ page, isMobile }) => {
  // Note the new "step" argument:
  await test.step('here is my step', async step => {
    step.skip(isMobile, 'not relevant on mobile layouts');

    // ...
    await step.attach('my attachment', { body: 'some text' });
    // ...
  });
});

その他​

  • メソッドpage.emulateMedia()とbrowser.newContext()に新しいオプションcontrastが追加され、prefers-contrastメディア機能をエミュレートできるようになりました。
  • 新しいオプションfailOnStatusCodeは、APIRequestContextを介して行われたすべてのフェッチリクエストが、2xxおよび3xx以外のレスポンスコードでエラーをスローするようにします。
  • アサーションexpect(page).toHaveURL()が述語をサポートするようになりました。

ブラウザバージョン​

  • Chromium 134.0.6998.35
  • Mozilla Firefox 135.0
  • WebKit 18.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 133
  • Microsoft Edge 133

バージョン 1.50​

テストランナー​

  • 新しいオプションtimeoutにより、個々のテストステップの最大実行時間を指定できるようになりました。タイムアウトしたステップはテストの実行を失敗させます。

    test('some test', async ({ page }) => {
      await test.step('a step', async () => {
        // This step can time out separately from the test
      }, { timeout: 1000 });
    });

  • テストステップの実行を無効にする新しいメソッドtest.step.skip()。

    test('some test', async ({ page }) => {
      await test.step('before running step', async () => {
        // Normal step
      });

      await test.step.skip('not yet ready', async () => {
        // This step is skipped
      });

      await test.step('after running step', async () => {
        // This step still runs even though the previous one was skipped
      });
    });

  • expect(locator).toMatchAriaSnapshot()が拡張され、ariaスナップショットを個別のYAMLファイルに保存できるようになりました。

  • ロケーターが指定されたaria errormessageを持つ要素を指していることをアサートするためのメソッドexpect(locator).toHaveAccessibleErrorMessage()が追加されました。

  • オプションtestConfig.updateSnapshotsに設定列挙型changedが追加されました。changedは変更されたスナップショットのみを更新するのに対し、allは差異の有無にかかわらずすべてのスナップショットを更新するようになりました。

  • 新しいオプションtestConfig.updateSourceMethodは、testConfig.updateSnapshotsが設定されている場合のソースコードの更新方法を定義します。既存のpatchモード（パッチファイルを作成）に加えて、変更をソースコードに書き込むoverwriteモードと3-wayモードが追加されました。

    npx playwright test --update-snapshots=changed --update-source-method=3way

  • オプションtestConfig.webServerに、デフォルトのSIGKILL以外のプロセス強制終了シグナルを指定するためのgracefulShutdownフィールドが追加されました。

  • レポーターAPIからtestStep.attachmentsが公開され、そのステップで作成されたすべての添付ファイルを取得できるようになりました。

  • testConfig.expect設定において、toHaveScreenshotおよびtoMatchAriaSnapshotアサーション用の新しいオプションpathTemplate。

UIの更新​

  • 添付ファイルの表示を改善するために、デフォルトのHTMLレポーターが更新されました。
  • Codegenに、ariaスナップショットを生成するための要素選択用の新しいボタンが追加されました。
  • トレースにおいて、アクションAPI呼び出しと一緒に、追加の詳細（押されたキーなど）が表示されるようになりました。
  • トレースにおけるcanvasコンテンツの表示はエラーが発生しやすいです。表示はデフォルトで無効になり、Display canvas content UI設定で有効にできます。
  • 「Call」および「Network」パネルで追加の時間情報が表示されるようになりました。

破壊的変更​

  • expect(locator).toBeEditable()とlocator.isEditable()は、ターゲット要素が<input>、<select>、または他の編集可能な要素のいずれでもない場合にエラーをスローするようになりました。
  • オプションtestConfig.updateSnapshotsは、allに設定された場合、以前は失敗/変更されたスナップショットのみを更新していましたが、現在はすべてのスナップショットを更新するようになりました。変更されたスナップショットのみを更新するという以前の機能は、新しい列挙型changedを使用してください。

ブラウザバージョン​

  • Chromium 133.0.6943.16
  • Mozilla Firefox 134.0
  • WebKit 18.2

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 132
  • Microsoft Edge 132

バージョン 1.49​

Ariaスナップショット​

新しいアサーションexpect(locator).toMatchAriaSnapshot()は、予想されるアクセシビリティツリー（YAML形式で表現）と比較することで、ページ構造を検証します。

await page.goto('https://playwright.dokyumento.jp');
await expect(page.locator('body')).toMatchAriaSnapshot(`
  - banner:
    - heading /Playwright enables reliable/ [level=1]
    - link "Get started"
    - link "Star microsoft/playwright on GitHub"
  - main:
    - img "Browsers (Chromium, Firefox, WebKit)"
    - heading "Any browser • Any platform • One API"
`);

テストジェネレーターでこのアサーションを生成し、--update-snapshotsコマンドラインフラグで予想されるスナップショットを更新できます。

詳細については、ariaスナップショットガイドを参照してください。

テストランナー​

破壊的変更: chromeおよびmsedgeチャンネルが新しいヘッドレスモードに切り替わります​

この変更は、playwright.config.tsで以下のチャンネルのいずれかを使用している場合に影響します

  • chrome、chrome-dev、chrome-beta、またはchrome-canary
  • msedge、msedge-dev、msedge-beta、またはmsedge-canary

何をすればいいですか？​

Playwright v1.49 に更新後、テストスイートを実行してください。引き続きパスする場合は問題ありません。パスしない場合は、スナップショットを更新し、PDF ビューアーや拡張機能に関連するテストコードを修正する必要があるかもしれません。詳細については、issue #33566 を参照してください。

その他の破壊的変更​

  • Ubuntu 20.04 および Debian 11 での WebKit の更新はこれ以上行われません。OS を新しいバージョンに更新することをお勧めします。
  • パッケージ@playwright/experimental-ct-vue2は今後更新されません。
  • パッケージ@playwright/experimental-ct-solidは今後更新されません。

新しいChromiumヘッドレスを試す​

'chromium'チャンネルを使用することで、新しいヘッドレスモードをオプトインできます。公式のChromeドキュメントに記載されているように、

一方、新しいHeadlessは実際のChromeブラウザであり、より本物で信頼性が高く、より多くの機能を提供します。これにより、高精度なエンドツーエンドのウェブアプリテストやブラウザ拡張テストに適しています。

遭遇する可能性のある破損のリストとChromiumヘッドレスの詳細については、issue #33566を参照してください。オプトイン後に問題が見られた場合は、イシューを提出してください。

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

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

その他​

  • スナップショット内の<canvas>要素がプレビューを描画するようになりました。
  • トレース内でアクションを視覚的にグループ化する新しいメソッドtracing.group()。
  • PlaywrightのDockerイメージがNode.js v20からNode.js v22 LTSに切り替わりました。

ブラウザバージョン​

  • Chromium 131.0.6778.33
  • Mozilla Firefox 132.0
  • WebKit 18.2

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 130
  • Microsoft Edge 130

バージョン 1.48​

WebSocketルーティング​

新しいメソッドpage.routeWebSocket()とbrowserContext.routeWebSocket()により、ページで開始されたWebSocket接続をインターセプト、変更、モックできるようになりました。以下は、"request"に対して"response"で応答することでWebSocket通信をモックする簡単な例です。

await page.routeWebSocket('/ws', ws => {
  ws.onMessage(message => {
    if (message === 'request')
      ws.send('response');
  });
});

詳細については、WebSocketRouteを参照してください。

UIの更新​

  • HTMLレポートに、アノテーションとテスト位置用の新しい「コピー」ボタンが追加されました。
  • route.fulfill()のようなルートメソッド呼び出しは、レポートやトレースビューアーに表示されなくなりました。代わりに、ネットワークタブでどのネットワークリクエストがルーティングされたかを確認できます。
  • ネットワークタブのリクエストに、新しい「cURLとしてコピー」ボタンと「fetchとしてコピー」ボタンが追加されました。

その他​

  • オプションformとその類似オプションがFormDataを受け入れるようになりました。
  • 新しいメソッドpage.requestGC()は、メモリリークの検出に役立つ可能性があります。
  • カスタムステップの場所を渡すための新しいオプションlocation。
  • APIRequestContextによって行われたリクエストが、HARに詳細なタイミング情報とセキュリティ情報を記録するようになりました。

ブラウザバージョン​

  • Chromium 130.0.6723.19
  • Mozilla Firefox 130.0
  • WebKit 18.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 129
  • Microsoft Edge 129

バージョン 1.47​

ネットワークタブの改善​

UIモードとトレースビューアーのネットワークタブにはいくつかの優れた改善があります

  • アセットタイプとURLによるフィルタリング
  • クエリ文字列パラメータのより良い表示
  • フォントアセットのプレビュー

Network tab now has filters

--tsconfig CLIオプション​

デフォルトでは、Playwrightはヒューリスティックを使用してインポートされたファイルごとに最も近いtsconfigを探します。コマンドラインで単一のtsconfigファイルを指定できるようになり、Playwrightはテストファイルだけでなく、インポートされたすべてのファイルにそれを使用します。

# Pass a specific tsconfig
npx playwright test --tsconfig tsconfig.test.json

APIRequestContextがURLSearchParamsとstringをクエリパラメータとして受け入れるようになりました​

APIRequestContextにURLSearchParamsとstringをクエリパラメータとして渡せるようになりました。

test('query params', async ({ request }) => {
  const searchParams = new URLSearchParams();
  searchParams.set('userId', 1);
  const response = await request.get(
      'https://jsonplaceholder.typicode.com/posts',
      {
        params: searchParams // or as a string: 'userId=1'
      }
  );
  // ...
});

その他​

  • mcr.microsoft.com/playwright:v1.47.0は、Ubuntu 24.04 NobleをベースにしたPlaywrightイメージを提供するようになりました。22.04 jammyベースのイメージを使用するには、代わりにmcr.microsoft.com/playwright:v1.47.0-jammyを使用してください。
  • 進行中のリスナーが完了するのを待つための新しいオプションbehavior、behavior、behavior。
  • TLSクライアント証明書をファイルパスの代わりにバッファとしてclientCertificates.certとclientCertificates.keyを渡すことで、メモリから渡せるようになりました。
  • text/htmlコンテンツタイプの添付ファイルは、HTMLレポートで新しいタブで開けるようになりました。これは、Playwrightテストレポートにサードパーティのレポートやその他のHTMLコンテンツを含め、チームに配布するのに便利です。
  • locator.selectOption()のnoWaitAfterオプションは非推奨になりました。
  • GitHub Actionsのmacos-13でWebkitのWebGLが誤動作するという報告を受けています。GitHub Actionsをmacos-14にアップグレードすることをお勧めします。

ブラウザバージョン​

  • Chromium 129.0.6668.29
  • Mozilla Firefox 130.0
  • WebKit 18.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 128
  • Microsoft Edge 128

バージョン 1.46​

TLSクライアント証明書​

Playwrightは、TLSクライアント認証で指定されているように、サーバーが検証できるようにクライアントサイド証明書を提供できるようになりました。

以下のスニペットはhttps://example.comのクライアント証明書を設定します。

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

export default defineConfig({
  // ...
  use: {
    clientCertificates: [{
      origin: 'https://example.com',
      certPath: './cert.pem',
      keyPath: './key.pem',
      passphrase: 'mysecretpassword',
    }],
  },
  // ...
});

また、特定のテストプロジェクトに、またはbrowser.newContext()およびapiRequest.newContext()のパラメータとしてクライアント証明書を提供できます。

--only-changed CLIオプション​

新しいCLIオプション--only-changedは、最後のGitコミットまたは特定のGit "ref"から変更されたテストファイルのみを実行します。また、変更されたファイルをインポートするすべてのテストファイルも実行します。

# Only run test files with uncommitted changes
npx playwright test --only-changed

# Only run test files changed relative to the "main" branch
npx playwright test --only-changed=main

コンポーネントテスト: 新しいrouterフィクスチャ​

このリリースでは、コンポーネントテストでネットワークリクエストをインターセプトして処理するための実験的なrouterフィクスチャが導入されました。ルーターフィクスチャを使用する方法は2つあります。

  • page.route()と同様に動作するrouter.route(url, handler)を呼び出します。
  • router.use(handlers)を呼び出し、それにMSWライブラリのリクエストハンドラーを渡します。

既存のMSWハンドラーをテストで再利用する例を以下に示します。

import { handlers } from '@src/mocks/handlers';

test.beforeEach(async ({ router }) => {
  // install common handlers before each test
  await router.use(...handlers);
});

test('example test', async ({ mount }) => {
  // test as usual, your handlers are active
  // ...
});

このフィクスチャは、コンポーネントテストでのみ利用可能です。

UIモード / トレースビューアーの更新​

  • UIモードでテストアノテーションが表示されるようになりました。
  • 添付ファイルペインでテキスト添付ファイルの内容がインラインでレンダリングされるようになりました。
  • route.continue()のようなルーティングアクションの表示/非表示を切り替える新しい設定。
  • ネットワーク詳細タブにリクエストメソッドとステータスが表示されるようになりました。
  • ソースファイルの場所をクリップボードにコピーする新しいボタン。
  • メタデータペインにbaseURLが表示されるようになりました。

その他​

ブラウザバージョン​

  • Chromium 128.0.6613.18
  • Mozilla Firefox 128.0
  • WebKit 18.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 127
  • Microsoft Edge 127

バージョン 1.45​

クロック​

新しいClock APIを利用することで、時間関連の動作を検証するためにテスト内で時間を操作および制御できます。このAPIは、多くの一般的なシナリオをカバーしています。

  • 事前定義された時間でのテスト。
  • 一貫した時間とタイマーの維持。
  • 非アクティビティの監視。
  • 手動での時間の進行。
// Initialize clock and let the page load naturally.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('https://:3333');

// Pretend that the user closed the laptop lid and opened it again at 10am,
// Pause the time once reached that point.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));

// Assert the page state.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

// Close the laptop lid again and open it at 10:30am.
await page.clock.fastForward('30:00');
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');

詳細については、クロックガイドを参照してください。

テストランナー​

  • 新しいCLIオプション--fail-on-flaky-testsは、不安定なテストがある場合に終了コードを1に設定します。デフォルトでは、すべての失敗したテストがリトライで回復した場合、テストランナーはコード0で終了することに注意してください。このオプションを使用すると、そのような場合でもテスト実行は失敗します。

  • 新しい環境変数PLAYWRIGHT_FORCE_TTYは、組み込みのlist、line、およびdotレポーターがライブターミナルを想定するかどうかを制御します。たとえば、CI環境がANSI制御シーケンスをうまく扱えない場合にtty動作を無効にするのに役立ちます。あるいは、出力を後処理して制御シーケンスを処理する予定がある場合は、ライブターミナルが存在しなくてもtty動作を有効にできます。

    # Avoid TTY features that output ANSI control sequences
    PLAYWRIGHT_FORCE_TTY=0 npx playwright test

    # Enable TTY features, assuming a terminal width 80
    PLAYWRIGHT_FORCE_TTY=80 npx playwright test

  • 新しいオプションtestConfig.respectGitIgnoreとtestProject.respectGitIgnoreは、テストの検索時に.gitignoreパターンに一致するファイルを除外するかどうかを制御します。

  • 新しいプロパティtimeoutがカスタムのexpectマッチャーで利用可能になりました。このプロパティはplaywright.config.tsとexpect.configure()を考慮します。

    import { expect as baseExpect } from '@playwright/test';

    export const expect = baseExpect.extend({
      async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
        // When no timeout option is specified, use the config timeout.
        const timeout = options?.timeout ?? this.timeout;
        // ... implement the assertion ...
      },
    });

その他​

  • メソッドlocator.setInputFiles()が<input type=file webkitdirectory>要素のディレクトリアップロードをサポートするようになりました。

    await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));

  • locator.click()やlocator.press()など、複数のメソッドがControlOrMeta修飾子キーをサポートするようになりました。このキーはmacOSではMetaに、WindowsおよびLinuxではControlにマッピングされます。

    // Press the common keyboard shortcut Control+S or Meta+S to trigger a "Save" operation.
    await page.keyboard.press('ControlOrMeta+S');

  • apiRequest.newContext()に新しいプロパティhttpCredentials.sendが追加され、Authorizationヘッダーを常に送信するか、401 Unauthorizedへの応答でのみ送信するかを許可します。

  • apiRequestContext.dispose()に新しいオプションreasonが追加され、コンテキスト破棄によって中断された進行中の操作のエラーメッセージに含まれるようになります。

  • browserType.launchServer()に新しいオプションhostが追加され、未指定の0.0.0.0ではなく、特定のIPアドレスでwebsocket接続を受け入れられるようになりました。

  • PlaywrightはUbuntu 24.04でChromium、Firefox、WebKitをサポートするようになりました。

  • v1.45はmacOS 12 MontereyのWebKitアップデートを受け取る最後のリリースです。最新のWebKitを使用し続けるには、macOSをアップデートしてください。

ブラウザバージョン​

  • Chromium 127.0.6533.5
  • Mozilla Firefox 127.0
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 126
  • Microsoft Edge 126

バージョン 1.44​

新しいAPI​

アクセシビリティアサーション

  • expect(locator).toHaveAccessibleName()は、要素が指定されたアクセシブルネームを持つことを確認します。

    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleName('Submit');

  • expect(locator).toHaveAccessibleDescription()は、要素が指定されたアクセシブルディスクリプションを持つことを確認します。

    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleDescription('Upload a photo');

  • expect(locator).toHaveRole()は、要素が指定されたARIAロールを持つことを確認します。

    const locator = page.getByTestId('save-button');
    await expect(locator).toHaveRole('button');

ロケーターハンドラー

  • page.addLocatorHandler()で追加されたハンドラーの実行後、Playwrightはハンドラーをトリガーしたオーバーレイがもはや表示されなくなるまで待機するようになりました。新しいnoWaitAfterオプションでこの動作をオプトアウトできます。
  • page.addLocatorHandler()で新しいtimesオプションを使用して、ハンドラーが実行される最大回数を指定できます。
  • page.addLocatorHandler()のハンドラーが引数としてロケーターを受け入れるようになりました。
  • 以前追加されたロケーターハンドラーを削除するための新しいpage.removeLocatorHandler()メソッド。
const locator = page.getByText('This interstitial covers the button');
await page.addLocatorHandler(locator, async overlay => {
  await overlay.locator('#close').click();
}, { times: 3, noWaitAfter: true });
// Run your tests that can be interrupted by the overlay.
// ...
await page.removeLocatorHandler(locator);

その他のオプション

  • apiRequestContext.fetch()のmultipartオプションがFormDataを受け入れるようになり、同じ名前のフィールドの繰り返しをサポートするようになりました。

    const formData = new FormData();
    formData.append('file', new File(['let x = 2024;'], 'f1.js', { type: 'text/javascript' }));
    formData.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
    context.request.post('https://example.com/uploadFiles', {
      multipart: formData
    });

  • expect(callback).toPass({ intervals })は、testConfig.expectでグローバルに、またはtestProject.expectでプロジェクトごとにexpect.toPass.intervalsオプションで設定できるようになりました。

  • expect(page).toHaveURL(url)がignoreCaseオプションをサポートするようになりました。

  • testProject.ignoreSnapshotsにより、スクリーンショットの期待をスキップするかどうかをプロジェクトごとに設定できます。

レポーターAPI

  • 新しいメソッドsuite.entries()は、子テストスイートとテストケースを宣言順に返します。suite.typeとtestCase.typeを使用して、リスト内のテストケースとスイートを区別できます。
  • Blobレポーターは、単一のオプションoutputFileでレポートファイルパスをオーバーライドできるようになりました。同じオプションは、CI/CDでより便利な可能性がある環境変数PLAYWRIGHT_BLOB_OUTPUT_FILEとしても指定できます。
  • JUnitレポーターがincludeProjectInTestNameオプションをサポートするようになりました。

コマンドライン

  • 前回の実行で失敗したテストのみを実行するための--last-failed CLIオプション。

    まず、すべてのテストを実行します。

    $ npx playwright test

    Running 103 tests using 5 workers
    ...
    2 failed
      [chromium] › my-test.spec.ts:8:5 › two ─────────────────────────────────────────────────────────
      [chromium] › my-test.spec.ts:13:5 › three ──────────────────────────────────────────────────────
    101 passed (30.0s)

    次に、失敗したテストを修正し、--last-failedオプションでPlaywrightを再度実行します。

    $ npx playwright test --last-failed

    Running 2 tests using 2 workers
      2 passed (1.2s)

ブラウザバージョン​

  • Chromium 125.0.6422.14
  • Mozilla Firefox 125.0.1
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 124
  • Microsoft Edge 124

バージョン 1.43​

新しいAPI​

  • メソッドbrowserContext.clearCookies()がフィルタをサポートし、一部のクッキーのみを削除できるようになりました。

    // Clear all cookies.
    await context.clearCookies();
    // New: clear cookies with a particular name.
    await context.clearCookies({ name: 'session-id' });
    // New: clear cookies for a particular domain.
    await context.clearCookies({ domain: 'my-origin.com' });

  • testOptions.traceに新しいモードretain-on-first-failureが追加されました。このモードでは、各テストの初回実行時にトレースが記録されますが、リトライ時には記録されません。テスト実行が失敗した場合、トレースファイルは保持され、それ以外の場合は削除されます。

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

    export default defineConfig({
      use: {
        trace: 'retain-on-first-failure',
      },
    });

  • 新しいプロパティtestInfo.tagsは、テスト実行中にテストタグを公開します。

    test('example', async ({ page }) => {
      console.log(test.info().tags);
    });

  • 新しいメソッドlocator.contentFrame()は、LocatorオブジェクトをFrameLocatorに変換します。これは、どこかで取得したLocatorオブジェクトがあり、後でフレーム内のコンテンツと対話したい場合に便利です。

    const locator = page.locator('iframe[name="embedded"]');
    // ...
    const frameLocator = locator.contentFrame();
    await frameLocator.getByRole('button').click();

  • 新しいメソッドframeLocator.owner()は、FrameLocatorオブジェクトをLocatorに変換します。これは、どこかで取得したFrameLocatorオブジェクトがあり、後でiframe要素と対話したい場合に便利です。

    const frameLocator = page.frameLocator('iframe[name="embedded"]');
    // ...
    const locator = frameLocator.owner();
    await expect(locator).toBeVisible();

UIモードの更新​

Playwright UI Mode

  • テストリストにタグが表示されます。
  • @fastと入力するか、タグ自体をクリックしてタグでフィルタリングします。
  • 新しいショートカット
    • 「F5」でテストを実行。
    • 「Shift F5」でテストの実行を停止。
    • 「Ctrl `」でテスト出力を切り替え。

ブラウザバージョン​

  • Chromium 124.0.6367.8
  • Mozilla Firefox 124.0
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 123
  • Microsoft Edge 123

バージョン 1.42​

新しいAPI​

  • 新しいメソッドpage.addLocatorHandler()は、指定された要素が表示されPlaywrightアクションをブロックする可能性がある場合に呼び出されるコールバックを登録します。コールバックはオーバーレイを削除できます。以下は、クッキーダイアログが表示されたときに閉じる例です。
// Setup the handler.
await page.addLocatorHandler(
    page.getByRole('heading', { name: 'Hej! You are in control of your cookies.' }),
    async () => {
      await page.getByRole('button', { name: 'Accept all' }).click();
    });
// Write the test as usual.
await page.goto('https://www.ikea.com/');
await page.getByRole('link', { name: 'Collection of blue and white' }).click();
await expect(page.getByRole('heading', { name: 'Light and easy' })).toBeVisible();
electronApp.on('console', async msg => {
  const values = [];
  for (const arg of msg.args())
    values.push(await arg.jsonValue());
  console.log(...values);
});
await electronApp.evaluate(() => console.log('hello', 5, { foo: 'bar' }));
  • テストにタグを追加するための新しい構文（テストタイトル内の@-トークンも引き続きサポートされています）
test('test customer login', {
  tag: ['@fast', '@login'],
}, async ({ page }) => {
  // ...
});

特定のタグを持つテストのみを実行するには、--grepコマンドラインオプションを使用します。

npx playwright test --grep @fast
  • --projectコマンドラインフラグが'*'ワイルドカードをサポートするようになりました。
npx playwright test --project='*mobile*'
test('test full report', {
  annotation: [
    { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
    { type: 'docs', description: 'https://playwright.dokyumento.jp/docs/test-annotations#tag-tests' },
  ],
}, async ({ page }) => {
  // ...
});

お知らせ​

  • ⚠️ Ubuntu 18 はサポートされなくなりました。

ブラウザバージョン​

  • Chromium 123.0.6312.4
  • Mozilla Firefox 123.0
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 122
  • Microsoft Edge 123

バージョン 1.41​

新しいAPI​

ブラウザバージョン​

  • Chromium 121.0.6167.57
  • Mozilla Firefox 121.0
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 120
  • Microsoft Edge 120

バージョン 1.40​

テストジェネレーターの更新​

Playwright Test Generator

アサーションを生成するための新しいツール

以下は、アサーションが生成されたテストの例です。

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation');
  await expect(page.getByLabel('Search')).toBeVisible();
  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('locator');
  await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator');
});

新しいAPI​

その他の変更​

ブラウザバージョン​

  • Chromium 120.0.6099.28
  • Mozilla Firefox 119.0
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 119
  • Microsoft Edge 119

バージョン 1.39​

expectにカスタムマッチャーを追加​

カスタムマッチャーを提供することで、Playwrightのアサーションを拡張できます。これらのマッチャーはexpectオブジェクトで利用可能になります。

test.spec.ts
import { expect as baseExpect } from '@playwright/test';
export const expect = baseExpect.extend({
  async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
    // ... see documentation for how to write matchers.
  },
});

test('pass', async ({ page }) => {
  await expect(page.getByTestId('cart')).toHaveAmount(5);
});

完全な例については、ドキュメントを参照してください。

テストフィクスチャをマージする​

複数のファイルまたはモジュールからテストフィクスチャをマージできるようになりました。

fixtures.ts
import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'database-test-utils';
import { test as a11yTest } from 'a11y-test-utils';

export const test = mergeTests(dbTest, a11yTest);
test.spec.ts
import { test } from './fixtures';

test('passes', async ({ database, page, a11y }) => {
  // use database and a11y fixtures.
});

カスタム expect マッチャーをマージする​

複数のファイルまたはモジュールからカスタム expect マッチャーをマージできるようになりました。

fixtures.ts
import { mergeTests, mergeExpects } from '@playwright/test';
import { test as dbTest, expect as dbExpect } from 'database-test-utils';
import { test as a11yTest, expect as a11yExpect } from 'a11y-test-utils';

export const test = mergeTests(dbTest, a11yTest);
export const expect = mergeExpects(dbExpect, a11yExpect);
test.spec.ts
import { test, expect } from './fixtures';

test('passes', async ({ page, database }) => {
  await expect(database).toHaveDatabaseUser('admin');
  await expect(page).toPassA11yAudit();
});

実装詳細を隠す: テストステップをボックス化する​

test.step()を「ボックス化」としてマークすると、その内部のエラーがステップの呼び出し元を指すようになります。

async function login(page) {
  await test.step('login', async () => {
    // ...
  }, { box: true });  // Note the "box" option here.
}
Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
  ... error details omitted ...

  14 |   await page.goto('https://github.com/login');
> 15 |   await login(page);
     |         ^
  16 | });

完全な例については、test.step()のドキュメントを参照してください。

新しいAPI​

ブラウザバージョン​

  • Chromium 119.0.6045.9
  • Mozilla Firefox 118.0.1
  • WebKit 17.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 118
  • Microsoft Edge 118

バージョン 1.38​

UIモードの更新​

Playwright UI Mode

  1. 時間範囲をズームします。
  2. ネットワークパネルの再設計。

新しいAPI​

非推奨​

破壊的変更: Playwrightはブラウザを自動的にダウンロードしなくなりました​

注: @playwright/testパッケージを使用している場合、この変更は影響しません。

Playwrightは@playwright/testパッケージを使用し、npx playwright installコマンドでブラウザをダウンロードすることを推奨しています。この推奨事項に従っている場合、あなたには何も変更はありません。

しかし、v1.38までは、@playwright/testではなくplaywrightパッケージをインストールすると、ブラウザが自動的にダウンロードされていました。これはもはやそうではなく、npx playwright installコマンドで明示的にブラウザをダウンロードすることをお勧めします。

v1.37以前

playwrightパッケージはnpm install中にブラウザをダウンロードしていましたが、@playwright/testはダウンロードしていませんでした。

v1.38以降

playwrightおよび@playwright/testパッケージは、npm install中にブラウザをダウンロードしません。

推奨される移行

npm installの後にnpx playwright installを実行してブラウザをダウンロードします。たとえば、CI設定で

- run: npm ci
- run: npx playwright install --with-deps

代替の移行オプション - 非推奨

@playwright/browser-chromium、@playwright/browser-firefox、@playwright/browser-webkitを依存関係として追加します。これらのパッケージはnpm install中にそれぞれのブラウザをダウンロードします。すべてのPlaywrightパッケージのバージョンを同期させてください。

// package.json
{
  "devDependencies": {
    "playwright": "1.38.0",
    "@playwright/browser-chromium": "1.38.0",
    "@playwright/browser-firefox": "1.38.0",
    "@playwright/browser-webkit": "1.38.0"
  }
}

ブラウザバージョン​

  • Chromium 117.0.5938.62
  • Mozilla Firefox 117.0
  • WebKit 17.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 116
  • Microsoft Edge 116

バージョン 1.37​

新しいnpx playwright merge-reportsツール​

複数のシャードでテストを実行する場合、新しいmerge-reports CLIツールを使用して、すべてのレポートを単一のHTMLレポート（またはその他のレポート）にマージできるようになりました。

merge-reportsツールを使用するには、次の手順が必要です。

  1. CIで実行するときに、configに新しい「blob」レポーターを追加する

    playwright.config.ts
    export default defineConfig({
      testDir: './tests',
      reporter: process.env.CI ? 'blob' : 'html',
    });

    「blob」レポーターは、テスト実行に関するすべての情報を含む「.zip」ファイルを生成します。

  2. すべての「blob」レポートを単一の共有場所にコピーし、npx playwright merge-reportsを実行する

npx playwright merge-reports --reporter html ./all-blob-reports

詳細については、ドキュメントを参照してください。

📚 Debian 12 Bookwormのサポート​

Playwrightは、Chromium、Firefox、WebKitのx86_64およびarm64の両方でDebian 12 Bookwormをサポートするようになりました。何か問題が発生した場合はお知らせください！

Linuxのサポート状況は以下の通りです

Ubuntu 20.04Ubuntu 22.04Debian 11Debian 12
Chromium✅✅✅✅
WebKit✅✅✅✅
Firefox✅✅✅✅

UIモードの更新​

  • UIモードがプロジェクトの依存関係を尊重するようになりました。プロジェクトリストでチェック/チェックを外すことで、尊重する依存関係を制御できます。
  • テストからのコンソールログが「コンソール」タブに表示されるようになりました。

ブラウザバージョン​

  • Chromium 116.0.5845.82
  • Mozilla Firefox 115.0
  • WebKit 17.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 115
  • Microsoft Edge 115

バージョン 1.36​

🏝️ 夏のメンテナンスリリース。

ブラウザバージョン​

  • Chromium 115.0.5790.75
  • Mozilla Firefox 115.0
  • WebKit 17.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 114
  • Microsoft Edge 114

バージョン 1.35​

ハイライト​

  • UIモードがVSCode Playwright拡張機能の新しい「トレースビューアーを表示」ボタンから利用可能になりました。

    Playwright UI Mode

  • UIモードとトレースビューアーは、page.route()およびbrowserContext.route()ハンドラーで処理されたネットワークリクエスト、およびAPIテストを介して発行されたネットワークリクエストをマークします。

    Trace Viewer

  • メソッドpage.screenshot()、locator.screenshot()、expect(page).toHaveScreenshot()、expect(locator).toHaveScreenshot()に、デフォルトのマスキング色を変更する新しいオプションmaskColor。

    await page.goto('https://playwright.dokyumento.jp');
    await expect(page).toHaveScreenshot({
      mask: [page.locator('img')],
      maskColor: '#00FF00', // green
    });

  • ブラウザバイナリをアンインストールするための新しいuninstall CLIコマンド。

    $ npx playwright uninstall # remove browsers installed by this installation
    $ npx playwright uninstall --all # remove all ever-install Playwright browsers

  • UIモードとトレースビューアーの両方がブラウザタブで開けるようになりました。

    $ npx playwright test --ui-port 0 # open UI mode in a tab on a random port
    $ npx playwright show-trace --port 0 # open trace viewer in tab on a random port

⚠️ 破壊的変更​

  • playwright-coreバイナリがplaywrightからplaywright-coreに名前変更されました。したがって、playwright-core CLIを使用している場合は、名前を更新するようにしてください。

    $ npx playwright-core install # the new way to install browsers when using playwright-core

    この変更は@playwright/testおよびplaywrightパッケージのユーザーには影響しません。

ブラウザバージョン​

  • Chromium 115.0.5790.13
  • Mozilla Firefox 113.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 114
  • Microsoft Edge 114

バージョン 1.34​

ハイライト​

  • UIモードにステップ、フィクスチャ、添付ファイルが表示されるようになりました：UI Mode attachments

  • 新しいプロパティtestProject.teardownにより、このプロジェクトとすべての依存プロジェクトが完了した後に実行する必要があるプロジェクトを指定できるようになりました。ティアダウンは、このプロジェクトによって取得されたリソースをクリーンアップするのに便利です。

    一般的なパターンは、対応するteardownを持つsetup依存関係でしょう。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      projects: [
        {
          name: 'setup',
          testMatch: /global.setup\.ts/,
          teardown: 'teardown',
        },
        {
          name: 'teardown',
          testMatch: /global.teardown\.ts/,
        },
        {
          name: 'chromium',
          use: devices['Desktop Chrome'],
          dependencies: ['setup'],
        },
        {
          name: 'firefox',
          use: devices['Desktop Firefox'],
          dependencies: ['setup'],
        },
        {
          name: 'webkit',
          use: devices['Desktop Safari'],
          dependencies: ['setup'],
        },
      ],
    });

  • 新しいメソッドexpect.configureは、timeoutやsoftなどの独自のデフォルト値を持つ事前に設定されたexpectインスタンスを作成します。

    const slowExpect = expect.configure({ timeout: 10000 });
    await slowExpect(locator).toHaveText('Submit');

    // Always do soft assertions.
    const softExpect = expect.configure({ soft: true });

  • testConfig.webServerに新しいオプションstderrとstdoutが追加され、出力処理を設定できるようになりました。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      // Run your local dev server before starting the tests
      webServer: {
        command: 'npm run start',
        url: 'http://127.0.0.1:3000',
        reuseExistingServer: !process.env.CI,
        stdout: 'pipe',
        stderr: 'pipe',
      },
    });

  • 両方のロケーターに一致するロケーターを作成するための新しいlocator.and()。

    const button = page.getByRole('button').and(page.getByTitle('Subscribe'));

  • 新しいイベントbrowserContext.on('console')とbrowserContext.on('dialog')は、指定されたブラウザコンテキストの任意のページからのダイアログやコンソールメッセージを購読できます。イベントソースを特定するには、新しいメソッドconsoleMessage.page()とdialog.page()を使用してください。

⚠️ 破壊的変更​

  • playwrightと@playwright/testの両方をインストールすると、npx playwright testが機能しなくなりました。ブラウザ自動化APIを@playwright/testから直接インポートできるため、両方をインストールする必要はありません。

    automation.ts
    import { chromium, firefox, webkit } from '@playwright/test';
    /* ... */

  • Node.js 14 は、2023年4月30日にサポートが終了したため、もはやサポートされません。

ブラウザバージョン​

  • Chromium 114.0.5735.26
  • Mozilla Firefox 113.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 113
  • Microsoft Edge 113

バージョン 1.33​

ロケーターの更新​

  • 新しいAPIでロケーターを記述するのが楽しくなりました。locator.or()を使用して、2つのロケーターのいずれかに一致するロケーターを作成します。「新しいメール」ボタンをクリックしたいが、時々セキュリティ設定ダイアログが表示されるというシナリオを考えてみましょう。この場合、「新しいメール」ボタンまたはダイアログのいずれかを待機し、それに応じて対処できます。

    const newEmail = page.getByRole('button', { name: 'New email' });
    const dialog = page.getByText('Confirm security settings');
    await expect(newEmail.or(dialog)).toBeVisible();
    if (await dialog.isVisible())
      await page.getByRole('button', { name: 'Dismiss' }).click();
    await newEmail.click();

  • locator.filter()の新しいオプションhasNotとhasNotTextを使用して、特定の条件に一致しない要素を見つけます。

    const rowLocator = page.locator('tr');
    await rowLocator
        .filter({ hasNotText: 'text in column 1' })
        .filter({ hasNot: page.getByRole('button', { name: 'column 2 button' }) })
        .screenshot();

  • 要素がページのDOMに存在することを保証するために、新しいウェブファーストのアサーションexpect(locator).toBeAttached()を使用します。expect(locator).toBeVisible()と混同しないでください。後者は要素がアタッチされ、かつ表示されていることを保証します。

新しいAPI​

⚠️ 破壊的変更​

  • mcr.microsoft.com/playwright:v1.33.0はUbuntu JammyベースのPlaywrightイメージを提供するようになりました。focalベースのイメージを使用するには、代わりにmcr.microsoft.com/playwright:v1.33.0-focalを使用してください。

ブラウザバージョン​

  • Chromium 113.0.5672.53
  • Mozilla Firefox 112.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 112
  • Microsoft Edge 112

バージョン 1.32​

UIモードの導入 (プレビュー)​

新しいUIモードにより、テストの探索、実行、デバッグが可能になります。組み込みのウォッチモードが付属しています。

Playwright UI Mode

新しいフラグ--uiで有効にします

npx playwright test --ui

新しいAPI​

⚠️ コンポーネントテストの破壊的変更​

注意: コンポーネントテストのみに影響し、エンドツーエンドテストには影響しません。

  • @playwright/experimental-ct-reactはReact 18のみをサポートするようになりました。
  • React 16または17でコンポーネントテストを実行している場合は、@playwright/experimental-ct-reactを@playwright/experimental-ct-react17に置き換えてください。

ブラウザバージョン​

  • Chromium 112.0.5615.29
  • Mozilla Firefox 111.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 111
  • Microsoft Edge 111

バージョン 1.31​

新しいAPI​

  • プロジェクト間の依存関係を設定するための新しいプロパティtestProject.dependencies。

    依存関係を使用することで、グローバルセットアップがトレースやその他のアーティファクトを生成したり、テストレポートにセットアップステップを表示したりすることが可能になります。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      projects: [
        {
          name: 'setup',
          testMatch: /global.setup\.ts/,
        },
        {
          name: 'chromium',
          use: devices['Desktop Chrome'],
          dependencies: ['setup'],
        },
        {
          name: 'firefox',
          use: devices['Desktop Firefox'],
          dependencies: ['setup'],
        },
        {
          name: 'webkit',
          use: devices['Desktop Safari'],
          dependencies: ['setup'],
        },
      ],
    });

  • 新しいアサーションexpect(locator).toBeInViewport()は、ロケーターがIntersection Observer APIに従ってビューポートと交差する要素を指していることを保証します。

    const button = page.getByRole('button');

    // Make sure at least some part of element intersects viewport.
    await expect(button).toBeInViewport();

    // Make sure element is fully outside of viewport.
    await expect(button).not.toBeInViewport();

    // Make sure that at least half of the element intersects viewport.
    await expect(button).toBeInViewport({ ratio: 0.5 });

その他​

  • トレースビューアーのDOMスナップショットが別ウィンドウで開けるようになりました。
  • playwright.configで使用するための新しいメソッドdefineConfig。
  • メソッドroute.fetch()に新しいオプションmaxRedirects。
  • PlaywrightはDebian 11 arm64をサポートするようになりました。
  • 公式のDockerイメージにはNode 16の代わりにNode 18が含まれるようになりました。

⚠️ コンポーネントテストの破壊的変更​

注意: コンポーネントテストのみに影響し、エンドツーエンドテストには影響しません。

コンポーネントテスト用のplaywright-ct.config設定ファイルで、defineConfigの呼び出しが必要になりました。

// Before

import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = {
  // ... config goes here ...
};
export default config;

config変数の定義をdefineConfig呼び出しに置き換えます

// After

import { defineConfig, devices } from '@playwright/experimental-ct-react';
export default defineConfig({
  // ... config goes here ...
});

ブラウザバージョン​

  • Chromium 111.0.5563.19
  • Mozilla Firefox 109.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 110
  • Microsoft Edge 110

バージョン 1.30​

ブラウザバージョン​

  • Chromium 110.0.5481.38
  • Mozilla Firefox 108.0.2
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 109
  • Microsoft Edge 109

バージョン 1.29​

新しいAPI​

  • 新しいメソッドroute.fetch()と、route.fulfill()の新しいオプションjson。

    await page.route('**/api/settings', async route => {
      // Fetch original settings.
      const response = await route.fetch();

      // Force settings theme to a predefined value.
      const json = await response.json();
      json.theme = 'Solorized';

      // Fulfill with modified data.
      await route.fulfill({ json });
    });

  • すべての一致する要素を反復処理するための新しいメソッドlocator.all()。

    // Check all checkboxes!
    const checkboxes = page.getByRole('checkbox');
    for (const checkbox of await checkboxes.all())
      await checkbox.check();

  • locator.selectOption()が値またはラベルでマッチングするようになりました。

    <select multiple>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
    await element.selectOption('Red');

  • すべての表明がパスするまでコードブロックを再試行する。

    await expect(async () => {
      const response = await page.request.get('https://api.example.com');
      await expect(response).toBeOK();
    }).toPass();

    詳細については、ドキュメントを参照してください。

  • テスト失敗時にフルページスクリーンショットを自動的にキャプチャ。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';
    export default defineConfig({
      use: {
        screenshot: {
          mode: 'only-on-failure',
          fullPage: true,
        }
      }
    });

その他​

ブラウザバージョン​

  • Chromium 109.0.5414.46
  • Mozilla Firefox 107.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 108
  • Microsoft Edge 108

バージョン 1.28​

Playwright ツール​

  • VSCodeでカーソル位置から記録。テストを実行し、カーソルをテストの終わりに配置して、テストの生成を続けることができます。

New VSCode Extension

  • VSCodeでライブロケーター。VSCodeでロケーターにホバーして編集すると、開いているブラウザでハイライトされます。
  • Codegenでライブロケーター。「Explore」ツールを使用して、ページ上の任意の要素のロケーターを生成します。

Locator Explorer

  • CodegenとTrace Viewerのダークテーマ。オペレーティングシステムの設定から自動的に選択されます。

Dark Theme

テストランナー​

  • test.describe.configure()を使用して、ファイルまたはテストのリトライ回数とテストタイムアウトを設定します。

    // Each test in the file will be retried twice and have a timeout of 20 seconds.
    test.describe.configure({ retries: 2, timeout: 20_000 });
    test('runs first', async ({ page }) => {});
    test('runs second', async ({ page }) => {});

  • testProject.snapshotPathTemplateおよびtestConfig.snapshotPathTemplateを使用して、expect(page).toHaveScreenshot()およびexpect(value).toMatchSnapshot()によって生成されるスナップショットの場所を制御するテンプレートを設定します。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';
    export default defineConfig({
      testDir: './tests',
      snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
    });

新しいAPI​

ブラウザバージョン​

  • Chromium 108.0.5359.29
  • Mozilla Firefox 106.0
  • WebKit 16.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 107
  • Microsoft Edge 107

バージョン 1.27​

ロケーター​

これらの新しいAPIを使えば、ロケーターの記述が楽しくなります。

await page.getByLabel('User Name').fill('John');

await page.getByLabel('Password').fill('secret-password');

await page.getByRole('button', { name: 'Sign in' }).click();

await expect(page.getByText('Welcome, John!')).toBeVisible();

すべての同じメソッドがLocator、FrameLocator、Frameクラスでも利用可能です。

その他のハイライト​

  • playwright.config.ts内のworkersオプションで、利用可能なCPUの一部を使用するためのパーセンテージ文字列を受け入れるようになりました。コマンドラインでも渡すことができます。

    npx playwright test --workers=20%

  • HTMLレポーターにhostとportの新しいオプションが追加されました。

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

    export default defineConfig({
      reporter: [['html', { host: 'localhost', port: '9223' }]],
    });

  • テストレポーターで利用可能な新しいフィールドFullConfig.configFileは、設定ファイルが存在する場合にそのパスを指定します。

  • v1.25で発表された通り、Ubuntu 18は2022年12月をもってサポートされなくなります。さらに、次回のPlaywrightリリース以降、Ubuntu 18でのWebKitのアップデートは行われません。

動作の変更点​

  • 空の値を持つexpect(locator).toHaveAttribute()は、欠落した属性に一致しなくなりました。例えば、以下のスニペットは、buttonにdisabled属性が**ない**場合に成功します。

    await expect(page.getByRole('button')).toHaveAttribute('disabled', '');

  • コマンドラインオプション--grepと--grep-invertは、以前は設定で指定されたgrepとgrepInvertオプションを誤って無視していました。これからはすべてが一緒に適用されます。

ブラウザバージョン​

  • Chromium 107.0.5304.18
  • Mozilla Firefox 105.0.1
  • WebKit 16.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 106
  • Microsoft Edge 106

バージョン 1.26​

アサーション​

その他の注目点​

  • apiRequestContext.get()などのメソッドに、リダイレクト回数を制限する新しいオプションmaxRedirectsが追加されました。
  • ファイルが見つからない場合にテストスイートをパスさせる新しいコマンドラインフラグ--pass-with-no-testsが追加されました。
  • expect(value).toMatchSnapshot()やexpect(page).toHaveScreenshot()などのスナップショットの期待値をスキップする新しいコマンドラインフラグ--ignore-snapshotsが追加されました。

動作の変更点​

PlaywrightのAPIの多くは、すでにwaitUntil: 'domcontentloaded'オプションをサポートしています。例えば、

await page.goto('https://playwright.dokyumento.jp', {
  waitUntil: 'domcontentloaded',
});

1.26以前は、すべてのiframeがDOMContentLoadedイベントを発生させるのを待っていました。

ウェブ仕様に合わせるため、'domcontentloaded'の値はターゲットフレームが'DOMContentLoaded'イベントを発生させるのを待つだけになりました。すべてのiframeを待つにはwaitUntil: 'load'を使用してください。

ブラウザバージョン​

  • Chromium 106.0.5249.30
  • Mozilla Firefox 104.0
  • WebKit 16.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 105
  • Microsoft Edge 105

バージョン 1.25​

VSCode拡張機能​

  • テストのライブ実行を監視し、開発者ツールを開いたままにする。
  • セレクターを選択する。
  • 現在のページの状態から新しいテストを記録する。

vscode extension screenshot

テストランナー​

  • test.step()がステップ関数の値を返すようになりました。

    test('should work', async ({ page }) => {
      const pageTitle = await test.step('get title', async () => {
        await page.goto('https://playwright.dokyumento.jp');
        return await page.title();
      });
      console.log(pageTitle);
    });

  • test.describe.fixme()が追加されました。

  • 新しいテストステータス'interrupted'が追加されました。

  • CLIフラグでトレースを有効にする: npx playwright test --trace=on。

お知らせ​

  • 🎁 Ubuntu 22.04 Jammy JellyfishのDockerイメージをリリースしました: mcr.microsoft.com/playwright:v1.34.0-jammy。
  • 🪦 macOS 10.15のサポートを含む最後のリリースです (1.21で非推奨となりました)。
  • 🪦 Node.js 12のサポートを含む最後のリリースです。Node.js LTS (16)へのアップグレードを推奨します。
  • ⚠️ Ubuntu 18は非推奨となり、2022年12月をもってサポートされなくなります。

ブラウザバージョン​

  • Chromium 105.0.5195.19
  • Mozilla Firefox 103.0
  • WebKit 16.0

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 104
  • Microsoft Edge 104

バージョン 1.24​

🌍 playwright.config.tsにおける複数のWebサーバー​

設定の配列を渡すことで、複数のWebサーバー、データベース、またはその他のプロセスを起動できるようになりました。

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  webServer: [
    {
      command: 'npm run start',
      url: 'http://127.0.0.1:3000',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'http://127.0.0.1:3333',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'https://:3000/',
  },
});

🐂 Debian 11 Bullseye サポート​

Playwrightは、Chromium、Firefox、WebKitにおいてx86_64版のDebian 11 Bullseyeをサポートするようになりました。何か問題が発生した場合はお知らせください！

Linuxのサポート状況は以下の通りです

| | Ubuntu 20.04 | Ubuntu 22.04 | Debian 11 | :--- | :---: | :---: | :---: | :---: | | Chromium | ✅ | ✅ | ✅ | | WebKit | ✅ | ✅ | ✅ | | Firefox | ✅ | ✅ | ✅ |

🕵️ 匿名Describe​

タイトルなしでスイートを作成するためにtest.describe()を呼び出すことができるようになりました。test.use()を使ってテストグループに共通のオプションを与えるのに便利です。

test.describe(() => {
  test.use({ colorScheme: 'dark' });

  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

🧩 コンポーネントテストの更新​

Playwright 1.24のコンポーネントテストでは、beforeMountとafterMountフックが導入されました。これらを使用してテスト用にアプリを設定できます。

例えば、Vue.jsでAppルーターを設定するために使用できます。

src/component.spec.ts
import { test } from '@playwright/experimental-ct-vue';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
  const component = await mount(Component, {
    hooksConfig: {
      /* anything to configure your app */
    }
  });
});
playwright/index.ts
import { router } from '../router';
import { beforeMount } from '@playwright/experimental-ct-vue/hooks';

beforeMount(async ({ app, hooksConfig }) => {
  app.use(router);
});

Next.jsでの同様の設定は以下のようになります。

src/component.spec.jsx
import { test } from '@playwright/experimental-ct-react';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
  const component = await mount(<Component></Component>, {
    // Pass mock value from test into `beforeMount`.
    hooksConfig: {
      router: {
        query: { page: 1, per_page: 10 },
        asPath: '/posts'
      }
    }
  });
});
playwright/index.js
import router from 'next/router';
import { beforeMount } from '@playwright/experimental-ct-react/hooks';

beforeMount(async ({ hooksConfig }) => {
  // Before mount, redefine useRouter to return mock value from test.
  router.useRouter = () => hooksConfig.router;
});

バージョン 1.23​

ネットワークリプレイ​

ネットワークトラフィックをHARファイルに記録し、そのトラフィックをテストで再利用できるようになりました。

ネットワークをHARファイルに記録するには

npx playwright open --save-har=github.har.zip https://github.com/microsoft

あるいは、HARをプログラムで記録することもできます

const context = await browser.newContext({
  recordHar: { path: 'github.har.zip' }
});
// ... do stuff ...
await context.close();

新しいメソッドpage.routeFromHAR()またはbrowserContext.routeFromHAR()を使用して、HARファイルから一致するレスポンスを提供します。

await context.routeFromHAR('github.har.zip');

ドキュメントで詳細を確認してください。

高度なルーティング​

route.fallback()を使用して、ルーティングを他のハンドラーに委譲できるようになりました。

以下の例を考えてみましょう

// Remove a header from all requests.
test.beforeEach(async ({ page }) => {
  await page.route('**/*', async route => {
    const headers = await route.request().allHeaders();
    delete headers['if-none-match'];
    await route.fallback({ headers });
  });
});

test('should work', async ({ page }) => {
  await page.route('**/*', async route => {
    if (route.request().resourceType() === 'image')
      await route.abort();
    else
      await route.fallback();
  });
});

新しいメソッドpage.routeFromHAR()とbrowserContext.routeFromHAR()もルーティングに参加し、委譲される可能性があることに注意してください。

Web-Firstアサーションの更新​

コンポーネントテストの更新​

Playwrightでのコンポーネントテストについて詳しくはこちら。

その他​

  • 邪魔になるサービスワーカーがある場合、新しいコンテキストオプションserviceWorkersで簡単に無効にできるようになりました。

    playwright.config.ts
    export default {
      use: {
        serviceWorkers: 'block',
      }
    };

  • recordHarコンテキストオプションに.zipパスを使用すると、結果のHARが自動的に圧縮されます。

    const context = await browser.newContext({
      recordHar: {
        path: 'github.har.zip',
      }
    });

  • HARを手動で編集する予定がある場合は、リプレイに不可欠な情報のみを記録する"minimal"HAR記録モードの使用を検討してください。

    const context = await browser.newContext({
      recordHar: {
        path: 'github.har',
        mode: 'minimal',
      }
    });

  • PlaywrightはUbuntu 22 amd64およびUbuntu 22 arm64で動作するようになりました。また、新しいDockerイメージmcr.microsoft.com/playwright:v1.34.0-jammyも公開しています。

⚠️ 破壊的変更 ⚠️​

指定されたURLへのリクエストが以下のいずれかのHTTPステータスコードを持つ場合、WebServerは「準備完了」と見なされるようになりました。

  • 200-299
  • 300-399 (新規)
  • 400, 401, 402, 403 (新規)

バージョン 1.22​

主な変更点​

  • コンポーネントテスト (プレビュー)

    Playwright Testは、React、Vue.js、またはSvelteのコンポーネントをテストできるようになりました。実際のブラウザでコンポーネントを実行しながら、Playwright Testのすべての機能（並列化、エミュレーション、デバッグなど）を使用できます。

    典型的なコンポーネントテストは次のようになります。

    App.spec.tsx
    import { test, expect } from '@playwright/experimental-ct-react';
    import App from './App';

    // Let's test component in a dark scheme!
    test.use({ colorScheme: 'dark' });

    test('should render', async ({ mount }) => {
      const component = await mount(<App></App>);

      // As with any Playwright test, assert locator text.
      await expect(component).toContainText('React');
      // Or do a screenshot 🚀
      await expect(component).toHaveScreenshot();
      // Or use any Playwright method
      await component.click();
    });

    ドキュメントで詳細を確認してください。

  • ARIAロール、ARIA属性、およびアクセシブルネームで要素を選択できるロールセレクター。

    // Click a button with accessible name "log in"
    await page.locator('role=button[name="log in"]').click();

    ドキュメントで詳細を確認してください。

  • 既存のロケーターをフィルターするための新しいlocator.filter() API。

    const buttons = page.locator('role=button');
    // ...
    const submitButton = buttons.filter({ hasText: 'Submit' });
    await submitButton.click();

  • スクリーンショットの安定化を待ち、テストの信頼性を向上させる新しいWeb-Firstアサーションexpect(page).toHaveScreenshot()とexpect(locator).toHaveScreenshot()。

    新しいアサーションには、スクリーンショットに特化したデフォルト値があります。例えば、

    • アニメーションを無効にする
    • CSSスケールオプションを使用する
    await page.goto('https://playwright.dokyumento.jp');
    await expect(page).toHaveScreenshot();

    新しいexpect(page).toHaveScreenshot()は、expect(value).toMatchSnapshot()と同じ場所にスクリーンショットを保存します。

バージョン 1.21​

主な変更点​

  • ARIAロール、ARIA属性、およびアクセシブルネームで要素を選択できる新しいロールセレクター。

    // Click a button with accessible name "log in"
    await page.locator('role=button[name="log in"]').click();

    ドキュメントで詳細を確認してください。

  • より小さいサイズのスクリーンショットのために、page.screenshot()に新しいscaleオプションが追加されました。

  • テキストカーソルを制御するためのpage.screenshot()に新しいcaretオプションが追加されました。デフォルトは"hide"です。

  • 任意の条件を待つ新しいメソッドexpect.poll

    // Poll the method until it returns an expected result.
    await expect.poll(async () => {
      const response = await page.request.get('https://api.example.com');
      return response.status();
    }).toBe(200);

    expect.pollは、.toBe()、.toContain()など、ほとんどの同期マッチャーをサポートしています。ドキュメントで詳細を確認してください。

動作の変更点​

  • TypeScriptテストを実行する際のESMサポートがデフォルトで有効になりました。PLAYWRIGHT_EXPERIMENTAL_TS_ESM環境変数は不要になりました。
  • mcr.microsoft.com/playwright DockerイメージにはPythonが含まれなくなりました。Playwrightがすぐに使えるPythonプリインストール済みDockerイメージとしてmcr.microsoft.com/playwright/pythonを使用してください。
  • Playwrightは、locator.setInputFiles() APIを介して、大容量ファイル（数MBから数百MB）のアップロードをサポートするようになりました。

ブラウザバージョン​

  • Chromium 101.0.4951.26
  • Mozilla Firefox 98.0.2
  • WebKit 15.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 100
  • Microsoft Edge 100

バージョン 1.20​

主な変更点​

  • メソッドpage.screenshot()、locator.screenshot()、elementHandle.screenshot()に新しいオプションが追加されました。

    • オプションanimations: "disabled"は、すべてのCSSアニメーションとトランジションを一貫した状態に戻します。
    • オプションmask: Locator[]は、指定された要素をピンク色の#FF00FFボックスで覆い、マスクします。

  • expect().toMatchSnapshot()が匿名スナップショットをサポートするようになりました: スナップショット名が指定されていない場合、Playwright Testが自動的に生成します。

    expect('Web is Awesome <3').toMatchSnapshot();

  • expect().toMatchSnapshot()を使用したきめ細かいスクリーンショット比較のための新しいmaxDiffPixelsとmaxDiffPixelRatioオプション。

    expect(await page.screenshot()).toMatchSnapshot({
      maxDiffPixels: 27, // allow no more than 27 different pixels.
    });

    maxDiffPixelsまたはmaxDiffPixelRatioは、testConfig.expectで一度指定するのが最も便利です。

  • Playwright TestにtestConfig.fullyParallelモードが追加されました。デフォルトでは、Playwright Testはファイル間で並列化されますが、完全並列モードでは、単一ファイル内のテストも並列実行されます。--fully-parallelコマンドラインフラグを使用することもできます。

    playwright.config.ts
    export default {
      fullyParallel: true,
    };

  • testProject.grepとtestProject.grepInvertがプロジェクトごとに設定可能になりました。例えば、grepを使用してスモークテストプロジェクトを設定できます。

    playwright.config.ts
    export default {
      projects: [
        {
          name: 'smoke tests',
          grep: /@smoke/,
        },
      ],
    };

  • Trace ViewerがAPIテストリクエストを表示するようになりました。

  • locator.highlight()は、デバッグを容易にするために要素を視覚的に表示します。

お知らせ​

  • Python専用のDockerイメージmcr.microsoft.com/playwright/pythonをリリースしました。Pythonを使用している場合はこちらに切り替えてください。これは、JavaScriptのmcr.microsoft.com/playwright Dockerイメージ内にPythonを含む最後のリリースです。
  • v1.20は、macOS 10.15 Catalina向けのWebKitアップデートを受け取る最後のリリースです。最新のWebKitを使用し続けるには、macOSをアップデートしてください！

ブラウザバージョン​

  • Chromium 101.0.4921.0
  • Mozilla Firefox 97.0.1
  • WebKit 15.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 99
  • Microsoft Edge 99

バージョン 1.19​

Playwrightテストの更新​

  • Playwright Test v1.19はソフトアサーションをサポートするようになりました。失敗したソフトアサーションは、

    テスト実行を**中断せず**、テストを失敗としてマークします。

    // Make a few checks that will not stop the test when failed...
    await expect.soft(page.locator('#status')).toHaveText('Success');
    await expect.soft(page.locator('#eta')).toHaveText('1 day');

    // ... and continue the test to check more things.
    await page.locator('#next-page').click();
    await expect.soft(page.locator('#title')).toHaveText('Make another order');

    ドキュメントで詳細を確認してください。

  • expectおよびexpect.soft関数の2番目の引数として、**カスタムの期待メッセージ**を指定できるようになりました。例：

    await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();

    エラーは次のようになります。

        Error: should be logged in

        Call log:
          - expect.toBeVisible with timeout 5000ms
          - waiting for "getByText('Name')"


          2 |
          3 | test('example test', async({ page }) => {
        > 4 |   await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
            |                                                                  ^
          5 | });
          6 |

    ドキュメントで詳細を確認してください。

  • デフォルトでは、単一ファイル内のテストは順番に実行されます。単一ファイル内に多くの独立したテストがある場合、test.describe.configure()を使用して並列で実行できるようになりました。

その他の更新​

  • ロケーターがhasオプションをサポートするようになり、別のロケーターを内部に含むことを保証できるようになりました。

    await page.locator('article', {
      has: page.locator('.highlight'),
    }).click();

    ロケーターのドキュメントで詳細を確認してください。

  • 新しいlocator.page()

  • page.screenshot()とlocator.screenshot()が点滅するカーソルを自動的に非表示にするようになりました。

  • Playwright Codegenがロケーターとフレームロケーターを生成するようになりました。

  • テストを実行する前にWebサーバーが準備できていることを確認するために、testConfig.webServerに新しいオプションurlが追加されました。

  • 失敗したすべてのアサーションとソフトアサーションを含む新しいtestInfo.errorsとtestResult.errors。

Playwright Testのグローバルセットアップにおける潜在的な破壊的変更​

この変更があなたに影響を与える可能性は低いです。テストが以前と同じように動作し続ける場合は、何もする必要はありません。

まれに、実行されるテストのセットがグローバルセットアップで環境変数を介して設定されているケースがあることに気づきました。また、グローバルティアダウンでレポーターの出力を後処理しているアプリケーションもいくつか確認しました。これら2つのいずれかを行っている場合は、詳細をご確認ください。

ブラウザバージョン​

  • Chromium 100.0.4863.0
  • Mozilla Firefox 96.0.1
  • WebKit 15.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 98
  • Microsoft Edge 98

バージョン 1.18​

ロケーターの改善​

テストAPIの改善​

TypeScriptサポートの改善​

  1. Playwright Testはtsconfig.jsonのbaseUrlとpathsを尊重するようになり、エイリアスを使用できます。
  2. コンパイルステップなしでTSコードにESMモジュールをインポートできる新しい環境変数PW_EXPERIMENTAL_TS_ESMがあります。esmモジュールをインポートする際は、.jsサフィックスを忘れないでください。テストは次のように実行します。
npm i --save-dev @playwright/test@1.18.0-rc1
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

Playwrightの作成​

npm init playwrightコマンドが一般に利用可能になりました。

# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project

これにより、Playwright Testの設定ファイルが作成され、オプションで例、GitHub Actionsワークフロー、および最初のテストexample.spec.tsが追加されます。

新しいAPIと変更点​

破壊的変更: カスタム設定オプション​

カスタム設定オプションは、異なる値でプロジェクトをパラメータ化する便利な方法です。このガイドで詳細を確認してください。

以前は、test.extend()を介して導入された任意のフィクスチャは、testProject.use設定セクションで上書きできました。例えば、

// WRONG: THIS SNIPPET DOES NOT WORK SINCE v1.18.

// fixtures.js
const test = base.extend({
  myParameter: 'default',
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

設定ファイルでフィクスチャをパラメータ化する適切な方法は、フィクスチャを定義する際にoption: trueを指定することです。例えば、

// CORRECT: THIS SNIPPET WORKS SINCE v1.18.

// fixtures.js
const test = base.extend({
  // Fixtures marked as "option: true" will get a value specified in the config,
  // or fallback to the default value.
  myParameter: ['default', { option: true }],
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

ブラウザバージョン​

  • Chromium 99.0.4812.0
  • Mozilla Firefox 95.0
  • WebKit 15.4

このバージョンは以下の安定版チャンネルでもテストされました

  • Google Chrome 97
  • Microsoft Edge 97

バージョン 1.17​

フレームロケーター​

Playwright 1.17では、ページ上のiframeのロケーターであるフレームロケーターが導入されました。フレームロケーターは、iframeを取得し、そのiframe内の要素を特定するのに十分なロジックをカプセル化します。フレームロケーターはデフォルトで厳密であり、iframeが表示されるのを待ち、Web-Firstアサーションで使用できます。

Graphics

フレームロケーターは、page.frameLocator()またはlocator.frameLocator()メソッドで作成できます。

const locator = page.frameLocator('#my-iframe').locator('text=Submit');
await locator.click();

ドキュメントで詳細を確認してください。

トレースビューアーの更新​

Playwright Trace Viewerがhttps://trace.playwright.devで**オンラインで利用可能**になりました！trace.zipファイルをドラッグ＆ドロップするだけで、その内容を検査できます。

注意: トレースファイルはどこにもアップロードされません。trace.playwright.devは、トレースをローカルで処理するプログレッシブウェブアプリケーションです。

  • Playwright Testのトレースには、デフォルトでソースが含まれるようになりました（トレースオプションでオフにすることも可能です）。
  • トレースビューアーがテスト名を表示するようになりました。
  • ブラウザの詳細を含む新しいトレースメタデータタブ。
  • スナップショットにURLバーが追加されました。

image

HTMLレポートの更新​

  • HTMLレポートが動的フィルタリングをサポートするようになりました。
  • レポートは、EメールやSlackの添付ファイルとして送信できる**単一の静的HTMLファイル**になりました。

image

Ubuntu ARM64サポート + その他​

  • Playwrightは**Ubuntu 20.04 ARM64**をサポートするようになりました。Apple M1およびRaspberry Pi上のDocker内でPlaywrightテストを実行できるようになりました。

  • Playwrightを使用してLinuxにEdgeの安定版をインストールできるようになりました。

    npx playwright install msedge

新しいAPI​

バージョン 1.16​

🎭 Playwright Test​

APIテスト​

Playwright 1.16では、Node.jsからサーバーに直接リクエストを送信できる新しいAPIテストが導入されました！これにより、

  • サーバーAPIをテストする
  • テストでWebアプリケーションにアクセスする前に、サーバー側の状態を準備する
  • ブラウザでいくつかのアクションを実行した後、サーバー側の事後条件を検証する

PlaywrightのPageに代わってリクエストを行うには、**新しいpage.request API**を使用します。

import { test, expect } from '@playwright/test';

test('context fetch', async ({ page }) => {
  // Do a GET request on behalf of page
  const response = await page.request.get('http://example.com/foo.json');
  // ...
});

node.jsからAPIエンドポイントへのスタンドアロンリクエストを行うには、**新しいrequestフィクスチャ**を使用します。

import { test, expect } from '@playwright/test';

test('context fetch', async ({ request }) => {
  // Do a GET request on behalf of page
  const response = await request.get('http://example.com/foo.json');
  // ...
});

APIテストガイドで詳細を確認してください。

レスポンスインターセプト​

APIテストとリクエストインターセプトを組み合わせることで、レスポンスインターセプトを行うことができるようになりました。

例えば、ページ上のすべての画像をぼかすことができます。

import { test, expect } from '@playwright/test';
import jimp from 'jimp'; // image processing library

test('response interception', async ({ page }) => {
  await page.route('**/*.jpeg', async route => {
    const response = await page._request.fetch(route.request());
    const image = await jimp.read(await response.body());
    await image.blur(5);
    await route.fulfill({
      response,
      body: await image.getBufferAsync('image/jpeg'),
    });
  });
  const response = await page.goto('https://playwright.dokyumento.jp');
  expect(response.status()).toBe(200);
});

レスポンスインターセプトについて詳しくはこちら。

新しいHTMLレポーター​

--reporter=htmlまたはplaywright.config.tsファイル内のreporterエントリを使用して、新しいHTMLレポーターを試してみてください。

$ npx playwright test --reporter=html

HTMLレポーターには、トレースや画像アーティファクトの表示を含め、テストとその失敗に関するすべての情報が含まれています。

html reporter

レポーターについて詳しくはこちら。

🎭 Playwrightライブラリ​

locator.waitFor​

ロケーターが指定された状態の単一の要素に解決されるまで待機します。デフォルトはstate: 'visible'です。

リストを扱う際に特に便利です。

import { test, expect } from '@playwright/test';

test('context fetch', async ({ page }) => {
  const completeness = page.locator('text=Success');
  await completeness.waitFor();
  expect(await page.screenshot()).toMatchSnapshot('screen.png');
});

locator.waitFor()について詳しくはこちら。

Arm64用Dockerサポート​

Playwright DockerイメージがArm64向けに公開され、Apple Siliconで使用できるようになりました。

Docker統合について詳しくはこちら。

🎭 Playwright Trace Viewer​

  • トレースビューアー内のWeb-Firstアサーション
  • npx playwright show-traceでトレースビューアーを起動し、トレースファイルをトレースビューアーPWAにドロップする
  • APIテストがトレースビューアーと統合されました。
  • アクションターゲットの視覚的な帰属が向上しました。

Trace Viewerについて詳しくはこちら。

ブラウザバージョン​

  • Chromium 97.0.4666.0
  • Mozilla Firefox 93.0
  • WebKit 15.4

このバージョンのPlaywrightは、以下の安定版チャンネルでもテストされました。

  • Google Chrome 94
  • Microsoft Edge 94

バージョン 1.15​

🎭 Playwrightライブラリ​

🖱️ マウスホイール​

mouse.wheel()を使用することで、垂直または水平にスクロールできるようになりました。

📜 新しいヘッダーAPI​

以前はレスポンスの複数のヘッダー値を取得することはできませんでしたが、これが可能になり、追加のヘルパー関数が利用できるようになりました。

🌈 強制カラーエミュレーション​

browser.newContext()に渡すか、page.emulateMedia()を呼び出すことで、forced-colors CSSメディア機能をエミュレートできるようになりました。

新しいAPI​

  • page.route()が、このルートが何回一致する必要があるかを指定する新しいtimesオプションを受け入れるようになりました。
  • チェックボックスのチェック状態を設定するために、page.setChecked()とlocator.setChecked()が導入されました。
  • request.sizes() 指定されたHTTPリクエストのリソースサイズ情報を返します。
  • tracing.startChunk() - 新しいトレースチャンクを開始します。
  • tracing.stopChunk() - 新しいトレースチャンクを停止します。

🎭 Playwright Test​

🤝 test.parallel() 同じファイル内のテストを並列実行​

test.describe.parallel('group', () => {
  test('runs in parallel 1', async ({ page }) => {
  });
  test('runs in parallel 2', async ({ page }) => {
  });
});

デフォルトでは、単一ファイル内のテストは順番に実行されます。単一ファイル内に多くの独立したテストがある場合、test.describe.parallel(title, callback)を使用して並列で実行できるようになりました。

🛠 --debug CLIフラグを追加​

npx playwright test --debugを使用すると、テストをデバッグするためにPlaywright Inspectorが有効になります。

ブラウザバージョン​

  • Chromium 96.0.4641.0
  • Mozilla Firefox 92.0
  • WebKit 15.0

バージョン 1.14​

🎭 Playwrightライブラリ​

⚡️ 新しい「厳密」モード​

セレクターの曖昧さは自動化テストにおける一般的な問題です。**「厳密」モード**は、セレクターが単一の要素を指すことを保証し、そうでない場合はエラーをスローします。

アクション呼び出しにstrict: trueを渡してオプトインします。

// This will throw if you have more than one button!
await page.click('button', { strict: true });

📍 新しいロケーターAPI​

ロケーターは、ページ上の要素へのビューを表します。特定の時点における要素を取得するのに十分なロジックをカプセル化します。

ロケーターとElementHandleの違いは、後者が特定の要素を指すのに対し、ロケーターはその要素を取得する方法のロジックをカプセル化する点です。

また、ロケーターはデフォルトで**「厳密」**です！

const locator = page.locator('button');
await locator.click();

ドキュメントで詳細を確認してください。

🧩 実験的なReactおよびVueセレクターエンジン​

ReactおよびVueセレクターは、コンポーネント名やプロパティ値で要素を選択できます。構文は属性セレクターと非常に似ており、すべての属性セレクター演算子をサポートしています。

await page.locator('_react=SubmitButton[enabled=true]').click();
await page.locator('_vue=submit-button[enabled=true]').click();

ReactセレクターのドキュメントとVueセレクターのドキュメントで詳細を確認してください。

✨ 新しいnthおよびvisibleセレクターエンジン​

  • nthセレクターエンジンは:nth-match疑似クラスと同等ですが、他のセレクターエンジンと組み合わせることができます。
  • visibleセレクターエンジンは:visible疑似クラスと同等ですが、他のセレクターエンジンと組み合わせることができます。
// select the first button among all buttons
await button.click('button >> nth=0');
// or if you are using locators, you can use first(), nth() and last()
await page.locator('button').first().click();

// click a visible button
await button.click('button >> visible=true');

🎭 Playwright Test​

✅ Web-Firstアサーション​

expectが多くの新しいWeb-Firstアサーションをサポートするようになりました。

以下の例を考えてみましょう

await expect(page.locator('.status')).toHaveText('Submitted');

Playwright Testは、セレクター.statusを持つノードが"Submitted"テキストを持つまで、そのノードを再テストします。条件が満たされるか、タイムアウトに達するまで、ノードを繰り返し再取得してチェックします。このタイムアウトを渡すことも、テスト設定のtestProject.expect値で一度設定することもできます。

デフォルトでは、アサーションのタイムアウトは設定されていないため、テスト全体のタイムアウトまで永久に待機します。

すべての新しいアサーションのリスト

⛓ describe.serialによるシリアルモード​

常に直列に実行されるテストのグループを宣言します。いずれかのテストが失敗した場合、後続のすべてのテストはスキップされます。グループ内のすべてのテストは一緒に再試行されます。

test.describe.serial('group', () => {
  test('runs first', async ({ page }) => { /* ... */ });
  test('runs second', async ({ page }) => { /* ... */ });
});

ドキュメントで詳細を確認してください。

🐾 test.stepによるステップAPI​

test.step() APIを使用して長いテストを複数のステップに分割する

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await test.step('Log in', async () => {
    // ...
  });
  await test.step('news feed', async () => {
    // ...
  });
});

ステップ情報はレポーターAPIで公開されます。

🌎 テスト実行前にWebサーバーを起動する​

テスト中にサーバーを起動するには、設定ファイルのwebServerオプションを使用します。サーバーは、テストを実行する前に指定されたURLが利用可能になるのを待ち、そのURLはコンテキスト作成時にbaseURLとしてPlaywrightに渡されます。

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  webServer: {
    command: 'npm run start', // command to launch
    url: 'http://127.0.0.1:3000', // url to await for
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
});

ドキュメントで詳細を確認してください。

ブラウザバージョン​

  • Chromium 94.0.4595.0
  • Mozilla Firefox 91.0
  • WebKit 15.0

バージョン 1.13​

Playwright Test​

Playwright​

  • page.dragAndDrop() APIを介した**🖖 プログラムによるドラッグ＆ドロップのサポート**。
  • リクエストとレスポンスのボディサイズを含む**🔎 拡張されたHAR**。browser.newContext()のrecordHarオプションを介して使用します。

ツール​

  • Playwright Trace Viewerがパラメーター、戻り値、およびconsole.log()の呼び出しを表示するようになりました。
  • Playwright InspectorがPlaywright Testテストを生成できるようになりました。

新規および改訂されたガイド​

ブラウザバージョン​

  • Chromium 93.0.4576.0
  • Mozilla Firefox 90.0
  • WebKit 14.2

新しいPlaywright API​

バージョン 1.12​

⚡️ Playwright Testの導入​

Playwright Testは、エンドツーエンドテストのニーズに特化してPlaywrightチームによってゼロから構築された**新しいテストランナー**です。

  • すべてのブラウザでテストを実行します。
  • テストを並列実行します。
  • コンテキスト分離と適切なデフォルト値をすぐに利用できます。
  • 失敗時にビデオ、スクリーンショット、その他のアーティファクトをキャプチャします。
  • POMを拡張可能なフィクスチャとして統合します。

インストール

npm i -D @playwright/test

簡単なテスト tests/foo.spec.ts

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  const name = await page.innerText('.navbar__title');
  expect(name).toBe('Playwright');
});

実行中

npx playwright test

👉 Playwright Testドキュメントで詳細を確認してください。

🧟‍♂️ Playwright Trace Viewerの導入​

Playwright Trace Viewerは、スクリプト実行後に記録されたPlaywrightトレースを探索するのに役立つ新しいGUIツールです。Playwrightトレースでは、以下を調べることができます。

  • 各Playwrightアクションの前後のページDOM
  • 各Playwrightアクションの前後のページレンダリング
  • スクリプト実行中のブラウザネットワーク

トレースは新しいbrowserContext.tracing APIを使用して記録されます。

const browser = await chromium.launch();
const context = await browser.newContext();

// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });

const page = await context.newPage();
await page.goto('https://playwright.dokyumento.jp');

// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });

トレースは後でPlaywright CLIで検査されます。

npx playwright show-trace trace.zip

これにより、以下のGUIが開きます。

image

👉 トレースビューアーのドキュメントで詳細を確認してください。

ブラウザバージョン​

  • Chromium 93.0.4530.0
  • Mozilla Firefox 89.0
  • WebKit 14.2

このバージョンのPlaywrightは、以下の安定版チャンネルでもテストされました。

  • Google Chrome 91
  • Microsoft Edge 91

新しいAPI​

バージョン 1.11​

🎥 新しいビデオ: Playwright: A New Test Automation Framework for the Modern Web (スライド)

  • Playwrightについて話しました
  • 舞台裏のエンジニアリング作業を公開しました
  • 新機能のライブデモを実施しました✨
  • イベントを主催し、私たちを招待してくださったapplitoolsに**特別な感謝**を申し上げます！

ブラウザバージョン​

  • Chromium 92.0.4498.0
  • Mozilla Firefox 89.0b6
  • WebKit 14.2

新しいAPI​

バージョン 1.10​

  • Playwright for Java v1.10が**安定版になりました**！
  • 新しいチャネルAPIを使用して、**Google Chrome**と**Microsoft Edge**の安定版チャネルに対してPlaywrightを実行します。
  • MacおよびWindowsでのChromiumスクリーンショットが**高速化**されました。

バンドルされているブラウザバージョン​

  • Chromium 90.0.4430.0
  • Mozilla Firefox 87.0b10
  • WebKit 14.2

このバージョンのPlaywrightは、以下の安定版チャンネルでもテストされました。

  • Google Chrome 89
  • Microsoft Edge 89

新しいAPI​

バージョン 1.9​

  • Playwright Inspectorは、テストを作成およびデバッグするための**新しいGUIツール**です。
    • Playwrightスクリプトの**行単位のデバッグ**（再生、一時停止、ステップスルー機能付き）。
    • **ユーザーアクションを記録**して新しいスクリプトを作成します。
    • 要素にカーソルを合わせることで、スクリプト用の**要素セレクターを生成**します。
    • インスペクターを起動するには、PWDEBUG=1環境変数を設定します。
  • ヘッド付きモードでpage.pause()を使用して**スクリプトの実行を一時停止**します。ページを一時停止すると、デバッグのためにPlaywright Inspectorが起動します。
  • CSSセレクターに**新しいhas-text疑似クラス**。:has-text("example")は、子要素または子孫要素のどこかに"example"を含む任意の要素に一致します。その他の例を参照してください。
  • 実行中、**ページダイアログは自動的に閉じられるようになりました**。ただし、dialogイベントのリスナーが設定されている場合を除きます。詳細はこちら。
  • Playwright for Pythonが、慣用的なスネークケースAPIとCI/CDでテストを実行するためのプリビルドされたDockerイメージとともに**安定版になりました**。

ブラウザバージョン​

  • Chromium 90.0.4421.0
  • Mozilla Firefox 86.0b10
  • WebKit 14.1

新しいAPI​

バージョン 1.8​

新しいAPI​

ブラウザバージョン​

  • Chromium 90.0.4392.0
  • Mozilla Firefox 85.0b5
  • WebKit 14.1

バージョン 1.7​

  • 新しいJava SDK: Playwright for Javaは、JavaScript、Python、.NETバインディングと同等になりました。
  • ブラウザストレージAPI: ブラウザのストレージ状態（クッキー、ローカルストレージ）を保存およびロードするための新しい便利なAPIが追加され、認証を伴う自動化シナリオが簡素化されました。
  • 新しいCSSセレクター: より柔軟なセレクターに関するフィードバックを受け、セレクターの実装を刷新しました。Playwright 1.7では新しいCSS拡張機能が導入され、さらに多くの機能が近日中に提供されます。
  • 新しいウェブサイト: playwright.devのドキュメントウェブサイトが更新され、Docusaurusで構築されるようになりました。
  • Apple Siliconのサポート: WebKitおよびChromium用のPlaywrightブラウザバイナリがApple Silicon向けにビルドされるようになりました。

新しいAPI​

ブラウザバージョン​

  • Chromium 89.0.4344.0
  • Mozilla Firefox 84.0b9
  • WebKit 14.1