Perform signInWithPopup using Playwright and the Firebase Emulator

social-auth-existing-user.test.ts

test("User should be able to sign-in via social auth", async ({
  page,
}) => {
  const socialLoginButton = page.getByRole("button", { name: /google/i });
  await socialLoginButton.click();

  // This is the important bit - waiting for a popup event, and letting that page stabilize first
  const popup = await page.waitForEvent("popup");
  await popup.waitForLoadState("networkidle");
  
  // This assumes you've pre-populated the FB emulator (i.e. via `--import`)
  popup.getByRole("listitem").first().click();

  await page.waitForURL("/my-url-after-signInWithPopup");
});

social-auth-new-user.test.ts

test("User should be able to sign-in via social auth", async ({
  page,
}) => {
  const socialLoginButton = page.getByRole("button", { name: /google/i });
  await socialLoginButton.click();

  // This is the important bit - waiting for a popup event, and letting that page stabilize first
  const popup = await page.waitForEvent("popup");
  await popup.waitForLoadState("networkidle");
  
  // Use the emulator to create a random new account
  await popup.getByRole("button", { name: /add new account/i }).click();
  await popup.waitForLoadState("networkidle");
  await popup.getByRole("button", { name: /auto-generate/i }).click();
  
  // Get the email address of the new account
  // It doesn't seem to have an accessible name, so hardcode it knowing it's the first input
  const email = await popup.getByRole("textbox").first().inputValue();
  
  await popup.getByRole("button", { name: /sign in/i }).click();
  await page.waitForURL("/my-url-after-signInWithPopup");
});