Handle a link that opens a new tab
intermediate Popups and tabs Challenge 11 of 22
On the order page, View invoice is a link with target="_blank". The current test clicks it and then looks for the invoice heading on the original page, so it always fails. Fix it.
Requirements
- Capture the new tab with
page.waitForEvent('popup')(orcontext.waitForEvent('page')), registered before the click. - Assert the new tab’s URL with
toHaveURLand its “Invoice INV-2041” heading with a web-first assertion. - Do not use
waitForTimeout. - Optionally, close the popup and confirm the original tab still shows the order.
Expected output
The test listens for the popup before clicking, asserts the invoice URL and heading on the new page object, closes it, and confirms the original tab is still on the order page.
Scenarios (2)
Your tests run once against each version of the demo app. They must pass on the working app and fail on every version with a planted bug.
- ○Working app · must pass
- ○Bug: link opens the wrong invoice · must catch
Checks (4)
- ○Waits for the popup (or new page) event
- ○Starts listening before the click
- ○Asserts the new tab's URL with toHaveURL
- ○Does not use a fixed waitForTimeout
example.spec.tsRuns against a live demo app
Ctrl/⌘ + Enter to run tests · your code is saved in this browser
Results
Run the tests to see results here.
Demo app
The working app. You can click around it; your tests start from a fresh copy.