try to make e2e test less flaky

e2e/helpers.ts

@@ -46,12 +46,23 @@ export async function addItem(page: Page, name: string, quantity = "") {
 }
 
 /** Adds an ingredient to the current meal page. */
-export async function addIngredient(page: Page, name: string, quantity = "") {
+export async function addIngredient(
+  page: Page,
+  name: string,
+  quantity = "",
+  category?: string,
+) {
   await page.fill("#ingredient-name", name);
+  if (category) {
+    await page.selectOption("#ingredient-category", { label: category });
+  }
   if (quantity) {
     await page.fill("#ingredient-quantity", quantity);
   }
   await page.click("#add-ingredient-button");
+  // The form submit is hx-boosted (full body swap to the same URL), so wait for
+  // the new row to appear. This also acts as a settle point so the next action
+  // doesn't race the async body replacement and target a stale form.
   await expect(page.locator(".ingredient-list").filter({ hasText: name })).toBeVisible();
 }
 

e2e/tests/meals.spec.ts

@@ -77,9 +77,7 @@ test("ingredients are grouped under their categories", async ({ page }) => {
   await createMeal(page, "Spaghetti Bolognese", "");
 
   // Add an ingredient in the default "Produce" category.
-  await page.fill("#ingredient-name", "Tomato");
+  await addIngredient(page, "Tomato", "", "Produce");
-  await page.selectOption("#ingredient-category", { label: "Produce" });
-  await page.click("#add-ingredient-button");
 
   // Add one without a category.
   await addIngredient(page, "Penne");