🥷

CodeceptJS✖️PlaywrightでE2Eテストを実装する(Step2:BDDで書く)

2024/10/09に公開

はじめに

前回までの記事の続きです。
CodeceptJSではBehavior Driven Development (BDD)で書けるため、実装していきます。
BDDはGherkin構文で書きます。

Gherkin構文とは

Gherkinは、「自然言語」に近い形式でシナリオを記載できます。自然言語に近い形でありながらプログラムの引数を与える事ができます。

Gherkin記法のサンプル
Feature: Guess the word

  # The first example has two steps
  Scenario: Maker starts a game
    When the Maker starts a game
    Then the Maker waits for a Breaker to join

  # The second example has three steps
  Scenario: Breaker joins a game
    Given the Maker has started a game with the word "silky"
    When the Breaker joins the Maker's game
    Then the Breaker must guess a word with 5 characters

https://cucumber.io/docs/gherkin/reference/

サンプル実装

ディレクトリ構成
~/develop/codecept_playwright$ tree -I node_modules
.
├── codecept.conf.ts
├── features
│   └── search.feature
├── output
├── package-lock.json
├── package.json
├── sample_test.ts
├── search.feature
├── steps.d.ts
├── steps_file.ts
└── tsconfig.json

3 directories, 9 files
features/search.feature
Feature: Google Search

  Scenario: Google検索を実施する
    Given I am on the Google search page
    When I fill in the search box with "CodeceptJS"
    And I press Enter
    Then I see "CodeceptJS" in the results

→Gherkin構文のファイルです。

codecept.conf.ts
import { setHeadlessWhen } from "@codeceptjs/configure";

setHeadlessWhen(false); // ヘッドレスモードを切り替える

export const config = {
 //	tests: "./*_test.ts", -- testコードに記載したファイルが動かないようにコメントアウト
	output: "./output",
	helpers: {
		Playwright: {
			url: "https://www.google.com",
			show: true,
			browser: "chromium",
		},
	},
	include: {
		I: "./steps_file.ts", // steps_fileを含める
	},
	bootstrap: null,
	mocha: {},
	name: "codecept_playwright_project",
	plugins: {
		pauseOnFail: {},
		retryFailedStep: {
			enabled: true,
		},
		screenshotOnFail: {
			enabled: true,
		},
	},
	typescript: true, // TypeScriptを有効化
};
sample_test.ts
Feature("Google Search");

Scenario("Search for CodeceptJS on Google", ({ I }) => {
	I.amOnPage("https://www.google.com"); // Googleにアクセス
	I.fillField("q", "CodeceptJS"); // 検索ボックスに入力
	I.pressKey("Enter"); // Enterキーを押す
	I.wait(1); // 1秒待つ
	I.see("CodeceptJS"); // 検索結果にCodeceptJSが表示されることを確認
});
steps_file.ts
module.exports = function () {
	return actor({});
};

const { I } = inject();

Given("I am on the Google search page", () => {
	I.amOnPage("https://www.google.com");
});

When("I fill in the search box with {string}", (searchQuery) => {
	I.fillField("q", searchQuery);
});

When("I press Enter", () => {
	I.pressKey("Enter");
});

Then("I see {string} in the results", (text) => {
	I.see(text);
});

ここでfeatureファイルの内容の実際の振る舞いを記載していきます。

実行結果

実行結果
~/develop/codecept_playwright$ npx codeceptjs run --steps
CodeceptJS v3.6.7 #StandWithUkraine
Using test root "/Users/kawamurakouji/develop/codecept_playwright"

Google Search --
  Google検索を実施する
   Given I am on the Google search page ""
   When I fill in the search box with "CodeceptJS" ""
   And I press Enter ""
   Then I see "CodeceptJS" in the results ""
  ✔ OK in 1659ms


  OK  | 1 passed   // 3s


意外と簡単に書けますね😊

最後に

今回作成したものは下記githubに配置しております
https://github.com/kouji0705/codecept_playwright

Discussion