Switching to iFrame in Playwright

In Playwright, you can switch to an iframe class='youtube-video' using the frame method on the Page object or by using the frame method to get the iframe by its name, URL, or other attributes. Here's how you can do it:

Switching to an iframe by Name or URL

If you know the name or URL of the iframe, you can switch to it directly.

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

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com'); // Replace with your URL containing an iframe

  // Get the iframe by name or URL
  const frame = page.frame({ name: 'frameName' }); // or by URL: page.frame({ url: 'https://example-iframe.com' })

  // Perform actions within the iframe
  if (frame) {
    await frame.click('button#some-button');
    console.log(await frame.title());
  }

  await browser.close();
})();

Switching to an iframe by Index or Selector

If you don't know the name or URL, you can get the iframe by its index or using a selector.

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

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com'); // Replace with your URL containing an iframe

  // Get the iframe by index (e.g., the first iframe on the page)
  const frames = page.frames();
  const frame = frames[1]; // Adjust the index as needed

  // Perform actions within the iframe
  if (frame) {
    await frame.click('button#some-button');
    console.log(await frame.title());
  }

  // Get the iframe by a selector
  const elementHandle = await page.$('iframe');
  const frameFromSelector = await elementHandle.contentFrame();

  if (frameFromSelector) {
    await frameFromSelector.click('button#some-button');
    console.log(await frameFromSelector.title());
  }

  await browser.close();
})();

Switching to an iframe using the ElementHandle

You can also switch to an iframe using the ElementHandle of the iframe element.

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

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com'); // Replace with your URL containing an iframe

  // Get the iframe element handle
  const iframeElement = await page.$('iframe');

  // Get the frame from the element handle
  const frame = await iframeElement.contentFrame();

  // Perform actions within the iframe
  if (frame) {
    await frame.click('button#some-button');
    console.log(await frame.title());
  }

  await browser.close();
})();

Complete Example

Here is a complete example demonstrating switching to an iframe and interacting with it:

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

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.w3schools.com/html/html_iframe.asp'); // Example URL with an iframe

  // Get the iframe by selector
  const iframeElement = await page.$('iframe[title="W3Schools HTML Tutorial"]');
  const frame = await iframeElement.contentFrame();

  // Perform actions within the iframe
  if (frame) {
    await frame.click('a[title="HTML Table Reference"]'); // Example action within the iframe
    console.log(await frame.title());
  }

  await browser.close();
})();

This example opens a web page with an iframe, switches to the iframe, and performs actions within it. You can adapt this code to your specific use case and the structure of the web pages you are testing.