skills.rest
NangoHQ
NangoHQOFFICIAL
Explore all skills by this author →
Website𝕏@NangoHQGitHub

ui-visual-debugging

Captures and compares Playwright screenshots to visually debug Nango frontend UI changes.

11.7k|1.3k|Updated Apr 9, 2020
Search Tags:#playwright#ui testing#screenshot#Frontend#Browser Automation#visual debugging#Nango
One-click install
npx skills add https://github.com/NangoHQ/nango --skill ui-visual-debugging
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-visual-debugging
Source: https://github.com/NangoHQ/nango/tree/main/.agents/skills/ui-visual-debugging
Command: npx skills add https://github.com/NangoHQ/nango --skill ui-visual-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

Frontend changes to the Nango dashboard or Connect UI can introduce visual regressions that are hard to catch without a repeatable screenshot and verification workflow, especially when coordinating local dev servers and browser automation.

Core Features & Use Cases

  • Baseline and post-edit screenshots: Capture desktop screenshots of the webapp (localhost:3000) and Connect UI (localhost:3009) with headless Playwright before and after UI edits.
  • Headless interaction flows: Run temporary Playwright scripts for clicks, form filling, and authentication flows against dashboard pages like Integrations, Connections, and Logs.
  • Startup troubleshooting: Work around Knex migration errors by validating against a temporary Postgres database without touching the user's data.
  • Use Case: After modifying a component in packages/webapp, capture a baseline screenshot, apply the edit, run the TypeScript build, and compare fresh screenshots to confirm no visual regression.

Quick Start

Take a screenshot of the Nango dashboard at localhost:3000 and compare it with the UI after my CSS changes.

Frequently Asked Questions about ui-visual-debugging

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

FAQPage Schema
How do I take a screenshot of a local web app with Playwright?▼

Run npx playwright screenshot with the browser, viewport size, target URL, and output path, for example capturing localhost:3000 at 1512x862 into a .context directory. If Chromium is missing, run npx playwright install chromium first.

How to test frontend UI changes without affecting the user's browser?▼

Use headless Playwright or a browser-controlled automation context instead of opening tabs in the user's existing browser. Save screenshots, traces, and throwaway scripts in a scratch directory like .context so nothing is committed.

When should I use Peekaboo instead of Playwright for UI debugging?▼

Use Peekaboo only when the task requires the real macOS desktop, native windows, a visible browser session, or Accessibility tree inspection. For routine web UI checks, headless or browser-controlled Playwright is preferred.

Why does the Nango server fail with a Knex migration directory corrupt error?▼

This happens when the local database contains migrations from another branch. For visual validation only, create a temporary database such as nango_ui_skill_validation and point NANGO_DB_NAME at it instead of resetting the user's database.

How do I verify frontend changes after editing Nango webapp code?▼

Run npm run ts-build, or npm run build inside packages/webapp for webapp-only work, and npm run connect-ui:build for Connect UI. Then capture fresh desktop screenshots and compare them against the baseline.

Related Skills

Explore More Software Engineering Skills→
matchaconematchacone

pre-flight

Validate environment variables, dependencies, database connectivity, and dev server startup.

Community
Intermediate
JacobPEvansJacobPEvans
3

sync-main

Fetch remote main updates and merge them into the current branch.

Community
Intermediate
edonyzpcedonyzpc
149

obsidian-test-vault-smoke

Validate Obsidian plugin changes via tiered end-to-end smoke tests.

Community
Advanced
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced