sf-browser

Name: sf-browser
Availability: InStock
Author: diane-defores

Automate real-browser page testing to verify content, layout, and performance.

Updated Aug 23, 2026

Search Tags:#accessibility #screenshots #network #browser #console #visual verification #page testing

Ready to run

npx skills add https://github.com/diane-defores/shipflow --skill sf-browser

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sf-browser
Source: https://github.com/diane-defores/shipflow/tree/main/skills/sf-browser
Command: npx skills add https://github.com/diane-defores/shipflow --skill sf-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps users confirm that web pages and applications display correctly by performing real-browser checks, ensuring visual fidelity and observable behaviors match expectations.

Core Features & Use Cases

Page Verification: Open URLs or routes in a real browser to check for specific content, layout, or functionality.
Visual Proof: Capture screenshots or accessibility snapshots to document page states.
Debugging & Diagnostics: Gather console logs and network request summaries to diagnose issues during testing phases.
Use Case: A developer wants to verify that the homepage loads correctly across different environments and displays the main call-to-action button.

Quick Start

Use the sf-browser to visit https://example.com and verify the main headline is visible.

Frequently Asked Questions about sf-browser

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

FAQPage Schema

How do I verify website content and layout in a real browser during local development?▼

Real-browser page testing confirms website content and layout by opening URLs in a browser environment to validate visual fidelity and functional behaviors. It captures screenshots and accessibility snapshots to document page states across local, preview, or production sites.

Can I capture console logs and network requests to diagnose page loading issues?▼

Yes, real-browser page testing gathers console logs and network request summaries to diagnose issues during testing phases. This mechanism helps developers identify frontend errors and network failures by capturing observable behaviors directly from the browser environment.

Do I need Playwright to run visual verification and page testing?▼

Playwright is required to perform real-browser page testing and visual verification. It provides the underlying browser automation environment needed to capture screenshots, accessibility snapshots, console logs, and network request summaries.

What's the best way to automate visual verification for production sites?▼

Automating real-browser page testing is the best way to verify production sites, as it confirms visual fidelity and observable behaviors without manual checks. It validates that specific content, layouts, and call-to-action elements load correctly by capturing visual proof.

Does real-browser page testing work for checking accessibility snapshots?▼

Yes, real-browser page testing supports capturing accessibility snapshots to document page states and verify content visibility. This technique ensures web pages display correctly by providing visual proof that specific elements like headlines are observable to users.

When should I not use real-browser automation for page testing?▼

Real-browser page testing is not suited for lightweight content checks where underlying HTML string parsing is sufficient, as it requires a full browser environment setup. It is designed specifically for visual fidelity, layout confirmation, and observable functional behaviors requiring real rendering.