{"id":29502,"date":"2022-11-09T13:35:25","date_gmt":"2022-11-09T12:35:25","guid":{"rendered":"https:\/\/nearshore-it.eu\/artykuly\/testy-e2e-cypress\/"},"modified":"2024-09-25T15:47:01","modified_gmt":"2024-09-25T13:47:01","slug":"testy-e2e-cypress","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/testy-e2e-cypress\/","title":{"rendered":"Testy E2E \u2013 wprowadzenie do Cypress"},"content":{"rendered":"\n<div class=\"table-of-contents\">\n    <p class=\"title\">Przejd\u017a do:<\/p>\n    <ol>\n                    <li><a href=\"#Czym-jest-Cypress?\">1.  Czym jest Cypress?<\/a><\/li>\n                    <li><a href=\"#-Wykorzystanie-dodatkowych-bibliotek-\">2.   Wykorzystanie dodatkowych bibliotek\u00a0<\/a><\/li>\n                    <li><a href=\"#Cypress-vs-Selenium\">3.  Cypress vs Selenium<\/a><\/li>\n                    <li><a href=\"#Nasz-pierwszy-test-w-Cypress\">4.  Nasz pierwszy test w Cypress<\/a><\/li>\n                    <li><a href=\"#Zalety-Cypressa\">5.  Zalety Cypressa<\/a><\/li>\n                    <li><a href=\"#Wady-Cypressa\">6.  Wady Cypressa<\/a><\/li>\n                    <li><a href=\"#Podsumowanie:-czy-Cypress-jest-frameworkiem-dla-ka\u017cdego?\">7.  Podsumowanie: czy Cypress jest frameworkiem dla ka\u017cdego?<\/a><\/li>\n            <\/ol>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"Czym-jest-Cypress?\">Czym jest Cypress?<\/h2>\n\n\n\n<p>Cypress to framework open source do tworzenia test\u00f3w end-to-end i test\u00f3w komponent\u00f3w aplikacji webowych. Stworzony przez frontend developer\u00f3w dla frontend developer\u00f3w, dzi\u0119ki swojej prostocie i przyjaznemu debuggerowi sta\u0142 si\u0119 popularny tak\u017ce w \u015bwiecie testerskim.<\/p>\n\n\n\n<p>Jego g\u0142\u00f3wne zalety to czytelna sk\u0142adnia oraz \u0142atwa instalacja, po kt\u00f3rej od razu mo\u017cemy pisa\u0107 pierwsze testy i tym samym \u0142atwo zweryfikowa\u0107 dzia\u0142anie aplikacji. Cypress cechuje si\u0119 szybko\u015bci\u0105 pisania i wykonywania test\u00f3w, zapewniaj\u0105c przy tym ich niezawodno\u015b\u0107 dzi\u0119ki automatycznemu czekaniu na elementy na stronie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"-Wykorzystanie-dodatkowych-bibliotek-\">Wykorzystanie dodatkowych bibliotek&nbsp;<\/h2>\n\n\n\n<p>Stos Cypressa korzysta z kilku do\u015b\u0107 popularnych bibliotek testowych do asercji czy generowania raport\u00f3w. S\u0105 to:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mocha<\/strong> \u2013 pozwala zbudowa\u0107 raport JUnit lub TeamCity. Istnieje mn\u00f3stwo plugin\u00f3w do biblioteki Mocha, dzi\u0119ki czemu z pewno\u015bci\u0105 wygenerujemy raport w formacie, jakiego potrzebujemy.<\/li>\n\n\n\n<li><strong>Chai<\/strong> \u2013 wbudowana biblioteka do asercji.<\/li>\n\n\n\n<li><strong>Sinon<\/strong> \u2013 framework, kt\u00f3rego metody Cypress wykorzystuje w cy.spy, cy.stub, czyli w monitorowaniu wywo\u0142a\u0144 funkcji.<\/li>\n<\/ul>\n\n\n\n<p>Jest kilka plugin\u00f3w, kt\u00f3re nie s\u0105 wbudowane, ale uwa\u017cam, \u017ce warto je zainstalowa\u0107. Mam na my\u015bli m.in.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cypress-recurse<\/strong> \u2013 plugin u\u0142atwiaj\u0105cy pisanie funkcji rekurencyjnych.<\/li>\n\n\n\n<li><strong>Cypress-tab<\/strong> \u2013 plugin dodaj\u0105cy mo\u017cliwo\u015b\u0107 wysy\u0142ania klawisza \u2018TAB\u2019 do przegl\u0105darki.<\/li>\n\n\n\n<li><strong>Cypress-xpath<\/strong> \u2013 w Cypress szukamy element\u00f3w za pomoc\u0105 selektor\u00f3w CSS, ten plugin pozwoli korzysta\u0107 z xpath.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Cypress-vs-Selenium\">Cypress vs Selenium<\/h2>\n\n\n\n<p>To nie jest tak, \u017ce jakie\u015b rozwi\u0105zania s\u0105 lepsze lub gorsze, ale wszyscy wiemy, \u017ce Selenium jest po prostu przestarza\u0142e i nie radzi sobie najlepiej w przypadku witryn internetowych z nowoczesnym frontem, gdzie elementy w DOM s\u0105 dynamicznie podmieniane zamiast \u0142adowania ca\u0142ego DOM od nowa.<\/p>\n\n\n\n<p>To najwi\u0119ksza wada Selenium i g\u0142\u00f3wnie w kontrze do niej powsta\u0142 Cypress, stawiaj\u0105c na stabilno\u015b\u0107 test\u00f3w nowoczesnych aplikacji frontendowych. Pocz\u0105tkowo mia\u0142 by\u0107 wsparciem dla frontend developer\u00f3w pisz\u0105cych testy integracyjne, dzi\u015b skupia si\u0119 na testach end-to-end i testach komponent\u00f3w. Dzi\u0119ki przejrzystej sk\u0142adni narz\u0119dzie szybko zdoby\u0142o zaufanie wielu tester\u00f3w.<\/p>\n\n\n\n<p><strong>Przeczytaj r\u00f3wnie\u017c:<\/strong> <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/piramida-testow-czyli-co-kiedy-i-jak-testowac-zeby-testy-przyniosly-zysk\/\" data-type=\"link\" data-id=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/piramida-testow-czyli-co-kiedy-i-jak-testowac-zeby-testy-przyniosly-zysk\/\">Piramida test\u00f3w:\u00a0dowiedz si\u0119, jak testowa\u0107, \u017ceby\u00a0testy przynosi\u0142y zysk<\/a>.<\/p>\n\n\n\n<p>Selenium ma spor\u0105 przewag\u0119, je\u015bli chodzi o obs\u0142ugiwane j\u0119zyki programowania. Jest ono dost\u0119pne dla <strong>Javy, Pythona, C#, JavaScript i Ruby. <\/strong> Cypress z za\u0142o\u017cenia obs\u0142uguje tylko JavaScript (po konfiguracji tak\u017ce TypeScript), co mo\u017ce by\u0107 problemem, gdy w zespole b\u0105d\u017a firmie brakuje odpowiednich kompetencji.<\/p>\n\n\n\n<p>Selenium jest na rynku od lat i cho\u0107 ma wiele wad, to s\u0105 one dobrze znane, a internet jest pe\u0142en poradnik\u00f3w, jak sobie z nimi radzi\u0107. Selenium wyznaczy\u0142o pewien standard i przez lata wiod\u0142o prym w automatyzacji test\u00f3w aplikacji przegl\u0105darkowych, ale nowe czasy wymagaj\u0105 nowych rozwi\u0105za\u0144, a Cypress z pewno\u015bci\u0105 jest godny uwagi.<\/p>\n\n\n\n<p>Testy w Cypress s\u0105 wykonywane szybko i stabilnie, a ich pisanie to, moim zdaniem, wr\u0119cz przyjemno\u015b\u0107 (w przeciwie\u0144stwie do Selenium, wystarczy stworzy\u0107 lokator i mo\u017cna na obiekcie wykonywa\u0107 akcje \u2013 w Selenium trzeba mie\u0107 lokator i Factory, \u017ceby to dzia\u0142a\u0142o). <\/p>\n\n\n\n<p>Obs\u0142uguje on wszystkie najwa\u017cniejsze przegl\u0105darki, takie jak<strong> Chrome, Edge, Firefox czy nawet Webkit.<\/strong> Co ciekawe, do wyboru mamy te\u017c <strong>Brave<\/strong>, a domy\u015bln\u0105 przegl\u0105dark\u0105 jest <strong>Electron<\/strong>. Przegl\u0105darki te s\u0105 zawarte w pakiecie, wi\u0119c nie trzeba o nie dba\u0107, jak w przypadku Selenium. Nale\u017cy jednak pami\u0119ta\u0107 o aktualizacji Cypressa, je\u015bli chcemy mie\u0107 ich najnowsze wersje.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image size-full\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2024\/09\/jpro_2022.11.09_graphic_12.png\" alt=\" class=\" class=\"wp-image-68472\" title=\"\"><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Nasz-pierwszy-test-w-Cypress\">Nasz pierwszy test w Cypress<\/h2>\n\n\n\n<p>Aby zacz\u0105\u0107 pisa\u0107 test w Cypress, mo\u017cemy u\u017cy\u0107 aplikacji standalone (do pobrania na oficjalnej stronie Cypress.io) lub stworzy\u0107 projekt poprzez komend\u0119 npm (po uprzedniej instalacji): <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mkdir cypress \ncd cypress \nnpm init \nnpm install cypress --save-dev <\/pre>\n\n\n\n<p>Po pierwszym uruchomieniu utworzony zostaje folder \/cypress \u2013 a w nim kolejne:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>do przechowywania test\u00f3w e2e, <\/li>\n\n\n\n<li>fixtures dla wszelkich testali\u00f3w, <\/li>\n\n\n\n<li>downloads, screenshots, <\/li>\n\n\n\n<li>oraz support dla r\u00f3\u017cnych helper\u00f3w. <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Otwieramy wi\u0119c Test Runner, wybieramy typ test\u00f3w e2e i wybieramy domy\u015bln\u0105 przegl\u0105dark\u0119.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx cypress open <\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image size-full\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2024\/09\/screen1.png\" alt=\"Cypress E2E testing\" class=\"wp-image-68454\" title=\"\"><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image size-full\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2024\/09\/screen2.png\" alt=\"Cypress E2E testig configuration files\" class=\"wp-image-68456\" title=\"\"><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image size-full\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2024\/09\/screen3.png\" alt=\"Cypress E2E testig configuration files - start testing\" class=\"wp-image-68458\" title=\"\"><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Nast\u0119pnie stworzymy nowy plik firstSpec.cy.js w folderze e2e, a w jego tre\u015bci umieszczamy poni\u017cszy kod, kt\u00f3ry otwiera stron\u0119, wprowadza nazw\u0119 u\u017cytkownika i has\u0142o, loguje do aplikacji, a nast\u0119pnie weryfikuje skuteczno\u015b\u0107 zalogowania poprzez sprawdzenie widoczno\u015bci elementu. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">describe('My First Test', () => { \n\n  it('Does not do much!', () => { \n\n    cy.visit('http:\/\/zero.webappsecurity.com\/login.html');  \n    cy.get('#user_login').type('username');  \n    cy.get('#user_password').type('password'); \n    cy.get('[name=\"submit\"]').click(); \/\/klikamy submit \n    cy.get('#account_summary_tab').should('be.visible'); \n\n  }) \n\n}); <\/pre>\n\n\n\n<p>Test mo\u017cemy uruchomi\u0107 w konsoli przy pomocy komendy:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx cypress run <\/pre>\n\n\n\n<p>lub w debuggerze:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx cypress open <\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image size-full\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2024\/09\/screen4.png\" alt=\"Cypress E2E testig account summary\" class=\"wp-image-68460\" title=\"\"><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Zalety-Cypressa\">Zalety Cypressa<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Prosta instalacja<\/h3>\n\n\n\n<p>Je\u015bli kiedykolwiek konfigurowali\u015bcie <strong>JBehave<\/strong>, to z pewno\u015bci\u0105 docenicie prostot\u0119 instalacji Cypressa i to, jak szybko mo\u017cna po niej zacz\u0105\u0107 pisa\u0107 warto\u015bciowe testy. Nie oferuje tego \u017caden inny, nawet najbardziej nowoczesny, framework do test\u00f3w e2e w przegl\u0105darce.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Niski pr\u00f3g wej\u015bcia<\/h3>\n\n\n\n<p>Mimo \u017ce Cypress dzia\u0142a tylko w po\u0142\u0105czeniu z JavaScript, wcale nie jest to du\u017c\u0105 przeszkod\u0105 dla chc\u0105cych z niego korzysta\u0107. Sam nie mia\u0142em z JavaScript wiele wsp\u00f3lnego, poznaj\u0105c Cypress. Jednak aby zacz\u0105\u0107 pisa\u0107 testy, wystarczy pozna\u0107 podstawowe komendy, kt\u00f3rych sk\u0142adnia jest bardzo prosta i naturalna. Mo\u017cliwo\u015b\u0107 <strong>\u0142\u0105czenia komend pozwala na synchroniczne ich wykonanie<\/strong>, co sprawia, \u017ce testy s\u0105 nadzwyczaj stabilne (dla przyk\u0142adu, klikamy w dany input, czy\u015bcimy jego zawarto\u015b\u0107, wpisujemy text, po czym klikamy button i weryfikujemy, czy owy button zmieni\u0142 sw\u00f3j text).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sprawdzanie stanu element\u00f3w<\/h3>\n\n\n\n<p>Cypress domy\u015blnie sprawdza, czy szukany element znajduje si\u0119 w <strong>DOM<\/strong>, czy jest widoczny, zako\u0144czy\u0142 animacje. Pozwala to usun\u0105\u0107 z testu zb\u0119dny kod zwi\u0105zany z czekaniem, a je\u015bli jaki\u015b element \u0142aduje si\u0119 d\u0142u\u017cej, to po prostu zwi\u0119kszamy danej komendzie timeout. Dzi\u0119ki temu testy s\u0105 jednocze\u015bnie czytelne i stabilne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Narz\u0119dzia<\/h3>\n\n\n\n<p>Jedn\u0105 z moich ulubionych cech Cypressa jest to, \u017ce dostarcza sporo narz\u0119dzi przydatnych w testach, jak<strong> cy.fixture <\/strong>czy<strong> cy.intercept<\/strong>. Pierwsze pozwala na zarz\u0105dzanie danymi testowymi czy to PDF, kt\u00f3ry chcemy wgra\u0107 do aplikacji, czy to plik JSON z payloadem do API b\u0105d\u017a danymi testowymi w podej\u015bciu <strong>DDD<\/strong>. Drugie za\u015b pozwala na przechwytywanie ruchu sieciowego, a nawet <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/mockowanie-w-testach-nie-tylko-automatycznych\/\" data-type=\"link\" data-id=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/mockowanie-w-testach-nie-tylko-automatycznych\/\">mockowanie <\/a>odpowiedzi z backendu. Jest to wielce przydatne, gdy czekamy na odpowied\u017a z API, kt\u00f3ra ma zasili\u0107 danymi front, lub gdy dostawca zewn\u0119trzny nie odpowiada i chcemy jego odpowiedzi zmockowa\u0107.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Debugger GUI<\/h3>\n\n\n\n<p>Po tym narz\u0119dziu wida\u0107, \u017ce Cypress zosta\u0142 napisany przez frontend developer\u00f3w. Ma \u015bwietny interfejs u\u017cytkownika <strong>(UI)<\/strong> \u0142\u0105cz\u0105cy ze sob\u0105 mo\u017cliwo\u015b\u0107 uruchamiania i debugowania test\u00f3w. Tworzenie snapshot\u00f3w stanu aplikacji po ka\u017cdej akcji daje nam mo\u017cliwo\u015b\u0107 odbycia \u201epodr\u00f3\u017cy w czasie\u201d po r\u00f3\u017cnych etapach trwania naszego testu. Dost\u0119p do narz\u0119dzi developerskich pozwala podejrze\u0107 np. ruch sieciowy. Wszystko to daje nam komplet narz\u0119dzi niezb\u0119dnych do szukania b\u0142\u0119d\u00f3w.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Wady-Cypressa\">Wady Cypressa<\/h2>\n\n\n\n<p>Mimo wielu plus\u00f3w Cypress ma te\u017c swoje wady i nie mo\u017cna obok nich przej\u015b\u0107 oboj\u0119tnie, je\u015bli jeste\u015bmy na etapie wybierania najlepszego rozwi\u0105zania dla projektu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testowe post mortem<\/h3>\n\n\n\n<p>Chyba ka\u017cdy do\u015bwiadczy\u0142 tego, jak uci\u0105\u017cliwe mo\u017ce by\u0107 debugowanie testu nieprzechodz\u0105cego w \u015brodowisku CI\/CD. Pod tym wzgl\u0119dem Cypress oferuje nam nagranie video, zrzut ekranu, a w logach \u2013 <strong>error message<\/strong>. O ile w wielu przypadkach okazuje si\u0119 to wystarczaj\u0105ce, to bywa uci\u0105\u017cliwe, kiedy chcemy prze\u015bledzi\u0107 chocia\u017cby ruch sieciowy. W Selenium wcale nie by\u0142o pod tym wzgl\u0119dem lepiej \u2013 moim osobistym faworytem jest <strong>Playwright <\/strong>ze swoimi trace\u2019ami. Cypress to domy\u015blnie narz\u0119dzie z GUI i to na nim naj\u0142atwiej debugowa\u0107 testy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wielow\u0105tkowo\u015b\u0107<\/h3>\n\n\n\n<p>Cypress chwali si\u0119 wsparciem dla r\u00f3wnoleg\u0142ego wykonywania test\u00f3w. Nie jest ono jednak w\u0142\u0105czone domy\u015blnie i <strong>wymaga nieprostej konfiguracji w CI\/CD.<\/strong> W ten spos\u00f3b mo\u017cemy tworzy\u0107 wiele kontener\u00f3w, z kt\u00f3rych ka\u017cdy wykona jeden w\u0105tek test\u00f3w (podobnie do Selenium Grid). W por\u00f3wnaniu z Playwright, gdzie testy domy\u015blnie uruchamiaj\u0105 si\u0119 w wielu w\u0105tkach, albo nUnit, gdzie taka konfiguracja to jedna linijka kodu, to do\u015b\u0107 ra\u017c\u0105ce niedoci\u0105gni\u0119cie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">W\u0105tpliwe wsparcie dla BDD<\/h3>\n\n\n\n<p>Sam w sobie Cypress nie wspiera <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/testy-bdd-czy-naprawde-sa-potrzebne\/\" data-type=\"link\" data-id=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/testy-bdd-czy-naprawde-sa-potrzebne\/\">BDD<\/a>, za to polega na zewn\u0119trznych pluginach bazuj\u0105cych na <strong>cucumber-js<\/strong>. Oficjalnie wspierany cypress-cucumber-preprocessor przesta\u0142 by\u0107 rozwijany i musimy si\u0119 posila\u0107 r\u00f3\u017cnymi klonami precyzyjnie wybranymi dla naszej konkretnej wersji Cypressa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Podsumowanie:-czy-Cypress-jest-frameworkiem-dla-ka\u017cdego?\">Podsumowanie: czy Cypress jest frameworkiem dla ka\u017cdego?<\/h2>\n\n\n\n<p>Cypress skraca czas pisania test\u00f3w e2e dzi\u0119ki swojej sk\u0142adni i narz\u0119dziom, jakie oferuje. Pisanie test\u00f3w w Cypress to sama przyjemno\u015b\u0107 i nie powinno sprawi\u0107 problem\u00f3w nawet pocz\u0105tkuj\u0105cym u\u017cytkownikom. Debugowanie b\u0142\u0119d\u00f3w lub bardziej zawi\u0142e konfiguracje mog\u0105 si\u0119 jednak okaza\u0107 trudniejsze, ni\u017cby\u015bmy chcieli.<\/p>\n\n\n\n<p>Je\u015bli potrzebujemy wi\u0119c w kr\u00f3tkim czasie napisa\u0107 testy na potrzeby danego projektu i nie jest ich du\u017co, to \u015bmia\u0142o mo\u017cemy u\u017cy\u0107 Cypressa. Jego bezproblemowa konfiguracja i prosta sk\u0142adnia wybacz\u0105 niedobory wiedzy o JavaSripcie. Proste rzeczy w Cypressie s\u0105\u2026 naprawd\u0119 proste. Je\u015bli jednak projekt jest bardziej wymagaj\u0105cy, to i bardziej wymagaj\u0105ca b\u0119dzie konfiguracja Cypressa, \u015brodowiska uruchomieniowego czy licznych plugin\u00f3w, niekoniecznie zgodnych z najnowszymi wydaniami Cypressa. Je\u015bli JavaScript nie jest wam jednak obcy, to Cypress mo\u017ce si\u0119 okaza\u0107 nowym rozwi\u0105zaniem dla waszego projektu.<\/p>\n\n\n\n<p>Przyk\u0142adowy kod mo\u017cecie znale\u017a\u0107 na moim <strong>Githubie<\/strong>:<br><a href=\"https:\/\/github.com\/sszemer\/cypress.io\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/sszemer\/cypress.io<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Przez lata to Selenium wyznacza\u0142o standardy w automatyzacji test\u00f3w aplikacji przegl\u0105darkowych. Jednak wielu tester\u00f3w podkre\u015bla, \u017ce to narz\u0119dzie nie zawsze radzi sobie w przypadku test\u00f3w nowoczesnych aplikacji webowych. W ostatnim czasie spo\u015br\u00f3d dost\u0119pnych framework\u00f3w popularno\u015b\u0107 zacz\u0105\u0142 zyskiwa\u0107 Cypress \u2013 narz\u0119dzie do test\u00f3w end-to-end oferuj\u0105ce prost\u0105 sk\u0142adni\u0119 i niski pr\u00f3g wej\u015bcia. Czy jest dla ka\u017cdego? Jakie s\u0105 jego zalety, a w czym ust\u0119puje Selenium? Sprawd\u017a, w jakim projekcie warto postawi\u0107 na to narz\u0119dzie.<\/p>\n","protected":false},"author":150,"featured_media":29519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":263,"footnotes":""},"categories":[1,582],"tags":[562],"offering":[522],"class_list":["post-29502","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artykuly","category-technologie","tag-qa","offering-tech-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/users\/150"}],"replies":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/comments?post=29502"}],"version-history":[{"count":4,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29502\/revisions"}],"predecessor-version":[{"id":32892,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29502\/revisions\/32892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media\/29519"}],"wp:attachment":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media?parent=29502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/categories?post=29502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/tags?post=29502"},{"taxonomy":"offering","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/offering?post=29502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}