[BUG] waitForEvent filechooser timeout

• Playwright Version: 1.28.1 / 1.27.1
• Operating System: Windows 10
• Node.js version: 18.12.1 / 7.13.0
• Browser: All expect Firefox, no one in 1.27.1/7.13.0 this is 2 different setups

Code Snippet

import { test, expect } from "@playwright/test";
import dotenv from "dotenv";
dotenv.config();
// ENV
let LoginNew = process.env.LOGIN_NEW || "";
let PwdNew = process.env.PASS_NEW || "";
// ENV
test("censored", async ({ page }) => {
  await page.goto(`${URL}login`);
  await page
    .locator(
      '//*[@id="censored"]/div/div/div/div/div/div/form/div[3]/div[2]/div/div'
    )
    .click();
  await page.getByText("Français").nth(1).click();
  await page.locator('input[name="email"]').type(LoginNew);
  await page.locator('input[name="password"]').type(PwdNew);
  await page.getByRole("button", { name: "censored" }).click();
  await expect(page).toHaveURL(`${URL}`);
  await page.locator(".SkipTutorial").click();
  await page.getByTestId("MenuIcon").click();
  await page.getByRole("link", { name: "censored" }).click();
  await page.locator(".leftContent").click();
  await expect(page).toHaveURL(`${URL}`);
  await page.getByRole("link", { name: "censored" }).click();
  await expect(page).toHaveURL(`${URL}censored`);
  await page.getByRole("button", { name: "censored" }).click();
  await page.waitForTimeout(1000);
  await page.mouse.move(500, 150);
  await page.mouse.down();
  await page.mouse.move(300, 150);
  await page.waitForTimeout(500);
  await page.mouse.move(0, 150);
  await page.mouse.up();
  await page.locator(".startBtn").click();
  const [fileChooser] = await Promise.all([
    page.waitForEvent("filechooser"),
    await page.getByRole("button", { name: "censored" }).click(),
  ]);

  if (await page.locator("//div[@role='dialog']").isVisible()) {
    page.click("(//button[@type='button'])[2]");
  }
  const filesUp = [
    "./divers/censored.png",
    "./divers/censored2.jpg",
    "./divers/censored3.jpg",
  ];
  let rdmfilesUp = filesUp[Math.floor(Math.random() * filesUp.length)];
  await fileChooser.setFiles(rdmfilesUp);

  await page.getByRole("button", { name: "censored" }).click();
  await page.getByRole("button", { name: "censored" }).click();
});

This test is working fine with debug mode, but when I run this in headless, it keep crashing except on Firefox (I guess its due to the fact that I put permissions.default.microphone: 1 & permissions.default.camera: 1 in playwright.config.ts) (I have permissions: ["camera","microphone"] on Chrome too), here is the CLI logs:

! This test is for a React Native app !

Here is the trace:

I have the feeling that it is because of this modal that it timeout/crashes, this modal appears because there are no permissions on the camera

[mxschmitt]

  const [fileChooser] = await Promise.all([
    page.waitForEvent("filechooser"),
    await page.getByRole("button", { name: "censored" }).click(),
  ]);

this should be the following

  const [fileChooser] = await Promise.all([
    page.waitForEvent("filechooser"),
    page.getByRole("button", { name: "censored" }).click(),
  ]);

otherwise the async flow is not guaranteed. You want to have first let the filechooser listener attach and then click, when having an await there, it first does the click and race then most likely.

if (await page.locator("//div[@role='dialog']").isVisible()) {
    page.click("(//button[@type='button'])[2]");
  }

this should also be

if (await page.locator("//div[@role='dialog']").isVisible()) {
    await page.click("(//button[@type='button'])[2]");
  }

(missing await)

Most likely this already makes your script work when you apply these two suggestions. this is unrelated to the permission issue tho.

Let us know if this helps!

[InfectedG]

You can do this for Chromium based browsers to emulate a media device inside your playwright config under the “use section”:

        permissions: ['camera', 'microphone'],
        launchOptions: {
          args: ['--use-fake-device-for-media-stream'],
        }

Since the thread has now quite an amount of context, could we summarise whats the exact issue is and what works / does not work?

I already have theses perms here (Pastebin)

Well, since I’ve written this several times, the browsers timeout all on the same line (EXCEPT FIREFOX) : ‘filechooser’, the technology used is native as simple as that, here it is : https://developer.mozilla.org/fr/docs/Web/API/MediaDevices/getUserMedia

I’ll write a summary for all of you BROWSERS :

Firefox: ✅ working Chromium : ❗ NOT WORKING Google Chrome : ❗ NOT WORKING MS Edge : ❗ NOT WORKING Webkit : ❗ NOT WORKING Guys it doesn’t seem very complicated to understand

    page.waitForEvent("filechooser"),
    page.getByRole("button", { name: "J'ai compris" }).click(),
  ]);
  if (await page.locator("//div[@role='dialog']").isVisible()) {
    await page.click("(//button[@type='button'])[2]");
  }
  const filesUp = [
    "./divers/test.png",
    "./divers/test2.jpg",
    "./divers/test3.jpg",
  ];
  let rdmfilesUp = filesUp[Math.floor(Math.random() * filesUp.length)];
  await fileChooser.setFiles(rdmfilesUp);```