派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

Webアプリのテストを変えたPlaywright

サクッとわかるITトレンド

Microsoft社のテスト自動化ツール、「Playwright」が注目を集めています。

プログラムを開発したときに必要となる「テスト」ですが、その中でも特にWebアプリ開発時のテストは手間がかかるものです。コンソールアプリなどと比較すると、Webブラウザの種類や画面サイズ、端末のOS、フォントの違いなどを考慮しなければなりません。

さらに、「戻る」ボタンでの制御、SPA（Single Page Application）やPWA（Progressive Web Apps）への対応、リダイレクトでの制御なども発生するため、考えることが多いのです。それだけでなく、インターネットに公開されているアプリでは外部からの攻撃も意識しなければなりません。

これまでも、テストを自動化する取り組みは進められていましたが、2020年にMicrosoft社から公開されたPlaywrightが注目されています。具体的にどんなことができるのか、なぜ最近注目を集めているのか、その概要を紹介します。

そもそも、Webアプリのテストとは

まずは、開発者がどのようなテストをしているのかを確認しましょう。たとえば、次のようなWebページを作成した状況を考えます。

このWebページのHTMLは次のようになっています。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>My Web Page</h1>
    <p>This is a paragraph.</p>
</body>
</html>

このページはタイトルが「My Web Page」となっており、見出しにも同じ値が入っています。そして、それに続いて「p」タグで「This is a paragraph.」と指定されています。これが正しい状態だとします。

ところが、たくさんのページを変更している最中に、誤ってこのタイトルや見出し、本文を書き換えてしまうかもしれません。単独のページであればまだしも、Webアプリで他のページを書き換えたことにより、このページの内容に影響があるかもしれません。こういった状況で、すべてのページを1つずつ手作業で確認するのは大変です。

さらには、これが取引先のホームページだとすると、タイトルに書かれている会社名が間違った内容になってしまうようなことがあれば、大問題です。

そこで、Webページに含まれている内容が想定している内容と一致しているかどうか、といった内容を自動で確認する「テスト」を作成しておくのです。

その他、リンクがあればリンク先が正しいか、ボタンがあれば押したときの動作が正しいか、レイアウトが正しいか、など確認すべき点は多岐にわたります。

これをすべて自動化し、コマンドを実行するだけですべてチェックできるようになるのが、Playwrightを使う利点です。

Playwrightとは？MCPへの対応

これまでも自動でテストできるツールはいくつもありました。しかし、Playwrightは複数のWebブラウザに対応し、Microsoft WindowsやmacOS、Linuxなどで動作します。さらに、iOSやAndroidなどのモバイル環境での動作をエミュレーション（模倣）して確認できることも大きな特徴です。

■MCPに対応し話題に

このような機能を持つテストツールは他にもありますが、Playwrightが注目されているのは、2025年に話題になったMCP（Model Context Protocol）への対応です。

MCPに対応したChatGPTのような対話型の生成AIと接続することで、「Playwrightを使って https://example.comを開いて○○を確認して」のような自然言語での指示が可能になったのです。

人と対話するようにWebブラウザを操作できると、細かいコマンドなどを覚えていなくても操作できるため、テストに使うだけでなく、Webブラウザを自動操作する用途でも使われるようになったのです。

▼MCPのやさしい解説はコチラ！

Playwrightのインストール方法

このPlaywrightは利用にあたって会員登録などは不要で、無料で使えるツールです。インストールするには、npmが実行できる環境が必要なので、事前にNode.jsをインストールしておいてください。そのうえで、該当のWebアプリのプロジェクトが格納されているディレクトリを開いて、次のコマンドを入力します。

$ npm init playwright@latest

このコマンドを実行すると、Playwrightの実行に必要なソフトウェアがダウンロードされるだけでなく、対話式の設定画面で、テストの記述に使う言語（TypeScriptかJavaScriptか）、どこのフォルダに配置するか、GitHub Actionsを使うか、テスト用Webブラウザを追加するか、などの質問が表示されます。これらの質問に答えると、以下のように指定したフォルダにサンプルのテストプログラムが作成されます。

生成されたサンプルのテストプログラム

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

サンプルが作成されれば、次のコマンドを実行することで、テストが実行されます。

$ npx playwright test

これにより、Playwrightに設定されているすべてのWebブラウザでテストを実行し、その結果が表示されます。

$ npx playwright test

Running 6 tests using 4 workers
  6 passed (16.8s)

To open last HTML report run:

  npx playwright show-report

そして、この出力結果に表示されている、「npx playwright show-report」というコマンドを実行すると、HTML形式でのレポートが表示されます。

今回は、「Chromium」「Firefox」「Webkit」の3種類でテストされていることがわかります。特定のWebブラウザだけでテストすることもできますので、オプションを調べてみてください。

Webアプリのテストを簡単に作成する方法

上記はサンプルのテストで、「https://playwright.dev」というURLにアクセスして、タイトルやリンクをチェックするだけのものです。ここでは、自分が開発したWebアプリに対して、テストを作成することを考えます。上記のように、テストはTypeScriptやJavaScriptで作成します。ただし、このテストコードを自分で記述するのは面倒です。

Playwrightではテストコードを自分で記述する必要はほとんどありません。よく使われるのは、VS Codeの拡張機能である「Playwright Test for VSCode」です。

これをVS Codeに導入して、有効にしておくと、左のメニューから「テスト」を選んだときに次のように表示されます。

ここから「Record new」を押すと、テストのソースコードが作成され、Webブラウザが開きます。

そして、テストしたいURLにアクセスすると、利用者の操作を記録し始めます。ここで、Webページ内の要素をクリックしたり、フォームに入力してボタンを押したりすることで、その操作内容がテストコードに記述されます。

記録が終わったら、キャンセルボタンを押すか、Webブラウザを閉じると完了です。これだけでテストが作成されるので、マウスの操作だけでテストコードができてしまいます。
あとは必要に応じてテストコードを修正すればよいでしょう。

まとめ

テストは手間がかかり後回しになってしまう、という人は多いと思いますが、一度設定してしまえばあとは自動化できて、結果として時間の短縮につながることが多いものです。
MCPとの組み合わせなど、最初の導入までのハードルは高いかもしれませんが、まずは試してみてください。

【筆者】増井 敏克さん
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピューターを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』（翔泳社）、最新刊の『実務で役立つ ログの教科書』（翔泳社）がある。

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年12月時点のものです。

リクルートスタッフィング