Why the web is asynchronous
The plain-English story of why JavaScript can't just wait — no code yet.
Step 1
The idea
This lesson has no code. It's the most important concept lesson in the entire course.
Every beginner who gets confused by Playwright — every error that says "element not found", every test that passes locally but fails in CI — almost always comes back to one misunderstood idea:
The web does not wait for you.
To understand why, imagine ordering at a restaurant. The moment you order, you don't freeze and stare at the kitchen until your food arrives. The waiter writes down your order, goes to the next table, comes back, takes another order. The kitchen is working on your food in the background.
That's asynchronous. Multiple things happening at once, without waiting for each other to finish.
Step 2
See it run
No code to run — but here's what's actually happening when a browser loads a page:
Browser sends request
Your browser asks a server for the page. This takes time — maybe 200ms, maybe 2 seconds on a slow connection.
Server processes
The server runs code, queries a database, builds the HTML. The browser waits.
Response arrives
HTML arrives. The browser starts rendering — but images, fonts, and JavaScript files are separate requests. They load in parallel.
JavaScript runs
Scripts execute — they may load more data, show/hide elements, run timers. None of this is instant.
All of this happens in fractions of a second — but it still takes some time. And a Playwright script that doesn't account for that time will try to click a button that hasn't appeared yet.
Step 3
Now you try
No code to write. Do this instead:
Open your browser's developer tools (F12 → Network tab). Visit any website. Watch the waterfall of requests loading in order, some in parallel, some waiting for others.
That waterfall is why asynchronous matters. Your test is running while that waterfall is still loading.
Step 4
Why a tester cares
Asynchronous code is everywhere in real JavaScript programs — not just in Playwright. The most common example you'll encounter: fetching data from an API.
The broken mental model:
"I asked for the data. So the next line can use it — it's there now."
The correct mental model:
"Asking takes time. The data travels over a network. I must wait for it to arrive before I can use it."
In the next three lessons you'll learn the JavaScript tools for handling this: Promises, async/await, and try/catch. These are core JavaScript skills — not specific to any framework.
Recap
- 1The web is asynchronous — browser requests take time, and things don't happen instantly.
- 2A test script runs faster than the page loads — you must explicitly wait.
- 3await tells JavaScript to pause and wait for an asynchronous operation to finish before continuing.
Up next
Lesson 1.14 — Promises