こんにちは！GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた（片田）です。

E2Eテスト、自動化していますか？？

専門知識がなくても簡単に使える国産CMS・マーケティングツール『LeadGrid』の開発エンジニアである私は、アプリケーションの品質を保つためにはどうしたらいいかと日々頭を悩ませています。

E2Eテストはもちろん自動化していて、主にノーコードでテストケースが書けるMablというツールを利用しています。

Mablはもちろん便利なツールです。ただ、ノーコードでテストケースが書けるとはいえ、テストケースを追加するのは開発しているエンジニア。そのため、むしろプログラムライクに書けた方がとっつきやすい気もしたり、何よりテストコードをGit管理したかったり、さらにはコストも削減したかったり…。

そんなことを考えていたら、Playwrightというテストツールに出会いました。今回はLeadGridにPlaywrightをお試しで導入してみたので、Playwrightを紹介しつつ、導入方法も解説していきます！

Playwrightとは

Playwrightは、Microsoftが開発した次世代の自動化テストツールです。Webアプリケーションの自動テストを効率的に行うために設計されており、以下の特徴を持っています。

クロスブラウザテスト
・Chrome、Firefox、Safari、Edgeの主要ブラウザに対応
・各ブラウザのヘッドレスモードとヘッドフルモードの両方をサポート
・モバイルデバイスのエミュレーションも可能

複数言語サポート
・JavaScript、TypeScript、Python、.NET、Javaの主要な開発言語に対応
・各言語用のAPIが用意されており、開発者は好みの言語でテストを記述可能

自動待機機能
・要素が表示され、操作可能になるまで自動的に待機
・明示的な待機時間の指定が不要で、テストの信頼性が向上

強力なセレクター
・CSS、テキスト、XPath、その他のカスタムセレクターをサポート
・ユニークなテキストセレクターにより、人間にも理解しやすいセレクターを使用可能

トレースビューワー
・テスト実行の詳細な記録と分析が可能
・スクリーンショット、コンソールログ、ネットワークリクエストなどの情報を含む

テストの並列実行
・複数のブラウザやデバイスで同時にテストを実行可能
・テスト実行時間の大幅な短縮が可能

API テスト
・HTTPリクエストを直接送信し、APIのテストも可能
・フロントエンドとバックエンドの統合テストが容易

個人的にはTypescriptに対応しており、エンジニアフレンドリーに書きやすい点と、async, awaitの記述でテストケースの実行を待機させられるため、テストが安定して実行できる点が気に入っています。

また、OSSなのでツール自体にコストがかからないのも魅力的ですね！

PlaywrightとMablと比べてどう違うか？

PlaywrightとMablを比較してみましょう。

比較してみると一長一短で、どちらが必ず優れているということはなく、開発しているプロダクトやリソースによってチョイスは分かれそうです。

私たちLeadGrid開発チームは、エンジニアがテストケースの追加や保守もしていきます。そのため、ノーコードでない点、バージョン管理ができる点、インフラをAWSで構築しておりCodeBuild等にCIを構築しやすそうな点などでPlaywrightがいいのでは……と考えました。（とはいえ本格的に導入を決定したわけではなく、私の独断で一旦導入＆いくつかテストケース追加してみて、良さそうだったら移行を提案してみよう！という段階です）

Playwrightの導入方法

以下の手順でPlaywrightの導入ができます。手順自体はとてもシンプルでした！

サンプルのテストケースを動かすところまでやって行きましょう。

1. Playwrightのインストール

下記のコマンドでインストールができます。

 $ npm init playwright@latest

インストール時にいくつか質問されますので、プロジェクトに合わせて回答してください。

2. テストケースの作成

上記のコマンド実行時にサンプルファイルが作成されるので、そのファイルを編集しても、新しく作ってもOKです。

今回私は ./tests/example.spec.ts を作成し、下記のようにテストコードを書きました。

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => { 
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

3. テストケースの実行

下記のコマンドでテストを実行できます！

 $ npx playwright test

4. テスト結果の確認

コンソールに表示されるテストケースの実行結果を確認しましょう。

より詳細な実行結果が見たい場合は、下記のコマンドを実行すると確認できます。

 $ px playwright show-report

5. テスト実行時の設定をカスタマイズ

playwrightの導入コマンド実行時に生成される playwright.config.ts ファイルから、テスト実行時の設定をカスタマイズできます。

おわりに

Playwright、導入も簡単で、テストケースも書きやすくてすごく体験が良いと思います…！！

Mablからの移行となると、既存テストケースの書き直しやCIの構築などなどやることはたくさん……ですが、チームメンバーにもPlaywrightの良さを伝えられるように頑張ってみます。みなさんもぜひ試してみてください！

◇

私が所属する株式会社GIGは、Web制作やシステム開発に強みをもつデジタルコンサルティング企業です。さまざまな技術を活用し、ご要望を叶えるWebサイト・システムを実現します。

Webやシステム、DX支援のご相談はいつでもご連絡ください。

ご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。