Web App Testing
Parent: Software Engineering Patterns · Published reference · snapshot 2026-09-08
↓ Facts as markdownall context files
To test local web applications, write native Python Playwright scripts.
These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.
Web Application Testing
- To test local web applications, write native Python Playwright scripts. [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#web-application-testing]
- Helper Scripts Available: [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#web-application-testing]
- scripts/with_server.py - Manages server lifecycle (supports multiple servers) [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#web-application-testing]
- Always run scripts with --help first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window. [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#web-application-testing]
Example: Using with_server.py
- To start a server, run --help first, then use the helper: [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#example-using-with_serverpy]
- Multiple servers (e.g., backend + frontend): [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#example-using-with_serverpy]
- To create an automation script, include only Playwright logic (servers are managed automatically): [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#example-using-with_serverpy]
Reconnaissance-Then-Action Pattern
- Inspect rendered DOM: [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reconnaissance-then-action-pattern]
- Identify selectors from inspection results [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reconnaissance-then-action-pattern]
- Execute actions using discovered selectors [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reconnaissance-then-action-pattern]
Common Pitfall
- ❌ Don't inspect the DOM before waiting for networkidle on dynamic apps ✅ Do wait for page.wait_for_load_state('networkidle') before inspection [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#common-pitfall]
Best Practices
- Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in scripts/ can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use --help to see usage, then invoke directly. [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#best-practices]
- Use sync_playwright() for synchronous scripts [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#best-practices]
- Always close the browser when done [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#best-practices]
- Use descriptive selectors: text=, role=, CSS selectors, or IDs [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#best-practices]
- Add appropriate waits: page.wait_for_selector() or page.wait_for_timeout() [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#best-practices]
Reference Files
- examples/ - Examples showing common patterns: [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reference-files]
- element_discovery.py - Discovering buttons, links, and inputs on a page [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reference-files]
- static_html_automation.py - Using file:// URLs for local HTML [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reference-files]
- console_logging.py - Capturing console logs during automation [archived source: https://llms-explorer.com/sources/mdb-context-hub/webapp-testing/#reference-files]
Where this helps
- Automating end-to-end checks of a local web app during development, before wiring up a full CI test suite. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Verifying a dynamic, JS-rendered page's behavior (element discovery, form interaction, console output) when static HTML inspection isn't enough. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Testing a multi-service local setup, such as backend plus frontend, where server lifecycle needs to be managed alongside browser automation. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Debugging why an automated interaction fails intermittently on a page that loads content asynchronously after initial render. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Project ideas
- Write a Playwright script using the reconnaissance-then-action pattern: inspect the rendered DOM first, identify selectors, then execute actions against them. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Build an automation script for a multi-server local app using with_server.py to manage backend and frontend lifecycles together. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Create a console-logging harness that captures browser console output during automated interaction, to catch client-side errors that don't show up in server logs. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Write a static-HTML automation example using file:// URLs to validate Playwright selectors before pointing them at a live server. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Antipatterns
- Inspecting the DOM before waiting for page.wait_for_load_state('networkidle') on a dynamic app — the inspection runs against a page that hasn't finished loading its content. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Reading a bundled helper script's source code before running it with --help, which pollutes the context window with a script meant to be used as a black box. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Using brittle, structure-dependent selectors instead of descriptive ones (text=, role=, stable CSS/IDs), making the script fragile to layout changes. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Forgetting to close the browser at the end of a script, leaving orphaned browser processes running. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Known issues
- Reconnaissance-then-action requires an extra round trip (inspect, then act) compared to hardcoding selectors, which adds friction for very simple automation tasks. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- wait_for_load_state('networkidle') isn't reliable on pages with long-polling or persistent background requests, since network activity may never truly go idle. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Helper scripts designed as black boxes trade transparency for context efficiency — when a script's default behavior doesn't fit the task, understanding why requires reading the source anyway. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Synchronous Playwright (sync_playwright()) doesn't compose well with an already-async codebase, which can force an awkward split between sync test scripts and async application code. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Children
- Playwright Integration (frontier)
- Frontend Functionality Verification (frontier)
- Browser Screenshot Capture (frontier)
- Browser Log Inspection (frontier)
Frontier under this node: Browser Log Inspection, Browser Screenshot Capture, Frontend Functionality Verification, Playwright Integration