Playwrightで脱 Selenium してみた話～UI自動テストで苦戦したポイントと改善できたこと～

Last updated at 2026-06-10Posted at 2026-06-06

はじめに

会社では現在、Selenium + pytest を使用して UI 自動テストを実施しています。

ただ、運用していく中で以下のような問題が多く発生していました。

ブラウザとドライバのバージョン依存
要素取得失敗
待機処理不足による flaky test
セレクター指定の辛さ

そこで最近話題の Playwright を触ってみたところ、かなり使い勝手が良かったため、今回まとめてみます。

Playwright とは？

Playwright は Microsoft 製の E2E テストツールです。

最近はフロントエンド界隈でもかなり採用が増えている印象があります。

特に以下の特徴があります。

auto wait が強力
locator が使いやすい
Chromium / Firefox / WebKit 対応
UIモードによる高いデバッグ性
GitHub Actions と相性が良い
動画やスクリーンショット取得が容易

Selenium 時代につらかった部分をかなり改善している印象でした。

会社で発生していた問題点

1. Firefox と GeckoDriver の組み合わせ問題

Selenium では Firefox + GeckoDriver を使用していました。

しかし Ubuntu 環境では snap 版 Firefox がインストールされるケースがあり、これが原因で GeckoDriver と相性問題が発生しました。

そのため、

snap版 Firefox をアンインストール
Mozilla版 Firefox を別途導入

という対応を実施していました。

さらに定期的に snap 版 Firefox が復活することもあり、そのたびに再対応が必要でした。

UIテスト以前に環境維持コストが高い状態でした。

2. ポップアップや表示崩れで要素取得失敗

Selenium では XPath を使用して要素取得していました。

ただし、

ポップアップ
ローディング
別コンポーネントの重なり

などによって、意図したコンポーネントが取得できずエラーになることがありました。

例えば以下のようなエラーです。

ElementClickInterceptedException

特に CI 上では再現率が上がることもあり、テストが不安定になりがちでした。

3. XPath 指定が大変

相対パスの XPath を使用していましたが、

//*[@id="app"]/div/div[2]/div/button

のように長くなりやすく、

可読性が低い
保守しづらい
DOM変更に弱い

という問題がありました。

4. WebDriverWait を入れないと失敗する

Selenium では待機処理を適切に入れないと失敗します。

例えば以下のようなコードです。

WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "login-button"))
)

待機処理を書き忘れると、

CIでだけ失敗
ローカルでは成功
flaky test化

しやすい状態でした。

そこで Playwright を試してみた

これらの問題を解決できないか調査していたところ、Playwright を知りました。

実際に触ってみると、かなり便利でした。

Playwright で改善できたこと

1. ブラウザ管理がかなり楽

Playwright はブラウザを内部管理してくれます。

以下だけで必要なブラウザが導入されます。

npx playwright install

Selenium のように、

GeckoDriver
ChromeDriver
Firefoxバージョン依存

を強く意識しなくてよくなりました。

環境構築がかなり楽です。

2. auto wait が強力

Playwright は auto wait が非常に強力です。

例えば以下。

await page.getByRole('button', { name: 'ログイン' }).click();

これだけで、

表示待ち
操作可能待ち
DOM反映待ち

などを内部でかなり吸収してくれます。

Selenium のように毎回 WebDriverWait を書かなくても動くケースが多いです。

3. locator が使いやすい

Playwright は locator がかなり使いやすいです。

await page.getByRole('button', { name: '保存' });

role ベースで取得できるため、

可読性が高い
XPath地獄になりにくい
DOM変更に強い

というメリットがあります。

4. UIモードが非常にわかりやすい

個人的にかなり感動したのが UI モードです。

npx playwright test --ui

これで、

テスト履歴
実行順
失敗箇所
実行時間

などを GUI で確認できます。

デバッグ効率がかなり高いです。

5. 動画やスクリーンショットを残せる

Playwright は設定で動画保存が可能です。

use: {
  video: 'on',
}

CI失敗時の調査が非常にやりやすくなります。

6. codegen が便利

Playwright には codegen 機能があります。

npx playwright codegen http://localhost:3000

ブラウザ操作を自動でコード化してくれます。

UIテスト作成コストをかなり下げられます。

ただし codegen は便利ですが、そのまま使うと locator が冗長になることもあるため、最終的には手で整理したほうが良さそうでした。

Selenium と Playwright の比較

項目	Selenium	Playwright
ブラウザ管理	Driver管理必要	内部管理
待機処理	手動が多い	auto waitが強力
セレクター	XPath中心	locatorが使いやすい
デバッグ	やや辛い	UIモードが強い
動画保存	追加実装必要	標準対応
コード生成	なし	あり
CI連携	可能	かなり簡単

Playwright のインストール

今回は TypeScript を使用します。

インストール

npm init playwright@latest

質問に答えるだけでセットアップできます。

簡単なサンプルコード

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

test('ログイン画面表示', async ({ page }) => {
  await page.goto('http://localhost:3000');

  await expect(page.getByText('ログイン')).toBeVisible();
});

かなりシンプルに書けます。

GitHub Actions にも組み込める

Playwright は GitHub Actions との相性も良いです。

例えば以下。

- name: Install dependencies
  run: npm ci

- name: Install Playwright Browsers
  run: npx playwright install --with-deps

- name: Run Playwright Test
  run: npx playwright test

CI/CD に組み込むことで、

PR時自動テスト
リグレッション防止
手動確認削減

が可能になります。

GitHub Actions に簡単に組み込めるため、PR時の回帰テスト自動化とも相性が良いと感じました。

今後試したいこと

今後は以下も試したいです。

Playwright MCP
Visual Regression Test

テスト以外にも活用できそう

今回 Playwright を触っていて、テスト以外にも活用できそうだと感じました。

業務ではお客様向けの説明動画を作成することがありますが、Playwright の codegen やブラウザ自動操作を利用することで、

デモ手順の自動化
操作ミスの防止
同じデモの再利用

などにも応用できそうです。

Playwright は E2E テストツールとして有名ですが、「ブラウザ自動操作ツール」として考えると、活用の幅はさらに広がりそうだと感じました。

スクリーンショット

実際に Playwright を触ってみた際の簡単なスクリーンショットです。

UIモード

以下のコマンドで UI モードを起動できます。

npx playwright test --ui

実行するとテスト一覧や実行結果をGUIで確認できます。

【スクリーンショット】

テストの実行履歴や失敗箇所が確認できるため、
デバッグ効率がかなり高いと感じました。

codegen

以下のコマンドで codegen を起動できます。

npx playwright codegen http://localhost:3000