Lilly Tech Systems
Debugging Intermediate
When Playwright tests fail, GitHub Copilot provides powerful debugging tools right in VS Code. Use the /fix command to auto-repair broken tests, /explain to understand errors, and Copilot Chat for complex debugging strategies.
1. Using /fix for Failing Tests
When a test fails, select the failing test code and use /fix in Copilot Chat:
# Select the failing test, then: /fix This test fails with: "locator.click: Error: strict mode violation: getByRole('button', { name: 'Submit' }) resolved to 2 elements" # Copilot suggests a more specific locator: # Change: page.getByRole('button', { name: 'Submit' }) # To: page.getByRole('button', { name: 'Submit' }).first() # Or: page.getByTestId('checkout-submit')
2. Using /explain for Understanding Errors
When you don't understand why a test is failing, use /explain to get a plain-language explanation:
# Select the error output, then: /explain Why is this Playwright test timing out? Error: Test timeout of 30000ms exceeded. at tests/e2e/checkout.spec.ts:24:5 # Copilot explains: # "The test is timing out because it's waiting for # an element that never appears. The selector # page.getByText('Order Confirmed') doesn't match # any element on the page. This could mean: # 1. The success message text has changed # 2. The form submission isn't completing # 3. There's an error preventing the redirect"
3. Copilot Chat for Debugging Strategies
Ask Copilot Chat for comprehensive debugging approaches:
@workspace My Playwright test for the checkout flow is intermittently failing. Sometimes it passes and sometimes it times out on the payment step. What debugging steps should I take to identify the root cause? # Copilot suggests a systematic approach: # 1. Enable trace recording to capture the failing run # 2. Add explicit waits for the payment API response # 3. Check for race conditions in the payment form # 4. Verify the test data isn't being shared across runs
4. Auto-Fixing Selectors
When locators break due to UI changes, Copilot can suggest updated selectors:
# Open the updated component file alongside the test, then:
@workspace The button selector in this test is broken because
the component was updated. Look at #file:src/components/LoginForm.tsx
and suggest the correct selector for the submit button.
| Error Type | Copilot Command | What It Does |
|---|---|---|
| Broken locator | /fix with error message |
Suggests updated selectors |
| Timeout error | /explain the error |
Identifies what the test is waiting for |
| Assertion failure | /fix with expected vs actual |
Updates assertions to match current behavior |
| Flaky test | Chat: "Why is this test flaky?" | Identifies race conditions and timing issues |
5. Trace Analysis with AI Help
After running tests with trace enabled, use Copilot Chat to analyze the results:
I ran my Playwright test with tracing enabled and the trace shows that after clicking the "Submit" button, the page navigates to /error instead of /success. The network tab shows a 422 response from /api/orders with the message "Invalid card number". How should I fix the test? # Copilot identifies the issue and suggests: # "The test is using an invalid card number. Update # the test data to use a valid test card number # (e.g., Stripe's test card: 4242424242424242)"
6. Performance Debugging
Use Copilot to diagnose slow tests:
@workspace This Playwright test takes 45 seconds to run. Analyze the test code and suggest ways to make it faster. #file:tests/e2e/full-checkout.spec.ts # Copilot might suggest: # 1. Use API calls to set up cart state instead of UI interactions # 2. Reuse authentication state across tests # 3. Mock slow API calls in the test environment # 4. Replace waitForTimeout with waitForResponse
Practice Debugging
Break a passing test on purpose (change a locator, update an assertion), then use Copilot's /fix and /explain commands to diagnose and repair it. Try different types of failures to build familiarity with the workflow.
Next: Best Practices →