skills.rest
MetaMask
MetaMaskOFFICIAL
Explore all skills by this author →
Website𝕏@metamaskGitHub

metamask-visual-testing

Launch and test the MetaMask Chrome extension with Playwright in headless sidepanel mode.

13.2k|5.6k|Updated Sep 6, 2015
Search Tags:#browser automation#playwright#e2e testing#visual regression#chrome extension#metamask
One-click install
npx skills add https://github.com/MetaMask/metamask-extension --skill metamask-visual-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: metamask-visual-testing
Source: https://github.com/MetaMask/metamask-extension/tree/main/.claude/skills/metamask-visual-testing
Command: npx skills add https://github.com/MetaMask/metamask-extension --skill metamask-visual-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables automated visual testing and validation of the MetaMask Chrome extension's user interface, ensuring UI changes are correct and flows function as expected.

Core Features & Use Cases

  • Visual Validation: Test UI changes in a real browser environment.
  • Flow Testing: Verify onboarding, unlock, and transaction confirmation flows.
  • Screenshot Capture: Capture UI states for regression testing and debugging.
  • Use Case: After updating the MetaMask UI for transaction confirmations, use this Skill to automatically launch the extension, trigger a test transaction, and capture screenshots before and after the confirmation to visually verify the changes.

Quick Start

Launch the MetaMask extension and describe the current screen.

Frequently Asked Questions about metamask-visual-testing

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

FAQPage Schema
How do I automate visual regression testing for a Chrome extension using Playwright?▼

You can automate visual regression testing for a Chrome extension by launching it in headless sidepanel mode with Playwright, capturing screenshots of UI states to validate changes and debug visual issues.

Can I test MetaMask onboarding and transaction confirmation flows in a browser environment?▼

Yes, you can test MetaMask onboarding, unlock, and transaction confirmation flows by launching the extension in a real browser environment and interacting with UI elements via a command-line interface.

How does Playwright capture screenshots for e2e testing of browser extension UIs?▼

Playwright captures screenshots for e2e testing by launching the extension in headless sidepanel mode, interacting with UI elements, and capturing visual states for regression validation.

Does Playwright support running Chrome extensions in headless mode for automated testing?▼

Yes, Playwright supports running Chrome extensions in headless sidepanel mode to facilitate automated visual validation and end-to-end testing of UI changes.

What is the best way to verify UI changes in MetaMask after an update?▼

The best way to verify UI changes is to launch the extension with Playwright, trigger test transactions, and capture screenshots before and after confirmation to visually validate the updates.

Are there limitations when testing Chrome extensions in headless sidepanel mode?▼

Testing in headless sidepanel mode focuses on visual validation and UI interaction via CLI, which may not cover complex background processing or non-visual extension logic.

Related Skills

Explore More Software Engineering Skills→
X-School-AcademyX-School-Academy
19

init-playwright

Initialize and verify Playwright CLI, Google Chrome, and the Playwright MCP Bridge extension.

Official
Intermediate
EvolutionAPIEvolutionAPI
520

dev-visual-verdict

Compare before and after screenshots to detect visual regressions in UI components.

Official
Intermediate
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate