What a website is made of
You click a button — what actually happens behind the scenes?
Step 1
The idea
Think of a restaurant. There are two worlds:
Front of house — the dining room, the menu, the waiter, the plates. This is what the customer sees and touches.
Back of house (the kitchen) — the chefs, the ovens, the ingredients, the orders. The customer never sees this, but everything depends on it.
A website works exactly the same way. The front is what you see. The back is what runs when you click something.
Step 2
See it run
Let's walk through exactly what happens when you click "Add to Cart" on Amazon:
Your browser sends a message to Amazon's servers: 'User 48291 wants to add item B09XYZ to cart.'
Amazon's backend code runs. It checks if the item is in stock, if you're logged in, and calculates the price.
Your cart record in Amazon's database is updated to include the new item.
Amazon's server sends back a message: 'Done. Cart now has 3 items.'
The cart icon in the corner changes from 2 to 3. You see the confirmation.
All of that happens in under a second. And every single step is something a tester might need to check.
Step 3
Now you try
Open any website — this one, Google, YouTube, anything. Then right-click on the page and click "Inspect" (or press F12).
What you'll see:
- • A panel with lots of colourful code — that's the HTML (the structure of the page)
- • Hover over any HTML line — it highlights part of the page
- • That's the exact element Playwright will click, fill, or read in a test
Step 4
Why a tester cares
Playwright controls the front of house — the part users see. It opens a browser, finds elements in the HTML, and interacts with them exactly like a user would.
// Find the "Add to Cart" button on the page
await page.getByRole('button', { name: 'Add to Cart' }).click();
// Check that the cart count updated
await expect(page.getByLabel('Cart items')).toContainText('3');Understanding what a website is made of helps you understand why Playwright works the way it does. It's finding and clicking real HTML elements — the same ones the user sees.
Recap
- 1Websites have a front (HTML/CSS/JS the user sees) and a back (servers/databases the user doesn't see).
- 2When you click something, a chain of events fires — request → server → database → response → UI update.
- 3Playwright tests the front — it controls a real browser and interacts with real HTML elements.