skills.rest
DesmondChoy
DesmondChoyCOMMUNITY
Explore all skills by this author →
GitHub

Playwright MCP Testing Guide

Execute systematic Playwright MCP testing workflows for the NANA application.

6|Updated Nov 18, 2025
Search Tags:#automation#testing#qa#playwright#visual testing#nana app
One-click install
npx skills add https://github.com/DesmondChoy/nana --skill playwright-mcp-testing-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Playwright MCP Testing Guide
Source: https://github.com/DesmondChoy/nana/tree/main/.claude/skills/playwright-testing
Command: npx skills add https://github.com/DesmondChoy/nana --skill playwright-mcp-testing-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a structured and systematic approach to visually testing the NANA application using Playwright MCP, ensuring comprehensive coverage and detailed documentation of test results.

Core Features & Use Cases

  • Systematic Testing: Follows detailed checklists for thorough testing.
  • Visual Inspection: Utilizes Playwright MCP for browser snapshots and screenshots.
  • Bug Tracking: Integrates a strict bug handling workflow to stop and fix issues immediately.
  • Use Case: QA engineers can use this skill to perform regression testing on new NANA app builds, ensuring all features function as expected and visual elements are rendered correctly across different pages.

Quick Start

Follow the detailed checklist provided in the Playwright MCP Testing Guide to test the NANA app.

Frequently Asked Questions about Playwright MCP Testing Guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual testing for a web app using Playwright MCP?▼

Automate visual testing with Playwright MCP by executing a systematic workflow that captures browser snapshots and screenshots, verifying that all visual elements render correctly across multiple pages. It follows detailed checklists to ensure comprehensive coverage and documentation of test results.

What is the best way to perform regression testing on new application builds with Playwright?▼

The best way to perform regression testing with Playwright is to follow a structured checklist that covers cross-page functionality, visual inspection, and bug handling. This ensures all features function as expected and visual elements are rendered correctly across different pages.

How does the bug handling workflow work during Playwright automated testing?▼

The bug handling workflow integrates a strict stop-and-fix process during Playwright automated testing. When an issue is encountered, the workflow stops immediately to address and document the bug before proceeding, ensuring defects are resolved on the spot.

Can I use Playwright MCP to test upload and study page functionality?▼

Yes, you can use Playwright MCP to test upload and study page functionality. The testing workflow explicitly supports verifying cross-page functionality, including upload features, study pages, and new features like search, export, and import.

Does Playwright visual testing support cross-page functionality checks for new features?▼

Playwright visual testing supports cross-page functionality checks for new features. The workflow includes specific checklists designed to validate new application capabilities such as search, export, and import functions alongside standard visual regression tests.

Related Skills

Explore More Software Engineering Skills→
sadie100sadie100

playwright-cli

Automate browser interactions and execute test scripts with Playwright.

Community
Intermediate
rakhnianskii9rakhnianskii9

regression-suite

Generate a regression test manifest and status reports from sprint plans and test inventories.

Community
Advanced
hopeoverturehopeoverture
6

github-actions-ci-workflow

Generate GitHub Actions CI/CD workflows for web apps with lint, test, build, and deploy pipelines.

Community
Advanced
no-problem-devno-problem-dev
5

design-diff

Detect and compare UI visual differences with Swift Snapshot Testing and Claude Vision.

Official
Intermediate