javascriptplaywrightplaywright-test

playwright - click inside a frame is not working

Run the following test to click inside an iframe.

test('click inside a frame', async ({page}) => {
    await page.goto('https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe', {waitUntil: 'domcontentloaded'})
    await page.locator('iframe[name="iframeResult"]').locator("a[title='Menu']").click()
    await page.waitForTimeout(4000)
})

or

 test('click inside a frame', async ({page}) => {
     await page.goto('https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe', {waitUntil: 'domcontentloaded'})
     const frame = await page.frameLocator('iframe[name="iframeResult"]')
     await frame.locator("a[title='Menu']").click()
     await page.waitForTimeout(4000)
})

The test errors out saying waiting for locator('iframe[name="iframeResult"]').locator('a[title=\'Menu\']')

Note: I am able to successfully locate the frame if I do await page.locator('iframe[name="iframeResult"]').highlight()

This is what I am trying to click in the above test enter image description here

and here is the html for what I am trying to click enter image description here

Solution

  • I should have looked at it properly. There is actually an iframe inside another iframe. So, the following works.

    await page
  .frameLocator('iframe[name="iframeResult"]')
  .frameLocator('iframe[title="W3Schools Free Online Web Tutorials"]')
  .locator("a[title='Menu']")
  .click()