ローコードツールから Playwright 移行への道 2025

エンジニアリンググループ GM 兼 QA チームリーダーの窪田です。本日はマネジメントチームブログリレー4日目として、現在取り組んでいる自動テストを Playwright で構築するチャレンジについてお話しします。

背景

エムスリーでは E2E の自動テストを、リリース前の基本動作チェックや開発直後のセルフ動作チェックなどで活用しています。これまでもブログで紹介してきましたが、メンバー全員で自動テストに取り組むためにプログラミングスキルにあまり依存しないローコードツールを活用してきました。

www.m3tech.blog

また、昨年度より QA メンバーだけでなくエンジニアリンググループのメンバー全員で品質確保の活動に取り組む「全員QA」の方針を掲げています。開発メンバーにも自動テスト開発・保守を担ってもらうといった観点で言うとツールを用いて画面上で作成、管理するよりも、コードベースで開発・保守を行うほうが効率が良いのではないかと思っていました。上記に加えて、CI/CD パイプラインとの親和性や、テストコードのバージョン管理、AI ツールとのコラボレーション、カスタマイズ性などを考慮すると、ローコードツールよりもコードベースでの自動テスト開発・保守にいつか取り組みたいなと考えていました。

全員 QA の参考記事はこちら。

www.m3tech.blog

生成 AI のブレークスルー

去年〜今年にかけて生成 AI によるコード生成の進化と周辺システムの充実の結果、自動テストのコードを気軽に作れるようになりました。きちんとルールを整備したりレビューを実施することで保守可能な自動テストのコードを維持できる目処が立ちました。

自動テストの作成方針

こうした背景を踏まえて、次の方針で E2E 自動テストを構築することにしました。

ツールは Playwright を採用する
自動テストコードは TypeScript で記述する
生成 AI エージェントは Claude Code を採用する
- ここは緩いルール。他の AI ツールを使っても良い
作業環境を合わせるために VSCode を推奨
- 他のエディタを使っても良い
保守性を高くするために Page Object Model を採用する
- Playwright の公式ドキュメントにあるお手本のスタイルに合わせる
- https://playwright.dev/docs/pom
playwright-mcp (Microsoft) を利用してページの情報を取得する
全員が自動テスト開発に取り組む
現在ローコードで作成した自動テストをエクスポートしたものは使わない
テストケースの見直しを行い、必要に応じてテストケースの追加・修正を行う

実装のイメージは下記図のようになります。

Claude Code で自動テストコードを生成する

VS Code の Claude Code プラグインから上記の図のように playwright-mcp を利用してページオブジェクトを作成する場合、次のような指示を出します。

m3.com に playwright-mcp を使ってアクセスし、ログインページのページオブジェクトを作成してください。

すると次のようなファイルが生成されます（そこそこ長かったので一部省略しています）。

import { Page, Locator } from '@playwright/test';

/**
 * M3.com ログインページのページオブジェクト
 */
export class LoginPage {
  readonly page: Page;
  readonly loginIdInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;

    // ログインフォームの要素
    this.loginIdInput = page.getByPlaceholder('ログインID');
    this.passwordInput = page.getByPlaceholder('パスワード');
    this.loginButton = page.getByRole('button', { name: 'ログイン' });
  }

  /**
   * ログインページに遷移
   */
  async goto() {
    await this.page.goto('https://m3.com');
  }

  /**
   * ログイン実行
   * @param loginId ログインID
   * @param password パスワード
   */
  async login(loginId: string, password: string) {
    await this.loginIdInput.fill(loginId);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }

  /**
   * ログインIDとパスワードを入力（ログインボタンは押さない）
   * @param loginId ログインID
   * @param password パスワード
   */
  async fillLoginForm(loginId: string, password: string) {
    await this.loginIdInput.fill(loginId);
    await this.passwordInput.fill(password);
  }

  /**
   * ログインページが表示されているか確認
   */
  async isLoginPageDisplayed(): Promise<boolean> {
    return await this.loginButton.isVisible();
  }
}

ほとんど想定通りのファイルが出力されています（初手でここまでできるのはすごい）。

特に設定や指示をしていない場合、次のような問題が発生します。

playwright-mcp を利用してウェブページにアクセスすることを明示しないと playwright-mcp を利用してくれない
ウェブページの要素を xPath の指定など比較的変更に弱い記述になる場合がある
ページオブジェクトの書き方にもバリエーションが有るため、狙った構成にならない

これらの問題が発生しないように、きちんとプロンプトで指示をするか設定ファイルに記述をして狙った動きになるように誘導すると効率的にテストを作成できます。

Claude Code を利用することにより次のようなメリットもあります。

Playwright のプロジェクト設定などができていない場合、設定ファイルを作成してくれる
必要なパッケージの導入方法を提案、環境構築がスムーズにできる
テストケース作成もお願いするとテストケースの洗い出しと実装をしてくれる
テスト実行確認もサポートしてくれる

簡単な構成のページであれば仕様をインプットしなくてもテストケースをほぼ完璧に作成してくれますが、複雑なページの場合は仕様をインプットしてあげるとより良いテストケースを作成してくれます。仕様を事前に取得して、リポジトリにおいておくとそれを参照してテストケースを作成してくれるためかなりスムーズに自動テストを導入できます。

全員が自動テスト開発に取り組むには

生成 AI を活用して自動テストを書けそうというのはわかったのですが、課題は「全員が自動テスト開発に取り組む」の部分です。今回次のような取り組みをしました。

生成 AI ツールの導入資料の作成
QA メンバー向けのハンズオン実施
狙ったものが生成できているかのレビューの実施

ツールの導入を含めたハンズオンを実施し、後はプロンプトに指示を出すだけの状態まで何回かに分けてサポートしました。上記の通り Claude Code に指示を出せばそれなりのコードが生成されます。後はこのコードをセルフチェックし適切に作成されているかを確認します。スキルにばらつきがあるためレビューを実施し、必要に応じて修正点をフィードバックしました。

取り組んでくれたメンバーに上記活動の感想を聞いたところ色々と面白い意見がありました。

最初は不安だったが、実際にやってみると意外とできた。
自動テスト開発のためにプログラミングの勉強を始めた。AI に聞きながら進めると非常にわかりやすい。
- 以前独学しようとしたときよりも効率よく理解が進んだ
自動テスト開発以外の QA 業務でも活用できている

AI に聞きながらプログラミングのスキルを上げているのが非常にいいことだと思いました。これまでだとある程度つきっきりで指導をしないと業務で活用できるまでになるのは難しかったですが、生成 AI を活用することで自走できるようになっているのが素晴らしいです。

まとめと今後の展望

まずは1つのチームで全員が自動テスト開発に取り組むチャレンジを始めました。現在までに実施できているのは以下です。

生成 AI ツールの導入
Claude Code を活用した Playwright 自動テストコードの作成
全員が自動テスト開発に取り組むためのサポート

今後の課題としては以下があります。課題については生成 AI の活用により解決を狙っていきます！

全チームへの展開
自動テスト開発の深い知識獲得
生成されたコードの記載内容にばらつきがある
自動テスト開発工数の確保

今後他のチームにも同様に導入し自動テスト開発、QA 業務全般での生成 AI 活用を広めていきたいです。テスト計画〜テスト実施までの一連の AI 活用は現在実験的に取組中であるため今後改めて報告したいと思います。

We're Hiring!

エムスリーではエンジニアを絶賛大募集しております。品質やテストに興味のある方は QA チームでも QA チーム以外の組織でも大歓迎です。テクノロジーを駆使して品質をガンガン上げていきましょう！

jobs.m3.com

エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです