Skill Introduction

Overview

このスキルを使用して、機能をデプロイ後にブラウザ自動化を使用した自動ビジュアルテストとUI相互作用検証を自動化します。

Core value

Turns reusable Testing know-how into an installable skill, helping users complete github, community, claude, mcp work faster.

Target users

Developers, testers, and maintainers who handle Testing tasks in Focus Code.
Teams that already trust workflows or content from affaan-m.
Users who want standardized prompts, steps, or conventions instead of repeating setup work.

Best practices

Read the skill content first to confirm required inputs, expected outputs, and dependencies.
Try it on a small task before relying on it for critical work.
Add project-specific constraints such as coding style, target platform, test expectations, and delivery format.
For external sources, verify the source link, version, and recent maintenance activity.

Best use cases

Tasks related to github, community, claude, mcp that need a reusable execution flow.
Converting a community repo, team convention, or personal workflow into day-to-day assistance.
Starting from a proven skill instead of writing prompts or procedures from scratch.

Limits and boundaries

Results depend on the quality of the original skill content and may need human correction.
It does not replace code review, tests, security review, or professional judgment.
External tools, APIs, account permissions, and local dependencies still need separate setup.

Differentiation

Structured around Testing, making it easier to discover and reuse than loose prompt snippets.
Marked as GitHub, which helps users judge trust and maintenance expectations.
Keeps the original source link available for repository, documentation, or discussion follow-up.
Tagged with github, community, claude, mcp, so it can be filtered by concrete task intent.

Install and use

Install

Copy Install Command

focus install browser-qa-057a24

View source

Detail Preview

SKILL.md

Primary filemarkdown4 KB

name: browser-qa description: このスキルを使用して、機能をデプロイ後にブラウザ自動化を使用した自動ビジュアルテストとUI相互作用検証を自動化します。 origin: ECC

ブラウザQA — 自動ビジュアルテストと相互作用

使用時期

ステージング/プレビューに機能をデプロイ後
ページ全体のUIの動作を検証する必要がある場合
出荷前 — レイアウト、フォーム、相互作用が実際に機能することを確認
フロントエンドコードに触れるPRをレビューする場合
アクセシビリティ監査とレスポンシブテスト

動作方法

ブラウザオートメーションMCP（claude-in-chrome、Playwright、またはPuppeteer）を使用して、実際のユーザーのようにライブページと相互作用します。

フェーズ1：スモークテスト

1. ターゲットURLに移動
2. コンソールエラーをチェック（ノイズをフィルター：分析、サードパーティ）
3. ネットワークリクエストで4xx/5xxがないことを確認
4. デスクトップ+モバイルビューポート上の上にスクリーンショット
5. Core Web Vitalsをチェック：LCP < 2.5s、CLS < 0.1、INP < 200ms

フェーズ2：相互作用テスト

1. すべてのnavリンクをクリック — デッドリンクがないことを確認
2. 有効なデータでフォームを送信 — 成功状態を確認
3. 無効なデータでフォームを送信 — エラー状態を確認
4. 認証フローをテスト：ログイン→保護されたページ→ログアウト
5. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索）

フェーズ3：ビジュアル回帰

1. 3つのブレークポイント（375px、768px、1440px）でキーページのスクリーンショット
2. ベースラインスクリーンショット（保存されている場合）と比較
3. レイアウトシフト> 5px、要素の欠落、オーバーフローにフラグを立てる
4. 該当する場合はダークモードをチェック

フェーズ4：アクセシビリティ

1. 各ページでaxe-coreまたは同等のものを実行
2. WCAG AAの違反にフラグを立てる（コントラスト、ラベル、フォーカス順）
3. キーボードナビゲーションがエンドツーエンドで機能することを確認
4. スクリーンリーダーランドマークをチェック

出力形式

## QA Report — [URL] — [timestamp]

### Smoke Test
- ✓ ページが読み込まれる
- ✗ コンソールエラー：オプト不可なトラッキング警告
- ✓ Core Web Vitals OK
- [スクリーンショット]

### 相互作用テスト
- ✓ ナビゲーション機能
- ✓ フォーム検証
- ✗ モバイルメニューが開かない

### ビジュアル回帰
- ✓ デスクトップレイアウト
- ✗ モバイルで画像がオーバーフロー

### アクセシビリティ
- 1 WCAG AA: コントラスト違反
- 0 WCAG A違反

統合

/benchmarkとペアリングしてパフォーマンス確認
/canary-watchとペアリングしてデプロイ後の監視を自動化
PullRequestワークフローに組み込んでフロントエンドPRをキャッチ

browser qa