Lesson 8 / الدرس 8

How a machine uses a browser / كيف تستخدم الآلة متصفحًا

A browser test is a program that opens a real browser and works it like a very fast, very literal person. Understanding that it is literal — and what it cannot see — is what stops you expecting things of it that it will never do.

اختبار المتصفح برنامج يفتح متصفحًا حقيقيًا ويشغّله كإنسان سريع جدًا وحرفيّ جدًا. وفهم أنه حرفيّ — وما الذي لا يستطيع رؤيته — هو ما يمنعك من توقّع أشياء لن يفعلها أبدًا.

Playwright, Selenium, Cypress and the rest all do the same job: start a real browser, find elements in the page, and act on them. The browser is not simulated — it is Chrome or Firefox, rendering the real page, running the real JavaScript. What differs between the tools is the language and the conveniences, not the idea.

Every test is the same four moves

Go somewhere. Open a URL, in a browser with no history, no cookies and nobody signed in.
Find something. The button, the field, the message. This is where browser tests are won and lost, and it is the next lesson.
Do something to it. Click, type, choose, upload.
Assert. The URL, the text, whether something is visible. Everything before this was setup.

import { test, expect } from '@playwright/test';

test('a visitor can open a lesson from the course page', async ({ page }) => {
  await page.goto('/course/testing');                       // go

  await page.getByRole('link', { name: /What testing/ })    // find
      .click();                                             // do

  await expect(page).toHaveURL(/lesson\/testing\//);       // assert
  await expect(page.getByRole('heading', { level: 1 }))
      .toContainText('What testing');
});

A complete browser test, and it is four lines of intent wrapped in ceremony. Note await on every line: the browser is a separate process and every instruction takes real time.

اختبار متصفح كامل، وهو أربعة أسطر من المقصد ملفوفة بمراسم. ولاحظ await في كل سطر: فالمتصفح عملية منفصلة وكل تعليمة تستغرق وقتًا حقيقيًا.

What it cannot see

The driver reads the page's structure, not its appearance. It knows an element exists, what its text is, and whether the browser considers it visible. It does not know that the text is white on white, that two elements overlap, that the layout collapsed on a phone, or that the Arabic is running the wrong way. Every one of those passes every assertion you can write about presence and text.

Check yourself / اختبر نفسك

1. What can a browser test NOT detect?

2. Why does every line of a Playwright test use await?

3. A team's browser suite is entirely green. What does that prove?