Practice Exercises

You have read through 10 lessons. Now write actual code. These exercises cover every scenario from this chapter. Do them in order. Each one builds your muscle memory for a specific complex scenario.

Exercise 1: Iframe Interactions

1. Go to /topics/iframes and locate the iframe using frameLocator()
2. Fill in a form inside the iframe and submit it
3. Verify the success message appears inside the iframe
4. Locate a nested iframe and interact with elements inside it
5. Run with npx playwright test --headed and observe the iframe interactions

Exercise 2: Multi-Tab Flow

1. Go to /topics/windows and click a link that opens in a new tab
2. Use context.waitForEvent('page') to capture the new tab
3. Fill a form in the new tab and submit it
4. Close the new tab and verify results on the original page
5. Create two tabs with context.newPage() and navigate each to different URLs

Exercise 3: Dialog Handling

1. Handle an alert dialog -- verify the message text and accept it
2. Handle a confirm dialog -- test both accept and dismiss outcomes
3. Handle a prompt dialog -- enter text and verify the page uses it
4. Use page.on('dialog') to handle multiple sequential dialogs
5. Verify what happens when you do NOT register a handler (auto-dismiss behavior)

Exercise 4: File Operations

1. Upload a single file using setInputFiles() and verify the filename appears
2. Upload multiple files and verify the count
3. Clear a file selection with setInputFiles([])
4. Download a file, check suggestedFilename(), and save it with saveAs()
5. Verify the downloaded file exists and has content using fs module

Exercise 5: Drag, Hover, and Keyboard

1. Drag an item to a drop zone using dragTo()
2. Implement manual mouse drag with mouse.down(), mouse.move(), mouse.up()
3. Hover over an element and verify the tooltip text
4. Use keyboard.press() to test Ctrl+A, Ctrl+C, Ctrl+V flow
5. Right-click an element and interact with the context menu

Exercise 6: Dropdowns and Date Pickers

1. Select an option from a native <select> dropdown using selectOption()
2. Open a custom dropdown, filter by typing, and select an option
3. Fill a native date input with fill('YYYY-MM-DD')
4. Navigate a calendar widget to a future month and select a date
5. Combine: select a dropdown value, pick a date, and submit the form