Day 24 of 100: async/await — The Syntax of Every Playwright Test

Day 24 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

The most important day of the JavaScript phase. async/await is the skeleton of every test you will ever write.

The Syntax

async function runCheck() {
  const data = await fakeFetch('/users');   // pauses HERE until resolved
  console.log('got ' + data.length + ' users');
  return data.length;                        // async fn returns a promise
}

function fakeFetch(path) {
  return new Promise(res => setTimeout(() => res([1, 2, 3]), 50));
}

runCheck().then(n => console.log('count: ' + n));

The Playwright Shape

// Every test you write looks like this:
// test('user can log in', async ({ page }) => {
//   await page.goto('/login');
//   await page.getByLabel('Email').fill('qa@test.com');
//   await page.getByRole('button', { name: 'Sign in' }).click();
//   await expect(page).toHaveURL(/dashboard/);
// });
// async marks the function. await pauses for each action.

The #1 Bug: Missing await

// BAD — fire and forget, test continues before click finishes
// page.getByRole('button').click();

// GOOD
// await page.getByRole('button').click();

// Missing await = race conditions = the top source of flaky tests.
// TypeScript (Day 59) catches this with no-floating-promises lint.

Sequential vs Parallel

// Sequential — when order matters
async function seq() {
  const a = await fakeFetch('/a');
  const b = await fakeFetch('/b');  // waits for a first
}

// Parallel — independent setup, 2x faster
async function par() {
  const [a, b] = await Promise.all([fakeFetch('/a'), fakeFetch('/b')]);
}

Tomorrow (Day 25): fetch — making real HTTP calls.