playwright

Write and run purpose-built Playwright scripts to verify Angular UI behavior in a real browser.

1|Updated Jul 18, 2025

Search Tags:#angular #browser automation #playwright #e2e testing #ui verification #chromium #form testing

Ready to run

npx skills add https://github.com/gusgad/service-agent-by-sap --skill playwright-gusgad

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/gusgad/service-agent-by-sap/tree/main/.agents/skills/playwright
Command: npx skills add https://github.com/gusgad/service-agent-by-sap --skill playwright-gusgad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Verifying that an Angular client UI actually works end-to-end—pages rendering, forms submitting, navigation redirecting—requires driving a real browser, and ad-hoc manual clicking is slow and unrepeatable. ## Core Features & Use Cases - On-Demand Browser Scripts: Generates small, task-specific Playwright scripts for one-off verification rather than maintaining a generic test suite. - Repo-Aware Workflow: Knows this repo's setup (Angular client on port 4200, Express API on port 3000) and enforces reliable waits, scratch-path scripts, and parameterized URLs. - Use Case: Ask to verify that the job-request form submits successfully; the Skill starts the dev server if needed, writes a script that fills the form, waits for the success message, and captures a screenshot. ## Quick Start Use the playwright skill to verify that the requests page at localhost:4200 renders job rows from the API.

Frequently Asked Questions about playwright

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

FAQPage Schema

How do I test an Angular app end-to-end with Playwright?▼

Write a small Playwright script that launches Chromium, navigates to the dev server URL, and interacts with the page using role or formcontrolname selectors. Always wait on real signals like waitForSelector or networkidle rather than fixed timeouts, since Angular rendering is asynchronous.

How to fill and submit a form in Playwright?▼

Use page.fill with the input's formcontrolname selector, page.selectOption for dropdowns, and page.click on the submit button. Then wait for a success indicator such as a role=alert element to confirm the submission completed.

Does Playwright need to be installed before running browser checks?▼

Yes, Playwright is not a dependency of this repo's client or agent packages. Install it once with npm install -D @playwright/test and run npx playwright install chromium to download the browser binary.

Why does Playwright fail to find elements right after page navigation?▼

The element is missing because Angular has not finished rendering after navigation. Add waitForSelector or waitForLoadState('networkidle') before interacting, and avoid relying on waitForTimeout as the only guard.

When should I use headless versus headed mode in Playwright?▼

Use headless: false when a human is watching or debugging the run, and headless: true for quick unattended checks or non-interactive contexts. Adding slowMo: 100 helps when someone needs to follow the actions visually.