playwright-console-monitor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwright Console Monitor

Playwright控制台监控

Quick Start

快速开始

Monitor console errors during a login workflow:

1. Navigate to application
2. Execute login steps
3. Check console for errors after each critical operation
4. Generate error report with screenshots
5. Provide debugging context

Immediate value: Catch JavaScript errors during automation that would otherwise go unnoticed.

在登录工作流中监控控制台错误：

1. 导航至应用程序
2. 执行登录步骤
3. 在每个关键操作后检查控制台是否有错误
4. 生成包含截图的错误报告
5. 提供调试上下文

直接价值： 捕获自动化过程中原本会被忽略的JavaScript错误。

When to Use This Skill
What This Skill Does
Console Error Monitoring Workflow 3.1 Setup and Navigation 3.2 Execute with Monitoring 3.3 Error Detection and Categorization 3.4 Report Generation
Console Message Levels
Supporting Files
Expected Outcomes
Integration Points
Success Metrics
Requirements
Red Flags to Avoid
Notes

何时使用本技能
本技能的功能
控制台错误监控工作流 3.1 设置与导航 3.2 带监控的执行 3.3 错误检测与分类 3.4 报告生成
控制台消息级别
支持文件
预期结果
集成点
成功指标
要求
需避免的问题
注意事项

When to Use This Skill

何时使用本技能

Explicit Triggers

显式触发

User says "check for console errors"
User says "monitor JavaScript errors during [workflow]"
User says "validate error-free execution"
User says "debug this workflow"
User requests "console monitoring"

用户说“检查控制台错误”
用户说“在[工作流]期间监控JavaScript错误”
用户说“验证无错误执行”
用户说“调试这个工作流”
用户请求“控制台监控”

Implicit Triggers

隐式触发

Executing critical browser workflows (checkout, form submission, data operations)
Testing new features or deployments
Debugging intermittent failures
Validating application health
QA automation scenarios

执行关键浏览器工作流（结账、表单提交、数据操作）
测试新功能或部署版本
调试间歇性故障
验证应用程序健康状态
QA自动化场景

Debugging Context

调试场景

When workflows fail without obvious cause
When investigating "works for me" issues
When validating frontend error handling
When checking third-party script integration

工作流无明显原因失败时
调查“在我这里正常”的问题时
验证前端错误处理逻辑时
检查第三方脚本集成时

What This Skill Does

本技能的功能

This skill wraps browser automation workflows with console monitoring to:

Proactive Error Detection - Catch JavaScript errors during workflow execution
Error Categorization - Classify errors by severity (critical/warning/info/debug)
Context Capture - Take screenshots and snapshots at error states
Report Generation - Provide structured error reports with debugging context
Continuous Monitoring - Check console after each critical operation

本技能为浏览器自动化工作流添加控制台监控，实现以下功能：

主动错误检测 - 在工作流执行过程中捕获JavaScript错误
错误分类 - 按严重程度（严重/警告/信息/调试）对错误进行分类
上下文捕获 - 在错误状态下截取屏幕截图和页面快照
报告生成 - 提供包含调试上下文的结构化错误报告
持续监控 - 在每个关键操作后检查控制台

Console Error Monitoring Workflow

控制台错误监控工作流

3.1 Setup and Navigation

3.1 设置与导航

Step 1: Navigate to application

Use: mcp__playwright__browser_navigate
- Navigate to target URL
- Wait for page load

Step 2: Clear initial console messages (optional)

Use: mcp__playwright__browser_console_messages
- Read and discard initial load messages
- Establishes clean baseline for workflow monitoring

步骤1：导航至应用程序

使用: mcp__playwright__browser_navigate
- 导航至目标URL
- 等待页面加载完成

步骤2：清除初始控制台消息（可选）

使用: mcp__playwright__browser_console_messages
- 读取并丢弃页面加载时的初始消息
- 为工作流监控建立干净的基准

3.2 Execute with Monitoring

3.2 带监控的执行

Step 3: Execute workflow with checkpoints

For each critical operation:

Execute the action (click, type, navigate)
Wait for expected state
Check console messages
Log any new errors/warnings

Example pattern:

Action: Click "Submit Order" button
  → mcp__playwright__browser_click
Wait: Order confirmation appears
  → mcp__playwright__browser_wait_for
Check: Console errors
  → mcp__playwright__browser_console_messages({ level: "error" })

Critical operation checkpoints:

Form submissions
Navigation between pages
AJAX/fetch requests
Third-party script loads
Authentication flows
Payment processing
Data mutations

步骤3：带检查点的工作流执行

针对每个关键操作：

执行操作（点击、输入、导航）
等待预期状态
检查控制台消息
记录所有新的错误/警告

示例模式：

操作: 点击“提交订单”按钮
  → mcp__playwright__browser_click
等待: 订单确认页面出现
  → mcp__playwright__browser_wait_for
检查: 控制台错误
  → mcp__playwright__browser_console_messages({ level: "error" })

关键操作检查点：

表单提交
页面间导航
AJAX/fetch请求
第三方脚本加载
认证流程
支付处理
数据变更

3.3 Error Detection and Categorization

3.3 错误检测与分类

Step 4: Categorize detected errors

Use console message levels to filter:

Level	Includes	When to Use
`error`	Critical errors only	After critical operations (checkout, submit)
`warning`	Warnings + errors	During form validation, feature usage
`info`	Info + warnings + errors	General workflow monitoring
`debug`	All messages	Detailed debugging scenarios

Step 5: Capture error context

For each error detected:

Take screenshot of current state

mcp__playwright__browser_take_screenshot

Capture page snapshot
```
mcp__playwright__browser_snapshot
```
Record error message, timestamp, and operation

步骤4：对检测到的错误进行分类

使用控制台消息级别进行过滤：

级别	包含内容	适用场景
`error`	仅严重错误	关键操作后（结账、提交）
`warning`	警告 + 错误	表单验证、功能使用期间
`info`	信息 + 警告 + 错误	常规工作流监控
`debug`	所有消息	详细调试场景

步骤5：捕获错误上下文

针对每个检测到的错误：

截取当前状态的屏幕截图

mcp__playwright__browser_take_screenshot

捕获页面快照
```
mcp__playwright__browser_snapshot
```
记录错误消息、时间戳和触发操作

3.4 Report Generation

3.4 报告生成

Step 6: Generate structured error report

Report format:

Console Error Report
====================

Workflow: [workflow name]
Executed: [timestamp]
Total Errors: [count]

Critical Errors (level: error):
  - [timestamp] [message]
    Context: [operation that triggered]
    Screenshot: [filename]

Warnings (level: warning):
  - [timestamp] [message]
    Context: [operation that triggered]

Info Messages:
  - [summary if relevant]

Debugging Context:
  - URL at time of error
  - Page snapshot
  - Network state (if available via browser_network_requests)

Recommendations:
  - [specific debugging suggestions]

步骤6：生成结构化错误报告

报告格式：

控制台错误报告
====================

工作流: [工作流名称]
执行时间: [时间戳]
总错误数: [数量]

严重错误（级别: error）:
  - [时间戳] [消息内容]
    上下文: [触发的操作]
    截图: [文件名]

警告（级别: warning）:
  - [时间戳] [消息内容]
    上下文: [触发的操作]

信息消息:
  - [相关摘要]

调试上下文:
  - 错误发生时的URL
  - 页面快照
  - 网络状态（若可通过browser_network_requests获取）

建议:
  - [具体调试建议]

Console Message Levels

控制台消息级别

Playwright console messages follow browser console API levels:

error - Critical errors that prevent functionality

Uncaught exceptions
Failed network requests (4xx/5xx from critical APIs)
Missing required resources
Use after: Checkout, payment, form submission, authentication

warning - Non-fatal issues that may cause problems

Deprecated API usage
Failed optional resources
Validation warnings
Use after: Form interactions, navigation, feature usage

info - Informational messages

Application lifecycle events
Successful operations
Debug information from application
Use for: General monitoring, understanding application flow

debug - Verbose debugging output

All console.log, console.debug calls
Framework/library debug messages
Use for: Deep debugging, understanding detailed behavior

Default recommendation: Use

level: "error"

after critical operations,

level: "warning"

for general monitoring.

Playwright控制台消息遵循浏览器控制台API级别：

error - 会阻止功能运行的严重错误

未捕获的异常
失败的网络请求（关键API返回4xx/5xx状态码）
缺失必需资源
适用时机： 结账、支付、表单提交、认证操作后

warning - 可能引发问题的非致命问题

已弃用的API使用
可选资源加载失败
验证警告
适用时机： 表单交互、导航、功能使用期间

info - 信息性消息

应用程序生命周期事件
成功完成的操作
应用程序输出的调试信息
适用场景： 常规监控、了解应用程序流程

debug - 详细的调试输出

所有console.log、console.debug调用
框架/库的调试消息
适用场景： 深度调试、了解详细行为

默认建议： 关键操作后使用

level: "error"

，常规监控使用

level: "warning"

。

Supporting Files

支持文件

This skill includes:

references/playwright-console-api.md - Detailed Playwright console API reference, message formats, and advanced patterns
examples/examples.md - 5+ real-world monitoring scenarios (e-commerce checkout, form submission, SPA navigation, authentication, third-party integrations)
assets/error-report-template.md - Template for structured error reports

本技能包含：

references/playwright-console-api.md - 详细的Playwright控制台API参考、消息格式和高级模式
examples/examples.md - 5个以上真实监控场景（电商结账、表单提交、SPA导航、认证、第三方集成）
assets/error-report-template.md - 结构化错误报告模板

Expected Outcomes

预期结果

Successful Monitoring (No Errors)

监控成功（无错误）

✅ Console Monitoring Complete

Workflow: User Login Flow
Operations Monitored: 5
Console Errors: 0
Warnings: 0

All operations completed without console errors.

✅ 控制台监控完成

工作流: 用户登录流程
监控的操作数: 5
控制台错误数: 0
警告数: 0

所有操作均无控制台错误完成。

Error Detection

检测到错误

❌ Console Errors Detected

Workflow: Checkout Process
Operations Monitored: 8
Console Errors: 2 critical, 1 warning

Critical Errors:
  1. [14:32:15] Uncaught TypeError: Cannot read property 'total' of undefined
     Context: After "Apply Discount Code" click
     Screenshot: checkout-error-1.png

  2. [14:32:18] Failed to load resource: POST /api/payment 500
     Context: After "Submit Payment" click
     Screenshot: checkout-error-2.png

Warnings:
  1. [14:32:10] [Deprecation] Synchronous XMLHttpRequest on the main thread
     Context: During address validation

Debugging Recommendations:
  - Investigate cart.total property initialization
  - Check /api/payment endpoint for server errors
  - Review discount code application logic

❌ 检测到控制台错误

工作流: 结账流程
监控的操作数: 8
控制台错误数: 2个严重错误，1个警告

严重错误:
  1. [14:32:15] Uncaught TypeError: Cannot read property 'total' of undefined
     上下文: 点击“应用折扣码”后
     截图: checkout-error-1.png

  2. [14:32:18] Failed to load resource: POST /api/payment 500
     上下文: 点击“提交支付”后
     截图: checkout-error-2.png

警告:
  1. [14:32:10] [Deprecation] Synchronous XMLHttpRequest on the main thread
     上下文: 地址验证期间

调试建议:
  - 调查cart.total属性的初始化逻辑
  - 检查/api/payment端点的服务器错误
  - 审核折扣码应用逻辑

Integration Points

集成点

With Browser Automation Workflows

与浏览器自动化工作流集成

Wrap existing automation with console monitoring
Add checkpoints after critical operations
Enhance test suites with error detection

为现有自动化添加控制台监控
在关键操作后添加检查点
为测试套件增强错误检测功能

With Debugging Workflows

与调试工作流集成

Console monitoring identifies error sources
Screenshots provide visual debugging context
Network requests correlate with console errors

控制台监控识别错误来源
截图提供可视化调试上下文
网络请求与控制台错误关联

With QA Processes

与QA流程集成

Automated error detection in test runs
Regression testing for console errors
Performance monitoring (console.time/timeEnd messages)

测试运行中的自动化错误检测
控制台错误的回归测试
性能监控（console.time/timeEnd消息）

With CI/CD Pipelines

与CI/CD流水线集成

Fail builds on critical console errors
Track error trends across deployments
Validate error-free user flows

出现严重控制台错误时触发构建失败
跟踪不同版本部署的错误趋势
验证无错误的用户流程

Success Metrics

成功指标

Metric	Before (Manual)	After (Skill)	Improvement
Error Detection	Reactive (user reports)	Proactive (during automation)	+95% early detection
Debugging Time	30-60 min (reproduce + debug)	5-10 min (context provided)	80% reduction
False Negatives	High (errors missed)	Low (systematic checking)	90% reduction
Context Quality	Minimal (user description)	Rich (screenshots, state, messages)	10x improvement

指标	之前（手动）	之后（使用本技能）	提升效果
错误检测	被动（用户反馈）	主动（自动化过程中）	提前检测率提升95%
调试时间	30-60分钟（重现+调试）	5-10分钟（提供上下文）	减少80%
漏报率	高（错误被遗漏）	低（系统性检查）	减少90%
上下文质量	极少（用户描述）	丰富（截图、状态、消息）	提升10倍

Requirements

要求

Required Tools

必需工具

Playwright MCP browser automation

```
mcp__playwright__browser_navigate
```

mcp__playwright__browser_console_messages

```
mcp__playwright__browser_snapshot
```

mcp__playwright__browser_take_screenshot

```
mcp__playwright__browser_click
```
(for workflows)
```
mcp__playwright__browser_wait_for
```

Playwright MCP浏览器自动化

```
mcp__playwright__browser_navigate
```

mcp__playwright__browser_console_messages

```
mcp__playwright__browser_snapshot
```

mcp__playwright__browser_take_screenshot

```
mcp__playwright__browser_click
```
（用于工作流）
```
mcp__playwright__browser_wait_for
```

Environment

环境

Playwright browser configured and accessible
Target application URL

已配置并可访问的Playwright浏览器
目标应用程序URL

Knowledge

知识

Basic understanding of JavaScript console API
Familiarity with browser automation workflows
Understanding of error severity levels

对JavaScript控制台API的基本理解
熟悉浏览器自动化工作流
了解错误严重程度级别

Red Flags to Avoid

需避免的问题

Checking console only at end - Check after each critical operation
Ignoring warnings - Warnings often predict future critical errors
Not capturing context - Always take screenshots at error states
Wrong severity level - Use
```
error
```
level for critical operations
Skipping wait states - Ensure operations complete before checking console
Not clearing initial messages - Page load messages contaminate workflow monitoring
Missing operation context - Always note which operation triggered errors
Overly verbose monitoring - Don't check console after every single action
Ignoring network correlation - Console errors often correlate with network failures
Not providing recommendations - Error reports should suggest debugging steps

仅在最后检查控制台 - 应在每个关键操作后检查
忽略警告 - 警告通常预示未来会出现严重错误
不捕获上下文 - 错误状态下务必截取截图
使用错误的严重级别 - 关键操作后使用
```
error
```
级别
跳过等待状态 - 确保操作完成后再检查控制台
不清除初始消息 - 页面加载消息会干扰工作流监控
遗漏操作上下文 - 务必记录触发错误的操作
监控过于繁琐 - 不要在每个操作后都检查控制台
忽略网络关联 - 控制台错误通常与网络失败相关
不提供建议 - 错误报告应包含调试步骤建议

Notes

注意事项

Key Principles:

Monitor critical operations - Focus on checkout, submit, auth, payment
Categorize by severity - Use appropriate console levels
Capture rich context - Screenshots + snapshots + messages
Provide actionable reports - Include debugging recommendations
Balance coverage vs noise - Strategic checkpoints, not every action

Console Message Persistence:

Messages accumulate during page lifetime
Page navigation clears console (new document)
Consider clearing messages between checkpoints for clarity

Performance Considerations:

Console checks add minimal overhead (~100-200ms)
Screenshot capture is slower (~500ms-1s)
Balance monitoring thoroughness with workflow speed

Common Patterns:

Critical operations: Check
```
level: "error"
```
immediately after
Form workflows: Check
```
level: "warning"
```
after validation
Debugging: Use
```
level: "info"
```
or
```
level: "debug"
```
for full visibility
Regression testing: Establish baseline, detect new errors

Integration with Network Monitoring:

Combine with
```
browser_network_requests
```
for complete debugging context
Network failures often manifest as console errors
500-series responses typically generate console errors
CORS issues appear in console, not network tab

核心原则：

监控关键操作 - 重点关注结账、提交、认证、支付流程
按严重程度分类 - 使用合适的控制台级别
捕获丰富上下文 - 截图 + 快照 + 消息
提供可执行报告 - 包含调试建议
平衡覆盖范围与噪音 - 设置关键检查点，而非每个操作都检查

控制台消息持久性：

消息在页面生命周期内累积
页面导航会清空控制台（新文档加载）
为清晰起见，可在检查点之间清除消息

性能考虑：

控制台检查的额外开销极小（约100-200ms）
截图捕获较慢（约500ms-1s）
在监控全面性与工作流速度之间取得平衡

常见模式：

关键操作： 操作完成后立即检查
```
level: "error"
```
表单工作流： 验证后检查
```
level: "warning"
```
调试： 使用
```
level: "info"
```
或
```
level: "debug"
```
获取完整可见性
回归测试： 建立基准，检测新出现的错误

与网络监控的集成：

结合
```
browser_network_requests
```
获取完整调试上下文
网络失败通常会表现为控制台错误
500系列响应通常会生成控制台错误
CORS问题会出现在控制台中，而非网络标签页