検索
ホームページウェブフロントエンドjsチュートリアルPlaywright と Cucumber の統合で ETest を強化

Supercharge Your ETests with Playwright and Cucumber Integration

導入

この投稿では、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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター