How do I install the Playwright skill?

Run npx skillmds@latest add haru-llc/playwright in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Playwright skill do?

Playwrightによるブラウザ自動化スキル。Webテスト、フォーム入力、スクリーンショット、レスポンシブ検証に対応。 It is listed under AI & ML on SkillMD.

Is Playwright safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Playwright?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Playwright free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Playwright?

HaRu-LLC (@haru-llc) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Playwright by haru-llc — Agent Skill

Name: Playwright
Rating: 4.2 (5 reviews)
Author: HaRu-LLC

File contents

目的

Playwrightを使用した包括的なブラウザ自動化を実現。Webサイトテスト、フォーム入力、スクリーンショット、レスポンシブデザイン検証、ログインフロー、リンクチェックに対応。

トリガー語

「ブラウザ自動化」
「Webテストを実行」
「スクリーンショットを撮る」
「フォームを自動入力」
「Playwrightでテスト」

コア機能

カスタム自動化コード生成（事前スクリプトに限定されない）
可視ブラウザモード（headless: false）でリアルタイム確認
モジュール解決エラー防止
一時ファイルの安全な管理

重要ワークフロー

3ステッププロセス

開発サーバー自動検出: 検出ヘルパーを最初に使用
/tmpにスクリプト記述: スキルディレクトリには書き込まない
run.jsラッパーで実行: スキルディレクトリから実行

使用パターン

マルチビューポートレスポンシブテスト

const viewports = [
  { width: 375, height: 667, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1920, height: 1080, name: 'desktop' }
];

for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.screenshot({ path: `/tmp/screenshot-${vp.name}.png` });
}

ログインフロー検証

フォーム送信自動化

リンク切れ検出

デフォルト設定

設定	値
headlessモード	off（可視ブラウザ）
スローモーション	100ms
タイムアウト	30秒
スクリーンショット保存先	/tmp/

設定オプション

環境変数でカスタムHTTPヘッダーを設定：

PW_HEADER_NAME
PW_HEADER_VALUE
PW_EXTRA_HEADERS

セットアップ

npm run setup  # Playwright + Chromiumインストール（初回のみ）

重要原則

URLはパラメータ化して環境間で柔軟に
テストファイルは/tmpに書き込み、プロジェクトを汚さない
ユーザーが明示的に要求しない限りheadless: false

ライセンス

MIT License

---name: playwrightdescription: Playwrightによるブラウザ自動化スキル。Webテスト、フォーム入力、スクリーンショット、レスポンシブ検証に対応。---## 目的Playwrightを使用した包括的なブラウザ自動化を実現。Webサイトテスト、フォーム入力、スクリーンショット、レスポンシブデザイン検証、ログインフロー、リンクチェックに対応。---## トリガー語- 「ブラウザ自動化」- 「Webテストを実行」- 「スクリーンショットを撮る」- 「フォームを自動入力」- 「Playwrightでテスト」---## コア機能- カスタム自動化コード生成（事前スクリプトに限定されない）- 可視ブラウザモード（headless: false）でリアルタイム確認- モジュール解決エラー防止- 一時ファイルの安全な管理---## 重要ワークフロー### 3ステッププロセス1. **開発サーバー自動検出**: 検出ヘルパーを最初に使用2. **/tmpにスクリプト記述**: スキルディレクトリには書き込まない3. **run.jsラッパーで実行**: スキルディレクトリから実行---## 使用パターン### マルチビューポートレスポンシブテスト```javascriptconst viewports = [ { width: 375, height: 667, name: 'mobile' }, { width: 768, height: 1024, name: 'tablet' }, { width: 1920, height: 1080, name: 'desktop' }];for (const vp of viewports) { await page.setViewportSize({ width: vp.width, height: vp.height }); await page.screenshot({ path: `/tmp/screenshot-${vp.name}.png` });}```### ログインフロー検証### フォーム送信自動化### リンク切れ検出---## デフォルト設定| 設定 | 値 ||------|-----|| headlessモード | off（可視ブラウザ） || スローモーション | 100ms || タイムアウト | 30秒 || スクリーンショット保存先 | /tmp/ |---## 設定オプション環境変数でカスタムHTTPヘッダーを設定：- `PW_HEADER_NAME`- `PW_HEADER_VALUE`- `PW_EXTRA_HEADERS`---## セットアップ```bashnpm run setup # Playwright + Chromiumインストール（初回のみ）```---## 重要原則- URLはパラメータ化して環境間で柔軟に- テストファイルは/tmpに書き込み、プロジェクトを汚さない- ユーザーが明示的に要求しない限りheadless: false---## ライセンスMIT License

Frequently asked questions

Playwright