Modul 0: Kurs xəritəsi və quraşdırma

Xoş gəldiniz! Bu modul kursun başlanğıc nöqtəsidir. Heç bir əvvəlki Playwright təcrübəsi olmadan, bu modulun sonunda işləyən bir test yazacaq və onu öz kompüterinizdə işlədəcəksiniz.

🎬 Video tezliklə əlavə olunacaq

Playwright nədir və niyə vacibdir

Playwright — Microsoft tərəfindən hazırlanmış açıq mənbəli brauzər avtomatlaşdırma freymvorkudur. Chromium, Firefox və WebKit (Safari) brauzerlərini dəstəkləyir, yəni bir test bütün əsas brauzerlərdə işləyə bilər.

Niyə Playwright seçilir?

Sürətlidir — testlər paralel işləyir
Etibarlıdır — avtomatik gözləmə sayəsində sleep() yazmazsınız
Güclüdür — API testi, şəbəkə müdaxiləsi, auth vəziyyəti, mobil emulasiya — hamısı daxildir
Azərbaycan dilində resurslar var — BrauzerLab məhz bunun üçün yaradılıb

Yadda saxla: Playwright Chromium, Firefox və WebKit-i idarə edir, ona görə bir test bütün əsas brauzerləri əhatə edir — avtomatik gözləmə ilə (sleep() yoxdur).

Kurs boyu nə quracağıq

Bu kurs boyu real, işlənən bir avtomatlaşdırma layihəsi quracağıq. Hər modul bir yeni qat əlavə edir:

Modul 0–3: Əsaslar — quraşdırma, lokatorlar, əməliyyatlar
Modul 4–6: Keyfiyyət — iddialar, flaky test qarşısının alınması, konfiqurasiya
Modul 7–10: Miqyas — POM, fixtures, API, auth
Modul 11–13: Peşəkar səviyyə — vizual test, CI, yekun layihə

POM, fixtures və ya CI kimi terminlər yenidirsə narahat olma — hər birinə çatanda ona ayrıca modul ayrılır.

Manual QA-dan avtomatlaşdırmaya keçid (düşüncə tərzi)

Manual QA-da siz hər addımı özünüz əllə icra edirsiniz: “Bu düyməyə basıram, bu mətn görünür, bu URL dəyişir.” Avtomatlaşdırmada isə həmin addımları kod şəklində yazırsınız.

Əsas fərq: Manual test bir dəfədir. Avtomatik test yüzlərlə dəfə, saniyələr içində, heç bir insan müdaxiləsi olmadan işləyə bilər.

Keçid zamanı yadda saxlayın:

Kod yazmaq öyrənilir — siz artıq test düşüncə tərzinə sahibsiniz
Kod xətaları normaldır — hər kəsin kodu ilk dəfə işləmir
Playwright API-si oxunaqlıdır — page.getByText('Login').click() nə edəcəyini açıq göstərir

Yadda saxla: avtomatik test sənin manual addımlarının kod şəklidir — bir dəfə yaz, yüzlərlə dəfə işlət.

Node, VS Code və Git-in quraşdırılması

Bu üç aləti quraşdıracağıq. Hər addımın slayd təlimatı aşağıda verilib (video təlimatları tezliklə əlavə olunacaq).

Node.js — LTS versiyası. nodejs.org saytına keçin və LTS versiyasını yükləyin (Current yox). Quraşdırıcıda bütün addımlarda standart seçimləri saxlayın. Sonra terminalda yoxlayın:
Terminal window
```
node --version   # v20.x.x və ya daha yüksək
npm --version    # v10.x.x və ya daha yüksək
```
🎬 Videoda: tezliklə əlavə olunacaq
Node.js quraşdırma — slayd təlimatı Slaydlar — yeni pəncərədə açılır
VS Code. code.visualstudio.com saytından Stable versiyasını yükləyin. Quraşdırdıqdan sonra bu əlavələri qurun: Playwright Test for VSCode (testləri redaktordan birbaşa işlətmək üçün) və ESLint (kod keyfiyyəti üçün).

🎬 Videoda: tezliklə əlavə olunacaq
VS Code quraşdırma — slayd təlimatı Slaydlar — yeni pəncərədə açılır
Git. git-scm.com saytından yükləyin və quraşdırmada standart seçimləri qəbul edin. Sonra yoxlayın:
Terminal window
```
git --version
```
🎬 Videoda: tezliklə əlavə olunacaq
Git quraşdırma — slayd təlimatı Slaydlar — yeni pəncərədə açılır

Brauzerlərə gəlincə: Playwright onları özü ayrıca quraşdırır (növbəti addımda) — sistem brauzerləri ilə qarışdırmayın.

Playwright-in quraşdırılması

Yeni bir qovluq yaradın və Playwright-i quraşdırın:

mkdir playwright-kurs
cd playwright-kurs
npm init playwright@latest

Bu interaktiv quraşdırmadır — hər sual üçün ox düymələri ilə seç və ya dəyəri yazıb Enter bas:

TypeScript or JavaScript? — TypeScript seçin (kurs boyu TypeScript istifadə edirik)
tests folder name? — tests daxil edin (standart)
GitHub Actions workflow? — hələlik false (CI avtomatlaşdırması — sonrakı modulda)
Install Playwright browsers? — true (mütləq lazımdır)

Brauzerlərin yüklənməsi bir neçə dəqiqə çəkə bilər — bu normaldır.

İlk Playwright layihəsinin yaradılması

Quraşdırma tamamlandıqdan sonra layihə qovluğunu VS Code-da aç (File → Open Folder) və soldakı Explorer-ə bax. Bu strukturu görəcəksən:

playwright-kurs/
├── tests/
│   └── example.spec.ts
├── playwright.config.ts
├── package.json
└── node_modules/

`package.json`, `tests/` və `playwright.config.ts` strukturu

`package.json`

Layihənizin “identifikasiya kartı”dır. Asılılıqları, skriptləri və metadata-nı saxlayır. Playwright skripti belə görünür:

{
  "scripts": {
    "test": "playwright test"
  }
}

`tests/` qovluğu

Bütün .spec.ts fayllarınız burada yaşayır. Playwright bu qovluqdakı bütün test fayllarını avtomatik tapır.

`playwright.config.ts`

Playwright-in əsas konfiqurasiya faylıdır. Buradan:

Hansı brauzerlər işlədilsin
Bütün testlər üçün baseURL nə olsun
Testlər paralel işləsinmi
Uğursuz testlər yenidən cəhd etsinmi

kimi parametrləri tənzimləyirsiniz.

Yadda saxla: package.json = skriptlər və asılılıqlar, tests/ = .spec.ts fayllarınız, playwright.config.ts = parametrlər (brauzerlər, baseURL, retries).

İlk testin işə salınması

Playwright-in hazır nümunə testini işlədin:

npx playwright test

(package.json-da test skripti təyin etdiyimiz üçün npm test eyni şeyi işlədir — biz kurs boyu açıq npx playwright test formasından istifadə edəcəyik.)

Konsolda belə bir çıxış görməlisiniz:

Running 6 tests using 6 workers
  6 passed (8s)

Uğurla keçdi! Playwright üç brauzerdə (chromium, firefox, webkit) iki test ssenarisini işlətdi.

Yadda saxla: npx playwright test hər şeyi işlədir — nümunə 6 nəticə verdi, çünki 2 test × 3 brauzer = 6 işləmə.

HTML hesabatının açılması

Playwright test nəticələrini gözəl bir HTML hesabatında göstərə bilər:

npx playwright show-report

Bu əmr brauzeri açır və hər testin:

Keçdi/uğursuz oldu statusunu
İcra müddətini
Skrinşotlar və izlərini (uğursuzluq zamanı)

göstərir. CI mühitlərində bu hesabat artifakt kimi saxlanılır.

Praktiki tətbiqi əldə et (TestMarket Lab)

Modul 2-dən etibarən tapşırıqlar TestMarket Lab-a qarşı yazılıb — öz kompüterində işləyən kiçik, amma real bir veb tətbiq (login, məhsullar, səbət, ödəniş və admin bölməsi). Bu, sənin playwright-kurs qovluğundan ayrı bir layihədir: tətbiqi bir terminalda, testlərini başqa terminalda işlədirsən.

Klonla, quraşdır və işə sal:

git clone https://github.com/TesterBaku/testmarket-lab
cd testmarket-lab
npm install
npm start

Onu işlək saxla və brauzerdə http://localhost:3000 ünvanını aç — TestMarket mağazasını görməlisən.

Sonra test layihəni ona yönəlt — playwright.config.ts-ə baseURL əlavə et:

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',
  },
});

İndi tapşırıqlardakı nisbi yollar (məsələn, page.goto('/auth/login')) işlək tətbiqə bağlanır.

İki cür məşq: BrauzerLab brauzerində heç nə quraşdırmadan işləyir — sürətli məşqlər üçün; TestMarket Lab isə yerli işləyir və ona qarşı tam test dəstləri yazırsan.

Əsas nəticələr

Playwright — çoxbrauzerli avtomatlaşdırma freymvorkudur; bir test Chromium, Firefox və WebKit-də işləyir, avtomatik gözləmə ilə.
Üç alət quraşdırdın: Node.js (JavaScript işlədir), VS Code (redaktorun) və Git (versiya nəzarəti).
Layihədə üç fayl vacibdir: package.json (skriptlər və asılılıqlar), tests/ qovluğu (.spec.ts fayllarınız) və playwright.config.ts (parametrlər — brauzerlər, baseURL, retries).
Testləri npx playwright test ilə işlət; nəticələri npx playwright show-report ilə gör.

Yoxlama siyahısı — indi sənin əlində olmalıdır: Node, VS Code və Git quraşdırılıb; npm init playwright@latest ilə playwright-kurs layihəsi yaradılıb; nümunə test keçir və aça biləcəyin HTML hesabat var; və qarşıdakı tapşırıqlar üçün TestMarket Lab klonlanıb http://localhost:3000-də işləyir.

Modul 1-də hər test faylında istifadə edəcəyin JavaScript və TypeScript-i öyrənirik.