In this section, we will explore how to handle multiple pages and frames using Playwright. This is a crucial skill for testing complex web applications that involve pop-ups, new tabs, or embedded content such as iframes. By the end of this section, you will be able to manage these elements effectively in your test scripts.
Key Concepts
- Multiple Pages: Often, web applications open new tabs or windows. Playwright provides methods to handle these scenarios seamlessly.
- Frames: Frames (or iframes) are HTML documents embedded within another HTML document. Playwright allows you to interact with these frames as if they were separate pages.
Working with Multiple Pages
When a new page is opened (e.g., a new tab), Playwright can detect and handle it. Here's how you can manage multiple pages:
Example: Handling a New Tab
import { chromium, Page } from 'playwright';
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');
// Assume clicking this link opens a new tab
const [newPage] = await Promise.all([
context.waitForEvent('page'), // Wait for the new page event
page.click('a[target="_blank"]') // Click the link that opens a new tab
]);
await newPage.waitForLoadState();
console.log(await newPage.title());
await browser.close();
})();Explanation
context.waitForEvent('page'): This waits for a new page to be opened.Promise.all: Ensures that the click and the page opening are synchronized.newPage.waitForLoadState(): Waits for the new page to load completely.
Working with Frames
Frames can be tricky, but Playwright makes it straightforward to interact with them.
Example: Interacting with an Iframe
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/iframe-page');
// Access the iframe
const frame = page.frame({ url: /iframe-url/ });
if (frame) {
const content = await frame.textContent('h1');
console.log(content);
} else {
console.log('Frame not found');
}
await browser.close();
})();Explanation
page.frame({ url: /iframe-url/ }): Selects the frame based on its URL.frame.textContent('h1'): Retrieves the text content of an element within the frame.
Practical Exercises
Exercise 1: Handle a New Window
- Navigate to a page that opens a new window.
- Capture the new window and print its URL.
Solution:
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');
const [newPage] = await Promise.all([
context.waitForEvent('page'),
page.click('button#open-window')
]);
await newPage.waitForLoadState();
console.log(newPage.url());
await browser.close();
})();Exercise 2: Interact with a Frame
- Navigate to a page with an iframe.
- Fill a form inside the iframe and submit it.
Solution:
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/iframe-form');
const frame = page.frame({ url: /form-iframe/ });
if (frame) {
await frame.fill('input[name="username"]', 'testuser');
await frame.fill('input[name="password"]', 'password123');
await frame.click('button[type="submit"]');
}
await browser.close();
})();Common Mistakes and Tips
- Not waiting for the page to load: Always ensure the new page or frame is fully loaded before interacting with it.
- Incorrect frame selection: Use the correct selector or URL pattern to identify the frame.
Conclusion
Handling multiple pages and frames is essential for testing modern web applications. By mastering these techniques, you can create robust and reliable test scripts that cover a wide range of scenarios. In the next section, we will delve into network interception and mocking, further enhancing your testing capabilities.
Playwright with TypeScript: From Beginner to Advanced
Module 1: Introduction to Playwright and TypeScript
- What is Playwright?
- Setting Up Your Development Environment
- Introduction to TypeScript
- Basic TypeScript Syntax
Module 2: Getting Started with Playwright
- Installing Playwright
- Creating Your First Playwright Script
- Understanding Playwright's Core Concepts
- Running Playwright Tests
Module 3: Playwright and TypeScript Basics
- Writing Tests in TypeScript
- Using TypeScript Interfaces and Types
- Debugging Playwright Tests
- Handling Asynchronous Code
Module 4: Advanced Playwright Features
- Working with Selectors
- Handling Multiple Pages and Frames
- Network Interception and Mocking
- Emulating Devices and Geolocation
Module 5: Test Automation Strategies
- Organizing Tests and Test Suites
- Using Fixtures and Hooks
- Parallel Test Execution
- Continuous Integration with Playwright
Module 6: Advanced TypeScript Techniques
- Generics in TypeScript
- Advanced TypeScript Types
- TypeScript Decorators
- TypeScript and Playwright Best Practices
Module 7: Real-World Playwright Applications
- End-to-End Testing with Playwright
- Visual Testing with Playwright
- Performance Testing with Playwright
- Case Study: Implementing Playwright in a Project