エムスリーテックブログ

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

2025-11-25

ローコードツールから 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 ログインページのページオブジェクト */exportclass LoginPage{readonlypage:Page;readonlyloginIdInput:Locator;readonlypasswordInput:Locator;readonlyloginButton:Locator;constructor(page:Page){this.page = page;// ログインフォームの要素this.loginIdInput = page.getByPlaceholder('ログインID');this.passwordInput = page.getByPlaceholder('パスワード');this.loginButton = page.getByRole('button',{name:'ログイン'});}/**   * ログインページに遷移   */asyncgoto(){awaitthis.page.goto('https://m3.com');}/**   * ログイン実行   *@param loginId ログインID   *@param password パスワード   */asynclogin(loginId:string, password:string){awaitthis.loginIdInput.fill(loginId);awaitthis.passwordInput.fill(password);awaitthis.loginButton.click();}/**   * ログインIDとパスワードを入力（ログインボタンは押さない）   *@param loginId ログインID   *@param password パスワード   */asyncfillLoginForm(loginId:string, password:string){awaitthis.loginIdInput.fill(loginId);awaitthis.passwordInput.fill(password);}/**   * ログインページが表示されているか確認   */asyncisLoginPageDisplayed():Promise<boolean>{returnawaitthis.loginButton.isVisible();}}

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

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

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

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

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

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

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

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

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

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

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

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