O que é playwright-skill?

Cenario recomendado: Ideal for AI agents that need プラグインシステム: /.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill. Resumo localizado: Full-stack Laravel11 franchise sales management system with enterprise features: CRM, quotation/order management, automated invoicing, and analytics dashboard. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Como instalar playwright-skill?

Execute o comando: npx killer-skills add uchidayuma/sales-management-laravel-portfolio. Ele funciona com Cursor, Windsurf, VS Code, Claude Code e mais de 19 outros IDEs.

Quais são os casos de uso de playwright-skill?

Os principais casos de uso incluem: Caso de uso: Applying プラグインシステム: /.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill, Caso de uso: Applying 手動グローバル: /.claude/skills/playwright-skill, Caso de uso: Applying プロジェクト固有: <project /.claude/skills/playwright-skill.

Quais IDEs são compatíveis com playwright-skill?

Esta skill é compatível com Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use a CLI do Killer-Skills para uma instalação unificada.

playwright-skill tem limitações?

Limitacao: const { chromium } = require("playwright");. Limitacao: Requires repository-specific context from the skill documentation. Limitacao: Works best when the underlying tools and dependencies are already configured.

重要 - パス解決: このスキルは、さまざまな場所（プラグインシステム、手動インストール、グローバル、またはプロジェクト固有）にインストールできます。コマンドを実行する前に、この SKILL.md ファイルをロードした場所に基づいてスキルディレクトリを特定し、以下のすべてのコマンドでそのパスを使用してください。$SKILL_DIR を実際に検出されたパスに置き換えてください。

一般的なインストールパス:

プラグインシステム: ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
手動グローバル: ~/.claude/skills/playwright-skill
プロジェクト固有: <project>/.claude/skills/playwright-skill

Playwright ブラウザ自動化（Laravel Sail 環境専用）

Name: playwright-skill
Availability: InStock
Author: uchidayuma

Laravel Sail 環境（http://localhost:80）専用のブラウザ自動化スキル。テスト前に必ずプロジェクト構造（routes/web.php、resources/views/）を事前解析し、実際の DOM 構造に基づいた正確な E2E テストを作成します。テスト成功後は tests/e2e/に自動保存します。

重要ワークフロー - 以下の手順に沿って実行してください:

🔴 Laravel Sail 環境専用ルール（最優先事項）

0. 前提条件

ログイン情報は、 README.md から取得してください。

1. ホストの固定 (Laravel Sail 環境)

テストのベース URL は 常に http://localhost:80 を使用してください
Laravel Sail 環境で動作するため、開発サーバーの検出は不要です
すべてのスクリプトで const TARGET_URL = "http://localhost:80"; を使用してください

2. 事前解析の徹底（テスト計画前の必須ステップ）

テストコードを書く前に、必ず以下の順序でプロジェクトの構造を解析してください：

ステップ 2.1: ルーティングの確認

bash
1# プロジェクトルートの routes/web.php を読み取る
2Read ../../../routes/web.php

利用可能なパス（例: /login, /dashboard, /products）を特定
ルート名、ミドルウェア、コントローラーアクションを確認

ステップ 2.2: ビューファイルの解析

bash
1# 関連する Blade ファイルを読み取る
2Read ../../../resources/views/[対象ファイル].blade.php

フォーム要素の id, name, class 属性を特定
ボタン、入力フィールド、セレクタを確認
CSRF トークンフィールドの存在を確認

ステップ 2.3: テスト計画の策定

事前解析で得た情報を基に、正確なセレクタとパスを使用したテストコードを作成
推測や仮定を避け、実際の DOM 構造に基づいたテストを実装

3. テストコードの永続化

テストが成功した場合、以下の手順で永続的に保存してください：

ステップ 3.1: テストディレクトリの確認

bash
1# tests/e2e/ ディレクトリの存在を確認（なければ作成）
2Glob tests/e2e/**/*.js

ステップ 3.2: テストファイルの保存

bash
1# /tmp から tests/e2e/ に適切な名前でコピー
2# 例: login_test.js, product_create_test.js, dashboard_navigation_test.js
3Write ../../../tests/e2e/[適切な名前].js

ファイル名は機能を明確に表す命名規則を使用（例: login_test.js, form_submission_test.js）
テストが成功したことをユーザーに報告し、保存先を明示

🟢 一般的なワークフロー

/tmp にスクリプトを書き込む - テストファイルをスキルディレクトリに書き込まず、常に /tmp/playwright-test-*.js を使用してください
デフォルトで可視ブラウザを使用 - ユーザーが明示的にヘッドレスモードを要求しない限り、常に headless: false を使用してください

仕組み（Laravel Sail 環境）

テスト/自動化したい内容を記述します
プロジェクト構造を事前解析します（routes/web.php と resources/views/ を読み取り）
カスタムの Playwright コードを /tmp/playwright-test-*.js に書き込みます（プロジェクトを汚しません）
cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js を介して実行します（ベース URL: http://localhost:80）
結果はリアルタイムで表示され、デバッグのためにブラウザウィンドウが表示されます
テストが成功したら、tests/e2e/ に永続的に保存します
テストファイルは OS によって /tmp から自動的にクリーンアップされます

セットアップ (初回のみ)

bash
1cd $SKILL_DIR
2npm run setup

これにより、Playwright と Chromium ブラウザがインストールされます。初回のみ必要です。

実行パターン（Laravel Sail 環境）

ステップ 1: プロジェクト構造を事前解析（最優先）

bash
1# ルーティングを確認
2Read ../../../routes/web.php
3
4# 関連するビューファイルを確認
5Read ../../../resources/views/[対象ファイル].blade.php

ステップ 2: 固定 URL でテストスクリプトを /tmp に書き込みます

javascript
1// /tmp/playwright-test-page.js
2const { chromium } = require("playwright");
3
4// Laravel Sail環境の固定URL
5const TARGET_URL = "http://localhost:80";
6
7(async () => {
8    const browser = await chromium.launch({ headless: false });
9    const page = await browser.newPage();
10
11    await page.goto(TARGET_URL);
12    console.log("Page loaded:", await page.title());
13
14    await page.screenshot({ path: "/tmp/screenshot.png", fullPage: true });
15    console.log("📸 Screenshot saved to /tmp/screenshot.png");
16
17    await browser.close();
18})();

ステップ 3: スキルディレクトリから実行します

bash
1cd $SKILL_DIR && node run.js /tmp/playwright-test-page.js

ステップ 4: テスト成功後、永続的に保存します

bash
1# tests/e2e/ ディレクトリに適切な名前で保存
2Write ../../../tests/e2e/[機能名]_test.js

一般的なパターン

ページのテスト (複数ビューポート)

javascript
1// /tmp/playwright-test-responsive.js
2const { chromium } = require("playwright");
3
4const TARGET_URL = "http://localhost:80"; // Laravel Sail環境固定
5
6(async () => {
7    const browser = await chromium.launch({ headless: false, slowMo: 100 });
8    const page = await browser.newPage();
9
10    // デスクトップテスト
11    await page.setViewportSize({ width: 1920, height: 1080 });
12    await page.goto(TARGET_URL);
13    console.log("Desktop - Title:", await page.title());
14    await page.screenshot({ path: "/tmp/desktop.png", fullPage: true });
15
16    // モバイルテスト
17    await page.setViewportSize({ width: 375, height: 667 });
18    await page.screenshot({ path: "/tmp/mobile.png", fullPage: true });
19
20    await browser.close();
21})();

ログインフローのテスト

javascript
1// /tmp/playwright-test-login.js
2const { chromium } = require("playwright");
3
4const TARGET_URL = "http://localhost:80"; // Laravel Sail環境固定
5
6(async () => {
7    const browser = await chromium.launch({ headless: false });
8    const page = await browser.newPage();
9
10    // 事前解析で確認したパスとセレクタを使用
11    await page.goto(`${TARGET_URL}/login`);
12
13    // resources/views/auth/login.blade.php から特定した実際のセレクタを使用
14    await page.fill('input[name="email"]', "test@example.com");
15    await page.fill('input[name="password"]', "password123");
16    await page.click('button[type="submit"]');
17
18    // リダイレクトを待機
19    await page.waitForURL("**/dashboard");
20    console.log("✅ ログイン成功、ダッシュボードにリダイレクトされました");
21
22    await browser.close();
23})();

フォームの入力と送信

javascript
1// /tmp/playwright-test-form.js
2const { chromium } = require("playwright");
3
4const TARGET_URL = "http://localhost:80"; // Laravel Sail環境固定
5
6(async () => {
7    const browser = await chromium.launch({ headless: false, slowMo: 50 });
8    const page = await browser.newPage();
9
10    // 事前に routes/web.php で /contact パスを確認
11    // 事前に resources/views/contact.blade.php でフォーム要素を確認
12    await page.goto(`${TARGET_URL}/contact`);
13
14    // 実際のBlade テンプレートで確認したname属性を使用
15    await page.fill('input[name="name"]', "John Doe");
16    await page.fill('input[name="email"]', "john@example.com");
17    await page.fill('textarea[name="message"]', "Test message");
18    await page.click('button[type="submit"]');
19
20    // 送信を確認（Bladeファイルで確認した成功メッセージのセレクタを使用）
21    await page.waitForSelector(".success-message");
22    console.log("✅ フォームが正常に送信されました");
23
24    await browser.close();
25})();

壊れたリンクのチェック

javascript
1const { chromium } = require("playwright");
2
3(async () => {
4    const browser = await chromium.launch({ headless: false });
5    const page = await browser.newPage();
6
7    await page.goto("http://localhost:80");
8
9    const links = await page.locator('a[href^="http"]').all();
10    const results = { working: 0, broken: [] };
11
12    for (const link of links) {
13        const href = await link.getAttribute("href");
14        try {
15            const response = await page.request.head(href);
16            if (response.ok()) {
17                results.working++;
18            } else {
19                results.broken.push({ url: href, status: response.status() });
20            }
21        } catch (e) {
22            results.broken.push({ url: href, error: e.message });
23        }
24    }
25
26    console.log(`✅ 有効なリンク: ${results.working}`);
27    console.log(`❌ 壊れたリンク:`, results.broken);
28
29    await browser.close();
30})();

エラー処理付きスクリーンショットの取得

javascript
1const { chromium } = require("playwright");
2
3(async () => {
4    const browser = await chromium.launch({ headless: false });
5    const page = await browser.newPage();
6
7    try {
8        await page.goto("http://localhost:3000", {
9            waitUntil: "networkidle",
10            timeout: 10000,
11        });
12
13        await page.screenshot({
14            path: "/tmp/screenshot.png",
15            fullPage: true,
16        });
17
18        console.log("📸 Screenshot saved to /tmp/screenshot.png");
19    } catch (error) {
20        console.error("❌ エラー:", error.message);
21    } finally {
22        await browser.close();
23    }
24})();

レスポンシブデザインのテスト

javascript
1// /tmp/playwright-test-responsive-full.js
2const { chromium } = require("playwright");
3
4const TARGET_URL = "http://localhost:80"; // Laravel Sail環境固定
5
6(async () => {
7    const browser = await chromium.launch({ headless: false });
8    const page = await browser.newPage();
9
10    const viewports = [
11        { name: "Desktop", width: 1920, height: 1080 },
12        { name: "Tablet", width: 768, height: 1024 },
13        { name: "Mobile", width: 375, height: 667 },
14    ];
15
16    for (const viewport of viewports) {
17        console.log(
18            `Testing ${viewport.name} (${viewport.width}x${viewport.height})`
19        );
20
21        await page.setViewportSize({
22            width: viewport.width,
23            height: viewport.height,
24        });
25
26        await page.goto(TARGET_URL);
27        await page.waitForTimeout(1000);
28
29        await page.screenshot({
30            path: `/tmp/${viewport.name.toLowerCase()}.png`,
31            fullPage: true,
32        });
33    }
34
35    console.log("✅ すべてのビューポートがテストされました");
36    await browser.close();
37})();

インライン実行（シンプルなタスク）

ワンオフのクイックタスク用に、ファイルを作成せずにコードをインラインで実行できます：

bash
1# Take a quick screenshot (Laravel Sail環境)
2cd $SKILL_DIR && node run.js "
3const browser = await chromium.launch({ headless: false });
4const page = await browser.newPage();
5await page.goto('http://localhost:80');
6await page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });
7console.log('Screenshot saved');
8await browser.close();
9"

インラインとファイルの使い分け：

インライン: ワンオフのクイックタスク（スクリーンショット、要素の存在確認、ページタイトルの取得）
ファイル: 複雑なテスト、レスポンシブデザイン確認、ユーザーが再実行したい場合

利用可能なヘルパー

lib/helpers.js のオプションユーティリティ関数：

javascript
1const helpers = require("./lib/helpers");
2
3// Detect running dev servers (CRITICAL - use this first!)
4const servers = await helpers.detectDevServers();
5console.log("Found servers:", servers);
6
7// Safe click with retry
8await helpers.safeClick(page, "button.submit", { retries: 3 });
9
10// Safe type with clear
11await helpers.safeType(page, "#username", "testuser");
12
13// Take timestamped screenshot
14await helpers.takeScreenshot(page, "test-result");
15
16// Handle cookie banners
17await helpers.handleCookieBanner(page);
18
19// Extract table data
20const data = await helpers.extractTableData(page, "table.results");

完全なリストについては lib/helpers.js を参照してください。

カスタム HTTP ヘッダー

環境変数を介してすべての HTTP リクエストのカスタムヘッダーを設定します。以下の場合に便利です：

バックエンドへの自動化されたトラフィックを識別する
LLM 最適化レスポンスを取得する（例：スタイル化された HTML ではなくプレーンテキストエラー）
認証トークンをグローバルに追加する

設定

単一ヘッダー（一般的な場合）：

bash
1PW_HEADER_NAME=X-Automated-By PW_HEADER_VALUE=playwright-skill \
2  cd $SKILL_DIR && node run.js /tmp/my-script.js

複数ヘッダー（JSON 形式）：

bash
1PW_EXTRA_HEADERS='{"X-Automated-By":"playwright-skill","X-Debug":"true"}' \
2  cd $SKILL_DIR && node run.js /tmp/my-script.js

仕組み

helpers.createContext() を使用する場合、ヘッダーは自動的に適用されます：

javascript
1const context = await helpers.createContext(browser);
2const page = await context.newPage();
3// All requests from this page include your custom headers

raw Playwright API を使用するスクリプトの場合、インジェクションされた getContextOptionsWithHeaders() を使用します：

javascript
1const context = await browser.newContext(
2    getContextOptionsWithHeaders({ viewport: { width: 1920, height: 1080 } })
3);

高度な使用方法

包括的な Playwright API ドキュメントについては API_REFERENCE.md を参照してください：

セレクタとロケータのベストプラクティス
ネットワークインターセプション＆API モッキング
認証とセッション管理
ビジュアルリグレッションテスト
モバイルデバイスエミュレーション
パフォーマンステスト
デバッグ技法
CI/CD 統合

ヒント（Laravel Sail 環境）

🔴 最重要：事前解析を最初に実行 - テストコードを書く前に、常に routes/web.php と関連する resources/views/ ファイルを読み取ってください
🔴 固定 URL - 常に const TARGET_URL = "http://localhost:80"; を使用してください（Laravel Sail 環境）
🔴 テストの永続化 - テスト成功後は必ず tests/e2e/ に適切な名前で保存してください
カスタムヘッダー - PW_HEADER_NAME/PW_HEADER_VALUE 環境変数を使用してバックエンドへの自動化トラフィックを識別します
/tmp をテストファイルに使用 - /tmp/playwright-test-*.js に書き込み、スキルディレクトリには書き込まない（成功後に tests/e2e/ に保存）
正確なセレクタ - 事前解析で確認した実際の id、name、class 属性を使用し、推測を避ける
CSRF トークン - Laravel のフォームには CSRF トークンが含まれていることを確認
デフォルト：ブラウザを表示 - ユーザーが明示的にヘッドレスモードを要求しない限り、常に headless: false を使用
ヘッドレスモード - ユーザーが明確に「headless」または「background」実行を要求した場合のみ headless: true を使用
減速： slowMo: 100 を使用してアクションを見やすく、フォローしやすくします
待機戦略： 固定タイムアウトの代わりに waitForURL、waitForSelector、waitForLoadState を使用
エラー処理： 堅牢な自動化のために try-catch を常に使用
コンソール出力： console.log() を使用してプログレスを追跡し、何が起こっているかを表示

トラブルシューティング

Playwright がインストールされていない：

bash
1cd $SKILL_DIR && npm run setup

モジュールが見つからない： run.js ラッパーを介してスキルディレクトリから実行していることを確認

ブラウザが開かない： headless: false をチェックし、ディスプレイが利用可能であることを確認

要素が見つからない： wait を追加：await page.waitForSelector('.element', { timeout: 10000 })

使用例（Laravel Sail 環境）

ユーザー：「マーケティングページの見た目がいいか確認してください」

Claude：複数のビューポートでマーケティングページをテストします。まずプロジェクト構造を確認させてください...

[実行：Read routes/web.php]
[出力：/marketing ルートを確認]

[実行：Read resources/views/marketing.blade.php]
[出力：ページ構造とセレクタを確認]

Laravel Sail環境（http://localhost:80）でテストを実行します。

[固定URLでカスタム自動化スクリプトを /tmp/playwright-test-marketing.js に書き込む]
[実行：cd $SKILL_DIR && node run.js /tmp/playwright-test-marketing.js]
[/tmp/ からのスクリーンショット付きの結果を表示]

✅ テスト成功！tests/e2e/marketing_test.js に保存しました。

ユーザー：「ログインが正しくリダイレクトされるか確認してください」

Claude：ログインフローをテストします。まずプロジェクト構造を確認させてください...

[実行：Read routes/web.php]
[出力：/login ルートとリダイレクト先を確認]

[実行：Read resources/views/auth/login.blade.php]
[出力：フォーム要素のname属性、id、セレクタを確認]

実際のDOM構造に基づいてテストを作成します（http://localhost:80）。

[ログイン自動化を /tmp/playwright-test-login.js に書き込む]
[実行：cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js]
[レポート：✅ ログイン成功、/dashboard にリダイレクト]

✅ テスト成功！tests/e2e/login_test.js に保存しました。

注記（Laravel Sail 環境）

各自動化はあなたの特定のリクエストのためにカスタム記述されます
事前構築されたスクリプトに限定されません - あらゆるブラウザタスク可能
Laravel Sail 環境では常に http://localhost:80 を使用（開発サーバー検出は不要）
テスト前に必ず routes/web.php と resources/views/ を解析してセレクタを確認
テストスクリプトは /tmp に書き込まれ、成功後は tests/e2e/ に永続化
run.js を介した適切なモジュール解決により、コードは確実に実行されます
段階的開示 - 高度な機能が必要な場合のみ API_REFERENCE.md が読み込まれます

playwright-skill — for Claude Code playwright-skill, sales-management-laravel-portfolio, community, for Claude Code, ide skills, $SKILL_DIR, 手動グローバル, プロジェクト固有, 利用可能なパス（例, フォーム要素の

Sobre este Skill

Recursos

# Tópicos principais

Skill Overview

Por que usar essa habilidade

Melhor para

↓ Casos de Uso Práticos for playwright-skill

! Segurança e Limitações

About The Source

Browser Sandbox Environment

⚡️ Ready to unleash?

FAQ e etapas de instalação

? Perguntas frequentes