Fix flaky Playwright account and login tests in Firefox CI

e2e/account.spec.ts

@@ -5,51 +5,51 @@ test.beforeEach(async ({ page }) => {
   await page.goto("/");
 });
 
-test("Account flows", async ({ page }) => {
+test("Account flows", async ({ page }, testInfo) => {
+  const suffix = testInfo.retry > 0 ? `-retry${testInfo.retry}` : "";
+  const groupName = `Test Group for account${suffix}`;
+  const typeName = `Test Type for account${suffix}`;
+  const accountName = `Test Account for account creation${suffix}`;
+  const editedName = `Test Account Edited${suffix}`;
+
   // Login
   await login(page);
 
   // Create type and group so it can be chosen
-  await createGroup(page, "Test Group for account");
-  await createType(page, "Test Type for account");
+  await createGroup(page, groupName);
+  await createType(page, typeName);
 
   // Navigate to accounts page
   await page.getByRole("link", { name: "Accounts" }).click();
 
   // Create
   await page.getByRole("button", { name: "+ New Account" }).click();
-  await page.getByLabel("Name:").fill("Test Account for account creation");
-  await page
-    .getByLabel("Type:")
-    .selectOption({ label: "Test Type for account" });
-  await page
-    .getByLabel("Group:")
-    .selectOption({ label: "Test Group for account" });
+  await page.getByLabel("Name:").fill(accountName);
+  await page.getByLabel("Type:").selectOption({ label: typeName });
+  await page.getByLabel("Group:").selectOption({ label: groupName });
   await page.getByRole("button", { name: "Save" }).click();
-  await expect(
-    page.getByText("Test Account for account creation").first()
-  ).toBeVisible();
+  await expect(page.getByText(accountName).first()).toBeVisible();
 
   // Edit
   await page
-    .getByRole("row", { name: /Test Account for account creation/ })
+    .getByRole("row", { name: new RegExp(accountName) })
     .getByRole("button", { name: "Edit" })
     .first()
     .click();
-  await page.getByLabel("Name:").fill("Test Account Edited");
+  await page.getByLabel("Name:").fill(editedName);
   await page.getByRole("button", { name: "Save" }).click();
-  await expect(page.getByText("Test Account Edited").first()).toBeVisible();
+  await expect(page.getByText(editedName).first()).toBeVisible();
 
   // Delete
   await page
-    .getByRole("row", { name: /Test Account Edited/ })
+    .getByRole("row", { name: new RegExp(editedName) })
     .getByRole("button", { name: "X" })
     .first()
     .click();
   await page
-    .getByRole("row", { name: /Test Account Edited/ })
+    .getByRole("row", { name: new RegExp(editedName) })
     .getByRole("button", { name: "X?" })
     .first()
     .click();
-  await expect(page.getByText("Test Account Edited").first()).not.toBeVisible();
+  await expect(page.getByText(editedName).first()).not.toBeVisible();
 });

e2e/shared-steps.ts

@@ -27,6 +27,7 @@ export async function login(
  */
 export async function logout(page: Page) {
   await page.getByRole("button", { name: "Logout" }).click();
+  await page.waitForURL("**/login**");
   await expect(page.getByRole("link", { name: "Log In" })).toBeVisible();
 }
 

playwright.config.ts

@@ -7,7 +7,7 @@ import { devices } from "@playwright/test";
 const config: PlaywrightTestConfig = {
   testDir: "./e2e",
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 60 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.