{"id":29833,"date":"2024-12-13T05:00:00","date_gmt":"2024-12-13T04:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=29833"},"modified":"2025-05-07T13:01:02","modified_gmt":"2025-05-07T11:01:02","slug":"playwright-w-praktyce-5-krokow-do-skutecznego-frameworka-do-automatyzacji-testow-ui-web-czesc-i","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/playwright-w-praktyce-5-krokow-do-skutecznego-frameworka-do-automatyzacji-testow-ui-web-czesc-i\/","title":{"rendered":"Playwright w praktyce: 5 krok\u00f3w do skutecznego frameworka do automatyzacji test\u00f3w UI & Web. Cz\u0119\u015b\u0107 I"},"content":{"rendered":"\n

Tym artyku\u0142em chcia\u0142bym rozpocz\u0105\u0107 seri\u0119 wpis\u00f3w, w kt\u00f3rej poka\u017c\u0119, jak krok po kroku zbudowa\u0107 nowoczesny framework do automatyzacji test\u00f3w, korzystaj\u0105c z Playwrighta<\/strong> oraz TypeScripta<\/strong>.<\/p>\n\n\n\n

Istniej\u0105 r\u00f3\u017cne opinie na temat tego, czy w\u0142a\u015bciwszym okre\u015bleniem jest \u201eframework testowy\u201d, czy \u201ebiblioteka testowa\u201d. Niemniej, przyjmuj\u0119, \u017ce na potrzeby tej serii artyku\u0142\u00f3w u\u017cywamy terminu \u201eframework testowy\u201d.<\/p>\n\n\n\n

Jaki\u015b czas temu opublikowa\u0142em wpis, w kt\u00f3rym opisa\u0142em, jak rozpocz\u0105\u0107 swoj\u0105 przygod\u0119 z Playwrightem<\/a>. R\u00f3wnie\u017c dwa inne artyku\u0142y na temat Playwrighta<\/a> pojawi\u0142y si\u0119 na blogu Sii nieco p\u00f3\u017aniej.<\/p>\n\n\n\n

Dzi\u015b p\u00f3jdziemy o krok dalej. Skupimy si\u0119 na tym, jak stworzy\u0107 bardziej zaawansowane rozwi\u0105zanie \u2013 takie, kt\u00f3re b\u0119dziecie mogli zastosowa\u0107 w swojej codziennej pracy.<\/p>\n\n\n\n

Na pocz\u0105tek warto zastanowi\u0107 si\u0119 nad wyborem odpowiedniego j\u0119zyka programowania. Przyjrzymy si\u0119 i por\u00f3wnamy r\u00f3\u017cne opcje, aby wybra\u0107 najlepsze narz\u0119dzie do realizacji naszych cel\u00f3w.<\/p>\n\n\n\n

    \n
  1. Popularno\u015b\u0107 rozwi\u0105zania \u2013 dlaczego TypeScript?<\/li>\n\n\n\n
  2. Czym powinien charakteryzowa\u0107 si\u0119 framework testowy?<\/li>\n\n\n\n
  3. Wzorce projektowe i dobre praktyki<\/li>\n\n\n\n
  4. Raportowanie<\/li>\n\n\n\n
  5. CI \/ CD<\/li>\n<\/ol>\n\n\n\n

    Temat podziel\u0119 na dwie cz\u0119\u015bci \u2013 w pierwszej skupi\u0119 si\u0119 troch\u0119 bardziej na teorii i podkre\u015bleniu, kt\u00f3re obszary s\u0105 wa\u017cne, za\u015b w kolejnej poka\u017c\u0119 kod i om\u00f3wi\u0119 go krok po kroku. Ca\u0142o\u015b\u0107 kodu b\u0119dzie dost\u0119pna wraz z drugim wpisem.<\/p>\n\n\n\n

    Kod<\/strong><\/h2>\n\n\n\n

    Nasz framework testowy b\u0119dzie zawiera\u0142 dwa przyk\u0142ady test\u00f3w, kt\u00f3re b\u0119d\u0105 mo\u017cliwe do pobrania z GitHub Sii Poland<\/a>.<\/p>\n\n\n\n

    Do stworzenia test\u00f3w skorzystam z Trello.<\/p>\n\n\n\n

    \"Trello<\/a>
    Ryc. 1 Trello \u2013 aplikacja do zarz\u0105dzania projektami<\/figcaption><\/figure>\n\n\n\n

    Trello to aplikacja s\u0142u\u017c\u0105ca do zarz\u0105dzania projektami z wykorzystaniem metodologii Kanban. Jest to zaawansowane narz\u0119dzie zar\u00f3wno pod wzgl\u0119dem interfejsu u\u017cytkownika (UI), jak i mo\u017cliwo\u015bci API. Z naszej perspektywy stanowi doskona\u0142e \u015brodowisko do \u0107wiczenia umiej\u0119tno\u015bci zwi\u0105zanych z automatyzacj\u0105 proces\u00f3w<\/strong>.<\/p>\n\n\n\n

    Do cel\u00f3w testowych zach\u0119camy do za\u0142o\u017cenia konta \u2013 bezp\u0142atny plan jest w zupe\u0142no\u015bci wystarczaj\u0105cy.<\/p>\n\n\n\n

    Dlaczego TypeScript?<\/strong><\/h2>\n\n\n\n

    TypeScript to popularny j\u0119zyk programowania, od lat wykorzystywany g\u0142\u00f3wnie do tworzenia front-endu w aplikacjach webowych. Istnieje kilka powod\u00f3w, dla kt\u00f3rych TypeScript doskonale sprawdza si\u0119 jako j\u0119zyk dla framework\u00f3w testowych.<\/p>\n\n\n\n

    Oto najwa\u017cniejsze argumenty:<\/p>\n\n\n\n

      \n
    1. Silne typowanie<\/strong> \u2013 umo\u017cliwia wykrywanie b\u0142\u0119d\u00f3w na etapie kompilacji, co zwi\u0119ksza stabilno\u015b\u0107 kodu.<\/li>\n\n\n\n
    2. Lepsza wsp\u00f3\u0142praca z Playwright API<\/strong> \u2013 Playwright w po\u0142\u0105czeniu z TypeScriptem oferuje najwi\u0119ksz\u0105 liczb\u0119 usprawnie\u0144 i nowych funkcji w por\u00f3wnaniu do innych implementacji.<\/li>\n\n\n\n
    3. Wbudowane wsparcie dla async\/await<\/strong> \u2013 u\u0142atwia tworzenie stabilnych i czytelnych test\u00f3w automatycznych.<\/li>\n\n\n\n
    4. Popularno\u015b\u0107 i wsparcie spo\u0142eczno\u015bci<\/strong> \u2013 dzi\u0119ki du\u017cej spo\u0142eczno\u015bci \u0142atwo znale\u017a\u0107 odpowiedzi na pytania, a sam Playwright zosta\u0142 stworzony w TypeScript.<\/li>\n<\/ol>\n\n\n\n

      Warto doda\u0107, \u017ce mimo zalet TypeScriptu, Playwright mo\u017cna u\u017cywa\u0107 tak\u017ce w innych j\u0119zykach programowania, takich jak C# czy Java. Sam z powodzeniem korzysta\u0142em z tych implementacji w codziennej pracy i r\u00f3wnie\u017c si\u0119 sprawdza\u0142y.<\/p>\n\n\n\n

      Dla os\u00f3b, kt\u00f3re nie planuj\u0105 korzysta\u0107 z TypeScriptu, artyku\u0142 nadal mo\u017ce okaza\u0107 si\u0119 warto\u015bciowy<\/strong>, poniewa\u017c koncepcje zwi\u0105zane z tworzeniem testowego frameworka s\u0105 sp\u00f3jne niezale\u017cnie od technologii.<\/p>\n\n\n\n

      Popularno\u015b\u0107 rozwi\u0105zania \u2013 TypeScript a inne j\u0119zyk programowania<\/strong><\/h2>\n\n\n\n

      Gdy pisa\u0142em artyku\u0142 Playwright \u2013 dlaczego warto zainteresowa\u0107 si\u0119 narz\u0119dziem od Microsoftu?<\/a>, Playwright powoli stawa\u0142 si\u0119 coraz popularniejszym rozwi\u0105zaniem do automatyzacji test\u00f3w. Obecnie przej\u0105\u0142 prowadzenie nad Cypressem i Selenium w ilo\u015bci pobra\u0144 miesi\u0119cznych. R\u00f3wnie\u017c w ofertach pracy mo\u017cna zauwa\u017cy\u0107, \u017ce liczba ofert, w kt\u00f3rych Playwright jest\/bywa wymagany, ro\u015bnie.<\/p>\n\n\n\n

      \"Liczba<\/a>
      Ryc. 2 Liczba pobra\u0144 Cypress, Playwright i Selenium w ostatnim roku<\/a><\/figcaption><\/figure>\n\n\n\n

      Warto podkre\u015bli\u0107, \u017ce nie twierdz\u0119, i\u017c Selenium czy Cypress to z\u0142e narz\u0119dzia<\/strong>. Korzysta\u0142em z obu w r\u00f3\u017cnych projektach i uwa\u017cam, \u017ce przy odpowiednim do\u015bwiadczeniu osoby pisz\u0105cej testy mo\u017cna osi\u0105gn\u0105\u0107 bardzo dobre rezultaty w obu przypadkach.<\/p>\n\n\n\n

      To, co przyci\u0105ga mnie do Playwright i dlaczego tak ch\u0119tnie o nim pisz\u0119 oraz tworz\u0119 prezentacje, to fakt, \u017ce narz\u0119dzie wyr\u00f3\u017cnia si\u0119 dynamicznym rozwojem i oferuje kilka rozwi\u0105za\u0144, kt\u00f3re uwa\u017cam za bardziej efektywne<\/strong>.<\/p>\n\n\n\n

      Warto jednak obserwowa\u0107 rozw\u00f3j innych narz\u0119dzi, takich jak Selenium, gdzie od jakiego\u015b czasu prowadzone s\u0105 intensywne prace. Mo\u017ce to sprawi\u0107, \u017ce w przysz\u0142o\u015bci Selenium stanie si\u0119 jeszcze bardziej popularnym i nowoczesnym rozwi\u0105zaniem. Trzeba r\u00f3wnie\u017c zaznaczy\u0107, \u017ce wi\u0119kszo\u015b\u0107 koncept\u00f3w dla test\u00f3w API czy UI jest podobnych, wi\u0119c nawet je\u015bli nie korzystasz z Playwrighta, ten artyku\u0142 mo\u017ce by\u0107 przydatny dla Ciebie.<\/p>\n\n\n\n

      Czym powinien charakteryzowa\u0107 si\u0119 framework testowy?<\/strong><\/h2>\n\n\n\n

      Framework testowy powinien pozwala\u0107 tworzy\u0107 rozwi\u0105zania \u0142atwo utrzymywane oraz wspiera\u0107 kilka obszar\u00f3w:<\/p>\n\n\n\n