🥷
CodeceptJS✖️PlaywrightでE2Eテストを実装する(Step2:BDDで書く)
はじめに
前回までの記事の続きです。
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
サンプル実装
ディレクトリ構成
~/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に配置しております
Discussion