Sparround

Cross-browser, mobil web və responsive testing

Playwright üç brauzer mühərriki ilə işləyir: Chromium (Chrome, Edge), Firefox (Gecko), WebKit (Safari). Bunlar projects matrisi ilə idarə olunur — eyni test dəsti fərqli konfiqurasiyalarda işləyir.

Mühüm ayrım: Playwright-ın WebKit-i real Safari deyil — eyni açıq mənbə mühərrikin build-idir. Fərqlərin böyük hissəsini tutur, amma Safari-yə xas bəzi davranışları (məsələn, iOS-dakı bəzi məhdudiyyətlər, Apple-ın öz əlavələri) yox. Bunu bilmək interview-da dəyərlidir.

Strategiya sualı — hansı brauzerlərdə işlətmək? Cavab analitikadan gəlir, şəxsi seçimdən yox:

  • Real istifadəçi paylanmasına bax (Google Analytics və ya oxşarı)
  • Trafikin 2%-i Firefox-dursa, tam regression-u orada işlətmək israfdır — smoke kifayətdir
  • Tipik model: hər PR-da Chromium tam suite; nightly-də Firefox + WebKit smoke/critical
  • Bu, CI vaxtını üç dəfə artırmadan real riski əhatə edir

Cihaz emulyasiyasıdevices kataloqu hazır profillər verir: devices['iPhone 14'], devices['Pixel 7']. Profil bir neçə şeyi birlikdə qurur: viewport ölçüsü, deviceScaleFactor, user agent, isMobile bayrağı və `hasTouch` — yəni tap() işləyir, hover isə real mobil kimi davranmır.

Responsive testing isə daha genişdir və çox vaxt cihaz emulyasiyası ilə qarışdırılır: burada məqsəd layout-un breakpoint-lərdə düzgün davranmasıdır. Praktik yanaşma: bir neçə xarakterik en (məs. 375, 768, 1280, 1920) və hər birində davranış fərqi olan elementləri yoxlamaq — hamburger menyu görünürmü, cədvəl kart görünüşünə keçirmi, sticky panel yerindədirmi.

Mühüm nüans: page.setViewportSize() yalnız ölçünü dəyişir — touch, user agent və isMobile dəyişmir. Yəni yalnız viewport dəyişməklə "mobil test etdim" demək yanlışdır; test.use({ ...devices['iPhone 14'] }) daha dolğun emulyasiya verir.

Emulyasiyanın sərhədi — interview-da mütləq deyilməli olan hissə. Emulyasiya tutmur: real cihaz performansını (zəif CPU-da yavaşlıq), real toxunuş jestlərini və dəqiqliyini, iOS Safari-nin özünəməxsus davranışlarını, cihazın klaviaturasını, şəbəkə keyfiyyətini, batareya/yaddaş məhdudiyyətlərini. Yüksək riskli mobil məhsullarda real cihaz buludu (BrowserStack və oxşarları) və ya əl ilə yoxlama əlavə qat kimi qalır.

SualEmulyasiya tutur?İzah
Layout 375px-də düzgün yığılırmı?BəliViewport + CSS breakpoint-lər tam emulyasiya olunur
Hamburger menyu mobil enində görünürmü?BəliSırf CSS/DOM davranışıdır
Səhifə zəif telefonda 6 saniyə açılırXeyrReal CPU/yaddaş məhdudiyyəti emulyasiya olunmur (CPU throttling qismən kömək edir)
Pinch-zoom və mürəkkəb jestlərXeyrSadə tap emulyasiya olunur, çoxbarmaqlı real jestlər yox
iOS Safari-yə xas bugQismənWebKit mühərriki eynidir, amma iOS Safari-nin tam davranışı deyil
Cihaz klaviaturası inputu örtürmü?XeyrNative klaviatura davranışı brauzer emulyasiyasından kənardadır

İnterview-da fərq yaradan cümlə: "Emulyasiya CSS və layout problemlərini tutur, cihaz reallığını yox." Sonra konkret nümunə ver: "375px viewport-da düymə görünür və klik olunur, amma real telefonda barmaq ölçüsündən kiçik olduğu üçün istifadəçi ona düşə bilmir — bunu yalnız real cihazda görürsən." Konkret nümunəsi olan cavab hər zaman ümumi cavabdan güclüdür.

📚 Mənbələr və sənədlər