Playwright ir Cypress: E2E testavimas

Kodėl E2E testavimas tapo būtinybe

Prisimenu laikus, kai automatinis testavimas buvo kažkas egzotiško – programuotojai rašė testus tik tada, kai turėjo laiko arba kai vadovas labai griežtai reikalavo. Dabar situacija pasikeitė kardinaliai. E2E (end-to-end) testavimas tapo ne prabanga, o būtinybe, ypač kai kuriame sudėtingas web aplikacijas.

Problema paprasta: kuo daugiau funkcionalumo, tuo daugiau dalykų gali sugedti. O rankiniu būdu tikrinti visus scenarijus po kiekvieno atnaujinimo – tai kelias į beprotnamį. Čia ir ateina į pagalbą automatizuoti E2E testai, kurie imituoja realų vartotojo elgesį naršyklėje.

Šiandien rinkoje dominuoja du pagrindiniai žaidėjai: Cypress ir Playwright. Abu įrankiai yra galingi, abu turi savo fanų armiją, ir abu gali sutaupyti jums daugybę nervų. Bet kuris iš jų geriau? Kaip visada – priklauso nuo situacijos.

Cypress: veteranas su charakteriu

Cypress atsirado 2017 metais ir greitai tapo testavimo bendruomenės mylimiuku. Jų dokumentacija yra fenomenali – aš rimtai, tai viena geriausių dokumentacijų, kokias teko matyti. Įrankis buvo sukurtas programuotojams, kurie nori greitai pradėti rašyti testus ir matyti rezultatus realiu laiku.

Kas man labiausiai patinka Cypress? Jų interaktyvus Test Runner. Kai paleidžiate testus development režimu, matote tikrą naršyklę, kuri atlieka visus veiksmus. Galite sustabdyti testą bet kuriame žingsnyje, pamatyti DOM būseną, network užklausas, konsolės pranešimus. Tai neįtikėtinai patogu debuginant.

Cypress privalumai:

  • Puiki dokumentacija ir didžiulė bendruomenė
  • Lengva pradėti – setup’as užtrunka minutes
  • Automatinis laukimas (automatic waiting) veikia iš dėžės
  • Time-travel debugging – galite „keliauti” atgal per testo žingsnius
  • Įmontuotas screenshot’ų ir video įrašymo funkcionalumas

Bet yra ir trūkumų. Cypress ilgą laiką palaikė tik Chrome šeimos naršykles. Dabar jie pridėjo Firefox ir Edge palaikymą, bet Safari vis dar lieka už borto. Tai gali būti problema, jei jūsų auditorija naudoja įvairias naršykles.

Dar viena keista Cypress savybė – jie veikia tiesiogiai naršyklėje, o ne per WebDriver protokolą. Tai suteikia greitesnį veikimą, bet kartu sukuria tam tikrų apribojimų. Pavyzdžiui, negalite lengvai testuoti kelių skirtingų domenų vienu metu arba atidaryti kelių skirtingų langų.

Playwright: naujokas su ambicijomis

Playwright atsirado 2020 metais, ir jį sukūrė buvę Puppeteer komandos nariai iš Microsoft. Tai iš karto suteikė jam patikimumo – šie žmonės žino, ką daro. Playwright buvo sukurtas mokantis iš ankstesnių įrankių klaidų ir bandant išspręsti jų problemas.

Pirmasis dalykas, kuris krenta į akis – Playwright palaiko visas pagrindines naršykles: Chromium, Firefox, WebKit (Safari). Ir ne tik palaiko, bet ir palaiko tikrai gerai. Jie net palaiko mobilių naršyklių emuliaciją, kas yra super patogu.

Playwright architektūra skiriasi nuo Cypress. Jis veikia per WebSocket protokolą ir kontroliuoja naršyklę iš išorės. Tai leidžia daryti dalykus, kurie Cypress būtų sudėtingi ar neįmanomi – testuoti kelis langus, kelis domenus, net kelis naršyklės kontekstus vienu metu.

Playwright stipriosios pusės:

  • Visų pagrindinių naršyklių palaikymas
  • Galimybė paleisti kelis naršyklės kontekstus vienu metu
  • Auto-wait mechanizmas yra labai protingas
  • Puikus network interception ir mocking
  • Trace viewer – neįtikėtinai galingas debugging įrankis
  • Greitesnis testų vykdymas paraleliai

Playwright taip pat turi codegen funkciją – galite tiesiog atlikti veiksmus naršyklėje, o įrankis automatiškai sugeneruos testo kodą. Tai puiku pradedantiesiems arba kai reikia greitai sukurti bazinį testą.

Sintaksė ir kaip su jais dirbti

Abiejų įrankių sintaksė yra pakankamai paprasta, bet turi savo skirtumų. Cypress naudoja chain’us, kurie primena jQuery stilių:


cy.visit('https://example.com')
.get('[data-testid="username"]')
.type('mano_vardas')
.get('[data-testid="password"]')
.type('slaptazodis')
.get('button[type="submit"]')
.click()

Playwright sintaksė yra šiek tiek skirtinga, labiau primena async/await stilių:


await page.goto('https://example.com');
await page.fill('[data-testid="username"]', 'mano_vardas');
await page.fill('[data-testid="password"]', 'slaptazodis');
await page.click('button[type="submit"]');

Abiem atvejais kodas yra skaitomas ir suprantamas. Cypress chain’ai gali atrodyti elegantiškesni, bet Playwright async/await stilius yra artimesnis įprastam JavaScript kodui.

Vienas svarbus skirtumas – Cypress komandos yra automatiškai įtrauktos į eilę ir vykdomos asinchroniškai, nors rašote sinchroniškai atrodantį kodą. Playwright reikalauja naudoti async/await, kas yra aiškiau, bet kartais gali būti šiek tiek daugiažodžiau.

Našumas ir stabilumas

Čia prasideda įdomesni dalykai. Cypress testai paprastai veikia lėčiau nei Playwright testai. Tai dėl kelių priežasčių: Cypress architektūra, kaip jie tvarko komandas, ir paralelizavimo apribojimai nemokamoje versijoje.

Playwright iš karto palaiko paralelų testų vykdymą be jokių papildomų mokesčių. Galite paleisti testus keliose naršyklėse vienu metu, kas drastiškai sumažina bendrą testavimo laiką. Cypress nemokamoje versijoje testai vykdomi nuosekliai, o paralelizavimas prieinamas tik mokamame Cypress Dashboard.

Stabilumo klausimu abu įrankiai yra geri, bet Playwright turi šiek tiek pranašumą. Jų auto-wait mechanizmas yra protingesnis – jis laukia ne tik elemento atsiradimo DOM’e, bet ir to, kad elementas būtų matomas, aktyvus ir pasiruošęs sąveikai. Tai sumažina „flaky” testų skaičių.

Kalbant apie flaky testus – tai testai, kurie kartais praeina, kartais ne, nors kodas nepasikeitė. Tai kiekvieno QA inžinieriaus košmaras. Cypress turi gerą retry mechanizmą, bet Playwright eina dar toliau su savo web-first assertions, kurie automatiškai retry’ina patikrinimus iki timeout’o.

Ekosistema ir integracija

Cypress turi brandesnę ekosistemą. Yra daugybė plugin’ų, integracijos su CI/CD įrankiais yra gerai dokumentuotos, ir dauguma problemų, su kuriomis susiduriate, jau turi sprendimus Stack Overflow ar GitHub discussions.

Cypress Dashboard yra mokama paslauga, bet ji suteikia daug naudingų funkcijų: testų įrašymus, analytics, paralelizavimą, flaky testų aptikimą. Jei dirbate komandoje, tai gali būti verta investicijos.

Playwright ekosistema auga žaibišku greičiu. Microsoft aktyviai palaiko projektą, ir naujovės atsiranda reguliariai. Jie turi savo Trace Viewer, kuris yra nemokamas ir labai galingas – galite pamatyti kiekvieno testo žingsnio screenshot’ą, network aktyvitetą, konsolės logus, viską.

Abi platformos puikiai integruojasi su populiariais CI/CD įrankiais: GitHub Actions, GitLab CI, Jenkins, CircleCI. Playwright turi oficialius Docker image’us, kas palengvina setup’ą CI aplinkoje.

Kaina ir licencijavimas

Abu įrankiai yra open-source ir nemokami baziniam naudojimui. Tai puiku. Galite atsisiųsti, įdiegti ir naudoti be jokių apribojimų.

Cypress uždarbiauja per savo Dashboard servisą. Nemokama versija leidžia įrašyti 500 testų per mėnesį, kas mažoms komandoms yra daugiau nei pakankamai. Mokamos versijos prasideda nuo ~75 USD per mėnesį ir suteikia daugiau įrašų, paralelizavimą, prioritetinį palaikymą.

Playwright yra visiškai nemokamas. Microsoft jį palaiko kaip open-source projektą ir neuždarbiauja tiesiogiai. Visos funkcijos, įskaitant paralelizavimą ir Trace Viewer, yra prieinamos visiems.

Tai nereiškia, kad Playwright visada bus pigesnis. Jei jums reikia mokamo palaikymo, Microsoft siūlo enterprise support paslaugas, kurios gali būti brangesnės nei Cypress Dashboard. Bet daugumai komandų nemokamos versijos yra pakankamos.

Kai reikia pasirinkti

Taigi, kurį pasirinkti? Kaip ir daugelyje technologinių sprendimų, nėra vieno teisingo atsakymo. Pabandysiu suformuluoti keletą scenarijų.

Rinkitės Cypress, jei:

  • Jūsų komanda tik pradeda su E2E testavimu ir norite greito rezultato
  • Jums svarbi puiki dokumentacija ir didelė bendruomenė
  • Testuojate tik Chrome/Edge/Firefox ir Safari nėra kritinis
  • Jums patinka interaktyvus debugging su time-travel funkcionalumu
  • Neprieštaraujate mokėti už papildomas funkcijas

Rinkitės Playwright, jei:

  • Jums reikia testuoti visose naršyklėse, įskaitant Safari
  • Svarbus testų vykdymo greitis ir paralelizavimas
  • Testuojate sudėtingas aplikacijas su keliais langais ar domenais
  • Norite viską turėti nemokamai
  • Jūsų komanda jau turi patirties su automatizuotu testavimu

Asmeniškai pastebėjau, kad daugelis naujų projektų renkasi Playwright. Jis turi momentum, aktyvią plėtrą ir sprendžia daugelį problemų, kurias turėjo senesni įrankiai. Bet Cypress vis dar yra puikus pasirinkimas, ypač jei vertinate stabilumą ir brandžią ekosistemą.

Vienas praktinis patarimas – jei negalite apsispręsti, pabandykite abu. Sukurkite keletą testų su kiekvienu įrankiu ir pažiūrėkite, kuris labiau tinka jūsų workflow’ui. Abu turi gerą dokumentaciją ir pavyzdžius, tai neturėtų užtrukti ilgiau nei kelias valandas.

Ką daryti toliau su savo testavimo strategija

Nepriklausomai nuo to, kurį įrankį pasirinksite, svarbu suprasti, kad E2E testai yra tik viena testavimo piramidės dalis. Jie yra lėčiausi ir brangiausi palaikyti, todėl turėtumėte juos naudoti protingai.

Gera praktika – turėti daug unit testų, vidutiniškai integration testų ir santykinai nedaug E2E testų. E2E testus naudokite kritiniams vartotojo kelionės scenarijams: registracija, prisijungimas, pirkimas, pagrindinės funkcijos. Nebandykite testuoti kiekvieno mažo UI elemento su E2E testais.

Dar vienas svarbus aspektas – test data management. Jūsų testai turi būti izoliuoti ir nepriklausomi vienas nuo kito. Naudokite API užklausas setup’ui ir teardown’ui, o ne UI. Tai pagreitins testus ir padarys juos stabilesnius.

CI/CD integracija yra būtina. Testai, kurie vykdomi tik lokalioje mašinoje, turi ribotą vertę. Sukonfigūruokite savo testus taip, kad jie automatiškai vykdytų kiekviename pull request’e. Taip sugausite problemas anksti, kai jas dar lengva ištaisyti.

Pagaliau, investuokite laiką į savo testų palaikymą. Testai, kurie nėra atnaujinami, greitai tampa našta. Kai aplikacija keičiasi, testai turi keistis kartu. Naudokite page object pattern arba panašius šablonus, kad jūsų testų kodas būtų lengvai prižiūrimas.

Tiek Cypress, tiek Playwright yra puikūs įrankiai, kurie gali drastiškai pagerinti jūsų aplikacijos kokybę. Svarbu ne tiek kuris įrankis geresnis abstrakčiai, o kuris geriau tinka jūsų konkretiai situacijai, komandai ir projektui. Pradėkite nuo mažų žingsnių, mokykitės iš savo klaidų, ir pamažu sukursite testavimo strategiją, kuri veiks jums.

Daugiau

Kuo profesionali krovinių pervežimo įmonė skiriasi nuo pavienių vežėjų