Testiranje web aplikacija s Node.js i Playwright

Suvremeni razvoj aplikacija ovisi o automatiziranom testiranju, koristeći test okvire kako bi se osiguralo da je kôd spreman za ulazak u aplikacijske pakete i za krajnje korisnike. Da bi se od testiranja iskoristilo najviše, testovi se pišu prije koda i mogu se integrirati u cjevovode za kontrolu izvora i CI / CD (kontinuirana integracija / kontinuirano postavljanje). Testovi bi trebali biti svugdje u vašem razvojnom procesu. Trebate spojiti zahtjev za povlačenjem? Testirajte kod. Trebate se posvetiti poslovnici? Testirajte kod.

No, postoji jedno područje u kojem je testiranje teško, posebno kada ga treba automatizirati. Govorim o potrebi interakcije i testiranja dinamičkih korisničkih sučelja. Testiranje web aplikacija složen je proces. Alati kao što su Selenium i webdriver ključni su elementi za automatizaciju sadržaja stranice i osiguravanje testiranja elemenata stranice i aplikacije u cjelini. Važni su ako u aplikaciji upotrebljavate preglednike bez glave; Koristim niz Python skripti u Twitter aplikaciji izgrađenoj oko podrške za web-pogon Selenium i Chromium za automatizaciju snimanja snimaka zaslona iz aplikacije za praćenje zrakoplova.

Predstavljamo Playwright, Microsoftov okvir za web testiranje

Selen i webdriver nisu jedini alati za izgradnju cjelovitih testova za moderne web aplikacije i preglednike. Popularna alternativa je Googleov Puppeteer koji obrađuje slanje klikova u preglednike koristeći iste tehnike kao i Chromeov alat za web-pogon i pristup informacijama o otklanjanju pogrešaka putem API-ja poznatih alata za programere. Noviji član u ligi za testiranje preglednika, Playwright razvija Microsoft kao projekt otvorenog koda hostiran na GitHubu.

Dramatičar uzima osnovnu Puppeteer arhitekturu i pomiče je više u smjeru Selenija, dodajući okvir za automatizaciju weba i poboljšavajući način na koji Puppeteer komunicira sa sadržajem stranice. Dizajniran je za brzu i jednostavnu instalaciju koristeći poznatu npm sintaksu, koristeći JavaScript za izgradnju automatizacije i testiranja web aplikacija. Radi s više preglednika, s podrškom za preglednike temeljene na Chromium-u, poput Edgea, kao i Firefox i Appleov WebKit.

Na popisu podržanih preglednika Playwrighta postoji važna poruka: ne možete je koristiti s preglednicima temeljenim na Tridentu ili EdgeHTML-u. Nije iznenađujuće. Microsoft se čvrsto obvezao na svoju podružnicu Chromium u svom novom Edgeu, a stari Edge i Internet Explorer blizu su kraja života. Ako ćete Playwright koristiti za testiranje, donosite odluku da podržavate samo moderne moderne preglednike, tako da ćete morati obavijestiti korisnike što se sprema za buduća izdanja bilo kojih web aplikacija koje gradite i podržavate.

Testiranje weba s dramatičarom

Sposobnost unakrsnog testiranja na svim glavnim preglednicima s istim skupom skripti važna je, kao i podrška za mobilne verzije web stranica (budući da dvije glavne mobilne platforme koriste inačice svojih preglednika za stolna računala, Playwright trenutno oponaša mobilne poglede u preglednicima za stolna računala) ). Također je važna podrška za bezglave testove, gdje ne generirate korisničko sučelje preglednika, već radite umjesto toga s generiranim objektnim modelom dokumenta (i DOM-om u sjeni ako koristite modernu funkcionalnost preglednika i tehnologije kao što su web komponente).

Možete koristiti Playwright za automatizaciju preglednika koji se pokreće na razvojnim radnim površinama za inspekciju pogrešaka kao dijela za otklanjanje pogrešaka u aplikaciji, osiguravajući da dosljedno prolazite kroz sve testne staze dok bilježite dodatne podatke o izvedbi i promatrate neispraćene greške na korisničkom sučelju. Alternativno, može se postaviti kao dio GitHub akcije za testiranje novog koda kao dijela urezivanja ili spajanja, automatizirajući ono što bi inače moglo biti složeni ručni test.

Izrada i izvođenje testova dramatičara

Početak rada s Playwrightom jednostavan je kao i postavljanje novog Node.js projekta. Prvo instalirajte Node.js na test uređajima. Budući da Playwright koristi Node, možete ga pokrenuti na razvojnim računalima ili na poslužiteljima u vašem CI / CD cjevovodu, čineći ga dijelom GitHub akcije koja se može koristiti tijekom cijelog procesa razvoja softvera. Sve što vam treba je jedna npm naredba, koja instalira Playwright paket, kao i binarne datoteke za sve podržane preglednike. Po završetku instalacije možete stvoriti skripte za automatizaciju pomoću JavaScript-a ili Typescripta za pozivanje API-ja Playwright. Sve su to asinkroni pozivi, pa upotrijebite izjave await za upravljanje njihovim obećanjima.

Rezultat je vrlo jasan način izrade skripti, počevši od otvaranja bezglave instance preglednika, zatim kretanja do stranice prije interakcije s instancama stranice. Dobra je ideja u početku graditi testove s potpunim preglednicima kako biste mogli pratiti kako Playwright komunicira s vašom aplikacijom. Korisna usporena opcija pokreće interakcije ljudskijom brzinom, što olakšava vizualizaciju i upravljanje testovima u preglednicima stolnih računala. Nakon što je test ispravljen i ispravno se izvodi, možete ga premjestiti u bezglavi način, a zatim pokrenuti kao dio implementacije CI / CD-a.

Playwright uključuje CLI alat koji može snimati interakcije s web mjestima, automatski generirajući JavaScript potreban za pokretanje testova. Opcija codegen koristan je alat za brzo započinjanje rada s Playwrightom, pokazujući vam kôd koji komunicira s elementima stranice koje zatim možete koristiti kao predložak za vlastite testove, kopiranje i uređivanje generiranog koda po potrebi. Podrška za TypeScript može vam pomoći u pisanju složenijih testova, koristeći snažno tipkanje za upravljanje varijablama.

Rad s web aplikacijama u programu Playwright

Jedna od korisnijih značajki Playwrighta je podrška za kontekst preglednika. Oni vam omogućuju pokretanje izoliranih radnji u jednoj instanci preglednika, tako da možete postaviti nekoliko konteksta za istodobno testiranje nekoliko interakcija. Unutar svakog konteksta stvarate stranice koje se najbolje smatraju karticama u pregledniku radne površine. Stranice podržavaju vlastitu interakciju klikova i mogu se pratiti paralelno. Jednom kad se nađete na stranici, možete koristiti različite načine pronalaženja sadržaja za interakciju, pomoću CSS ili XPath birača, HTML atributa ili teksta. Ako ste upoznati sa Selenijem, navigacija kroz stranice trebala bi vam biti poznata, s dodanom mogućnošću čekanja da se stranica u potpunosti učita ili da se dinamički sadržaj prikaže u web-aplikaciji s jednom stranicom.

Funkcije procjene možete koristiti za slanje parametara na i s web stranica na JavaScript kôd koji se izvodi u kontekstu stranice. Rezultati se vraćaju pokretaču skripte za testiranje u Node.js na analizu, dajući vam alate potrebne za polaganje ili neuspjeh testova. Dramatičar radi s programima za razvoj preglednika F12 tako da može učiniti puno više od puke interakcije sa sadržajem stranice. Može nadzirati mrežni promet, pa ga možete koristiti, između ostalog, za provjeru autentičnosti i preuzimanje datoteka. Može pristupiti konzoli preglednika i zabilježiti pogreške koje možda neće biti odmah vidljive na prikazanoj stranici: na primjer, praćenje CSS problema ili JavaScript knjižnica koje se ne učitavaju.

Mnogo je toga u Playwrightu i čini uvjerljivu alternativu Seleniju za testiranje aplikacija preglednika. Budući da Microsoft neprestano dodaje alate za razvojne programere F12 u Edgeu, bit će zanimljivo gledati kako Playwright dodaje nove značajke koje proširuju vaše mogućnosti za testiranje aplikacija hostiranih u pregledniku i progresivnih web aplikacija uz tradicionalne web aplikacije.

Osim JavaScript-a: Testiranje na Pythonu i C #

Microsoft je nedavno objavio novu verziju Playwrighta za programere koji radije grade testove na Pythonu, a ne na JavaScriptu. Korisna je opcija jer se mnogi postojeći okviri za testiranje Selenium temelje na Pythonu i omogućuje vam povezivanje koda za testiranje s analitičkim paketima za detaljniju analizu rezultata pomoću Pythonovog bogatog ekosustava statističkih aplikacija i alata.

Playwright uključuje jezične veze za C #, tako da možete uvesti Playwrighta u postojeće testne okvire za ASP.NET ili druge .NET alate. Ne biste trebali mijenjati način rada kako biste unijeli nove alate, a Microsoft obećava dodatne jezične vezove za Javu i Ruby. U budućnosti postoji mogućnost za više, jer dokumentacija Playwrighta navodi da je dizajnirana za podršku vezama za bilo koji jezik. Uz sav kôd na GitHub-u, postoji mogućnost kreiranja vlastitih veza za odabrani testni jezik i njihovo predavanje kao zahtjev za povlačenjem u projekt.