20-dars: Playwright (Python)

Kirish

Playwright nima?

19-darsda Selenium WebDriver o'rgandik. U zo'r — lekin 2004 yilda yaratilgan. 2020 yilda Microsoft yangi asbob chiqardi: Playwright. Zamonaviy, tez, aqlli.

Asosiy atama

Playwright — Microsoft tomonidan 2020 yilda yaratilgan zamonaviy automation framework. Python, JavaScript, Java, C# bilan ishlaydi.

Oddiy qilib: Playwright — Selenium'ning "o'g'li". Kamchiliklarni bartaraf etib yaratilgan. Ayniqsa auto-wait — eng katta farqi.

💡 Sodda misol

Eski telefon vs Smartphone

Selenium — Nokia 3310. Ishonchli, ko'pchilik biladi, lekin eski. Playwright — zamonaviy smartphone. Tez, aqlli, ko'p narsa o'zi qiladi. Ikkalasi ham qo'ng'iroq qiladi — lekin smartphone ko'proq narsani qiladi!

Playwright afzalliklari

Auto-wait — element yuklanishini o'zi kutadi. Wait yozish kerak emas!
Tez — Selenium'dan 2-3x tezroq ishlaydi
Multi-browser — Chrome, Firefox, Safari — bitta kod bilan
Codegen — harakatlaringizni yozib, kod chiqaradi
Trace Viewer — test muvaffaqiyatsiz bo'lsa, video ko'rasiz
Ishonchli — "flaky test" muammosi kam

Savol: Selenium o'rgandim, endi Playwright ham kerakmi?

Ha! Eski loyihalar Selenium'da. Yangi loyihalar Playwright'ga o'tyapti. Ikkalasini bilish — Middle QA darajasi. Intervyu'da juda kuchli javob berish imkoniyati!

1-qism

Selenium vs Playwright

Asosiy farqlarni bilib olaylik. Ikkisi ham brauzer automation — lekin yondashuvlari farq qiladi.

🌐 Selenium

2004 · WebDriver Protocol

Eng mashhur, ko'p loyihada
Java, Python, JS, C# hammasi
Wait o'zingiz yozasiz
Sekinroq
Ko'p eski dokumentatsiya

🎭 Playwright

2020 · Microsoft · CDP

Yangi loyihalarda ommabop
Python, JS, Java, C#
Auto-wait o'zi kutadi
2-3x tezroq
Codegen, Trace Viewer bor

Batafsil taqqoslash

Xususiyat	🌐 Selenium	🎭 Playwright
Chiqarilgan yil	2004	2020
Wait (kutish)	O'zingiz yozasiz	Auto-wait o'zi qiladi
Tezlik	Normal	2-3x tezroq
Flaky tests	Ko'p bo'ladi	Kam bo'ladi
Multi-browser	Har biri alohida driver	Bir kodda hammasi
Codegen (Record)	Selenium IDE (alohida)	O'zi bor
Debug (Trace)	Yo'q	Trace Viewer bor
O'rnatish	Driver alohida	Hammasi birgalikda
Eski loyihalarda	Ko'p uchraydi	Yangi loyihalarda

Qaysi birini tanlash?

Eski loyiha + Selenium mavjud → Selenium davom. Yangi loyiha boshlayapsiz → Playwright. Intervyu → Ikkalasini bilish + "Yangi loyihada Playwright tavsiya qilaman" deyish.

2-qism

O'rnatish va birinchi skript

O'rnatish Selenium'dan oson — hamma narsa bitta buyruqda keladi.

O'rnatish (3 qadam)

terminal
# 1. Playwright Python kutubxonasi
pip install playwright

# 2. Brauzerlarni yuklab olish (Chrome, Firefox, Safari)
playwright install

# 3. Tayyor! Tekshirish:
python -c "from playwright.sync_api import sync_playwright; print('OK')"

"OK" deb chiqsa — muvaffaqiyatli o'rnatildi!

Birinchi skript — "Hello Playwright"

hello.py
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Brauzer ochish
    browser = p.chromium.launch(headless=False)

    # Yangi sahifa ochish
    page = browser.new_page()

    # URL'ga o'tish
    page.goto("https://google.com")

    # Sahifa nomini olish
    print(page.title())   # → "Google"

    browser.close()

Codegen — kodsiz yozish (bonuse!)

Playwright'ning eng zo'r xususiyati: harakatlaringizni yozib, kod chiqaradi!

terminal
# Codegen ishga tushirish
playwright codegen testshop.uz

Brauzer ochiladi — siz harakat qilasiz, o'ng tomonda Python kodi paydo bo'ladi. Selenium IDE kabi, lekin to'g'ridan-to'g'ri Playwright kodi!

3-qism

Asosiy buyruqlar

Playwright buyruqlari Selenium'ga o'xshash — lekin qisqaroq va tozaroq.

Asosiy harakatlar

commands.py
# Sahifaga o'tish
page.goto("https://testshop.uz")

# Bosish — CSS, text, role bilan
page.click("#login-btn")
page.click("text=Kirish")
page.get_by_role("button", name="Kirish").click()

# Matn yozish
page.fill("#email", "test@uzum.uz")

# Tekshirish (assert)
page.wait_for_url("**/dashboard")
assert page.is_visible("text=Welcome")

# Screenshot (otladka uchun)
page.screenshot(path="result.png")

# Brauzer yopish
browser.close()

Zamonaviy locator'lar

Playwright Selenium'dan kuchli locator'larga ega:

locators.py
# CSS (Selenium'dagi kabi)
page.click("#login-btn")

# Matn bo'yicha — juda qulay!
page.click("text=Kirish")

# Role bo'yicha — eng professional
page.get_by_role("button", name="Yuborish").click()

# Label bo'yicha (form uchun)
page.get_by_label("Email").fill("test@test.com")

# Placeholder bo'yicha
page.get_by_placeholder("Email kiriting").fill("test@test.com")

To'liq Login testi

login_test.py
from playwright.sync_api import sync_playwright

def test_login():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()

        page.goto("https://testshop.uz/login")

        # Email va parol — Wait kerak emas, o'zi kutadi!
        page.fill("#email", "test@uzum.uz")
        page.fill("#password", "Pass123!")
        page.click("#login-btn")

        # Dashboard ochilishini kutish
        page.wait_for_url("**/dashboard")

        # Tekshirish
        assert page.is_visible("text=Welcome")
        print("✅ Login test PASSED")

        browser.close()

test_login()

Selenium'dagi kabi — lekin WebDriverWait yo'q. Playwright o'zi kutadi!

🎯 Bog'lang

Playwright buyrug'i va vazifasini bog'lang

Har buyruq nima qiladi?

Playwright buyruq

page.goto(url)

page.fill(sel, text)

page.click(sel)

page.screenshot()

page.is_visible(sel)

Vazifa

Ekran rasmini saqlash

Sahifaga o'tish

Element ko'rinishini tekshirish

Maydonga matn yozish

Elementni bosish

0 / 5 juft

4-qism

Auto-wait — Playwright sehri

Selenium'dagi eng katta muammo: element yuklanmagan paytda kod ishlaydi va xato beradi. Playwright bu muammoni yo'q qildi.

Muammo: Nima bu "flaky test"?

Flaky test nima?

Flaky test — ba'zan o'tadi, ba'zan o'tmaydi. Kod o'zgartirilmagan, lekin natija turli xil. Eng asosiy sabab: sahifa hali yuklanmagan, kod esa darhol element izlaydi.

Selenium'da muammo

selenium_problem.py
driver.get("https://testshop.uz/products")

# ❌ Sahifa hali yuklanmagan — element topilmadi xatosi!
button = driver.find_element(By.ID, "add-to-cart")
button.click()

# ✅ To'g'ri: Wait qo'shish kerak edi
button = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.ID, "add-to-cart"))
)
button.click()

Playwright'da yechim: Auto-wait

playwright_solution.py
page.goto("https://testshop.uz/products")

# ✅ Playwright o'zi kutadi — xato bo'lmaydi!
page.click("#add-to-cart")

# WebDriverWait yozish KERAK EMAS
# Playwright element tayyor bo'lgunicha o'zi kutadi (30 sek max)

Playwright har click(), fill() oldidan element ko'rinishini, bosish mumkinligini va harakatlanmayotganini o'zi tekshiradi.

🎮 Auto-wait Demo

Sahifa kech yuklanmoqda — nima bo'ladi?

Selenium va Playwright'ning farqini simulyatsiya orqali ko'ring. "Test ishga tushirish" tugmasini bosing:

🌐 Selenium (Wait yozilmagan)

Kutilmoqda...

🎭 Playwright (Auto-wait)

Kutilmoqda...

5-qism

Yon-yonga taqqoslash

Xuddi shu test — Selenium va Playwright'da. Farqni o'z ko'zingiz bilan ko'ring.

Login testi

🌐 Selenium (Python)

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("https://testshop.uz/login")

# Email — wait kerak
WebDriverWait(driver, 10).until(
EC.visibility_of_element_located((By.ID, "email"))
).send_keys("test@test.com")

driver.find_element(By.ID, "password").send_keys("Pass123!")

# Tugma — wait kerak
WebDriverWait(driver, 10).until(
EC.element_to_be_clickable((By.ID, "login-btn"))
).click()

driver.quit()

📏 15 qator

🎭 Playwright (Python)

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
  browser = p.chromium.launch()
  page = browser.new_page()
  page.goto("https://testshop.uz/login")

  # Auto-wait — Wait kerak emas!
  page.fill("#email", "test@test.com")

  page.fill("#password", "Pass123!")

  # Shu ham auto-wait!
  page.click("#login-btn")

  browser.close()

📏 9 qator — 40% kam!

Xuddi shu test — Playwright'da 40% kam kod. Wait yozish kerak emas.

🛠 Code Builder

Playwright kod yarating

Vazifani tanlang va Playwright kodini ko'ring:

Vazifa

URL

Selector

🎬 Haqiqiy stsenariy

Yangi loyihada framework tanlash

Seshanba, 10:00. Payme startupida Tech Lead Jasur aka murojaat qildi: "Yangi loyiha boshlanmoqda. Automation framework tanlaymiz. Sizning fikringiz: Selenium mi, Playwright mi?"

Loyiha ma'lumotlari: Yangi e-commerce sayt. Jamoa: 3 ta QA. Brauzer talabi: Chrome, Firefox, Safari. Vaqt: 2 oy ichida testlar tayyor bo'lishi kerak.

Eng professional tavsiya qaysi?

⚡ Tezkor tekshiruv

Playwright'da page.click("#btn") ishlaydi, lekin sayt AJAX bilan yuklanmoqda. Nima qilasiz?

🎯 Amaliyot vaqti

Birinchi Playwright skripti

3 ta vazifa — Selenium'dan Playwright'ga o'tish.

🎭

Playwright Bepul

pip install playwright + playwright install. Hammasi tayyor!

📖 Playwright docs

Sizning vazifalaringiz:

Playwright o'rnatish va "Hello" skripti

pip install playwright + playwright install. hello.py yozing: Google'ni oching, sarlavhani print qiling.

Codegen bilan skript yarating

playwright codegen testshop.uz — Brauzer ochiladi. TestShop'da login harakatini bajaring. Kod oynasidan Python kodini ko'chiring va ishga tushiring.

Selenium skriptini Playwright'ga aylantiring

19-darsda yozgan Login skriptingizni Playwright'da qayta yozing. WebDriverWait'larni olib tashlang — auto-wait ishlashini ko'ring.

💡 Portfolio uchun

GitHub'da ikkita repo: selenium-tests va playwright-tests. Intervyu'da: "Ikkalasini ham bilaman, yangi loyihada Playwright tavsiya qilaman" — bu Middle darajasidagi javob!

Intervyuga tayyorlov

Intervyu savollari

Playwright — zamonaviy kompaniyalar intervyusida tez-tez so'raladigan mavzu.

💡 Har savol ustiga bosing — javobni ko'rasiz.

Q1Playwright nima va Selenium'dan farqi?+

Javob: "Playwright — Microsoft tomonidan 2020 yilda yaratilgan zamonaviy automation framework."

Asosiy farqlar:

Auto-wait — har buyruqdan oldin element tayyor bo'lishini o'zi kutadi. Selenium'da WebDriverWait kerak edi.
Tezlik — 2-3x tezroq ishlaydi
Flaky tests — Playwright'da kamroq bo'ladi
Codegen — harakatlarni yozib, kod chiqaradi
Trace Viewer — xato bo'lsa video ko'rasiz

Pro javob: "Eski loyihalarda Selenium keng tarqalgan. Yangi loyihalarda Playwright tavsiya qilaman — kam kod, ishonchli, tez."

Q2Auto-wait nima va nima uchun muhim?+

Javob: "Auto-wait — Playwright'ning eng katta afzalligi. Har buyruq (click, fill, vsh.) bajarilishidan oldin Playwright o'zi kutadi:"

Element sahifada ko'rinadimi?
Element bosish mumkinmi?
Element harakatlanmayaptimi?

Ahamiyati: Selenium'da bu tekshiruvlarni WebDriverWait bilan o'zingiz yozardingiz. Ko'p kod + ko'p imkoniyat unutish. Playwright bu muammoni yo'q qildi.

Natija: Flaky testlar kamayadi. Kod qisqaradi. Testlar ishonchli bo'ladi.

Q3Playwright'da locatorlar qanday?+

Javob: "Playwright'da Selenium'dan kuchli locatorlar bor:"

CSS — page.click("#id") — oddiy va tez
text= — page.click("text=Kirish") — matn bo'yicha
get_by_role — page.get_by_role("button", name="Submit") — eng professional
get_by_label — form'lar uchun ideal
get_by_placeholder — input maydoni uchun

Pro maslahat: get_by_role — eng yaxshi tanlov. Accessibility'ni ham test qiladi. Veb standartlariga mos.

Q4Codegen nima va qanday ishlatasiz?+

Javob: "Codegen — Playwright'ning yozib olish xususiyati. Selenium IDE'ga o'xshaydi, lekin bevosita Playwright kodi chiqaradi."

Ishlatish:

playwright codegen https://sayt.uz — terminalda yozing
Brauzer ochiladi — siz harakat qilasiz
O'ng tomonda Python kodi paydo bo'ladi
Kodni ko'chiring, baziylab, ishga tushiring

Foydasi: Yangi sahifada tez prototip yaratish. Locatorni bilmasangiz — Codegen o'zi topadi.

Q5Trace Viewer nima?+

Javob: "Trace Viewer — Playwright'ning debug uchun kuchli xususiyati. Test muvaffaqiyatsiz bo'lsa, qadam-baqadam video ko'rasiz."

Yoqish:

browser.new_context(record_video_dir="videos/")
yoki pytest --tracing=on

Ko'rish: playwright show-trace trace.zip

Foydasi: Xato qayerda bo'lganini aniq ko'rasiz. Screenshot, network, console — hammasi bir joyda.

Q6Yangi loyihada Selenium yoki Playwright?+

Javob: "Qaror loyihaga bog'liq:"

Yangi loyiha → Playwright. Auto-wait, tez, zamonaviy.
Eski Selenium loyiha → Selenium davom. Migration qimmat.
Mobil test kerak → Appium (Selenium asosida).
Jamoa Java biladi → Selenium yoki Playwright (Java'da ham bor).

Pro javob: "Men ikkalasini ham bilaman. Yangi loyihada Playwright tavsiya qilaman — kam kod, ishonchli testlar, tez ishlaydi. Eski loyiha bo'lsa, Selenium bilan davom etamiz."

Q7Playwright'da multi-browser testing qanday?+

Javob: "Playwright'ning kuchli tomoni — bitta kod bilan Chrome, Firefox, Safari'da test qilish:"

          for browser_type in [p.chromium, p.firefox, p.webkit]:

            browser = browser_type.launch()

            page = browser.new_page()

            # ... test kodingiz

Selenium'da har brauzer uchun alohida Driver sozlash kerak edi. Playwright'da — bitta kod, 3 ta brauzer.

Pytest bilan: pytest --browser=chromium --browser=firefox

Playwright — zamonaviy automation

Playwright nima?

Playwright afzalliklari

Selenium vs Playwright

🌐 Selenium

🎭 Playwright

Batafsil taqqoslash

O'rnatish va birinchi skript

O'rnatish (3 qadam)

Birinchi skript — "Hello Playwright"

Codegen — kodsiz yozish (bonuse!)

Asosiy buyruqlar

Asosiy harakatlar

Zamonaviy locator'lar

To'liq Login testi

Playwright buyrug'i va vazifasini bog'lang

Playwright buyruq

Vazifa

Auto-wait — Playwright sehri

Muammo: Nima bu "flaky test"?

Selenium'da muammo

Playwright'da yechim: Auto-wait

Sahifa kech yuklanmoqda — nima bo'ladi?

🌐 Selenium (Wait yozilmagan)

🎭 Playwright (Auto-wait)

Yon-yonga taqqoslash

Login testi

Playwright kod yarating

Birinchi Playwright skripti

Playwright Bepul

Sizning vazifalaringiz:

Intervyu savollari

3 ta asosiy fikr