環境前提
- OS：Linux（WSLでも可）
- 言語：JavaScript
-
IDE：VSCode または Cursor
※ VSCode互換エディタであれば同様に実施可能です。
公式によると以下のIDEがサポートされています：
Gauge 公式プラグイン一覧
参考リポジトリをもとに、ここでは Playwright と Gauge の連携 を再現し、実際に体験していきます。
全体像
- Gauge プロジェクトを作成
- その中に Playwright を導入
- 先に簡単なテストを書いてみる
- React アプリを構築（任意）
Gauge の準備
mkdir gauge×playwright
cd gauge×playwright
npm install --save-dev @getgauge/cli
以下のようなフォルダ構成になっていればOKです。
Gauge拡張機能を導入
-
Ctrl + Shift + Pでコマンドパレットを開く - 「Create new Gauge Project」と入力
「Gauge: Create new Gauge Project」が表示されていればOKです。
もし表示されない場合は、エディタを再起動するか「Reload window」を実行してください。
プロジェクト作成
「Gauge: Create new Gauge Project」を選択するとテンプレート選択画面が表示されます。
ここでは TypeScript (ts) を選択します。
次にプロジェクト作成フォルダを聞かれたら、最初に作成したディレクトリ gauge×playwright を選択してください。
「Select a folder to create the project」をクリックし、プロジェクト名を「gauge」と入力します。
完了すると以下のような構成になります。
example.spec を確認
gauge/specs/example.spec を開くと以下のような内容が表示されます。
カーソルをステップ上で Ctrl + クリック すると、対応する step_implementation.js にジャンプします。
step("Open todo application"
~~~~
これにより テスト仕様 (spec) と テストコード が自動で紐づいていることが確認できます。
Gaugeの特徴
Gaugeでは「テスト仕様（Markdown）」と「テストコード」を分離できます。
これにより：
- E2Eテストでの可読性が向上
- 仕様書とコードの役割分担が明確化
- QAとエンジニアの分業が容易になる
テストの実行
cd gauge
gauge run specs
example.spec に紐づいたテストが実行され、以下のような結果が得られます。
デフォルトでは TAIKO が利用されます。
次にこれを Playwright に置き換えましょう。
Playwright環境の準備
gaugeディレクトリ内で以下を実行します。
npm init playwright@latest
設定は以下の通りです：
- 言語：TypeScript
- プロジェクト名：playwright
- GitHub Actions：No
- ブラウザ環境インストール：Yes
- OS依存パッケージ：Yes
※ root パスワードが求められたら入力してください。
npx playwright test
テストが実行され、結果が返れば成功です。
ブラウザで動作を確認する場合：
npx playwright test --headed
UIが立ち上がればOKです。
GaugeでPlaywrightを利用する
specファイルを追加
specs ディレクトリに以下を追加します。
# Getting Started with Gauge
* Open Playwright Website
## Get Started
* Click on Get Started
テストコードを追加
tests ディレクトリに以下を追加します。
import { chromium, Browser, BrowserContext, Page } from "@playwright/test";
import { Step, BeforeSuite, AfterSuite } from "gauge-ts";
let browser: Browser;
let context: BrowserContext;
let page: Page;
export default class GaugePlaywright {
@BeforeSuite()
public async beforeSuite() {
browser = await chromium.launch({ headless: false });
context = await browser.newContext();
page = await context.newPage();
}
@AfterSuite()
public async afterSuite() {
await browser.close();
}
@Step("Open Playwright Website")
public async openPlaywrightSite() {
await page.goto("https://playwright.dev/");
}
@Step("Click on Get Started")
public async clickOnGetStarted() {
await page.getByRole("link", { name: "Get started" }).click();
}
}
GaugeとPlaywrightの役割分担
Playwrightの担当領域
// ブラウザ環境設定
@BeforeSuite()
public async beforeSuite() {
browser = await chromium.launch({ headless: false });
context = await browser.newContext();
page = await context.newPage();
}
// DOM操作
@Step("Open Playwright Website")
public async openPlaywrightSite() {
await page.goto("https://playwright.dev/");
}
@Step("Click on Get Started")
public async clickOnGetStarted() {
await page.getByRole("link", { name: "Get started" }).click();
}
Gaugeの担当領域
// クラス構成
export default class GaugePlaywright {}
// 初期化・終了処理
@BeforeSuite()
@AfterSuite()
// specファイルとの紐付け
@Step()
テスト実行
gauge run
Gaugeを通じてPlaywrightが起動し、ブラウザ上でテストが正常に実行されれば成功です。
まとめ
- GaugeのMarkdownベース仕様とPlaywrightの高機能E2E操作を組み合わせることで、
テストコードの保守性・可読性が大幅に向上します。 - QAと開発者間の分業もしやすくなります。
お疲れさまでした。
質問や不明点があればコメントいただければと思います。