GitHub Copilot prompt to write end-to-end tests
End-to-end tests written blind tend to invent selectors that never existed. This prompt attaches the actual checkout component to the chat so GitHub Copilot writes Playwright locators against real markup, stubs the payment gateway at the network layer, and asserts concrete confirmation text rather than a page that merely loaded.
Last updated
Write Playwright end-to-end tests for the checkout flow in tests/e2e/checkout.spec.ts. Cover three journeys: guest adds an item and pays, a saved-card user pays in two clicks, and a declined card returns the shopper to the payment step with the cart intact. Select elements by role and accessible name, never by CSS class, and add data-testid only where no accessible handle exists, noting each addition in the diff. Attach #file:src/pages/Checkout.tsx to the chat so locators match the real markup instead of guessed ids. Stub the payment provider at the network layer with page.route, one fixture for success and one for decline, so no test hits a live gateway. Each test must assert the final URL and one on-page confirmation string, not just the absence of errors. I will run npx playwright test --project=chromium and expect all three to pass headless.
Same task in other tools
Questions about this prompt
Why stub the gateway with page.route instead of a sandbox account?
Network-level fixtures make runs deterministic and keep decline testing to a one-line fixture change. Sandbox accounts add credentials to CI and fail in ways that have nothing to do with your checkout code.
How do I add coverage for more flows?
One spec file per journey, and attach the matching page component with #file each time so new locators come from real markup. Share the route stubs through a common fixtures file rather than pasting them.
Locators pass locally but miss in CI. What is the usual cause?
Button copy diverged from what the accessible-name locator expects, often through a copy edit or locale difference. Source the expected strings from the same constants module the app renders.