{"id":20531,"date":"2023-04-04T05:00:00","date_gmt":"2023-04-04T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=20531"},"modified":"2023-05-10T15:12:42","modified_gmt":"2023-05-10T13:12:42","slug":"wprowadzenie-do-wizualnych-testow-regresji-w-playwright","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/wprowadzenie-do-wizualnych-testow-regresji-w-playwright\/","title":{"rendered":"Wprowadzenie do wizualnych test\u00f3w regresji w Playwright"},"content":{"rendered":"\n

W artykule zaprezentuj\u0119, jak wykona\u0107 visual testing (visual comparisons) za pomoc\u0105 Playwrighta przy u\u017cyciu komputera z MacOS i Visual Studio Code.<\/p>\n\n\n\n

Celowo pomin\u0119 wprowadzenie i informacje o narz\u0119dziu do automatyzacji test\u00f3w end-to-end, jakim jest Playwight. Moim zdaniem \u015bwietn\u0105 robot\u0119 w tym zakresie wykona\u0142 Micha\u0142 \u015al\u0119zak w artykule: Playwright \u2013 dlaczego warto zainteresowa\u0107 si\u0119 narz\u0119dziem od Microsoftu?<\/a>, do kt\u00f3rego Was odsy\u0142am.<\/p>\n\n\n\n

Czym jest visual regression testing?<\/strong><\/h2>\n\n\n\n

Z ciekawo\u015bci zada\u0142em takie pytanie narz\u0119dziu ChatGPT. Oto fragment odpowiedzi:<\/p>\n\n\n\n

\"Odpowied\u017a<\/a>
Ryc. 1 Odpowied\u017a ChatGPT na pytanie dotycz\u0105ce wizualnych test\u00f3w regresji<\/figcaption><\/figure><\/div>\n\n\n\n

Podsumowuj\u0105c, wizualne testy regresji maj\u0105 na celu sprawdzenie czy zmiany nie spowodowa\u0142y b\u0142\u0119du w warstwie wizualnej i czy aplikacja po zmianach wygl\u0105da tak samo<\/strong>. Mo\u017cemy je wykona\u0107 manualnie, opieraj\u0105c si\u0119 na spostrzegawczo\u015bci testera, ale tak\u017ce mamy mo\u017cliwo\u015b\u0107 automatyzacji tego procesu.<\/p>\n\n\n\n

Dok\u0142adnie na tej aktualizacji b\u0119dzie polega\u0107 test, kt\u00f3ry wsp\u00f3lnie napiszemy z u\u017cyciem Playwrighta.<\/p>\n\n\n\n

Tworzenie projektu<\/strong> \u2013 napiszmy test<\/strong><\/h2>\n\n\n\n

OK, to zaczynamy J Zgodnie z dokumentacj\u0105 Playwrighta<\/a> zawart\u0105 na stronie rozpoczynamy od stworzenia nowego folderu. W naszym przypadku b\u0119dzie nazywa\u0142 si\u0119 \/visual_testing_sii<\/em>. Nast\u0119pnie przygotowujemy nowy projekt za pomoc\u0105 polecenia: npm init playwright@latest<\/em> \u2013 w kreatorze tworzenia projektu wybieramy j\u0119zyk JavaScript.<\/p>\n\n\n\n

\"Zrzut<\/a>
Ryc. 2 Zrzut ekranu z poleceniem odpowiedzialnym za tworzenie nowego projektu<\/figcaption><\/figure><\/div>\n\n\n\n
\"Wyb\u00f3r<\/a>
Ryc. 3 Wyb\u00f3r j\u0119zyka w trakcie tworzenia projektu<\/figcaption><\/figure><\/div>\n\n\n\n

Po uko\u0144czeniu dzia\u0142ania kreatora powinni\u015bmy uzyska\u0107 projekt gotowy do pracy.<\/p>\n\n\n\n

\"Zrzut<\/a>
Ryc. 4 Zrzut ekranu z informacj\u0105 o prawid\u0142owym utworzeniu projektu<\/figcaption><\/figure><\/div>\n\n\n\n

Tylko dla cel\u00f3w projektu w g\u0142\u00f3wnym katalogu utworzymy katalog webpage, w kt\u00f3rym przygotujemy pliki index.html i app.css<\/em>, pozwalaj\u0105ce nam zobaczy\u0107 dzia\u0142anie test\u00f3w.<\/p>\n\n\n\n

W katalogu webpage przygotowujemy plik index.html<\/em> z kodem:<\/p>\n\n\n

\n<!DOCTYPE html>\n<html lang="en">\n\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Sii<\/title>\n    <link rel="stylesheet" href="app.css">\n<\/head>\n\n<body>\n    <h1>\u0141ukasz Krause - Visual Testing<\/h1>\n    <section id="container"><\/section>\n    <script src="app.js"><\/script>\n<\/body>\n\n<\/html>\n<\/pre><\/div>\n\n\n
oraz dodajemy plik css app.css<\/em> z kodem:<\/p>\n\n\n
\nh1 {\n    text-align: center;\n    color: blue;\n    font-size: 42px;\n}\n<\/pre><\/div>\n\n\n
Poni\u017cej poka\u017c\u0119, w jaki spos\u00f3b mo\u017cna uruchomi\u0107 w przegl\u0105darce lokalnie z u\u017cyciem dodatku Web Server for Chrome tak przygotowan\u0105 stron\u0119. W innym przypadku musieliby\u015bmy otwiera\u0107 lokalnie plik html z pe\u0142n\u0105 \u015bcie\u017ck\u0105.<\/p>\n\n\n\n
Najpierw instalujemy dodatek<\/a> i po uruchomieniu Web Server for Chrome wskazujemy folder z nasz\u0105 stron\u0105 www.<\/p>\n\n\n\n
\"Zrzut<\/a>
Ryc. 5 Zrzut ekranu ustawie\u0144 wtyczki Web Server from Chrome<\/figcaption><\/figure><\/div>\n\n\n\n
Teraz mo\u017cemy wr\u00f3ci\u0107 do pisania testu. W katalogu tests<\/em> tworzymy plik visual_test.spec.js<\/em> i importujemy do niego potrzebne biblioteki.<\/p>\n\n\n
\nimport { test, expect } from '@playwright\/test';\n<\/pre><\/div>\n\n\n
Przygotowujemy pierwszy test zgodnie z dokumentacj\u0105:<\/p>\n\n\n
\nimport { test, expect } from '@playwright\/test';\n\ntest('Visual comparisons test', async ({ page }) => {\n  await page.goto('http:\/\/127.0.0.1:8887');\n});\n<\/pre><\/div>\n\n\n
W page.goto podajemy adres strony www wskazany przez Web Server for Chrome.<\/p>\n\n\n\n
W projekcie w katalogu \/tests<\/em> nadal mamy plik utworzony przez Playwrigth example.spec.js<\/em>. Aby nam teraz nie przeszkadza\u0142, do test\u00f3w w nim zawartych dodamy adnotacj\u0119 .skip<\/em>.<\/p>\n\n\n
\ntest.skip('has title', async ({ page }) => {\ntest.skip('get started link', async ({ page }) => {\n<\/pre><\/div>\n\n\n
Nast\u0119pnie uruchomimy nasz test za pomoc\u0105 polecenia:<\/p>\n\n\n
\nnpx playwright test\n<\/pre><\/div>\n\n\n
Uwaga<\/strong>: aktualnie test uruchamia tylko stron\u0119 www i nie robi nic wi\u0119cej. Jak pewnie zauwa\u017cy\u0142e\u015b, Drogi U\u017cytkowniku, przegl\u0105darka nie zosta\u0142a nawet uruchomiona, a test zosta\u0142 wykonany. Domy\u015blnie testy s\u0105 uruchamiane w trybie headless<\/strong>. Na szcz\u0119\u015bcie dokumentacja Playwright informuje nas w przejrzysty spos\u00f3b, jak mo\u017cemy to zmieni\u0107.<\/p>\n\n\n\n
W tym celu powinni\u015bmy si\u0119 uda\u0107 do pliku konfiguracyjnego playwright.config.js<\/em> i doda\u0107 w cz\u0119\u015bci use<\/em> parametr headless<\/em> i ustawi\u0107 go na warto\u015b\u0107 false:<\/p>\n\n\n\n
\"Zrzut<\/a>
Ryc. 6 Zrzut ekranu z ustawieniami projektu w Playwright<\/figcaption><\/figure><\/div>\n\n\n\n
Teraz, zgodnie z dokumentacj\u0105, dodajemy kod, kt\u00f3ry b\u0119dzie odpowiedzialny za wizualne testy.<\/p>\n\n\n
\nawait expect(page).toHaveScreenshot();\n<\/pre><\/div>\n\n\n
Uruchamiamy ponownie test za pomoc\u0105 npx playwright<\/em> test. Zobaczymy, \u017ce testy dadz\u0105 b\u0142\u0119dny wynik. Dzieje si\u0119 tak dlatego, \u017ce w katalogu z projektem nie ma \u017cadnego obrazu referencyjnego<\/strong>, na podstawie kt\u00f3rego Playwright sprawdza\u0142by poprawno\u015b\u0107 wizualn\u0105 strony. Jednak po wykonaniu test\u00f3w takie obrazy zosta\u0142y przygotowane.<\/p>\n\n\n\n
\"Zrzut<\/a>
Ryc. 7 Zrzut ekranu pokazuj\u0105cy utworzenie obrazu referencyjnego<\/figcaption><\/figure><\/div>\n\n\n\n
Aczkolwiek, gdy ponownie uruchomimy test, to wszystkie testy powinny zako\u0144czy\u0107 si\u0119 wynikiem Passed. Dzieje si\u0119 tak dlatego, \u017ce posiadamy ju\u017c obraz referencyjny.<\/strong><\/p>\n\n\n\n
Wykrywanie zmian<\/strong><\/h3>\n\n\n\n
Kolejnym krokiem jest sprawdzenie czy testy dzia\u0142aj\u0105. Powinni\u015bmy te\u017c dokona\u0107 jakiej\u015b wizualnej zmiany, kt\u00f3ra pozwoli nam skontrolowa\u0107, czy Playwright wykryj\u0119 t\u0119 zmian\u0119.<\/p>\n\n\n\n
W pliku app.css<\/em> zwi\u0119kszymy czcionk\u0119 elementu h1 o jeden piksel wi\u0119cej, czyli zamienimy:<\/p>\n\n\n
\nh1 {\n    text-align: center;\n    color: blue;\n    font-size: 42px;\n}\n\n<\/pre><\/div>\n\n\n
na:<\/p>\n\n\n
\nh1 {\n    text-align: center;\n    color: blue;\n    font-size: 43px;\n}\n<\/pre><\/div>\n\n\n
Dla ludzkiego oka ta zmiana powinna by\u0107 trudna do wykrycia, ale upewnimy si\u0119, czy Playwright nas o niej poinformuje.<\/p>\n\n\n\n
Po uruchomieniu test\u00f3w widzimy nowy wynik \u2013 tym razem Failed.<\/p>\n\n\n\n
\"Wynik<\/a>
Ryc. 8 Wynik testu w Playwright<\/figcaption><\/figure><\/div>\n\n\n\n
Dodatkowo, Playwright pokazuje, gdzie pojawia si\u0119 r\u00f3\u017cnica.<\/p>\n\n\n\n
\"Widok<\/a>
Ryc. 9 Widok obrazu, kt\u00f3ry stworzy\u0142 Playwright, wskazuj\u0105cy miejsce r\u00f3\u017cnicy w testach<\/figcaption><\/figure><\/div>\n\n\n\n
Przywr\u00f3\u0107my wielko\u015b\u0107 czcionki do warto\u015bci 42 px i uruchommy ponownie test \u2013 powinien zako\u0144czy\u0107 si\u0119 sukcesem.<\/p>\n\n\n\n
Teraz dokonamy zmiany koloru elementu h1.<\/p>\n\n\n\n
Zamie\u0144my:<\/p>\n\n\n
\nh1 {\n    text-align: center;\n    color: blue;\n    font-size: 42px;\n}\n<\/pre><\/div>\n\n\n
na:<\/p>\n\n\n
\nh1 {\n    text-align: center;\n    color: lightblue;\n    font-size: 42px;\n}\n<\/pre><\/div>\n\n\n
W powy\u017cszym przypadku ponownie otrzymamy wynik Fail. Jak wida\u0107, Playwright jest w stanie wykry\u0107 drobne zmiany w zakresie kolor\u00f3w i wielko\u015bci element\u00f3w. Oczywi\u015bcie w przypadku zmiany, kt\u00f3ra jest po\u017c\u0105dana i celowa<\/strong>, mo\u017cemy uaktualni\u0107 obraz referencyjny za pomoc\u0105 polecenia: npx playwright test –update-snapshots<\/em><\/p>\n\n\n\n
Playwrigth vs Cypress<\/strong><\/h2>\n\n\n\n
Z zagadnieniem visual testing pierwszy raz spotka\u0142em si\u0119 we frameworku Cypress. Jednak w Cypressie dost\u0119pu do takich test\u00f3w nie dostajemy out-of-the-box i musimy si\u0119 posi\u0142kowa\u0107 zewn\u0119trznym dodatkiem. Tym samym procedura skorzystania z nich jest bardziej skomplikowana. Sam dodatek wygl\u0105da na porzucony i nierozwijany.<\/p>\n\n\n\n
\"Informacja<\/a>
Ryc. 10 Informacja o dodatku do Cypressa, kt\u00f3ry wykorzystywany jest do wizualnych test\u00f3w regresji<\/figcaption><\/figure><\/div>\n\n\n\n
Podsumowanie<\/strong><\/h2>\n\n\n\n
Playwright umo\u017cliwia nam wykonanie wizualnych test\u00f3w regresji w spos\u00f3b przyjemny i \u0142atwy. Bazuj\u0105c na obrazku referencyjnym, za pomoc\u0105 tego narz\u0119dzia jeste\u015bmy w stanie wykry\u0107 drobne zmiany. Playwright pozwala na utworzenie obrazku referencyjnego na podstawie wybranego elementu, nie musi to by\u0107 ca\u0142a strona www.<\/p>\n\n\n\n
Moim zdaniem w taki spos\u00f3b mo\u017cemy sprawdzi\u0107 strony, kt\u00f3re powinny by\u0107 statyczne i dzi\u0119ki niemu, jeste\u015bmy w stanie wykry\u0107, czy nasze zmiany zmieni\u0142y sposob\u00f3w wy\u015bwietlania ca\u0142ej strony lub poszczeg\u00f3lnych jej cz\u0119\u015bci.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Wi\u0119cej o narz\u0119dziu Playwright dowiesz si\u0119 z artyku\u0142u naszego eksperta: Playwright \u2013 dlaczego warto zainteresowa\u0107 si\u0119 narz\u0119dziem od Microsoftu?<\/a><\/p>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            5\/5 ( votes: 12)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
W artykule zaprezentuj\u0119, jak wykona\u0107 visual testing (visual comparisons) za pomoc\u0105 Playwrighta przy u\u017cyciu komputera z MacOS i Visual Studio … Continued<\/a><\/p>\n","protected":false},"author":190,"featured_media":20555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1317],"tags":[1579,1051,468],"class_list":["post-20531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-testowanie","tag-playwright","tag-cypress","tag-testy-wizualne"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/Wprowadzenie-do-wizualnych-testow-regresji-w-Playwright.jpg","category_names":["Testowanie"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20531"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=20531"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20531\/revisions"}],"predecessor-version":[{"id":21572,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20531\/revisions\/21572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/20555"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=20531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=20531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=20531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}