日本語Playwrightで書いたソースコードをMagicPod Autopilotに読み込ませてみた
こんにちは。MagicPodカスタマーサクセスの滝口です。
最近、「Playwrightで書いたソースコードをMagicPodで使うことはできますか？」といったお問い合わせをいただくことが増えております。
Playwrightとは、無料で使えるOSSのE2Eテストツールです。
実際に触ってみると、簡単なテストケースであれば直感的に作成することができます。
しかしながら、MagicPodはクラウド環境で安定して動かせるノーコードツール。
環境構築やメンテナンスハードルの低さ、サポートの手厚さからMagicPodへの移行をご検討されるお客様も多いです。
とはいえ、ある程度Playwrightで自動化を進めているお客様からすると、せっかく作ったソースコードを手放すのもきっと辛いはず。
自動テストを安定させるのは、想像以上に時間のかかる作業ですからね。。。！
チーム一同、どのようにすればPlaywrightからMagicPodへの移行を楽にしていただけるか、と悩んでおりました。
そんな時、社内でこんな投稿が。
PlaywrightのソースコードをMagicPod Autopilotに投げたらテストケースが作れた！
・・・・なんだって👀
・・・・AIすごすぎる。
ということで、一人でも多くのお客様にテスト自動化を（楽に）成功してもらうべく、滝口の手で検証することにしました。
- Playwrightを導入しているけどMagicPodが気になっている
- すでにどちらも導入しているが、MagicPodへの移行方法に悩んでいる
そんな方に読んでいただけると嬉しいです！
いざ検証！
今回は、簡単なテストが移行できるのかを検証します。
自動テスト界隈では有名なHotel Planisphereを使っていきます。
（いつも本当にありがとうございます）
Playwrightで書いたテスト内容
- 予約画面に遷移
- おすすめプランの「Reserve room」をクリック
- 必要項目を入力
- 「Confirm Reservation」をクリック
- 予約確認画面の日付がSeptemberになっていること
- 予約確認画面に日付が表示されていること
実際のPlaywrightのソースコード（汚いですごめんなさい）
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://hotel-example-site.takeyaqa.dev/en-US/');
await page.getByRole('link', { name: 'Reserve' }).click();
const page1Promise = page.waitForEvent('popup');
await page.locator('.btn.btn-primary').first().click();
const page1 = await page1Promise;
await page1.getByRole('textbox', { name: 'Check-in required' }).click();
await page1.getByRole('link', { name: '22' }).click();
await page1.getByRole('checkbox', { name: 'Breakfast' }).check();
await page1.getByRole('textbox', { name: 'Name required' }).click();
await page1.getByRole('textbox', { name: 'Name required' }).fill('Test太郎');
await page1.getByRole('textbox', { name: 'Name required' }).press('Enter');
await page1.getByRole('textbox', { name: 'Name required' }).fill('Test太郎');
await page1.getByLabel('Confirmation required').selectOption('no');
await page1.locator('[data-test="submit-button"]').click();
await expect(page1.getByText('September 22, 2025 -')).toContainText('September');
const png = await page.screenshot({ fullPage: true });await expect(page1.getByText('September 22, 2025 -')).toBeVisible();
await test.info().attach('画面キャプチャ', { body: png, contentType: 'image/png' });
});いざ、MagicPod Autopilotへ！
まず、空のテストケースを作成し、編集画面に遷移します。
クラウドブラウザを起動して、右下にいるMagicPodアイコンをクリック！
するとこんな感じでこんな感じで立ち上がります。
UIはチャットボットみたいな感じですね。
準備ができたので、AutopilotにPlaywrightのソースコードをMagicPodに書き換える依頼をしていきます。
Playwrightのソースコードを変換してもらうためのプロンプト
Playwrightで書いたコードをMagicPodで作ってください。
わからないことがあれば、質問してください。
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://hotel-example-site.takeyaqa.dev/en-US/');
await page.getByRole('link', { name: 'Reserve' }).click();
const page1Promise = page.waitForEvent('popup');
await page.locator('.btn.btn-primary').first().click();
const page1 = await page1Promise;
await page1.getByRole('textbox', { name: 'Check-in required' }).click();
await page1.getByRole('link', { name: '22' }).click();
await page1.getByRole('checkbox', { name: 'Breakfast' }).check();
await page1.getByRole('textbox', { name: 'Name required' }).click();
await page1.getByRole('textbox', { name: 'Name required' }).fill('Test太郎');
await page1.getByRole('textbox', { name: 'Name required' }).press('Enter');
await page1.getByRole('textbox', { name: 'Name required' }).fill('Test太郎');
await page1.getByLabel('Confirmation required').selectOption('no');
await page1.locator('[data-test="submit-button"]').click();
await expect(page1.getByText('September 22, 2025 -')).toContainText('September');
const png = await page.screenshot({ fullPage: true });await expect(page1.getByText('September 22, 2025 -')).toBeVisible();
await test.info().attach('画面キャプチャ', { body: png, contentType: 'image/png' });
});📝会話形式でテストケースを作成してくれるので、質問して欲しいな！と意思表示しておくと必要情報を後で聞いてくれます。
おすすめプロンプトです！
依頼をしてみると、画像のようにどのように考えて作成しているのかを示してくれます。
（まだベータ版なので成長中です。温かい目でみてくれると嬉しいです🥺）
実際にできたテストケース
PlaywrightのコードをMagicPodが書いてくれました！
画像のように、Playwrightのソースコードを実際にMagicPodのテストケースに変換してくれました！
ただ読み込むだけでなく、MagicPod特有の機能を理解しながら書いてくれました。
例えば、
- コメントを入れて可読性を向上
- 「新しいタブ・ウィンドウを選択」コマンドを忘れずに挿入
- 「プルダウン選択」コマンドを活用
といった形で、ただPlaywrightを変換するだけでなくMagicPodのテスト実行が成功できるように工夫してくれていました。
実はしれっと画像キャプチャをとるコードを入れていたのですが、そちらも逃さず作成してくれていますね。
丁寧に作成してくれている様子を見ていると、AIが少し可愛く見えてきました😁
PlaywrightからMagicPod移行のまとめ
今回は簡単なテストケースを検証しましたが、無事成功しました！🎉
ただPlaywrightからテストケースを作成するだけでなく、作業内容のコメントまで残してくれて、かなり実用的にご利用いただける機能だと思います。
複雑なケースでも成功できるか、今後も検証を進めていきたいと思います！
もし何かご不明点がございましたら、ぜひMagicPodまでご連絡いただけると幸いです。
最後に宣伝タイム
Playwrightでテスト自動化を進めたものの、
- テストケースのメンテナンスの壁にぶつかっている
- テスト定期実行環境の構築ができていない
- テスト作成方法がわからない時の相談先に困っている
といった方に、E2EノーコードテストツールのMagicPodは大変おすすめです！
ご興味があれば、ぜひご連絡ください！
お問い合わせはこちら→ https://magicpod.com/consulting/
2週間無料トライアルのお申し込みはこちら→https://app.magicpod.com/accounts/signup/
