E2Eテスト自動化、時代はノーコードorコードベース？

はじめに

この記事では以下の2つのツールを比較していますが、どちらかを下げたりする意図はありません！

今回取り上げるツール

• Magicpod
• Playwright

そもそもこれらはなに？

E2Eテスト自動化ツールのこと。

この2つの大きな違い

• ノーコードツールかコードベースツールか
• 有償か無償なのか

👽そもそもE2Eテストとは

• システム全体を通してテストを行うこと
• ユーザと同じようにブラウザを操作し、挙動が期待通りになっているかを確認するテスト。

これらを使い比べて感想を述べてみたいと思います！

※どちらのツールも初心者なのでこっちはこんなことができるんだぞ！などがあればコメントでお叱りください..

🎭まずPlaywrightとは

• コードベースのE2Eテスト自動化ツール
  • やってることは要素を特定して、その要素に対して何らかのアクションを行わせる
  • 例) 画面内にあるボタン要素を特定する → それに対してクリックを行う　みたいな

🔮ではMagicPodは？

特徴

1.ノーコードツール

• 同じようなE2Eの自動化ツール
• Playwrightとかと違い、ノーコードでできる
  • プログラミングできない人でもできちゃう…ってｺﾄ!? (ﾜｧｧ...!

---

2. AIによる自動修復機能がある

• 要素をドラッグアンドドロップするだけで実装できる
  （後でgif画像を添付します）

どういうことかっていうと↓

人間様👦:

「登録ボタンをクリックさせたいでやんす」(ﾄﾞﾗｯｸﾞ&ﾄﾞﾛｯﾌﾟ~)

Magic pod🔮

「この要素は「ボタン」だで。しかも「登録」って書いてあるだで。
　なので、これのアクションはクリックにします。」

って勝手にしてくれる。
AIエンジンが自動で要素分析をしてくれるらしい

---

3. インストール作業不要

• インストールは特にない
• 全部ブラウザ上で使えた(超楽)

🪄ということで実際に使ってみた

• 下記のホテル予約のデモサイトで擬似テストしてみた
  （テスト自動化用に公開されているテストサイトらしい）
  https://hotel.testplanisphere.dev/ja/index.html
  • 簡単にテスト実装してみた

以下のテストケースで実装

No.	操作手順
1	hotel予約ページに遷移
2	メニュータブから「宿泊予約」をクリック
3	「お得な特典付きプラン」のフィールドにある「このプランで予約」をクリック
4	新しいタブでページが開くのでそちらを選択する
5	それぞれ以下のように入力or選択する ・ 宿泊日：「2024/09/26」 ・ 宿泊数：「1」 ・ 人数：「2」 ・ 追加プラン：「お得な観光プラン」 ・ 氏名：「任意の名前」 ・ 確認のご連絡：「希望しない」 ・ ご要望：「もっと安くしてね〜」
6	「予約内容を確認する」をクリック
7	「この内容で予約する」をクリック
8	ポップアップが出るので「閉じる」を選択
9	期待値：ページが閉じてヘッダーに「HOTEL….」の要素があるページに戻ること

MagicPod実装手順

1. 触りたい要素があるページのスクショを撮る
2. 操作したい要素をドラッグアンドドロップ
3. ページが遷移したらそこで再びスクショを撮る
   （細かく手直しもUI上でできる）

基本的にはこの繰り返し

---

ということでどんな感じでテストを実装しているのか↓をみてみてください！
（是非ざっくりみてください..みにくいと思うので..）

テスト実行！

Paywrightでも実装&実行してみた

---

同じテストを実装して感じた違い

	Playwright	MagicPod
料金	0円	年契約のみで 月額43,780円
使いやすさ	簡単なコードかければできる	非エンジニアでも誰でもできる
動作	・ めちゃ軽い ・ テスト実行超早い ・ ↑のテストくらいだったら一瞬	・ ちょい重い気がした ・ テスト実行は人間より少し早いくらい ・ とはいえ人間よりは早い
実装時間	15分くらい。プログラミングなのである程度はかかる	10分くらいでとてもはやい
補足	とりあえずテストが通れば良いやっていう感じで書いた	初見の状態から20分くらい使い方学んでから、試行錯誤しながら実施

使った感じは大体上記な感じでした。

（Playwrightは使い始めて半年以上経っているのに
　Magicpodは触り始めたばかりでもそれ以上の早さで実装できちゃった..!)

初めて使ったMagic podの個人的に良いなと思ったところ

• 超簡単(やれないこともPlaywrightと比べてあんまなさそう)
• お金払ってるのでサポートがある(今回には関係ないが)
• 要素を一意に特定するのを基本勝手にやってくれるのでとても楽
  • Playwrightでは「どうやってこの要素を特定しよう..」から入るので助かる
    例)↓ 「このプランで予約」 がたくさんある… 特典付きプラン を特定してボタン押したいけどどうしよう..とか
    

---

（おまけ）

• テストの評価もしてくれるらしい
  • もっとこんなふうにテスト作れるよみたいなことも言ってくる、ｱﾘｶﾞﾄ
    

感想(?)

• Playwrightの方がやっていて楽しい感じした
  • 単純な操作だと楽だけど作業感が出てくる..実に簡単でそれが良いんだけども…
  • というかPlaywright使えるならそれ使えば良い説..?(超工数減らしたいとかでなければ)金かからんし..
• MagicPodはページ毎にスクショ撮らないといけないのちょっとめんどかった
• 自動テストとはいえ動いてる中身は割とブラックボックスに感じるので不思議な気持ちになる

• その会社の状況とかによってどちらが良いとか変わっていきそうな感じする！

---

他の人(ネット記事とかで見つけた)の声

良い声(MagicPodに対する)

• 簡単にテスト作れるから工数がかからない！
  • てことはテスト作るための他メンバーへのトレーニングコストも少ない
  • 非エンジニアにやらせていた会社とかあったらしい
    • （新卒社員に対して自社製品について詳しくなるという意味でも使えそう

悪い声

• ノーコードツールはバージョン管理がツール上でしかできない！
  • github上ではできない
• GUIでの実装はエンジニアとの親和性悪い！
• プロジェクト数、テストケース数に上限がある！上限上げようとすると金かかる！
• 値段高い!!

PlaywrightのデメリットはMagicpodのメリットだし、逆も然り。
だととても思った。
どっちが絶対良いとかでは本当ににないよなぁ、というまだまだ未熟なQAエンジニアの感想でした

是非皆様もPlaywright、Magicpodでテスト書いてみてください！

• Playwrightはすぐダウンロードできますし、MagicPodは無料試用期間あります！