3
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?

Playwright で、Fiori Elementsの画面テストをClaude Codeに任せてみた

3
Posted at

BTPにデプロイした簡易的な発注アプリ(Fiori Elements)の画面テストを、Playwright を使ってClaude Codeに操作させてみました。一覧を開く → 新規作成 → 入力 → 保存 → 一覧で確認という一連の流れを自動で実行させ、スクリーンショット付きのテスト記録まで作らせています。

個人の検証環境で試した記録です(2026年10月12日時点)。Playwright を使ったときのイメージをつかむためのものです。

ここでいう「発注」は、SAP標準の購買発注ではありません。検証用に作った簡易的な発注アプリです。アプリの概要は、概要編にまとめています。

まとめ

項目 内容
やったこと Claude CodeにPlaywright でFiori Elementsのアプリを操作させ、登録と承認待ちになるかどうかをテストした
結果 3回テストして、すべて合格。1回あたりの操作は2〜3分
作られたもの テスト手順・期待結果・実際の結果・判定の表と、スクリーンショット

Playwrightとは?

Playwrightは、Microsoftが開発しているオープンソースのブラウザ自動操作のツールです。主にWebアプリのE2Eテスト(画面を実際に操作して確かめるテスト)に使われます。

  • Chromium(Chrome、Edge)、Firefox、WebKit(Safari)を、同じコードで操作できる
  • JavaScript/TypeScript、Python、Java、.NETから使える
  • 要素が表示されて操作できるようになるまで、自動で待つ

環境

項目 内容
実行環境 VS Code + Claude Code拡張機能、Windows 11
MCPサーバー @playwright/mcp@latest(npx で起動)
テスト対象 BTPにデプロイした発注アプリ(Fiori Elementsの一覧レポートとオブジェクトページ)

テスト1:一覧 → 新規作成 → 保存

ClaudeCode への指示:
Playwright を使って、PO-MINIのFioriアプリ(URL: xxx)を開き、一覧表示→新規作成→保存の流れをテストして。結果はスクリーンショット付きで報告して。

Claude Codeが操作した手順と結果です。表は、Claude Codeがテストのあとに作った記録をもとにしています。

# 手順 実際の結果 判定
1 アプリのURLを開く 発注の一覧が表示された OK
2 一覧の「作成」をクリック 新規の下書きが開いた OK
3 仕入先・明細などを入力 「ドラフトが更新されました」と表示 OK
4 「作成」をクリックして保存 「オブジェクトが作成されました」と表示 OK
5 一覧に戻る 新しい発注が一覧に出た OK

仕入先と単位は、入力欄ののドロップダウンから選ばせました。。

一覧

入力後

テスト2:10万円を超えると「承認待ち」になるか

このアプリは、保存したときに合計金額が10万円を超えていれば「承認待ち」、10万円以下なら自動で「承認済み」にします。

そこで、10万円を超える発注を2件(明細1行で超えるもの、明細2行の合計で超えるもの)登録させました。2件とも保存後に「承認待ち」になり、一覧の「承認待ち」タブにも出てきました。合格でした。

保存後の詳細画面

承認待ちタブ

割愛しますが同じテストを別のデータでもう一度行い、こちらも合格でした。

作成物

テストのたびに、次のものがフォルダに作成されました。

  • テストの記録(手順・期待結果・実際の結果・判定の表、入力した値、気づいた点)
  • 手順ごとのスクリーンショット
  • 操作ごとに取得した画面構造のテキスト(スナップショット)

テスト記録の体裁を整える手間がないのが、一番ありがたかった点です。

感想

画面をコーディングで作ると、画面の遷移や各項目の値が正しいかを確かめる手間が増えます。
Playwright を使えば、画面の遷移や各項目のチェックが、日本語の指示だけで実行でき、かなり楽になりそうだと感じました。

  • テストコードを書かずに、手順を伝えるだけで操作してくれる
  • 期待結果と実際の結果の表、スクリーンショットまで残る
  • ボタンが押せる状態か、各項目にどんな値が入っているかを、画面構造のテキストで確認できる
  • 用途は異なりますが、大量のテストデータを用意したいときに代わりに作ってもらう役割でも活用できそうです
  • 既に使っている人も多いと思いますが、自分なりにイメージがつかめたのは収穫でした

今後やりたいこと

  • 毎回同じ手順を確かめるなら、Playwright Testのテストコードにして、繰り返し実行できるようにする
  • 「コツ」を蓄積して CLAUDE.md に書いておき、最初から守らせる
  • テストで作ったデータの後片付けまで任せる
3
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
3
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?