Microsoft opublikowa\u0142 Playwrighta w 2020 roku. Jest to narz\u0119dzie open source, stworzone przez Andreya Lushnikova, kt\u00f3ry pracowa\u0142 wcze\u015bniej przy innym popularnym produkcie do automatyzacji, jakim jest, rozwijany przez Google, Puupeteer. Playwright s\u0142u\u017cy do automatyzacji akcji w przegl\u0105darce, ale r\u00f3wnie\u017c umo\u017cliwia automatyzacj\u0119 API.<\/p>\n\n\n\n
Mocne strony Playwrighta<\/strong><\/h2>\n\n\n\nNarz\u0119dzie posiada szereg interesuj\u0105cych zalet, kt\u00f3re sprawiaj\u0105, \u017ce warto si\u0119 nim zainteresowa\u0107. Opisz\u0119 je poni\u017cej.<\/p>\n\n\n\n
Auto Wait<\/strong><\/h3>\n\n\n\nJe\u017celi pracowali\u015bcie kiedy\u015b nad testami automatycznym UI, to zdajecie sobie spraw\u0119, jak du\u017cym problemem jest obs\u0142uga czekania na r\u00f3\u017cne elementy dynamiczne, kt\u00f3re znajduj\u0105 si\u0119 na stronie. W Selenium WebDriver poleca si\u0119 korzysta\u0107 z tzw. Explicit waitu, kt\u00f3ry powinien rozwi\u0105zywa\u0107 ten problem. Jednak czasami znalezienie odpowiedniego waitu nie jest takie proste. Ma na to wp\u0142yw, jak wiele javascriptu i operacji asynchronicznych jest u\u017cywanych na naszej stronie.<\/p>\n\n\n\n
Playwright korzysta z tzw. mechanizmu auto-wait. Co to oznacza? W wielu sytuacjach nie musimy dok\u0142ada\u0107 dodatkowego czekania na elementy, bo Playwright sam domy\u015blnie oczekuje element\u00f3w i akcji. Oczywi\u015bcie, gdy natrafimy na bardziej z\u0142o\u017con\u0105 sytuacj\u0119, w kt\u00f3rej potrzebujemy poczeka\u0107 na jaki\u015b element, to Playwright dostarcza nam metody, z kt\u00f3rych mo\u017cemy skorzysta\u0107.<\/p>\n\n\n\n
Korzystanie z r\u00f3\u017cnych j\u0119zyk\u00f3w programowania<\/strong><\/h3>\n\n\n\nObecnie Playwright wspiera kilka popularnych j\u0119zyk\u00f3w programowania. S\u0105 to:<\/p>\n\n\n\n
\n- Java,<\/li>\n\n\n\n
- C#,<\/li>\n\n\n\n
- JS\/TS,<\/li>\n\n\n\n
- Python.<\/li>\n<\/ul>\n\n\n\n
Dzi\u0119ki temu, rozwi\u0105zanie w wersji dla r\u00f3\u017cnych j\u0119zyk\u00f3w znajduje coraz szersze zastosowanie na rynku.<\/p>\n\n\n\n
Dokumentacja<\/strong><\/h3>\n\n\n\nPlaywright ma \u015bwietn\u0105 dokumentacj\u0119. Korzystanie z metod jest opisane na praktycznych przyk\u0142adach, kt\u00f3re pomagaj\u0105 skorzysta\u0107 z wielu mo\u017cliwo\u015bci aplikacji. R\u00f3wnie\u017c dokumentacja, kt\u00f3ra pojawia si\u0119, gdy wywo\u0142ujemy jak\u0105\u015b metod\u0119 w IDE, jest cz\u0119sto wystarczaj\u0105ca do tego, aby j\u0105 realnie wykorzysta\u0107.<\/p>\n\n\n\n
Popularno\u015b\u0107 narz\u0119dzia<\/strong><\/h3>\n\n\n\nWarto zauwa\u017cy\u0107, \u017ce liczba u\u017cytkownik\u00f3w narz\u0119dzia Playwright ro\u015bnie, co mo\u017cna zobaczy\u0107 na poni\u017cszej grafice.<\/p>\n\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-1-1024x535.png\")
<\/a>Ryc. 1 Ranking u\u017cytkowania r\u00f3\u017cnych framework\u00f3w pod k\u0105tem wielko\u015bci grupy odbiorc\u00f3w<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, spo\u015br\u00f3d bibliotek u\u017cywanych w testach, poprawi\u0142 wynik wykorzystania w\u015br\u00f3d spo\u0142eczno\u015bci z 3% w 2020 roku do 10% w 2021 roku. Ten ranking odno\u015bni si\u0119 do wersji JS\/TS Playwrighta, jednak moim zdaniem jest to zauwa\u017calny skok popularno\u015bci, kt\u00f3ry b\u0119dzie prawdopodobnie r\u00f3wnie\u017c odnotowany przy innych wersjach j\u0119zykowych narz\u0119dzia.<\/p>\n\n\n\n
Poprawi\u0142a si\u0119 r\u00f3wnie\u017c \u015bwiadomo\u015b\u0107 na temat Playwrighta w\u015br\u00f3d spo\u0142eczno\u015bci \u2013 z 19% w 2020 roku do 34% rok p\u00f3\u017aniej.<\/p>\n\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-2-1024x533.png\")
<\/a>Ryc. 2 Ranking dot. \u015bwiadomo\u015bci istnienia narz\u0119dzi<\/a><\/figcaption><\/figure>\n\n\n\nPrzy wyborze narz\u0119dzi warto zwraca\u0107 uwag\u0119 na ich popularno\u015b\u0107 oraz pozytywny odbi\u00f3r przez spo\u0142eczno\u015b\u0107. Playwright posiada oba aspekty.<\/p>\n\n\n\n
Cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/strong><\/h3>\n\n\n\n![\"Playwright](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-3-1024x721.png\")
<\/a>Ryc. 3 Playwright \u2013 cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/figcaption><\/figure>\n\n\n\nNiew\u0105tpliwie warto wspomnie\u0107 o szybkim rozwoju Playwrighta. Co oko\u0142o dwa tygodnie dodawana jest nowa wersja z usprawnieniami (cz\u0119stotliwo\u015b\u0107 zmian mo\u017cna sprawdzi\u0107 na GitHubie).<\/p>\n\n\n\n
Przy wyborze potencjalnego narz\u0119dzia zawsze zwracam uwag\u0119 na rozmiar spo\u0142eczno\u015bci, kt\u00f3ra za nim stoi. W tym wypadku jest to Microsoft i jego pracownicy, ale r\u00f3wnie\u017c coraz wi\u0119cej zaanga\u017cowanych os\u00f3b spoza firmy.<\/p>\n\n\n\n
Przegl\u0105darki wspierane przez Playwrighta<\/strong><\/h3>\n\n\n\nObecnie Playwright wspiera wszystkie najpopularniejsze przegl\u0105darki internetowe, czyli:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Rozwi\u0105zania oparte na Electronie r\u00f3wnie\u017c maj\u0105 eksperymentalne wsparcie dla wersji JS\/TS.<\/p>\n\n\n\n
Projekty wykorzystuj\u0105ce Playwrighta<\/strong><\/h3>\n\n\n\nCoraz wi\u0119cej projekt\u00f3w chwali si\u0119, \u017ce korzysta z narz\u0119dzia Playwright w swoich testach UI. S\u0105 to popularne inicjatywy open source, ale r\u00f3wnie\u017c rozwi\u0105zania komercyjne. Poni\u017cej kilka przyk\u0142ad\u00f3w:<\/p>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-4-1024x274.png\")
<\/a>Ryc. 4 Przyk\u0142ad projektu wykorzystuj\u0105cego Playwright<\/a><\/figcaption><\/figure>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-6-1024x328.png\")
<\/a>Ryc. 5 Przyk\u0142ad projektu wykorzystuj\u0105cego Playrwight<\/a><\/figcaption><\/figure>\n\n\n\nS\u0142abe strony Playwrighta<\/strong><\/h2>\n\n\n\nW przypadku wszystkich narz\u0119dzi zdarzaj\u0105 si\u0119 momenty, gdy jaka\u015b metoda nie dzia\u0142a poprawnie w okre\u015blonej sytuacji. Jako u\u017cytkownik Playwrighta spotka\u0142em si\u0119 z problemami sporadycznie i zawsze udawa\u0142o mi si\u0119 znale\u017a\u0107 rozwi\u0105zanie. Nie mog\u0119 natomiast wykluczy\u0107, \u017ce mo\u017cemy trafi\u0107 na okoliczno\u015bci, w kt\u00f3rych rozwi\u0105zania nie znajdziemy. Warto w\u00f3wczas porozmawia\u0107 z tw\u00f3rcami narz\u0119dzia \u2013 s\u0105 oni dost\u0119pni i aktywnie bior\u0105 udzia\u0142 w odpisywaniu na zg\u0142oszenia, kt\u00f3re trafiaj\u0105 na GitHuba.<\/p>\n\n\n\n
Napiszmy pierwszy test!<\/strong><\/h2>\n\n\n\nPo kr\u00f3tkim, teoretycznym wprowadzeniu mo\u017cemy przej\u015b\u0107 do napisania naszego pierwszego testu automatycznego w tej aplikacji.<\/p>\n\n\n\n
Implementacja testu automatycznego<\/strong><\/h3>\n\n\n\nPrzygotowany przeze mnie test b\u0119dzie polega\u0142 na zautomatyzowaniu prostego przypadku dla testowo stworzonego sklepu. Scenariusz testu wygl\u0105da tak:<\/p>\n\n\n\n
\n- Przejd\u017a na stron\u0119 seleniumsklep.pl<\/li>\n\n\n\n
- Kliknij w wybrany produkt na podstawie jego nazwy.<\/li>\n\n\n\n
- Przejd\u017a do koszyka i sprawd\u017a, czy cena na podsumowaniu jest zgodna z cen\u0105, kt\u00f3ra znajduje si\u0119 w szczeg\u00f3\u0142ach produktu.<\/li>\n<\/ol>\n\n\n\n
Przechodzimy do Visual Studio i rozpoczynamy prac\u0119 od utworzenia projektu package library<\/em>. Jest to preferowany typ projektu, kt\u00f3ry zastosujemy. Kolejnym krokiem b\u0119dzie dodanie potrzebnych paczek za pomoc\u0105 NuGet packages. W naszym przypadku:<\/p>\n\n\n\n\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
![\"Dodawanie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-7.png\")
<\/a>Ryc. 6 Dodawanie potrzebnych paczek<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit zawiera przydatne klasy, kt\u00f3re pomagaj\u0105 wsp\u00f3\u0142pracowa\u0107 narz\u0119dziom np. w kontek\u015bcie uruchamiania test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n
Kolejnym krokiem jest stworzenie potrzebnych katalog\u00f3w tak, aby od samego pocz\u0105tku porz\u0105dkowa\u0107 nasze rozwi\u0105zanie.<\/p>\n\n\n\n![\"Tworzenie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-8.png\")
<\/a>Ryc. 7 Tworzenie katalog\u00f3w<\/figcaption><\/figure>\n\n\n\nNajpierw tworzymy katalog \u201ePages\u201d, w kt\u00f3rym umie\u015bcimy wszystkie page objecty potrzebne nam do testu automatycznego. Kolejnym niezb\u0119dnym katalogiem jest \u201eTests\u201d. <\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-9-1024x614.png\")
<\/a><\/figure>\n\n\n\nW klasie BaseSetup mamy dwie metody, kt\u00f3rych u\u017cyjemy we wszystkich testach dziedzicz\u0105cych z tej klasy. Metoda \u201eSetup()\u201d na pocz\u0105tku inicjalizuje obiekt Playwrighta. Robimy to w linii 17. Przed ni\u0105 deklarujemy trzy pola, kt\u00f3re b\u0119d\u0105 nam potrzebne w dalszej pracy.<\/p>\n\n\n\n
S\u0105 to pola:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-10.png\")
<\/a><\/figure>\n\n\n\nW metodzie Setup() inicjalizujemy pole Browser, kt\u00f3re definiujemy, aby ustawi\u0107 jakiej przegl\u0105darki b\u0119dziemy u\u017cywa\u0107 w testach. Je\u017celi nie podamy parametru Headless, nie zobaczymy przebiegu test\u00f3w, poniewa\u017c uruchomi\u0105 si\u0119 bez trybu graficznego. Jest to przydatna opcja, dzi\u0119ki kt\u00f3rej unikamy wyskakuj\u0105cych okiem z testami. <\/p>\n\n\n\n
Kolejn\u0105 rzecz\u0105, kt\u00f3r\u0105 mo\u017cemy ustawi\u0107 w tym miejscu jest Channel. Playwright pozwala nam zdecydowa\u0107, jak\u0105 wersj\u0119 Chrome u\u017cy\u0107 w naszym te\u015bcie automatycznym. W bardzo prosty spos\u00f3b mo\u017cemy zdefiniowa\u0107, \u017ce chcemy skorzysta\u0107 np. z Chrome czy z Edge\u2019a w wersji beta. Mo\u017ce by\u0107 to bardzo przydatne do sprawdzenia dzia\u0142ania naszej aplikacji z nadchodz\u0105cymi wersjami przegl\u0105darek.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-11.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-12.png\")
<\/a><\/figure>\n\n\n\nNast\u0119pnie przechodzimy do zdefiniowania Contextu. Czym jest Context? Inicjalizujemy pole Context, kt\u00f3re pozwala obs\u0142ugiwa\u0107 sesj\u0119 danej przegl\u0105darki. Wyr\u00f3\u017cnikiem Playwrighta jest to, \u017ce potrafi obs\u0142ugiwa\u0107 wi\u0119cej ni\u017c jedn\u0105 sesj\u0119 przegl\u0105darki na raz. Dodatkowo ka\u017cde z okien ma \u201eFocus\u201d, wi\u0119c nie musimy si\u0119 prze\u0142\u0105cza\u0107 pomi\u0119dzy nimi, je\u017celi chcemy wykona\u0107 jak\u0105\u015b akcj\u0119.<\/p>\n\n\n\n
R\u00f3wnie\u017c w obiekcie Browser mogliby\u015bmy od razu skorzysta\u0107 z metody NewContextAsync(), jednak tw\u00f3rcy Playwrighta polecaj\u0105, \u017ceby tworzy\u0107 kontekst za ka\u017cdym razem. Ka\u017cdy \u201eContext\u201d przechowuje oddzielny cache i ciasteczka.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-13.png\")
<\/a><\/figure>\n\n\n\nKolejnym krokiem jest zdefiniowanie tzw. Tracingu. Ta metoda pozwala na zbieranie log\u00f3w podczas dzia\u0142ania testu automatycznego. \u015aledzi\u0107 mo\u017cemy:<\/p>\n\n\n\n
\n- Screenshots \u2013 tworzenie zrzutu ekranu po ka\u017cdej akcji,<\/li>\n\n\n\n
- Snapshots \u2013 zbieranie zawarto\u015bci DOM-u po ka\u017cdej akcji oraz zbieranie informacji z \u201enetworku\u201d, czyli wszystkie \u017c\u0105dania i informacje z konsoli,<\/li>\n\n\n\n
- Sources \u2013 zbieranie informacje na temat tego, kt\u00f3ra linia kodu by\u0142a uruchomiona w danym momencie.<\/li>\n<\/ul>\n\n\n\n
Kod \u017ar\u00f3d\u0142owy testu automatycznego<\/strong><\/h2>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-14.png\")
<\/a><\/figure>\n\n\n\nPrzechodz\u0105c do kodu \u017ar\u00f3d\u0142owego testu automatycznego, zaczynamy od zdefiniowania nazwy metody. W tym przypadku jest to:<\/p>\n\n\n\n
EnterToShop_AddProductToBasket_CheckProductPriceInSummary()<\/code><\/pre>\n\n\n\nJako parametr definiujemy \u201eoption\u201d, dzi\u0119ki kt\u00f3remu w spos\u00f3b dynamiczny mo\u017cemy przekaza\u0107 nazw\u0119 artyku\u0142u, wybieranego przez test. Odpowiada na niego atrybut \u201eTestCase\u201d. Ka\u017cda kolejna linia w postaci atrybutu TestCase z argumentem, definiuje nam kolejny przypadek testowy.<\/p>\n\n\n\n
Zaczynamy od zdefiniowania obiektu page. Odpowiada on za kontrol\u0119 pojedynczej zak\u0142adki w przegl\u0105darce (oczywi\u015bcie skojarzonej z naszym kontekstem).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-15.png\")
<\/a><\/figure>\n\n\n\nDefiniujemy page object dla strony HomePage. Sama strona posiada list\u0119 interesuj\u0105cych nas produkt\u00f3w.<\/p>\n\n\n\n![\"Strona](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-16-1024x524.png\")
<\/a>Ryc. 6 Strona z interesuj\u0105cymi nas produktami<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie tworzymy konstruktora dla tej klasy. Konstruktor b\u0119dzie przyjmowa\u0142 parametr jako obiekt page, kt\u00f3ry zawiera metody pozwalaj\u0105ce kontrolowa\u0107 akcje zwi\u0105zane z t\u0105 stron\u0105. Kolejnym krokiem jest zdefiniowanie pola ProductTitles z selektorem odpowiadaj\u0105cym nazwie ka\u017cdego z produkt\u00f3w.<\/p>\n\n\n\n
Potrzebujemy r\u00f3wnie\u017c metody SelectDefineProduct, kt\u00f3ra odpowiada za klikni\u0119cie w dany produkt na podstawie jego nazwy. <\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-17.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-18.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
\n- Metoda QuerySelectorAllAsync \u2013 pozwala nam na pobranie wszystkich element\u00f3w na podstawie zadanego selectora.<\/li>\n\n\n\n
- Metoday InnerText \u2013 umo\u017cliwia pobranie tekstu z danego elementu.<\/li>\n\n\n\n
- Metoda ClickAsync \u2013 klika w element, kt\u00f3ry chcemy wybra\u0107.<\/li>\n<\/ul>\n\n\n\n
Ciekaw\u0105 w\u0142a\u015bciwo\u015bci\u0105 Playwrighta jest to, \u017ce wi\u0119kszo\u015b\u0107 wykorzystywanych metod, posiada dodatkowe sposoby u\u017cycia, kt\u00f3re poszerzaj\u0105 jego mo\u017cliwo\u015bci.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-19-1024x183.png\")
<\/a><\/figure>\n\n\n\nJedn\u0105 z nich jest metoda ClickAsync. Pozwala nam zdefiniowa\u0107, ile razy chcemy klikn\u0105\u0107 lub okre\u015bli\u0107 czekanie po klikni\u0119ciu.<\/p>\n\n\n\n
Metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na danym obiekcie jest wiele. Oto kilka z nich:<\/p>\n\n\n\n![\"Wybrane](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-20.png\")
<\/a>Ryc. 7 Dost\u0119pny wyb\u00f3r metod<\/figcaption><\/figure>\n\n\n\nWaity<\/strong><\/h3>\n\n\n\nTak jak wspomina\u0142em dla wi\u0119kszo\u015bci operacji nie mamy potrzeby dodawania dodatkowych wait\u00f3w. Jednak, mo\u017cemy skorzysta\u0107 z tych metod, gdy nasza strona jest bardziej skomplikowana i zale\u017cy nam na dodaniu czekania na element.<\/p>\n\n\n\n![\"Metody](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-21.png\")
<\/a>Ryc. 8 Metody czekania na element<\/figcaption><\/figure>\n\n\n\nMo\u017cemy poczeka\u0107, a\u017c pop-up lub okre\u015blone \u017c\u0105danie si\u0119 pojawi\u0105. Ta metoda jest przydatna, gdy przechodzimy pomi\u0119dzy stronami i potrzebujemy poczeka\u0107 d\u0142u\u017cej na za\u0142adowanie strony.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-22-1024x508.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-23-1024x288.png\")
<\/a><\/figure>\n\n\n\nWracaj\u0105c do test\u00f3w: nast\u0119pny krokiem w linii 18 jest skorzystanie z metody GoToAsync(), kt\u00f3ra przejdzie do okre\u015blonej strony internetowej. Adres do strony zapisujemy w osobnej klasie TestSettings.EnvUrl. Takie warto\u015bci jak adres do \u015brodowiska najlepiej przechowywa\u0107 w osobnych klasach\/plikach. Metoda GoToAsync ma r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 dodania dodatkowego czekania na za\u0142adowanie strony. Adres strony zapisujemy we w\u0142a\u015bciwo\u015bciach w klasie TestSettings.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-24.png\")
<\/a><\/figure>\n\n\n\nPo tym kroku, w te\u015bcie przechodzimy do wywo\u0142ania metody SelectDefineProduct(option). To ona kliknie w okre\u015blony produkt. Kolejnym dzia\u0142aniem jest dodanie klasy DetailsProductPage, w kt\u00f3rej zaczynam od stworzenia p\u00f3l potrzebnych do metod u\u017cywanych na dalszych etapach tego testu.<\/p>\n\n\n\n![\"Pole](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-25.png\")
<\/a>Ryc. 9 Pole AddToBasketBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n![\"Pole](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-26.png\")
<\/a>Ryc. 10 Pole ProceedToCheckoutBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n![\"Pole](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-27.png\")
<\/a>Ryc. 11 Pole CurrentPrice odpowiada obecnej cenie produktu, kt\u00f3ra znajduje si\u0119 na stronie szczeg\u00f3\u0142\u00f3w produktu<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie, dodajemy konstruktor, kt\u00f3ry przez argument b\u0119dzie przyjmowa\u0142 obiekt page, pozwalaj\u0105cy na wykonywanie akcji zwi\u0105zanych ze stron\u0105.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-28.png\")
<\/a><\/figure>\n\n\n\nDefiniujemy pole AddToBasektBtn. Aby doda\u0107 element w Playwright, korzystamy z metody _page.Locator(\u201enazwa_selectora\u201d), kt\u00f3ra na podstawie podanego selectora pozwala uzyska\u0107 dost\u0119p do elementu za pomoc\u0105 Playwrighta. Kolejnym elementem, kt\u00f3ry definiujemy w tej klasie, jest odpowiednik przycisku \u201eProceed to Checkout\u201d.<\/p>\n\n\n\n
By test zadzia\u0142a\u0142, kolejne wymagane pole to \u201eCurrentPrice\u201d. Pozwala ono na pobranie aktualnej ceny za nasz przedmiot.<\/p>\n\n\n\n
Po zdefiniowaniu wszystkich p\u00f3l niezb\u0119dnych dla testu przechodzimy do zdefiniowania dw\u00f3ch prostych metod:<\/p>\n\n\n\n
\n- metoda AddProductToCart() zawiera klikni\u0119cie przycisku dodania do koszyka,<\/li>\n\n\n\n
- metoda ProceedToCheckout() jest analogiczn\u0105 metod\u0105 do klikni\u0119cia dla przycisku \u201eProceed to checkout\u201d.<\/li>\n<\/ul>\n\n\n\n
![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-29.png\")
<\/a><\/figure>\n\n\n\nDefiniuj\u0119 metod\u0119 GetCurrentProductPrice, kt\u00f3ra odpowiada za pobranie obecnej warto\u015bci ceny ze szczeg\u00f3\u0142\u00f3w tego produktu. Potrzebujemy jeszcze doda\u0107 metod\u0119 ParseEuroToDouble. Jest to metoda, kt\u00f3ra stosuje proste tzw. parsowanie, kt\u00f3re w tym przypadku usuwa symbol \u20ac z tekstu. W tym wypadku musimy to zrobi\u0107, poniewa\u017c element jest zdefiniowany w ten spos\u00f3b w HTML-u strony.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-30.png\")
<\/a><\/figure>\n\n\n\nOczywi\u015bcie jest to jedna z dr\u00f3g, ale mo\u017cna podej\u015b\u0107 do tego na wiele sposob\u00f3w. Innym pomys\u0142em jest skorzystanie z wyra\u017cenia regularnego, kt\u00f3re pozwoli\u0142oby na pobranie liczbowej warto\u015bci z tekstu. Metoda ParseEuroToDouble wygl\u0105da tak:<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-31-1024x201.png\")
<\/a><\/figure>\n\n\n\nWracamy do kodu \u017ar\u00f3d\u0142owego testu. Wywo\u0142ujemy metody, kt\u00f3re pozwol\u0105 doda\u0107 produkt do koszyka.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-32.png\")
<\/a><\/figure>\n\n\n\nW kolejnej linii inicjalizujemy obiekt SummaryCartPage. Jest to obiekt reprezentuj\u0105cy klas\u0119 SummaryCartPage.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-33.png\")
<\/a><\/figure>\n\n\n\nW tej klasie opr\u00f3cz zdefiniowania konstruktora, dodajemy pole odpowiadaj\u0105ce elementowi kwoty w podsumowaniu koszyka.<\/p>\n\n\n\n![\"element](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-34.png\")
<\/a><\/figure>\n\n\n\nR\u00f3wnie\u017c w tym miejscu korzystamy z metody ParseEuroToDouble, bo w tej sytuacji jest por\u00f3wnywalna. Po dodaniu tej metody, wracamy do kodu testu i por\u00f3wnujemy warto\u015b\u0107 zmiennej currentTotalPrice z productPrice. To por\u00f3wnanie korzysta z biblioteki FluentAssertions, kt\u00f3r\u0105 dodajemy poprzez NuGeta. Jest to biblioteka do asercji, kt\u00f3ra pozwala na bardziej czytelny zapis ni\u017c standardowe metody z klasy Assert. Dalej, przechodzimy do uruchomienia testu. Mo\u017cemy tego dokona\u0107 za pomoc\u0105 dotnet test z poziomu VS oraz z poziomu VS i R#.<\/p>\n\n\n\n![\"test\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-35.png\")
<\/a>Ryc. 12 Uruchamianie testu<\/figcaption><\/figure>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-36-1.png\")
<\/a><\/figure>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nW artykule pokaza\u0142em Playwrighta w praktyce i przedstawi\u0142em kilka cech, kt\u00f3re mog\u0105 Ci\u0119 zainteresowa\u0107 i przekona\u0107 do spr\u00f3bowania pracy z tym narz\u0119dziem.<\/p>\n\n\n\n
W nast\u0119pnej cz\u0119\u015bci chcia\u0142bym zaprezentowa\u0107 jak skorzysta\u0107 z Trace Viewer, przydatnej funkcji, kt\u00f3ra pozwala nam przegl\u0105da\u0107 zebrane logi z test\u00f3w. Przedstawi\u0119 tak\u017ce inne ciekawe w\u0142a\u015bciwo\u015bci tego narz\u0119dzia.<\/p>\n\n\n\n
Je\u017celi pracowali\u015bcie kiedy\u015b nad testami automatycznym UI, to zdajecie sobie spraw\u0119, jak du\u017cym problemem jest obs\u0142uga czekania na r\u00f3\u017cne elementy dynamiczne, kt\u00f3re znajduj\u0105 si\u0119 na stronie. W Selenium WebDriver poleca si\u0119 korzysta\u0107 z tzw. Explicit waitu, kt\u00f3ry powinien rozwi\u0105zywa\u0107 ten problem. Jednak czasami znalezienie odpowiedniego waitu nie jest takie proste. Ma na to wp\u0142yw, jak wiele javascriptu i operacji asynchronicznych jest u\u017cywanych na naszej stronie.<\/p>\n\n\n\n
Playwright korzysta z tzw. mechanizmu auto-wait. Co to oznacza? W wielu sytuacjach nie musimy dok\u0142ada\u0107 dodatkowego czekania na elementy, bo Playwright sam domy\u015blnie oczekuje element\u00f3w i akcji. Oczywi\u015bcie, gdy natrafimy na bardziej z\u0142o\u017con\u0105 sytuacj\u0119, w kt\u00f3rej potrzebujemy poczeka\u0107 na jaki\u015b element, to Playwright dostarcza nam metody, z kt\u00f3rych mo\u017cemy skorzysta\u0107.<\/p>\n\n\n\n
Korzystanie z r\u00f3\u017cnych j\u0119zyk\u00f3w programowania<\/strong><\/h3>\n\n\n\nObecnie Playwright wspiera kilka popularnych j\u0119zyk\u00f3w programowania. S\u0105 to:<\/p>\n\n\n\n
\n- Java,<\/li>\n\n\n\n
- C#,<\/li>\n\n\n\n
- JS\/TS,<\/li>\n\n\n\n
- Python.<\/li>\n<\/ul>\n\n\n\n
Dzi\u0119ki temu, rozwi\u0105zanie w wersji dla r\u00f3\u017cnych j\u0119zyk\u00f3w znajduje coraz szersze zastosowanie na rynku.<\/p>\n\n\n\n
Dokumentacja<\/strong><\/h3>\n\n\n\nPlaywright ma \u015bwietn\u0105 dokumentacj\u0119. Korzystanie z metod jest opisane na praktycznych przyk\u0142adach, kt\u00f3re pomagaj\u0105 skorzysta\u0107 z wielu mo\u017cliwo\u015bci aplikacji. R\u00f3wnie\u017c dokumentacja, kt\u00f3ra pojawia si\u0119, gdy wywo\u0142ujemy jak\u0105\u015b metod\u0119 w IDE, jest cz\u0119sto wystarczaj\u0105ca do tego, aby j\u0105 realnie wykorzysta\u0107.<\/p>\n\n\n\n
Popularno\u015b\u0107 narz\u0119dzia<\/strong><\/h3>\n\n\n\nWarto zauwa\u017cy\u0107, \u017ce liczba u\u017cytkownik\u00f3w narz\u0119dzia Playwright ro\u015bnie, co mo\u017cna zobaczy\u0107 na poni\u017cszej grafice.<\/p>\n\n\n\n<\/a>Ryc. 1 Ranking u\u017cytkowania r\u00f3\u017cnych framework\u00f3w pod k\u0105tem wielko\u015bci grupy odbiorc\u00f3w<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, spo\u015br\u00f3d bibliotek u\u017cywanych w testach, poprawi\u0142 wynik wykorzystania w\u015br\u00f3d spo\u0142eczno\u015bci z 3% w 2020 roku do 10% w 2021 roku. Ten ranking odno\u015bni si\u0119 do wersji JS\/TS Playwrighta, jednak moim zdaniem jest to zauwa\u017calny skok popularno\u015bci, kt\u00f3ry b\u0119dzie prawdopodobnie r\u00f3wnie\u017c odnotowany przy innych wersjach j\u0119zykowych narz\u0119dzia.<\/p>\n\n\n\n
Poprawi\u0142a si\u0119 r\u00f3wnie\u017c \u015bwiadomo\u015b\u0107 na temat Playwrighta w\u015br\u00f3d spo\u0142eczno\u015bci \u2013 z 19% w 2020 roku do 34% rok p\u00f3\u017aniej.<\/p>\n\n\n\n<\/a>Ryc. 2 Ranking dot. \u015bwiadomo\u015bci istnienia narz\u0119dzi<\/a><\/figcaption><\/figure>\n\n\n\nPrzy wyborze narz\u0119dzi warto zwraca\u0107 uwag\u0119 na ich popularno\u015b\u0107 oraz pozytywny odbi\u00f3r przez spo\u0142eczno\u015b\u0107. Playwright posiada oba aspekty.<\/p>\n\n\n\n
Cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/strong><\/h3>\n\n\n\n<\/a>Ryc. 3 Playwright \u2013 cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/figcaption><\/figure>\n\n\n\nNiew\u0105tpliwie warto wspomnie\u0107 o szybkim rozwoju Playwrighta. Co oko\u0142o dwa tygodnie dodawana jest nowa wersja z usprawnieniami (cz\u0119stotliwo\u015b\u0107 zmian mo\u017cna sprawdzi\u0107 na GitHubie).<\/p>\n\n\n\n
Przy wyborze potencjalnego narz\u0119dzia zawsze zwracam uwag\u0119 na rozmiar spo\u0142eczno\u015bci, kt\u00f3ra za nim stoi. W tym wypadku jest to Microsoft i jego pracownicy, ale r\u00f3wnie\u017c coraz wi\u0119cej zaanga\u017cowanych os\u00f3b spoza firmy.<\/p>\n\n\n\n
Przegl\u0105darki wspierane przez Playwrighta<\/strong><\/h3>\n\n\n\nObecnie Playwright wspiera wszystkie najpopularniejsze przegl\u0105darki internetowe, czyli:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Rozwi\u0105zania oparte na Electronie r\u00f3wnie\u017c maj\u0105 eksperymentalne wsparcie dla wersji JS\/TS.<\/p>\n\n\n\n
Projekty wykorzystuj\u0105ce Playwrighta<\/strong><\/h3>\n\n\n\nCoraz wi\u0119cej projekt\u00f3w chwali si\u0119, \u017ce korzysta z narz\u0119dzia Playwright w swoich testach UI. S\u0105 to popularne inicjatywy open source, ale r\u00f3wnie\u017c rozwi\u0105zania komercyjne. Poni\u017cej kilka przyk\u0142ad\u00f3w:<\/p>\n\n\n\n<\/a>Ryc. 4 Przyk\u0142ad projektu wykorzystuj\u0105cego Playwright<\/a><\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 5 Przyk\u0142ad projektu wykorzystuj\u0105cego Playrwight<\/a><\/figcaption><\/figure>\n\n\n\nS\u0142abe strony Playwrighta<\/strong><\/h2>\n\n\n\nW przypadku wszystkich narz\u0119dzi zdarzaj\u0105 si\u0119 momenty, gdy jaka\u015b metoda nie dzia\u0142a poprawnie w okre\u015blonej sytuacji. Jako u\u017cytkownik Playwrighta spotka\u0142em si\u0119 z problemami sporadycznie i zawsze udawa\u0142o mi si\u0119 znale\u017a\u0107 rozwi\u0105zanie. Nie mog\u0119 natomiast wykluczy\u0107, \u017ce mo\u017cemy trafi\u0107 na okoliczno\u015bci, w kt\u00f3rych rozwi\u0105zania nie znajdziemy. Warto w\u00f3wczas porozmawia\u0107 z tw\u00f3rcami narz\u0119dzia \u2013 s\u0105 oni dost\u0119pni i aktywnie bior\u0105 udzia\u0142 w odpisywaniu na zg\u0142oszenia, kt\u00f3re trafiaj\u0105 na GitHuba.<\/p>\n\n\n\n
Napiszmy pierwszy test!<\/strong><\/h2>\n\n\n\nPo kr\u00f3tkim, teoretycznym wprowadzeniu mo\u017cemy przej\u015b\u0107 do napisania naszego pierwszego testu automatycznego w tej aplikacji.<\/p>\n\n\n\n
Implementacja testu automatycznego<\/strong><\/h3>\n\n\n\nPrzygotowany przeze mnie test b\u0119dzie polega\u0142 na zautomatyzowaniu prostego przypadku dla testowo stworzonego sklepu. Scenariusz testu wygl\u0105da tak:<\/p>\n\n\n\n
\n- Przejd\u017a na stron\u0119 seleniumsklep.pl<\/li>\n\n\n\n
- Kliknij w wybrany produkt na podstawie jego nazwy.<\/li>\n\n\n\n
- Przejd\u017a do koszyka i sprawd\u017a, czy cena na podsumowaniu jest zgodna z cen\u0105, kt\u00f3ra znajduje si\u0119 w szczeg\u00f3\u0142ach produktu.<\/li>\n<\/ol>\n\n\n\n
Przechodzimy do Visual Studio i rozpoczynamy prac\u0119 od utworzenia projektu package library<\/em>. Jest to preferowany typ projektu, kt\u00f3ry zastosujemy. Kolejnym krokiem b\u0119dzie dodanie potrzebnych paczek za pomoc\u0105 NuGet packages. W naszym przypadku:<\/p>\n\n\n\n\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
<\/a>Ryc. 6 Dodawanie potrzebnych paczek<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit zawiera przydatne klasy, kt\u00f3re pomagaj\u0105 wsp\u00f3\u0142pracowa\u0107 narz\u0119dziom np. w kontek\u015bcie uruchamiania test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n
Kolejnym krokiem jest stworzenie potrzebnych katalog\u00f3w tak, aby od samego pocz\u0105tku porz\u0105dkowa\u0107 nasze rozwi\u0105zanie.<\/p>\n\n\n\n<\/a>Ryc. 7 Tworzenie katalog\u00f3w<\/figcaption><\/figure>\n\n\n\nNajpierw tworzymy katalog \u201ePages\u201d, w kt\u00f3rym umie\u015bcimy wszystkie page objecty potrzebne nam do testu automatycznego. Kolejnym niezb\u0119dnym katalogiem jest \u201eTests\u201d. <\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW klasie BaseSetup mamy dwie metody, kt\u00f3rych u\u017cyjemy we wszystkich testach dziedzicz\u0105cych z tej klasy. Metoda \u201eSetup()\u201d na pocz\u0105tku inicjalizuje obiekt Playwrighta. Robimy to w linii 17. Przed ni\u0105 deklarujemy trzy pola, kt\u00f3re b\u0119d\u0105 nam potrzebne w dalszej pracy.<\/p>\n\n\n\n
S\u0105 to pola:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nW metodzie Setup() inicjalizujemy pole Browser, kt\u00f3re definiujemy, aby ustawi\u0107 jakiej przegl\u0105darki b\u0119dziemy u\u017cywa\u0107 w testach. Je\u017celi nie podamy parametru Headless, nie zobaczymy przebiegu test\u00f3w, poniewa\u017c uruchomi\u0105 si\u0119 bez trybu graficznego. Jest to przydatna opcja, dzi\u0119ki kt\u00f3rej unikamy wyskakuj\u0105cych okiem z testami. <\/p>\n\n\n\n
Kolejn\u0105 rzecz\u0105, kt\u00f3r\u0105 mo\u017cemy ustawi\u0107 w tym miejscu jest Channel. Playwright pozwala nam zdecydowa\u0107, jak\u0105 wersj\u0119 Chrome u\u017cy\u0107 w naszym te\u015bcie automatycznym. W bardzo prosty spos\u00f3b mo\u017cemy zdefiniowa\u0107, \u017ce chcemy skorzysta\u0107 np. z Chrome czy z Edge\u2019a w wersji beta. Mo\u017ce by\u0107 to bardzo przydatne do sprawdzenia dzia\u0142ania naszej aplikacji z nadchodz\u0105cymi wersjami przegl\u0105darek.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNast\u0119pnie przechodzimy do zdefiniowania Contextu. Czym jest Context? Inicjalizujemy pole Context, kt\u00f3re pozwala obs\u0142ugiwa\u0107 sesj\u0119 danej przegl\u0105darki. Wyr\u00f3\u017cnikiem Playwrighta jest to, \u017ce potrafi obs\u0142ugiwa\u0107 wi\u0119cej ni\u017c jedn\u0105 sesj\u0119 przegl\u0105darki na raz. Dodatkowo ka\u017cde z okien ma \u201eFocus\u201d, wi\u0119c nie musimy si\u0119 prze\u0142\u0105cza\u0107 pomi\u0119dzy nimi, je\u017celi chcemy wykona\u0107 jak\u0105\u015b akcj\u0119.<\/p>\n\n\n\n
R\u00f3wnie\u017c w obiekcie Browser mogliby\u015bmy od razu skorzysta\u0107 z metody NewContextAsync(), jednak tw\u00f3rcy Playwrighta polecaj\u0105, \u017ceby tworzy\u0107 kontekst za ka\u017cdym razem. Ka\u017cdy \u201eContext\u201d przechowuje oddzielny cache i ciasteczka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nKolejnym krokiem jest zdefiniowanie tzw. Tracingu. Ta metoda pozwala na zbieranie log\u00f3w podczas dzia\u0142ania testu automatycznego. \u015aledzi\u0107 mo\u017cemy:<\/p>\n\n\n\n
\n- Screenshots \u2013 tworzenie zrzutu ekranu po ka\u017cdej akcji,<\/li>\n\n\n\n
- Snapshots \u2013 zbieranie zawarto\u015bci DOM-u po ka\u017cdej akcji oraz zbieranie informacji z \u201enetworku\u201d, czyli wszystkie \u017c\u0105dania i informacje z konsoli,<\/li>\n\n\n\n
- Sources \u2013 zbieranie informacje na temat tego, kt\u00f3ra linia kodu by\u0142a uruchomiona w danym momencie.<\/li>\n<\/ul>\n\n\n\n
Kod \u017ar\u00f3d\u0142owy testu automatycznego<\/strong><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nPrzechodz\u0105c do kodu \u017ar\u00f3d\u0142owego testu automatycznego, zaczynamy od zdefiniowania nazwy metody. W tym przypadku jest to:<\/p>\n\n\n\n
EnterToShop_AddProductToBasket_CheckProductPriceInSummary()<\/code><\/pre>\n\n\n\nJako parametr definiujemy \u201eoption\u201d, dzi\u0119ki kt\u00f3remu w spos\u00f3b dynamiczny mo\u017cemy przekaza\u0107 nazw\u0119 artyku\u0142u, wybieranego przez test. Odpowiada na niego atrybut \u201eTestCase\u201d. Ka\u017cda kolejna linia w postaci atrybutu TestCase z argumentem, definiuje nam kolejny przypadek testowy.<\/p>\n\n\n\n
Zaczynamy od zdefiniowania obiektu page. Odpowiada on za kontrol\u0119 pojedynczej zak\u0142adki w przegl\u0105darce (oczywi\u015bcie skojarzonej z naszym kontekstem).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefiniujemy page object dla strony HomePage. Sama strona posiada list\u0119 interesuj\u0105cych nas produkt\u00f3w.<\/p>\n\n\n\n<\/a>Ryc. 6 Strona z interesuj\u0105cymi nas produktami<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie tworzymy konstruktora dla tej klasy. Konstruktor b\u0119dzie przyjmowa\u0142 parametr jako obiekt page, kt\u00f3ry zawiera metody pozwalaj\u0105ce kontrolowa\u0107 akcje zwi\u0105zane z t\u0105 stron\u0105. Kolejnym krokiem jest zdefiniowanie pola ProductTitles z selektorem odpowiadaj\u0105cym nazwie ka\u017cdego z produkt\u00f3w.<\/p>\n\n\n\n
Potrzebujemy r\u00f3wnie\u017c metody SelectDefineProduct, kt\u00f3ra odpowiada za klikni\u0119cie w dany produkt na podstawie jego nazwy. <\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/p>\n\n\n\n
\n- Metoda QuerySelectorAllAsync \u2013 pozwala nam na pobranie wszystkich element\u00f3w na podstawie zadanego selectora.<\/li>\n\n\n\n
- Metoday InnerText \u2013 umo\u017cliwia pobranie tekstu z danego elementu.<\/li>\n\n\n\n
- Metoda ClickAsync \u2013 klika w element, kt\u00f3ry chcemy wybra\u0107.<\/li>\n<\/ul>\n\n\n\n
Ciekaw\u0105 w\u0142a\u015bciwo\u015bci\u0105 Playwrighta jest to, \u017ce wi\u0119kszo\u015b\u0107 wykorzystywanych metod, posiada dodatkowe sposoby u\u017cycia, kt\u00f3re poszerzaj\u0105 jego mo\u017cliwo\u015bci.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nJedn\u0105 z nich jest metoda ClickAsync. Pozwala nam zdefiniowa\u0107, ile razy chcemy klikn\u0105\u0107 lub okre\u015bli\u0107 czekanie po klikni\u0119ciu.<\/p>\n\n\n\n
Metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na danym obiekcie jest wiele. Oto kilka z nich:<\/p>\n\n\n\n<\/a>Ryc. 7 Dost\u0119pny wyb\u00f3r metod<\/figcaption><\/figure>\n\n\n\nWaity<\/strong><\/h3>\n\n\n\nTak jak wspomina\u0142em dla wi\u0119kszo\u015bci operacji nie mamy potrzeby dodawania dodatkowych wait\u00f3w. Jednak, mo\u017cemy skorzysta\u0107 z tych metod, gdy nasza strona jest bardziej skomplikowana i zale\u017cy nam na dodaniu czekania na element.<\/p>\n\n\n\n<\/a>Ryc. 8 Metody czekania na element<\/figcaption><\/figure>\n\n\n\nMo\u017cemy poczeka\u0107, a\u017c pop-up lub okre\u015blone \u017c\u0105danie si\u0119 pojawi\u0105. Ta metoda jest przydatna, gdy przechodzimy pomi\u0119dzy stronami i potrzebujemy poczeka\u0107 d\u0142u\u017cej na za\u0142adowanie strony.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWracaj\u0105c do test\u00f3w: nast\u0119pny krokiem w linii 18 jest skorzystanie z metody GoToAsync(), kt\u00f3ra przejdzie do okre\u015blonej strony internetowej. Adres do strony zapisujemy w osobnej klasie TestSettings.EnvUrl. Takie warto\u015bci jak adres do \u015brodowiska najlepiej przechowywa\u0107 w osobnych klasach\/plikach. Metoda GoToAsync ma r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 dodania dodatkowego czekania na za\u0142adowanie strony. Adres strony zapisujemy we w\u0142a\u015bciwo\u015bciach w klasie TestSettings.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nPo tym kroku, w te\u015bcie przechodzimy do wywo\u0142ania metody SelectDefineProduct(option). To ona kliknie w okre\u015blony produkt. Kolejnym dzia\u0142aniem jest dodanie klasy DetailsProductPage, w kt\u00f3rej zaczynam od stworzenia p\u00f3l potrzebnych do metod u\u017cywanych na dalszych etapach tego testu.<\/p>\n\n\n\n<\/a>Ryc. 9 Pole AddToBasketBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 10 Pole ProceedToCheckoutBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 11 Pole CurrentPrice odpowiada obecnej cenie produktu, kt\u00f3ra znajduje si\u0119 na stronie szczeg\u00f3\u0142\u00f3w produktu<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie, dodajemy konstruktor, kt\u00f3ry przez argument b\u0119dzie przyjmowa\u0142 obiekt page, pozwalaj\u0105cy na wykonywanie akcji zwi\u0105zanych ze stron\u0105.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefiniujemy pole AddToBasektBtn. Aby doda\u0107 element w Playwright, korzystamy z metody _page.Locator(\u201enazwa_selectora\u201d), kt\u00f3ra na podstawie podanego selectora pozwala uzyska\u0107 dost\u0119p do elementu za pomoc\u0105 Playwrighta. Kolejnym elementem, kt\u00f3ry definiujemy w tej klasie, jest odpowiednik przycisku \u201eProceed to Checkout\u201d.<\/p>\n\n\n\n
By test zadzia\u0142a\u0142, kolejne wymagane pole to \u201eCurrentPrice\u201d. Pozwala ono na pobranie aktualnej ceny za nasz przedmiot.<\/p>\n\n\n\n
Po zdefiniowaniu wszystkich p\u00f3l niezb\u0119dnych dla testu przechodzimy do zdefiniowania dw\u00f3ch prostych metod:<\/p>\n\n\n\n
\n- metoda AddProductToCart() zawiera klikni\u0119cie przycisku dodania do koszyka,<\/li>\n\n\n\n
- metoda ProceedToCheckout() jest analogiczn\u0105 metod\u0105 do klikni\u0119cia dla przycisku \u201eProceed to checkout\u201d.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nDefiniuj\u0119 metod\u0119 GetCurrentProductPrice, kt\u00f3ra odpowiada za pobranie obecnej warto\u015bci ceny ze szczeg\u00f3\u0142\u00f3w tego produktu. Potrzebujemy jeszcze doda\u0107 metod\u0119 ParseEuroToDouble. Jest to metoda, kt\u00f3ra stosuje proste tzw. parsowanie, kt\u00f3re w tym przypadku usuwa symbol \u20ac z tekstu. W tym wypadku musimy to zrobi\u0107, poniewa\u017c element jest zdefiniowany w ten spos\u00f3b w HTML-u strony.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOczywi\u015bcie jest to jedna z dr\u00f3g, ale mo\u017cna podej\u015b\u0107 do tego na wiele sposob\u00f3w. Innym pomys\u0142em jest skorzystanie z wyra\u017cenia regularnego, kt\u00f3re pozwoli\u0142oby na pobranie liczbowej warto\u015bci z tekstu. Metoda ParseEuroToDouble wygl\u0105da tak:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWracamy do kodu \u017ar\u00f3d\u0142owego testu. Wywo\u0142ujemy metody, kt\u00f3re pozwol\u0105 doda\u0107 produkt do koszyka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW kolejnej linii inicjalizujemy obiekt SummaryCartPage. Jest to obiekt reprezentuj\u0105cy klas\u0119 SummaryCartPage.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW tej klasie opr\u00f3cz zdefiniowania konstruktora, dodajemy pole odpowiadaj\u0105ce elementowi kwoty w podsumowaniu koszyka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nR\u00f3wnie\u017c w tym miejscu korzystamy z metody ParseEuroToDouble, bo w tej sytuacji jest por\u00f3wnywalna. Po dodaniu tej metody, wracamy do kodu testu i por\u00f3wnujemy warto\u015b\u0107 zmiennej currentTotalPrice z productPrice. To por\u00f3wnanie korzysta z biblioteki FluentAssertions, kt\u00f3r\u0105 dodajemy poprzez NuGeta. Jest to biblioteka do asercji, kt\u00f3ra pozwala na bardziej czytelny zapis ni\u017c standardowe metody z klasy Assert. Dalej, przechodzimy do uruchomienia testu. Mo\u017cemy tego dokona\u0107 za pomoc\u0105 dotnet test z poziomu VS oraz z poziomu VS i R#.<\/p>\n\n\n\n<\/a>Ryc. 12 Uruchamianie testu<\/figcaption><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nW artykule pokaza\u0142em Playwrighta w praktyce i przedstawi\u0142em kilka cech, kt\u00f3re mog\u0105 Ci\u0119 zainteresowa\u0107 i przekona\u0107 do spr\u00f3bowania pracy z tym narz\u0119dziem.<\/p>\n\n\n\n
W nast\u0119pnej cz\u0119\u015bci chcia\u0142bym zaprezentowa\u0107 jak skorzysta\u0107 z Trace Viewer, przydatnej funkcji, kt\u00f3ra pozwala nam przegl\u0105da\u0107 zebrane logi z test\u00f3w. Przedstawi\u0119 tak\u017ce inne ciekawe w\u0142a\u015bciwo\u015bci tego narz\u0119dzia.<\/p>\n\n\n\n
Dzi\u0119ki temu, rozwi\u0105zanie w wersji dla r\u00f3\u017cnych j\u0119zyk\u00f3w znajduje coraz szersze zastosowanie na rynku.<\/p>\n\n\n\n
Dokumentacja<\/strong><\/h3>\n\n\n\nPlaywright ma \u015bwietn\u0105 dokumentacj\u0119. Korzystanie z metod jest opisane na praktycznych przyk\u0142adach, kt\u00f3re pomagaj\u0105 skorzysta\u0107 z wielu mo\u017cliwo\u015bci aplikacji. R\u00f3wnie\u017c dokumentacja, kt\u00f3ra pojawia si\u0119, gdy wywo\u0142ujemy jak\u0105\u015b metod\u0119 w IDE, jest cz\u0119sto wystarczaj\u0105ca do tego, aby j\u0105 realnie wykorzysta\u0107.<\/p>\n\n\n\n
Popularno\u015b\u0107 narz\u0119dzia<\/strong><\/h3>\n\n\n\nWarto zauwa\u017cy\u0107, \u017ce liczba u\u017cytkownik\u00f3w narz\u0119dzia Playwright ro\u015bnie, co mo\u017cna zobaczy\u0107 na poni\u017cszej grafice.<\/p>\n\n\n\n<\/a>Ryc. 1 Ranking u\u017cytkowania r\u00f3\u017cnych framework\u00f3w pod k\u0105tem wielko\u015bci grupy odbiorc\u00f3w<\/a><\/figcaption><\/figure>\n\n\n\nPlaywright, spo\u015br\u00f3d bibliotek u\u017cywanych w testach, poprawi\u0142 wynik wykorzystania w\u015br\u00f3d spo\u0142eczno\u015bci z 3% w 2020 roku do 10% w 2021 roku. Ten ranking odno\u015bni si\u0119 do wersji JS\/TS Playwrighta, jednak moim zdaniem jest to zauwa\u017calny skok popularno\u015bci, kt\u00f3ry b\u0119dzie prawdopodobnie r\u00f3wnie\u017c odnotowany przy innych wersjach j\u0119zykowych narz\u0119dzia.<\/p>\n\n\n\n
Poprawi\u0142a si\u0119 r\u00f3wnie\u017c \u015bwiadomo\u015b\u0107 na temat Playwrighta w\u015br\u00f3d spo\u0142eczno\u015bci \u2013 z 19% w 2020 roku do 34% rok p\u00f3\u017aniej.<\/p>\n\n\n\n<\/a>Ryc. 2 Ranking dot. \u015bwiadomo\u015bci istnienia narz\u0119dzi<\/a><\/figcaption><\/figure>\n\n\n\nPrzy wyborze narz\u0119dzi warto zwraca\u0107 uwag\u0119 na ich popularno\u015b\u0107 oraz pozytywny odbi\u00f3r przez spo\u0142eczno\u015b\u0107. Playwright posiada oba aspekty.<\/p>\n\n\n\n
Cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/strong><\/h3>\n\n\n\n<\/a>Ryc. 3 Playwright \u2013 cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/figcaption><\/figure>\n\n\n\nNiew\u0105tpliwie warto wspomnie\u0107 o szybkim rozwoju Playwrighta. Co oko\u0142o dwa tygodnie dodawana jest nowa wersja z usprawnieniami (cz\u0119stotliwo\u015b\u0107 zmian mo\u017cna sprawdzi\u0107 na GitHubie).<\/p>\n\n\n\n
Przy wyborze potencjalnego narz\u0119dzia zawsze zwracam uwag\u0119 na rozmiar spo\u0142eczno\u015bci, kt\u00f3ra za nim stoi. W tym wypadku jest to Microsoft i jego pracownicy, ale r\u00f3wnie\u017c coraz wi\u0119cej zaanga\u017cowanych os\u00f3b spoza firmy.<\/p>\n\n\n\n
Przegl\u0105darki wspierane przez Playwrighta<\/strong><\/h3>\n\n\n\nObecnie Playwright wspiera wszystkie najpopularniejsze przegl\u0105darki internetowe, czyli:<\/p>\n\n\n\n
\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Firefox,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Safari.<\/li>\n<\/ul>\n\n\n\n
Rozwi\u0105zania oparte na Electronie r\u00f3wnie\u017c maj\u0105 eksperymentalne wsparcie dla wersji JS\/TS.<\/p>\n\n\n\n
Projekty wykorzystuj\u0105ce Playwrighta<\/strong><\/h3>\n\n\n\nCoraz wi\u0119cej projekt\u00f3w chwali si\u0119, \u017ce korzysta z narz\u0119dzia Playwright w swoich testach UI. S\u0105 to popularne inicjatywy open source, ale r\u00f3wnie\u017c rozwi\u0105zania komercyjne. Poni\u017cej kilka przyk\u0142ad\u00f3w:<\/p>\n\n\n\n<\/a>Ryc. 4 Przyk\u0142ad projektu wykorzystuj\u0105cego Playwright<\/a><\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 5 Przyk\u0142ad projektu wykorzystuj\u0105cego Playrwight<\/a><\/figcaption><\/figure>\n\n\n\nS\u0142abe strony Playwrighta<\/strong><\/h2>\n\n\n\nW przypadku wszystkich narz\u0119dzi zdarzaj\u0105 si\u0119 momenty, gdy jaka\u015b metoda nie dzia\u0142a poprawnie w okre\u015blonej sytuacji. Jako u\u017cytkownik Playwrighta spotka\u0142em si\u0119 z problemami sporadycznie i zawsze udawa\u0142o mi si\u0119 znale\u017a\u0107 rozwi\u0105zanie. Nie mog\u0119 natomiast wykluczy\u0107, \u017ce mo\u017cemy trafi\u0107 na okoliczno\u015bci, w kt\u00f3rych rozwi\u0105zania nie znajdziemy. Warto w\u00f3wczas porozmawia\u0107 z tw\u00f3rcami narz\u0119dzia \u2013 s\u0105 oni dost\u0119pni i aktywnie bior\u0105 udzia\u0142 w odpisywaniu na zg\u0142oszenia, kt\u00f3re trafiaj\u0105 na GitHuba.<\/p>\n\n\n\n
Napiszmy pierwszy test!<\/strong><\/h2>\n\n\n\nPo kr\u00f3tkim, teoretycznym wprowadzeniu mo\u017cemy przej\u015b\u0107 do napisania naszego pierwszego testu automatycznego w tej aplikacji.<\/p>\n\n\n\n
Implementacja testu automatycznego<\/strong><\/h3>\n\n\n\nPrzygotowany przeze mnie test b\u0119dzie polega\u0142 na zautomatyzowaniu prostego przypadku dla testowo stworzonego sklepu. Scenariusz testu wygl\u0105da tak:<\/p>\n\n\n\n
\n- Przejd\u017a na stron\u0119 seleniumsklep.pl<\/li>\n\n\n\n
- Kliknij w wybrany produkt na podstawie jego nazwy.<\/li>\n\n\n\n
- Przejd\u017a do koszyka i sprawd\u017a, czy cena na podsumowaniu jest zgodna z cen\u0105, kt\u00f3ra znajduje si\u0119 w szczeg\u00f3\u0142ach produktu.<\/li>\n<\/ol>\n\n\n\n
Przechodzimy do Visual Studio i rozpoczynamy prac\u0119 od utworzenia projektu package library<\/em>. Jest to preferowany typ projektu, kt\u00f3ry zastosujemy. Kolejnym krokiem b\u0119dzie dodanie potrzebnych paczek za pomoc\u0105 NuGet packages. W naszym przypadku:<\/p>\n\n\n\n\n- Playwright,<\/li>\n\n\n\n
- Playwright Nunit.<\/li>\n<\/ul>\n\n\n\n
<\/a>Ryc. 6 Dodawanie potrzebnych paczek<\/figcaption><\/figure>\n\n\n\nPlaywright Nunit zawiera przydatne klasy, kt\u00f3re pomagaj\u0105 wsp\u00f3\u0142pracowa\u0107 narz\u0119dziom np. w kontek\u015bcie uruchamiania test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n
Kolejnym krokiem jest stworzenie potrzebnych katalog\u00f3w tak, aby od samego pocz\u0105tku porz\u0105dkowa\u0107 nasze rozwi\u0105zanie.<\/p>\n\n\n\n<\/a>Ryc. 7 Tworzenie katalog\u00f3w<\/figcaption><\/figure>\n\n\n\nNajpierw tworzymy katalog \u201ePages\u201d, w kt\u00f3rym umie\u015bcimy wszystkie page objecty potrzebne nam do testu automatycznego. Kolejnym niezb\u0119dnym katalogiem jest \u201eTests\u201d. <\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW klasie BaseSetup mamy dwie metody, kt\u00f3rych u\u017cyjemy we wszystkich testach dziedzicz\u0105cych z tej klasy. Metoda \u201eSetup()\u201d na pocz\u0105tku inicjalizuje obiekt Playwrighta. Robimy to w linii 17. Przed ni\u0105 deklarujemy trzy pola, kt\u00f3re b\u0119d\u0105 nam potrzebne w dalszej pracy.<\/p>\n\n\n\n
S\u0105 to pola:<\/p>\n\n\n\n
\n- Playwright,<\/li>\n\n\n\n
- Browser,<\/li>\n\n\n\n
- Context.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nW metodzie Setup() inicjalizujemy pole Browser, kt\u00f3re definiujemy, aby ustawi\u0107 jakiej przegl\u0105darki b\u0119dziemy u\u017cywa\u0107 w testach. Je\u017celi nie podamy parametru Headless, nie zobaczymy przebiegu test\u00f3w, poniewa\u017c uruchomi\u0105 si\u0119 bez trybu graficznego. Jest to przydatna opcja, dzi\u0119ki kt\u00f3rej unikamy wyskakuj\u0105cych okiem z testami. <\/p>\n\n\n\n
Kolejn\u0105 rzecz\u0105, kt\u00f3r\u0105 mo\u017cemy ustawi\u0107 w tym miejscu jest Channel. Playwright pozwala nam zdecydowa\u0107, jak\u0105 wersj\u0119 Chrome u\u017cy\u0107 w naszym te\u015bcie automatycznym. W bardzo prosty spos\u00f3b mo\u017cemy zdefiniowa\u0107, \u017ce chcemy skorzysta\u0107 np. z Chrome czy z Edge\u2019a w wersji beta. Mo\u017ce by\u0107 to bardzo przydatne do sprawdzenia dzia\u0142ania naszej aplikacji z nadchodz\u0105cymi wersjami przegl\u0105darek.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNast\u0119pnie przechodzimy do zdefiniowania Contextu. Czym jest Context? Inicjalizujemy pole Context, kt\u00f3re pozwala obs\u0142ugiwa\u0107 sesj\u0119 danej przegl\u0105darki. Wyr\u00f3\u017cnikiem Playwrighta jest to, \u017ce potrafi obs\u0142ugiwa\u0107 wi\u0119cej ni\u017c jedn\u0105 sesj\u0119 przegl\u0105darki na raz. Dodatkowo ka\u017cde z okien ma \u201eFocus\u201d, wi\u0119c nie musimy si\u0119 prze\u0142\u0105cza\u0107 pomi\u0119dzy nimi, je\u017celi chcemy wykona\u0107 jak\u0105\u015b akcj\u0119.<\/p>\n\n\n\n
R\u00f3wnie\u017c w obiekcie Browser mogliby\u015bmy od razu skorzysta\u0107 z metody NewContextAsync(), jednak tw\u00f3rcy Playwrighta polecaj\u0105, \u017ceby tworzy\u0107 kontekst za ka\u017cdym razem. Ka\u017cdy \u201eContext\u201d przechowuje oddzielny cache i ciasteczka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nKolejnym krokiem jest zdefiniowanie tzw. Tracingu. Ta metoda pozwala na zbieranie log\u00f3w podczas dzia\u0142ania testu automatycznego. \u015aledzi\u0107 mo\u017cemy:<\/p>\n\n\n\n
\n- Screenshots \u2013 tworzenie zrzutu ekranu po ka\u017cdej akcji,<\/li>\n\n\n\n
- Snapshots \u2013 zbieranie zawarto\u015bci DOM-u po ka\u017cdej akcji oraz zbieranie informacji z \u201enetworku\u201d, czyli wszystkie \u017c\u0105dania i informacje z konsoli,<\/li>\n\n\n\n
- Sources \u2013 zbieranie informacje na temat tego, kt\u00f3ra linia kodu by\u0142a uruchomiona w danym momencie.<\/li>\n<\/ul>\n\n\n\n
Kod \u017ar\u00f3d\u0142owy testu automatycznego<\/strong><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nPrzechodz\u0105c do kodu \u017ar\u00f3d\u0142owego testu automatycznego, zaczynamy od zdefiniowania nazwy metody. W tym przypadku jest to:<\/p>\n\n\n\n
EnterToShop_AddProductToBasket_CheckProductPriceInSummary()<\/code><\/pre>\n\n\n\nJako parametr definiujemy \u201eoption\u201d, dzi\u0119ki kt\u00f3remu w spos\u00f3b dynamiczny mo\u017cemy przekaza\u0107 nazw\u0119 artyku\u0142u, wybieranego przez test. Odpowiada na niego atrybut \u201eTestCase\u201d. Ka\u017cda kolejna linia w postaci atrybutu TestCase z argumentem, definiuje nam kolejny przypadek testowy.<\/p>\n\n\n\n
Zaczynamy od zdefiniowania obiektu page. Odpowiada on za kontrol\u0119 pojedynczej zak\u0142adki w przegl\u0105darce (oczywi\u015bcie skojarzonej z naszym kontekstem).<\/p>\n\n\n\n
HomePage<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefiniujemy page object dla strony HomePage. Sama strona posiada list\u0119 interesuj\u0105cych nas produkt\u00f3w.<\/p>\n\n\n\n<\/a>Ryc. 6 Strona z interesuj\u0105cymi nas produktami<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie tworzymy konstruktora dla tej klasy. Konstruktor b\u0119dzie przyjmowa\u0142 parametr jako obiekt page, kt\u00f3ry zawiera metody pozwalaj\u0105ce kontrolowa\u0107 akcje zwi\u0105zane z t\u0105 stron\u0105. Kolejnym krokiem jest zdefiniowanie pola ProductTitles z selektorem odpowiadaj\u0105cym nazwie ka\u017cdego z produkt\u00f3w.<\/p>\n\n\n\n
Potrzebujemy r\u00f3wnie\u017c metody SelectDefineProduct, kt\u00f3ra odpowiada za klikni\u0119cie w dany produkt na podstawie jego nazwy. <\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/p>\n\n\n\n
\n- Metoda QuerySelectorAllAsync \u2013 pozwala nam na pobranie wszystkich element\u00f3w na podstawie zadanego selectora.<\/li>\n\n\n\n
- Metoday InnerText \u2013 umo\u017cliwia pobranie tekstu z danego elementu.<\/li>\n\n\n\n
- Metoda ClickAsync \u2013 klika w element, kt\u00f3ry chcemy wybra\u0107.<\/li>\n<\/ul>\n\n\n\n
Ciekaw\u0105 w\u0142a\u015bciwo\u015bci\u0105 Playwrighta jest to, \u017ce wi\u0119kszo\u015b\u0107 wykorzystywanych metod, posiada dodatkowe sposoby u\u017cycia, kt\u00f3re poszerzaj\u0105 jego mo\u017cliwo\u015bci.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nJedn\u0105 z nich jest metoda ClickAsync. Pozwala nam zdefiniowa\u0107, ile razy chcemy klikn\u0105\u0107 lub okre\u015bli\u0107 czekanie po klikni\u0119ciu.<\/p>\n\n\n\n
Metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na danym obiekcie jest wiele. Oto kilka z nich:<\/p>\n\n\n\n<\/a>Ryc. 7 Dost\u0119pny wyb\u00f3r metod<\/figcaption><\/figure>\n\n\n\nWaity<\/strong><\/h3>\n\n\n\nTak jak wspomina\u0142em dla wi\u0119kszo\u015bci operacji nie mamy potrzeby dodawania dodatkowych wait\u00f3w. Jednak, mo\u017cemy skorzysta\u0107 z tych metod, gdy nasza strona jest bardziej skomplikowana i zale\u017cy nam na dodaniu czekania na element.<\/p>\n\n\n\n<\/a>Ryc. 8 Metody czekania na element<\/figcaption><\/figure>\n\n\n\nMo\u017cemy poczeka\u0107, a\u017c pop-up lub okre\u015blone \u017c\u0105danie si\u0119 pojawi\u0105. Ta metoda jest przydatna, gdy przechodzimy pomi\u0119dzy stronami i potrzebujemy poczeka\u0107 d\u0142u\u017cej na za\u0142adowanie strony.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWracaj\u0105c do test\u00f3w: nast\u0119pny krokiem w linii 18 jest skorzystanie z metody GoToAsync(), kt\u00f3ra przejdzie do okre\u015blonej strony internetowej. Adres do strony zapisujemy w osobnej klasie TestSettings.EnvUrl. Takie warto\u015bci jak adres do \u015brodowiska najlepiej przechowywa\u0107 w osobnych klasach\/plikach. Metoda GoToAsync ma r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 dodania dodatkowego czekania na za\u0142adowanie strony. Adres strony zapisujemy we w\u0142a\u015bciwo\u015bciach w klasie TestSettings.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nPo tym kroku, w te\u015bcie przechodzimy do wywo\u0142ania metody SelectDefineProduct(option). To ona kliknie w okre\u015blony produkt. Kolejnym dzia\u0142aniem jest dodanie klasy DetailsProductPage, w kt\u00f3rej zaczynam od stworzenia p\u00f3l potrzebnych do metod u\u017cywanych na dalszych etapach tego testu.<\/p>\n\n\n\n<\/a>Ryc. 9 Pole AddToBasketBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 10 Pole ProceedToCheckoutBtn odpowiada przyciskowi na stronie<\/figcaption><\/figure>\n\n\n\n<\/a>Ryc. 11 Pole CurrentPrice odpowiada obecnej cenie produktu, kt\u00f3ra znajduje si\u0119 na stronie szczeg\u00f3\u0142\u00f3w produktu<\/figcaption><\/figure>\n\n\n\nNast\u0119pnie, dodajemy konstruktor, kt\u00f3ry przez argument b\u0119dzie przyjmowa\u0142 obiekt page, pozwalaj\u0105cy na wykonywanie akcji zwi\u0105zanych ze stron\u0105.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDefiniujemy pole AddToBasektBtn. Aby doda\u0107 element w Playwright, korzystamy z metody _page.Locator(\u201enazwa_selectora\u201d), kt\u00f3ra na podstawie podanego selectora pozwala uzyska\u0107 dost\u0119p do elementu za pomoc\u0105 Playwrighta. Kolejnym elementem, kt\u00f3ry definiujemy w tej klasie, jest odpowiednik przycisku \u201eProceed to Checkout\u201d.<\/p>\n\n\n\n
By test zadzia\u0142a\u0142, kolejne wymagane pole to \u201eCurrentPrice\u201d. Pozwala ono na pobranie aktualnej ceny za nasz przedmiot.<\/p>\n\n\n\n
Po zdefiniowaniu wszystkich p\u00f3l niezb\u0119dnych dla testu przechodzimy do zdefiniowania dw\u00f3ch prostych metod:<\/p>\n\n\n\n
\n- metoda AddProductToCart() zawiera klikni\u0119cie przycisku dodania do koszyka,<\/li>\n\n\n\n
- metoda ProceedToCheckout() jest analogiczn\u0105 metod\u0105 do klikni\u0119cia dla przycisku \u201eProceed to checkout\u201d.<\/li>\n<\/ul>\n\n\n\n
<\/a><\/figure>\n\n\n\nDefiniuj\u0119 metod\u0119 GetCurrentProductPrice, kt\u00f3ra odpowiada za pobranie obecnej warto\u015bci ceny ze szczeg\u00f3\u0142\u00f3w tego produktu. Potrzebujemy jeszcze doda\u0107 metod\u0119 ParseEuroToDouble. Jest to metoda, kt\u00f3ra stosuje proste tzw. parsowanie, kt\u00f3re w tym przypadku usuwa symbol \u20ac z tekstu. W tym wypadku musimy to zrobi\u0107, poniewa\u017c element jest zdefiniowany w ten spos\u00f3b w HTML-u strony.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nOczywi\u015bcie jest to jedna z dr\u00f3g, ale mo\u017cna podej\u015b\u0107 do tego na wiele sposob\u00f3w. Innym pomys\u0142em jest skorzystanie z wyra\u017cenia regularnego, kt\u00f3re pozwoli\u0142oby na pobranie liczbowej warto\u015bci z tekstu. Metoda ParseEuroToDouble wygl\u0105da tak:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWracamy do kodu \u017ar\u00f3d\u0142owego testu. Wywo\u0142ujemy metody, kt\u00f3re pozwol\u0105 doda\u0107 produkt do koszyka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW kolejnej linii inicjalizujemy obiekt SummaryCartPage. Jest to obiekt reprezentuj\u0105cy klas\u0119 SummaryCartPage.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nW tej klasie opr\u00f3cz zdefiniowania konstruktora, dodajemy pole odpowiadaj\u0105ce elementowi kwoty w podsumowaniu koszyka.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nR\u00f3wnie\u017c w tym miejscu korzystamy z metody ParseEuroToDouble, bo w tej sytuacji jest por\u00f3wnywalna. Po dodaniu tej metody, wracamy do kodu testu i por\u00f3wnujemy warto\u015b\u0107 zmiennej currentTotalPrice z productPrice. To por\u00f3wnanie korzysta z biblioteki FluentAssertions, kt\u00f3r\u0105 dodajemy poprzez NuGeta. Jest to biblioteka do asercji, kt\u00f3ra pozwala na bardziej czytelny zapis ni\u017c standardowe metody z klasy Assert. Dalej, przechodzimy do uruchomienia testu. Mo\u017cemy tego dokona\u0107 za pomoc\u0105 dotnet test z poziomu VS oraz z poziomu VS i R#.<\/p>\n\n\n\n<\/a>Ryc. 12 Uruchamianie testu<\/figcaption><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nW artykule pokaza\u0142em Playwrighta w praktyce i przedstawi\u0142em kilka cech, kt\u00f3re mog\u0105 Ci\u0119 zainteresowa\u0107 i przekona\u0107 do spr\u00f3bowania pracy z tym narz\u0119dziem.<\/p>\n\n\n\n
W nast\u0119pnej cz\u0119\u015bci chcia\u0142bym zaprezentowa\u0107 jak skorzysta\u0107 z Trace Viewer, przydatnej funkcji, kt\u00f3ra pozwala nam przegl\u0105da\u0107 zebrane logi z test\u00f3w. Przedstawi\u0119 tak\u017ce inne ciekawe w\u0142a\u015bciwo\u015bci tego narz\u0119dzia.<\/p>\n\n\n\n
Warto zauwa\u017cy\u0107, \u017ce liczba u\u017cytkownik\u00f3w narz\u0119dzia Playwright ro\u015bnie, co mo\u017cna zobaczy\u0107 na poni\u017cszej grafice.<\/p>\n\n\n\n Playwright, spo\u015br\u00f3d bibliotek u\u017cywanych w testach, poprawi\u0142 wynik wykorzystania w\u015br\u00f3d spo\u0142eczno\u015bci z 3% w 2020 roku do 10% w 2021 roku. Ten ranking odno\u015bni si\u0119 do wersji JS\/TS Playwrighta, jednak moim zdaniem jest to zauwa\u017calny skok popularno\u015bci, kt\u00f3ry b\u0119dzie prawdopodobnie r\u00f3wnie\u017c odnotowany przy innych wersjach j\u0119zykowych narz\u0119dzia.<\/p>\n\n\n\n Poprawi\u0142a si\u0119 r\u00f3wnie\u017c \u015bwiadomo\u015b\u0107 na temat Playwrighta w\u015br\u00f3d spo\u0142eczno\u015bci \u2013 z 19% w 2020 roku do 34% rok p\u00f3\u017aniej.<\/p>\n\n\n\n Przy wyborze narz\u0119dzi warto zwraca\u0107 uwag\u0119 na ich popularno\u015b\u0107 oraz pozytywny odbi\u00f3r przez spo\u0142eczno\u015b\u0107. Playwright posiada oba aspekty.<\/p>\n\n\n\n Niew\u0105tpliwie warto wspomnie\u0107 o szybkim rozwoju Playwrighta. Co oko\u0142o dwa tygodnie dodawana jest nowa wersja z usprawnieniami (cz\u0119stotliwo\u015b\u0107 zmian mo\u017cna sprawdzi\u0107 na GitHubie).<\/p>\n\n\n\n Przy wyborze potencjalnego narz\u0119dzia zawsze zwracam uwag\u0119 na rozmiar spo\u0142eczno\u015bci, kt\u00f3ra za nim stoi. W tym wypadku jest to Microsoft i jego pracownicy, ale r\u00f3wnie\u017c coraz wi\u0119cej zaanga\u017cowanych os\u00f3b spoza firmy.<\/p>\n\n\n\n Obecnie Playwright wspiera wszystkie najpopularniejsze przegl\u0105darki internetowe, czyli:<\/p>\n\n\n\n Rozwi\u0105zania oparte na Electronie r\u00f3wnie\u017c maj\u0105 eksperymentalne wsparcie dla wersji JS\/TS.<\/p>\n\n\n\n Coraz wi\u0119cej projekt\u00f3w chwali si\u0119, \u017ce korzysta z narz\u0119dzia Playwright w swoich testach UI. S\u0105 to popularne inicjatywy open source, ale r\u00f3wnie\u017c rozwi\u0105zania komercyjne. Poni\u017cej kilka przyk\u0142ad\u00f3w:<\/p>\n\n\n\n W przypadku wszystkich narz\u0119dzi zdarzaj\u0105 si\u0119 momenty, gdy jaka\u015b metoda nie dzia\u0142a poprawnie w okre\u015blonej sytuacji. Jako u\u017cytkownik Playwrighta spotka\u0142em si\u0119 z problemami sporadycznie i zawsze udawa\u0142o mi si\u0119 znale\u017a\u0107 rozwi\u0105zanie. Nie mog\u0119 natomiast wykluczy\u0107, \u017ce mo\u017cemy trafi\u0107 na okoliczno\u015bci, w kt\u00f3rych rozwi\u0105zania nie znajdziemy. Warto w\u00f3wczas porozmawia\u0107 z tw\u00f3rcami narz\u0119dzia \u2013 s\u0105 oni dost\u0119pni i aktywnie bior\u0105 udzia\u0142 w odpisywaniu na zg\u0142oszenia, kt\u00f3re trafiaj\u0105 na GitHuba.<\/p>\n\n\n\n Po kr\u00f3tkim, teoretycznym wprowadzeniu mo\u017cemy przej\u015b\u0107 do napisania naszego pierwszego testu automatycznego w tej aplikacji.<\/p>\n\n\n\n Przygotowany przeze mnie test b\u0119dzie polega\u0142 na zautomatyzowaniu prostego przypadku dla testowo stworzonego sklepu. Scenariusz testu wygl\u0105da tak:<\/p>\n\n\n\n Przechodzimy do Visual Studio i rozpoczynamy prac\u0119 od utworzenia projektu package library<\/em>. Jest to preferowany typ projektu, kt\u00f3ry zastosujemy. Kolejnym krokiem b\u0119dzie dodanie potrzebnych paczek za pomoc\u0105 NuGet packages. W naszym przypadku:<\/p>\n\n\n\n Playwright Nunit zawiera przydatne klasy, kt\u00f3re pomagaj\u0105 wsp\u00f3\u0142pracowa\u0107 narz\u0119dziom np. w kontek\u015bcie uruchamiania test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n Kolejnym krokiem jest stworzenie potrzebnych katalog\u00f3w tak, aby od samego pocz\u0105tku porz\u0105dkowa\u0107 nasze rozwi\u0105zanie.<\/p>\n\n\n\n Najpierw tworzymy katalog \u201ePages\u201d, w kt\u00f3rym umie\u015bcimy wszystkie page objecty potrzebne nam do testu automatycznego. Kolejnym niezb\u0119dnym katalogiem jest \u201eTests\u201d. <\/p>\n\n\n\n W klasie BaseSetup mamy dwie metody, kt\u00f3rych u\u017cyjemy we wszystkich testach dziedzicz\u0105cych z tej klasy. Metoda \u201eSetup()\u201d na pocz\u0105tku inicjalizuje obiekt Playwrighta. Robimy to w linii 17. Przed ni\u0105 deklarujemy trzy pola, kt\u00f3re b\u0119d\u0105 nam potrzebne w dalszej pracy.<\/p>\n\n\n\n S\u0105 to pola:<\/p>\n\n\n\n W metodzie Setup() inicjalizujemy pole Browser, kt\u00f3re definiujemy, aby ustawi\u0107 jakiej przegl\u0105darki b\u0119dziemy u\u017cywa\u0107 w testach. Je\u017celi nie podamy parametru Headless, nie zobaczymy przebiegu test\u00f3w, poniewa\u017c uruchomi\u0105 si\u0119 bez trybu graficznego. Jest to przydatna opcja, dzi\u0119ki kt\u00f3rej unikamy wyskakuj\u0105cych okiem z testami. <\/p>\n\n\n\n Kolejn\u0105 rzecz\u0105, kt\u00f3r\u0105 mo\u017cemy ustawi\u0107 w tym miejscu jest Channel. Playwright pozwala nam zdecydowa\u0107, jak\u0105 wersj\u0119 Chrome u\u017cy\u0107 w naszym te\u015bcie automatycznym. W bardzo prosty spos\u00f3b mo\u017cemy zdefiniowa\u0107, \u017ce chcemy skorzysta\u0107 np. z Chrome czy z Edge\u2019a w wersji beta. Mo\u017ce by\u0107 to bardzo przydatne do sprawdzenia dzia\u0142ania naszej aplikacji z nadchodz\u0105cymi wersjami przegl\u0105darek.<\/p>\n\n\n\n <\/p>\n\n\n\n Nast\u0119pnie przechodzimy do zdefiniowania Contextu. Czym jest Context? Inicjalizujemy pole Context, kt\u00f3re pozwala obs\u0142ugiwa\u0107 sesj\u0119 danej przegl\u0105darki. Wyr\u00f3\u017cnikiem Playwrighta jest to, \u017ce potrafi obs\u0142ugiwa\u0107 wi\u0119cej ni\u017c jedn\u0105 sesj\u0119 przegl\u0105darki na raz. Dodatkowo ka\u017cde z okien ma \u201eFocus\u201d, wi\u0119c nie musimy si\u0119 prze\u0142\u0105cza\u0107 pomi\u0119dzy nimi, je\u017celi chcemy wykona\u0107 jak\u0105\u015b akcj\u0119.<\/p>\n\n\n\n R\u00f3wnie\u017c w obiekcie Browser mogliby\u015bmy od razu skorzysta\u0107 z metody NewContextAsync(), jednak tw\u00f3rcy Playwrighta polecaj\u0105, \u017ceby tworzy\u0107 kontekst za ka\u017cdym razem. Ka\u017cdy \u201eContext\u201d przechowuje oddzielny cache i ciasteczka.<\/p>\n\n\n\n Kolejnym krokiem jest zdefiniowanie tzw. Tracingu. Ta metoda pozwala na zbieranie log\u00f3w podczas dzia\u0142ania testu automatycznego. \u015aledzi\u0107 mo\u017cemy:<\/p>\n\n\n\n Przechodz\u0105c do kodu \u017ar\u00f3d\u0142owego testu automatycznego, zaczynamy od zdefiniowania nazwy metody. W tym przypadku jest to:<\/p>\n\n\n\n Jako parametr definiujemy \u201eoption\u201d, dzi\u0119ki kt\u00f3remu w spos\u00f3b dynamiczny mo\u017cemy przekaza\u0107 nazw\u0119 artyku\u0142u, wybieranego przez test. Odpowiada na niego atrybut \u201eTestCase\u201d. Ka\u017cda kolejna linia w postaci atrybutu TestCase z argumentem, definiuje nam kolejny przypadek testowy.<\/p>\n\n\n\n Zaczynamy od zdefiniowania obiektu page. Odpowiada on za kontrol\u0119 pojedynczej zak\u0142adki w przegl\u0105darce (oczywi\u015bcie skojarzonej z naszym kontekstem).<\/p>\n\n\n\n HomePage<\/p>\n\n\n\n Definiujemy page object dla strony HomePage. Sama strona posiada list\u0119 interesuj\u0105cych nas produkt\u00f3w.<\/p>\n\n\n\n Nast\u0119pnie tworzymy konstruktora dla tej klasy. Konstruktor b\u0119dzie przyjmowa\u0142 parametr jako obiekt page, kt\u00f3ry zawiera metody pozwalaj\u0105ce kontrolowa\u0107 akcje zwi\u0105zane z t\u0105 stron\u0105. Kolejnym krokiem jest zdefiniowanie pola ProductTitles z selektorem odpowiadaj\u0105cym nazwie ka\u017cdego z produkt\u00f3w.<\/p>\n\n\n\n Potrzebujemy r\u00f3wnie\u017c metody SelectDefineProduct, kt\u00f3ra odpowiada za klikni\u0119cie w dany produkt na podstawie jego nazwy. <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Ciekaw\u0105 w\u0142a\u015bciwo\u015bci\u0105 Playwrighta jest to, \u017ce wi\u0119kszo\u015b\u0107 wykorzystywanych metod, posiada dodatkowe sposoby u\u017cycia, kt\u00f3re poszerzaj\u0105 jego mo\u017cliwo\u015bci.<\/p>\n\n\n\n Jedn\u0105 z nich jest metoda ClickAsync. Pozwala nam zdefiniowa\u0107, ile razy chcemy klikn\u0105\u0107 lub okre\u015bli\u0107 czekanie po klikni\u0119ciu.<\/p>\n\n\n\n Metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na danym obiekcie jest wiele. Oto kilka z nich:<\/p>\n\n\n\n Tak jak wspomina\u0142em dla wi\u0119kszo\u015bci operacji nie mamy potrzeby dodawania dodatkowych wait\u00f3w. Jednak, mo\u017cemy skorzysta\u0107 z tych metod, gdy nasza strona jest bardziej skomplikowana i zale\u017cy nam na dodaniu czekania na element.<\/p>\n\n\n\n Mo\u017cemy poczeka\u0107, a\u017c pop-up lub okre\u015blone \u017c\u0105danie si\u0119 pojawi\u0105. Ta metoda jest przydatna, gdy przechodzimy pomi\u0119dzy stronami i potrzebujemy poczeka\u0107 d\u0142u\u017cej na za\u0142adowanie strony.<\/p>\n\n\n\n <\/p>\n\n\n\n Wracaj\u0105c do test\u00f3w: nast\u0119pny krokiem w linii 18 jest skorzystanie z metody GoToAsync(), kt\u00f3ra przejdzie do okre\u015blonej strony internetowej. Adres do strony zapisujemy w osobnej klasie TestSettings.EnvUrl. Takie warto\u015bci jak adres do \u015brodowiska najlepiej przechowywa\u0107 w osobnych klasach\/plikach. Metoda GoToAsync ma r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 dodania dodatkowego czekania na za\u0142adowanie strony. Adres strony zapisujemy we w\u0142a\u015bciwo\u015bciach w klasie TestSettings.<\/p>\n\n\n\n Po tym kroku, w te\u015bcie przechodzimy do wywo\u0142ania metody SelectDefineProduct(option). To ona kliknie w okre\u015blony produkt. Kolejnym dzia\u0142aniem jest dodanie klasy DetailsProductPage, w kt\u00f3rej zaczynam od stworzenia p\u00f3l potrzebnych do metod u\u017cywanych na dalszych etapach tego testu.<\/p>\n\n\n\n Nast\u0119pnie, dodajemy konstruktor, kt\u00f3ry przez argument b\u0119dzie przyjmowa\u0142 obiekt page, pozwalaj\u0105cy na wykonywanie akcji zwi\u0105zanych ze stron\u0105.<\/p>\n\n\n\n Definiujemy pole AddToBasektBtn. Aby doda\u0107 element w Playwright, korzystamy z metody _page.Locator(\u201enazwa_selectora\u201d), kt\u00f3ra na podstawie podanego selectora pozwala uzyska\u0107 dost\u0119p do elementu za pomoc\u0105 Playwrighta. Kolejnym elementem, kt\u00f3ry definiujemy w tej klasie, jest odpowiednik przycisku \u201eProceed to Checkout\u201d.<\/p>\n\n\n\n By test zadzia\u0142a\u0142, kolejne wymagane pole to \u201eCurrentPrice\u201d. Pozwala ono na pobranie aktualnej ceny za nasz przedmiot.<\/p>\n\n\n\n Po zdefiniowaniu wszystkich p\u00f3l niezb\u0119dnych dla testu przechodzimy do zdefiniowania dw\u00f3ch prostych metod:<\/p>\n\n\n\n Definiuj\u0119 metod\u0119 GetCurrentProductPrice, kt\u00f3ra odpowiada za pobranie obecnej warto\u015bci ceny ze szczeg\u00f3\u0142\u00f3w tego produktu. Potrzebujemy jeszcze doda\u0107 metod\u0119 ParseEuroToDouble. Jest to metoda, kt\u00f3ra stosuje proste tzw. parsowanie, kt\u00f3re w tym przypadku usuwa symbol \u20ac z tekstu. W tym wypadku musimy to zrobi\u0107, poniewa\u017c element jest zdefiniowany w ten spos\u00f3b w HTML-u strony.<\/p>\n\n\n\n Oczywi\u015bcie jest to jedna z dr\u00f3g, ale mo\u017cna podej\u015b\u0107 do tego na wiele sposob\u00f3w. Innym pomys\u0142em jest skorzystanie z wyra\u017cenia regularnego, kt\u00f3re pozwoli\u0142oby na pobranie liczbowej warto\u015bci z tekstu. Metoda ParseEuroToDouble wygl\u0105da tak:<\/p>\n\n\n\n Wracamy do kodu \u017ar\u00f3d\u0142owego testu. Wywo\u0142ujemy metody, kt\u00f3re pozwol\u0105 doda\u0107 produkt do koszyka.<\/p>\n\n\n\n W kolejnej linii inicjalizujemy obiekt SummaryCartPage. Jest to obiekt reprezentuj\u0105cy klas\u0119 SummaryCartPage.<\/p>\n\n\n\n W tej klasie opr\u00f3cz zdefiniowania konstruktora, dodajemy pole odpowiadaj\u0105ce elementowi kwoty w podsumowaniu koszyka.<\/p>\n\n\n\n R\u00f3wnie\u017c w tym miejscu korzystamy z metody ParseEuroToDouble, bo w tej sytuacji jest por\u00f3wnywalna. Po dodaniu tej metody, wracamy do kodu testu i por\u00f3wnujemy warto\u015b\u0107 zmiennej currentTotalPrice z productPrice. To por\u00f3wnanie korzysta z biblioteki FluentAssertions, kt\u00f3r\u0105 dodajemy poprzez NuGeta. Jest to biblioteka do asercji, kt\u00f3ra pozwala na bardziej czytelny zapis ni\u017c standardowe metody z klasy Assert. Dalej, przechodzimy do uruchomienia testu. Mo\u017cemy tego dokona\u0107 za pomoc\u0105 dotnet test z poziomu VS oraz z poziomu VS i R#.<\/p>\n\n\n\n W artykule pokaza\u0142em Playwrighta w praktyce i przedstawi\u0142em kilka cech, kt\u00f3re mog\u0105 Ci\u0119 zainteresowa\u0107 i przekona\u0107 do spr\u00f3bowania pracy z tym narz\u0119dziem.<\/p>\n\n\n\n W nast\u0119pnej cz\u0119\u015bci chcia\u0142bym zaprezentowa\u0107 jak skorzysta\u0107 z Trace Viewer, przydatnej funkcji, kt\u00f3ra pozwala nam przegl\u0105da\u0107 zebrane logi z test\u00f3w. Przedstawi\u0119 tak\u017ce inne ciekawe w\u0142a\u015bciwo\u015bci tego narz\u0119dzia.<\/p>\n\n\n\n![\"Ranking](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/12\/Ryc.-1.png\")
<\/a><\/a>Cz\u0119stotliwo\u015b\u0107 dostarczania nowych wersji<\/strong><\/h3>\n\n\n\n
<\/a>Przegl\u0105darki wspierane przez Playwrighta<\/strong><\/h3>\n\n\n\n
\n
Projekty wykorzystuj\u0105ce Playwrighta<\/strong><\/h3>\n\n\n\n
<\/a><\/a>S\u0142abe strony Playwrighta<\/strong><\/h2>\n\n\n\n
Napiszmy pierwszy test!<\/strong><\/h2>\n\n\n\n
Implementacja testu automatycznego<\/strong><\/h3>\n\n\n\n
\n
\n
<\/a><\/a><\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\n
Kod \u017ar\u00f3d\u0142owy testu automatycznego<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\nEnterToShop_AddProductToBasket_CheckProductPriceInSummary()<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/a><\/figure>\n\n\n\n<\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a>Waity<\/strong><\/h3>\n\n\n\n
<\/a><\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/a><\/a><\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/a><\/figure>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\n