GaugeでStepImplementationをファイル分割する

はじめに

HITOTSU株式会社の河村康治です。
普段はフロント、APIを中心に実装していますが、たまにQAも担当しています！今回はQAのE2Eテストの話です！弊社ではE2EテストはGaugeとPlaywrightを活用し実装していますが、今回はGaugeのTipsの紹介です！
GaugeのStepImplementation.tsを分割する方法を紹介します。

そもそもGaugeって何？って方はリンクをご覧ください。

Gaugeの仕組み

Gaugeは下記図の仕組みで動かしています。テスト仕様書はmarkdownファイルで書いており、実際のコードとmarkdownの内容をマッピングする必要があります。そのマッピングファイルはデフォルトでStepImplementation.tsに設定されています。
　最初はなんの問題もないんですが、ある程度書いていくと あれ？？StepImplementation.tsって肥大化し続けない？？どうやってファイル分割するのってなります。
調べてみたんですが、いい記事がなかったので今回記載しようと思います。
ちなみに今回話したい内容は下記図の赤枠の部分ですね。

tests/StepImplementation.ts

	@Step("Assetに<userAuthorityAsset>としてログインする_v2")
	public async loginAsset(userAuthorityAsset: UserAuthorityAsset) {
        ... Playwrightの処理を記載する
	}

StepImplementation.tsの分割方法

ファイル分割の方法は意外と簡単です。manifest.jsonにstepImplementationsを記載し、StepImplementionに書いてある内容を追記するだけでOKです！！

manifest.json

{
	"Language": "ts",
	"Plugins": ["html-report"],
	"stepImplementations": [
		"tests",
		"tests/stepImplementation/asset",
		"tests/stepImplementation/link",
		"tests/stepImplementation/account_service"
	]
}

弊社では医療機器管理サービス(Asset)、コミュニケーションツール(Link)、アカウントサービス(Account Service)を提供しているので、少なくとも3つは欲しいねという事から3つ作っています。

実装例

~/develop/HITOTSU/hitotsu_set (feat/HIT-4954_md_file)$ tree tests/stepImplementation 
tests/stepImplementation
├── asset
     └── index.ts

tests/stepImplementation/asset/index.ts

import {
	AfterScenario,
	AfterSuite,
	BeforeScenario,
	BeforeSuite,
	Step,
} from "gauge-ts";
import { chromium, type Browser, type Page } from "playwright";

export class Asset {
	@BeforeSuite()
	public async suiteSetup() {
    ...
　 }
	@Step("Assetに<userAuthorityAsset>としてログインする")
	public async loginAsset(userAuthorityAsset: UserAuthorityAsset) {
	 Playwrightの処理を記載する。	
	}
 ...
}

こんな感じで書いておくと、StepImplementation.tsに記載されたファイルを分割できます

さいごに

Gaugeは色々便利ですね！ただドキュメントが充実していないので、わかったことがあれば定期的に発信していこうと思います！！！