BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース MicrosoftがクロスブラウザのエンドツーエンドテストランナーのPlaywrightをリリース

MicrosoftがクロスブラウザのエンドツーエンドテストランナーのPlaywrightをリリース

ブックマーク

原文(投稿日:2020/11/12)へのリンク

Microsoftは、テスト自動化ツールであるPlaywright専用のテストランナーをリリース (プレビュー) した。Playwrightテストランナーは、Webアプリのゼロ構成、クロスブラウザ、エンドツーエンドテストや、Jestのようなアサーション、TypeScriptの組み込みサポートを提供する。新しいテストランナーは、カスタマイズ可能なテストフレームワークであるFolioを活用して、より高いレベルのテストフレームワークを構築する。

テストライブラリはコミュニティによって積極的に開発されているが (たとえば、playwright-testing-libraryjest-playwright) 、一部の開発者は、Playwright専用に構築された統合テストライブラリについてRedditに関心を示した。Microsoftは、Playwrightの公式テストランナーを数か月間社内で使用した後、プレビューでリリースした。

Playwrightテストランナーは、次のように使用できる itdescribe、および expect APIを提供する:

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

describe("feature foo", () => {
  it("compares page screenshot", async ({ page, browserName }) => {
    await page.goto("https://stackoverflow.com");
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchSnapshot(`test-${browserName}.png`, { threshold: 0.2 });
  });
});

前のコードが示すように、it を使用して定義されたテストは、一連の引数が渡される非同期関数を使用する。デフォルトの引数は page (Playwright Page オブジェクトのインスタンス) 、context (BrowserContextのインスタンス) 、contextOptions、および browserbrowserOptions である。ドキュメントには、複数ページのテストの処理、視覚的なスナップショットの作成、視覚的な比較、モバイルデバイスのエミュレート、ネットワーク呼び出しのモックを行うためのデフォルト引数の使用例が記載されている。

テストは、ヘッドフルまたはヘッドレスモードで、単一または複数のブラウザで実行できる。テストの速度が低下したり、失敗した場合に備えてスクリーンショットを別のディレクトリに保存したり、ビデオ録画したりすることもできる。

高度な構成とフィクスチャの場合、開発者はFolioAPIを使用できる。Folioは「独自のテストフレームワークを構築するためのカスタマイズ可能なテストフレームワーク」である。Folioを使用してビューポートサイズとHTTPSエラー処理を構成する例は次のとおりである:

// test/fixtures.ts
import { folio as baseFolio } from "@playwright/test";
import { BrowserContextOptions } from "playwright";

const builder = baseFolio.extend();

builder.contextOptions.override(async ({ contextOptions }, runTest) => {
  const modifiedOptions: BrowserContextOptions = {
    ...contextOptions, // default
    viewport: { width: 1440, height: 900 }
  }
  await runTest(modifiedOptions);
});

const folio = builder.build();

export const it = folio.it;
export const expect = folio.expect;

// test/index.spec.ts

前のフィクスチャファイル (test/fixtures.ts) は、次のようにテスト仕様で itexpect メソッドが使用されるフィクスチャ対応のファイルを作成およびエクスポートする:

// test/index.spec.ts
import { it, expect } from "./fixtures";

// Test functions go here
it("should have modified viewport", async ({ context }) => {
  // ...
});

Folioはさらに、失敗、フレークネス、およびまだ準備ができていないテストに対処するためのテストアノテーションをサポートする。

Playwrightテストランナーは次のようにインストールできる:

npm i -D @playwright/test

Folioは積極的に開発され、リリースは保留されている。Folioは、Apache 2ライセンスに基づくオープンソースプロジェクトである。Playwrightテストランナーは、まもなく最初の主要なイテレーションのリリースがある。フィードバックは大歓迎であり、貢献ガイドライン行動規範に従う必要がある。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。