7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Gaugeを使ってPlaywrightを使いやすくする

7
Last updated at Posted at 2025-12-08

はじめに

前回Playwrightを使ってE2Eテストしようを投稿しました。
あれからPlaywrightを使っていて課題がいくつか出てきました。

  • E2Eテストしたいがコーディングできない/したくない
  • 機能が増えたのでテストコードを作りたいが、同じようなコードが増えてきた

この課題を解決する方法としてGaugeを採用してみました。

Gaugeって何?

Gaugeは仕様を自然言語に近い形で記述し、開発者とビジネス関係者のコミュニケーションを円滑にしながら、テスト自動化を効率的に行えるフレームワークです。

  1. シンプルで読みやすい仕様記述
    GaugeはMarkdown形式でテスト仕様を書くことができ、非技術者でも理解しやすいテストケースの記述が可能
  2. 複数言語に対応
    Java、C#、Ruby、Python、JavaScriptなど、さまざまなプログラミング言語でテストコードを実装可能
  3. プラグインによる拡張性
    IDEプラグイン(Visual Studio Code、IntelliJ IDEAなど)が提供されており、テスト作成や実行を支援
  4. 柔軟なテスト実行とレポート機能
    テストの実行を細かく制御でき、HTML形式の詳細なレポートを生成
  5. CI/CDとの統合が容易
    JenkinsやGitLab CIなどの継続的インテグレーション環境に組み込みやすく、テストの自動化を促進

Gaugeの良いところ

自然言語でテストを記述できる

Playwrightスクリプトは機能単位で記述します。(Step)
テストコードはStepに書かれたタイトルを記述します。(Spec)
Stepを用意しておけば、それらの組み合わせをSpecで記述するだけでテストコードが記述できます。
なので、普段コードを書かない人でもE2Eテストを作ることが出来ます。★これが大きい!

再利用性

入力値を変えて行うテストの場合、上手くテストコードを書かないと同じような処理がそこら中に溢れると思います。
その場合でもStepでパラメータを使用することが出来るため、共通の処理などを1つのStepにまとめることができます。
param.png

Gaugeのここが微妙

Stepのメンテナンス

結局Stepが無いとテスト出来ないものが出てくるため、テストコードを書く必要がある。
※NoCodeE2Eならいらない手間かも。
また、仕様変更に合わせてStepをメンテしていかないとテストが動かなくなる。
※これはPlaywright onlyでも発生する問題。

やってみる

Gaugeインストール

Installing Guide
上記サイトにて環境毎のインストール手順が提示されます。

テストコード作成

仕様ファイルの作成(.spec)

仕様ファイルの詳しい書き方は公式ドキュメントを参照してください。

login.spec
# ログイン
## 正常にログインできること
* ログインページを開く
* ユーザー名に "user1" を入力する
* パスワードに "password123" を入力する
* ログインボタンをクリックする
* ログインに成功していることを確認する

ステップの実装(.py)

上記.specファイルで定義したステップに対応する関数を作成します。
@stepデコレータの引数に同じステップ名を記述することで.specのステップと.pyのテストコードの紐づけが行われます。

login_step.py
from getgauge.python import step, before_scenario, after_scenario
from playwright.sync_api import sync_playwright
playwright = None
browser = None
page = None
@before_scenario
def setup():
    global playwright, browser, page
    playwright = sync_playwright().start()
    browser = playwright.chromium.launch(headless=True)  # headless=False にするとブラウザが見えます
    page = browser.new_page()
@after_scenario
def teardown():
    global browser, playwright
    if browser:
        browser.close()
    if playwright:
        playwright.stop()
@step("ログインページを開く")
def open_login_page():
    global page
    page.goto("https://example.com/login")
@step('ユーザー名に "<username>" を入力する')
def enter_username(username):
    global page
    page.fill("#username", username)
@step('パスワードに "<password>" を入力する')
def enter_password(password):
    global page
    page.fill("#password", password)
@step("ログインボタンをクリックする")
def click_login_button():
    global page
    page.click("#loginButton")
@step("ログインに成功していることを確認する")
def verify_logged_in():
    global page
    # 例:ログイン後に表示される要素のテキストを取得してチェック
    welcome_text = page.text_content("#welcomeMessage")
    assert welcome_text and ("ようこそ" in welcome_text or "Welcome" in welcome_text), "ログインに失敗しました"

テスト実行

指定したSpecファイルまたはフォルダ内の全てのSpecファイルが実行されます。

gauge run [specファイルパスまたはフォルダパス]

実行結果

result.png

あとがき

前回Playwrightの記事を書いてから1年経ちました。
その間にJavaScriptで書いていたPlaywrightはPythonに置き換わり、間口を広げるためにGaugeも取り入れてみました。
Gaugeは始めたばかりでノハウがたまっていませんがポテンシャルは感じています。
ぜひ皆さんの良い事例などありましたらコメントください。

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?