12. Orchestrating Async Browser Workflows

The Golden Rule: Always await Browser Actions

// ❌ WRONG: Fires click asynchronously and immediately tries to fill before page is ready!
page.click("#login-btn");
page.fill("#code", "1234");
// ✅ CORRECT: Awaits click completion and actionability:
await page.click("#login-btn");
await page.fill("#code", "1234");

Sequential vs Parallel Automation

// Sequential: Step 2 requires Step 1
await page.goto("/checkout");
await page.fill("#address", "123 Main St");
await page.click("#pay-button");
// Parallel: Preparing independent test preconditions
const [userProfile, cartItems] = await Promise.all([
  fetchUserProfile(userId),
  fetchCartContents(userId)
]);