microsoft/playwright

1つのAPIでChromium・Firefox・WebKitを操作し、Webアプリのテストやブラウザー自動化を行うフレームワークです。

優良食堂ギット飯が実際に動かして検証し、選んだリポジトリです解説ページへ →
開発の材料自由に使える · Apache-2.0自動化・ワークフローTypeScript難易度
97,340+335今週👀 890 保存
6,565フォーク161Issue
デモ・公式サイトをひらくplaywright.dev
40秒で紹介日本語

字幕付き · 2026-09-27 制作

甘口 の解説

Playwrightは、Webブラウザーを自動で操作するためのフレームワークです。Chromium・Firefox・WebKitの3種類を、同じ書き方で動かせます。主な用途は、画面の一連の流れを確認するE2Eテストと、テストツールを使わない操作スクリプトです。AIエージェント(作業を行うAI)向けの操作経路も案内されています。導入は用途ごとに分かれ、npmやnpxのコマンドを使う経路が中心です。

こんなリポジトリです

こんなときに便利です

  • Webアプリの主要な画面操作を、テストとして自動で繰り返し確認したい開発者(Playwright Test)
  • コーディングエージェントにブラウザー操作を任せ、操作確認やスクリーンショット取得を行いたい開発者(CLI)
  • テストランナーを使わず、スクリーンショット・PDF生成・リクエストの遮断をスクリプトで行いたい開発者(Library)

主な機能

3つのブラウザーを単一APIで操作自動待機とWeb向けのアサーションTrace Viewerで操作・DOM・ネットワークを確認

ほかとの違い

1つのフレームワークから、テスト・スクリプト・AIエージェント向けの操作経路を選べ、単一APIで3ブラウザーを扱える点です。

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

準備するもの

  • Playwright Testをnpm initで導入する場合のみ:npm init playwright@latest を実行します。
  • Playwright Testを手動で追加する場合のみ(初期化経路とは代替関係):npm i -D @playwright/test と npx playwright install を実行します。
  • コーディングエージェント向けCLIを使う場合のみ:npm install -g @playwright/cli@latest を実行します。他の利用経路の共通要件ではありません。
  • Claude CodeでMCPを使う場合のみ:claude mcp add playwright npx @playwright/mcp@latest を実行して登録します。
  • JavaScriptのLibraryでブラウザー操作スクリプトを書く場合のみ:npm i playwright を実行します。

すぐに始める

方法A: npm init で始める(Playwright Test)

  1. Playwright Testの導入コマンドを実行します。
npm init playwright@latest
  1. テストを実行します。
npx playwright test

方法B: 手動で追加する(方法Aの代わりに使う)

  1. テスト用パッケージを追加します。
npm i -D @playwright/test
  1. ブラウザーをインストールします。
npx playwright install
  1. テストを実行します。
npx playwright test

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try microsoft/playwright

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

これを仕事に活かす

味見がすんだら次は応用です — 仕事やビジネスに活かす方法をまとめました。

レシピ — AI にこのまま頼んでみてください

レシピを読み込んでいます…

スター推移 · 7日

97,340+335 / 7日

確認日時

使いやすさ · まねしやすいか

ベストサンプルサンプル評点 68/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

最近の更新あり · 2019 年に作成

「自動化・ワークフロー」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/microsoft/playwright.svg)](https://www.gitbap.com/r/microsoft/playwright)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る