Playwright と Cucumber の統合で ETest を強化

導入

この投稿では、Playwright と Cucumber がエンドツーエンド (E2E) テストに優れたツールである理由を説明します。次に、JavaScript フロントエンド アプリケーションでシームレスに使用できるように Playwright を統合する手順について詳しく説明します。最後に、Playwright の効率を最大化するためのプロのヒントをいくつか紹介します。

なぜ劇作家とキュウリなのか？

E2E テスト スイートを構築するための有能なツールは数多くありますが、Playwright と Cucumber の相乗効果に匹敵するものはありません。

いくつか例を挙げると、Playwright が E2E テストの作成において市場で傑出している理由は次のとおりです。

• 1.あらゆるブラウザ、あらゆるプラットフォーム、1 つの API
  • a.クロスブラウザ。 Playwright は、Chromium、WebKit、Firefox を含むすべての最新のレンダリング エンジンをサポートしています。
  • b.クロスプラットフォーム。 Windows、Linux、macOS で、ローカルまたは CI、ヘッドレスまたはヘッドでテストします。
  • c.異言語。 TypeScript、JavaScript、Python、.NET、Java で Playwright API を使用します。
• 2.弾力性があり、不安定なテストはありません
  • a.自動待機。劇作家は、アクションを実行する前に、要素がアクション可能になるのを待ちます。
  • b. Web ファーストのアサーション。 Playwright アサーションは、動的 Web 向けに特別に作成されています。
• 3.強力なツール
  • a.コードジェネ。アクションを記録してテストを生成します。任意の言語で保存してください。
  • b.劇作家の警部。ページを検査し、セレクターを生成し、テスト実行をステップ実行し、クリック ポイントを確認し、実行ログを調査します。

しかし、Cucumber がなければ、テストコードの管理はメンテナンスの悪夢になる可能性があります。 Cucumber を使用すると、人間が読める平易な言語でテストを作成することが容易になり、技術者以外の関係者でもテストにアクセスできるようになります。行動駆動開発 (BDD) の基礎として、Cucumber は技術文書として機能し、新しいエンジニアのオンボーディングを加速します。

劇作家とキュウリの統合

ステップ 1: 依存関係をインストールする

npm または Yarn を使用して必要なパッケージをインストールします。

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

ステップ 2: プロジェクト構造のセットアップ

プロジェクトを次のように整理します:

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

ステップ 3: Cucumber を構成する

次の内容の Cucumber 構成ファイル - cucumber.js ファイルをプロジェクトのルートに作成します。

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

ステップ 4: テストレポートの構成

cucumber.report.js を作成します - テスト レポートを構成するファイルです。構成オプションはここにあります

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

ステップ 5: 機能ファイルを作成する

features ディレクトリに feature ファイルを作成します (例: example.feature:
)

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

ステップ 6: ステップ定義を作成する

steps ディレクトリにステップ定義ファイルを作成します (例: example.steps.js:
)

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

ステップ 7: NPM テスト スクリプトを追加する

スクリプトを package.json に追加してテストを実行します。

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

同時に npm パッケージは、同じテストで 2 つのプロセスを実行できる便利なツールです。E2E テストを実行するには、アプリケーションも、場合によってはローカルで、場合によってはリモートで実行する必要があります。

ステップ 8: テストを実行する

次のコマンドを使用してテストを実行します:

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

劇作家プロのヒント

• 1.エラー メッセージ - 注意深く読んでください。多くの場合、問題の原因が特定されます。
• 2.反復開発 - コードの小さなチャンクをテストして、問題を切り分けて解決します。
• 3. Playwright Inspector - アクションを記録し、テスト スクリプトを自動的に生成するのに役立つため、コードを少し書くだけで済みます。以下のように Playwright Inspector を起動できます

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"

• 4.コンソール メッセージのログ - 以下のように、ヘッドレス モードでブラウザ コンソール メッセージを出力します。

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});

• 5.遅延読み込みの処理 - 遅延読み込み要素の場合は、次の関数を使用します。
  • a. waitForSelector または waitFor
  • b.タイムアウト待ち
  • c.必要な場合はスクロールイントゥビュー
• 6. DOM のデバッグ - ブラウザー コンソールで document.querySelector またはその他のクエリ セレクターを使用して要素を見つけます
• 7.失敗のスクリーンショットをキャプチャします

あなたがここまでたどり着いたのなら、私はあなたが読み続けるために十分な努力をしたことになります。コメントを残していただいたり、修正を共有していただければ幸いです。

私の他のブログ:

• Web コンポーネント/MFE をプレーンな静的 HTML と統合します
• ソフトウェア エンジニアリングのインタビューをクラッキング
• Web コンポーネントに関する私の直接の経験 - 学びと限界
• マイクロフロントエンド意思決定フレームワーク
• Postman ツールを使用して SOAP Web サービスをテストする

以上がPlaywright と Cucumber の統合で ETest を強化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。