I've been writing a test for the Google login functionality of a React web app and I've been test-running it through the Playwright VS Code extension where it passes just fine. However, when I run the test through the command line, i.e. npx playwright test, it times out on an assertion that waits on a UI element to appear after the Google login popup closes.
Test file:
test("Validate Google Login", async ({ page }) => {
try {
await page.goto("/");
await page.getByRole("button", { name: "LOGIN" }).click();
// login with Google
const userLogin = process.env.GOOGLE_USER;
const userPassword = process.env.GOOGLE_PASSWORD;
if (!userLogin || !userPassword) throw new Error("Test Credentials not set.");
const popupPromise = page.waitForEvent("popup");
await page.getByText("Log in with Google").click();
const popup = await popupPromise;
await popup.fill('input[type="email"]', userLogin);
await popup.getByRole("button", { name: "Next" }).click();
await popup.fill('#password >> input[type="password"]', userPassword);
await popup.locator("#passwordNext").getByRole("button", { name: "Next" }).click();
// wait for Google popup to close, confirming authentication
await expect(page.getByRole("img", { name: "Avatar" })).toBeVisible(); // times out right here
// verify Login;
const baseURL = config.use?.baseURL;
if (!baseURL) throw new Error("Base URL not set.");
await page.goto(`${baseURL}/profile`);
const locator = page.getByRole("heading", { name: "Profile" });
await expect(locator).toBeVisible();
} catch (error) {
console.error("error: ", error);
}
});
Error log
error: Ze [Error]: Timed out 5000ms waiting for expect(received).toBeVisible()
Call log:
- expect.toBeVisible with timeout 5000ms
- waiting for getByRole('img', { name: 'Avatar' })
After debugging, I find out that it was caused by the browser page closing too early. The page closes as soon as the Google login popup does, causing the assertions to time out.
Am I missing something here? Why does the browser page close before reaching the end of the script and why does it only happen when I run the test through the command line? Again, running and debugging the test with the VS Code extension does not reproduce this issue.
