[BUG] filechooser not being intercepted when the input is inside an iframe

[niranjan94]

Context:

• Playwright Version: 1.22.0
• Operating System: Mac
• Node.js version: v16.13.0
• Browser: Chromium. (works as expected on firefox and webkit)
• Related issue: https://github.com/microsoft/playwright/issues/11375

Code Snippet

import { chromium } from 'playwright';

async function main() {
  const browser = await chromium.launch({
    headless: false,
  });
  const context = await browser.newContext({});

  const page = await context.newPage();
  page.on('filechooser', (fileChooser) => {
    console.log('file chooser has been triggered');
    fileChooser.setFiles([]);
  });

  await page.goto('https://output.jsbin.com/nugolebuce');

  await page
    .frameLocator('iframe')
    .frameLocator('#result')
    .locator('body > div > input[type=file]')
    .click();
}

main();

Describe the bug

• The filechooser chooser event does not work if the file input is within an iframe. The file chooser dialog is not intercepted as it should be.
• Issue present only on Chromium. Unable to reproduce on Firefox & Webkit.

As a workaround, I'm able to make it work by setFileChooserInterceptedNoReply on the private channel on any frame navigation within the page.

page.on('framenavigated', async (frame) => {
  frame.page()._channel.setFileChooserInterceptedNoReply({ intercepted: true });
});

[niranjan94]

Thanks @yury-s for the quick fix :)

[ShaneyWaris]

Sir, @yury-s , is there any way to choose a single folder with playwright when clicking on a div/button?