Switching between different windows (or tabs) in Playwright

Switching between different windows (or tabs) in Playwright can be done by handling multiple pages within a single browser context. Here's how you can manage and switch between different windows in Playwright:

Opening a New Window

To open a new window, you can use the context.newPage() method, which creates a new tab within the same browser context.

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page (first window)
  const page1 = await context.newPage();
  await page1.goto('https://example.com');

  // Create a new page (second window)
  const page2 = await context.newPage();
  await page2.goto('https://example.org');

  // Switch between pages
  console.log('Current URL of first window:', await page1.url());
  console.log('Current URL of second window:', await page2.url());

  // Perform actions on the second window
  await page2.click('a[href="/some-link"]');

  // Perform actions on the first window
  await page1.click('button#some-button');

  // Close the browser
  await browser.close();
})();

Handling New Windows or Tabs Opened by Actions

Often, a new window or tab is opened by user interactions, such as clicking a link with target="_blank". You can handle these scenarios by listening for the popup event on the page.

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page (first window)
  const page1 = await context.newPage();
  await page1.goto('https://example.com');

  // Listen for a new page (popup) event
  const [newPage] = await Promise.all([
    context.waitForEvent('page'), // Waits for the new page event
    page1.click('a[target="_blank"]') // Perform action that opens a new window/tab
  ]);

  // Ensure the new page is loaded
  await newPage.waitForLoadState();

  // Perform actions on the new page
  console.log('New page URL:', await newPage.url());

  // Perform actions on the first page
  console.log('First page URL:', await page1.url());

  // Close the browser
  await browser.close();
})();

Switching Between Windows

To switch between windows, you can keep track of the Page objects returned when you create or capture new pages. Here’s an example of how to switch between different windows:

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page (first window)
  const page1 = await context.newPage();
  await page1.goto('https://example.com');

  // Create a new page (second window)
  const page2 = await context.newPage();
  await page2.goto('https://example.org');

  // Switch to the first window and perform actions
  console.log('Switched to first window');
  await page1.click('button#some-button');

  // Switch to the second window and perform actions
  console.log('Switched to second window');
  await page2.click('a[href="/some-link"]');

  // Close the browser
  await browser.close();
})();

Closing Windows

You can close windows by calling the close() method on the Page object.

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page (first window)
  const page1 = await context.newPage();
  await page1.goto('https://example.com');

  // Create a new page (second window)
  const page2 = await context.newPage();
  await page2.goto('https://example.org');

  // Close the second window
  await page2.close();

  // Perform actions on the first window
  await page1.click('button#some-button');

  // Close the first window
  await page1.close();

  // Close the browser
  await browser.close();
})();

By managing multiple Page objects, you can easily switch between, interact with, and close different windows or tabs in Playwright.