G\u0142\u00f3wn\u0105 jego zalet\u0105 jest, \u017ce ma zaimplementowane wiele przydatnych funkcji, nie musimy sami tego robi\u0107, wi\u0119c oszcz\u0119dzamy potencjalny czas, kt\u00f3ry musieliby\u015bmy po\u015bwi\u0119ci\u0107 na dodanie tych funkcji. R\u00f3wnie\u017c dzi\u0119ki temu, \u017ce ilo\u015b\u0107 framework\u00f3w testowych, kt\u00f3re wspiera CodeceptJS jest tak du\u017ca, \u017ce wi\u0119kszo\u015b\u0107 os\u00f3b znajdzie co\u015b dla siebie.<\/p>\n\n\n\n
Czego dowiesz si\u0119 z tekstu?<\/h2>\n\n\n\n\n- Dlaczego warto zainteresowa\u0107 si\u0119 CodeceptJS?<\/li>\n\n\n\n
- Jak doda\u0107 Allure report dla projektu test\u00f3w?<\/li>\n\n\n\n
- Jak ustawi\u0107 robienie zrzut\u00f3w ekranu po ka\u017cdym kroku?<\/li>\n<\/ul>\n\n\n\n
Podstaw\u0105 jest to, \u017ce CodeceptJS narzuca sw\u00f3j format formu\u0142owania test\u00f3w. Domy\u015blnie jest to zapisanie w ten spos\u00f3b, \u017ce nasz krok wyj\u015bciowy testu zaczyna si\u0119 od u\u017cycia \u201eI\u201d. Ka\u017cdy z framework\u00f3w ma dodane predefiniowane kroki dla siebie, takie jak przej\u015bcie na stron\u0119, czy klikni\u0119cie w okre\u015blony element.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/codecept.png\")
<\/a> \u017ar\u00f3d\u0142o: „https:\/\/codecept.io\/”<\/span><\/figcaption><\/figure>\n\n\n\nCodeceptJS – historia<\/h2>\n\n\n\n
Pierwszy raz natkn\u0105\u0142em si\u0119 na ten framework kilka lat temu. Napisa\u0142em na ten temat kilka wpis\u00f3w, jednak po tym czasie widz\u0119, jak bardzo rozwin\u0105\u0142 si\u0119 on i jest warty uwagi.<\/p>\n\n\n\n
Jakie zalety ma CodeceptJS<\/h2>\n\n\n\n\n- Posiada kilka przydatnych rozszerze\u0144, takich jak wsparcie dla Visual Regression, czy Allure Report.<\/li>\n\n\n\n
- Wspiera parallel \u2013 uruchamianie wsp\u00f3\u0142bie\u017cnie test\u00f3w.<\/li>\n\n\n\n
- Posiada obszern\u0105 dokumentacj\u0119, jak i aktywn\u0105 spo\u0142eczno\u015b\u0107. Gdy wybieramy framework testowy, jest to bardzo wa\u017cne, \u017ceby spo\u0142eczno\u015b\u0107 by\u0142a aktywna. Dzi\u0119ki temu nie zostajemy sami z jakim\u015b problem, jak to bywa w sytuacji, gdy projekt jest porzucony.<\/li>\n\n\n\n
- Dzi\u0119ki temu, \u017ce jest to open source, sami w prosty spos\u00f3b mo\u017cemy doda\u0107 kolejne pluginy, funkcje.<\/li>\n\n\n\n
- Je\u017celi jeste\u015bmy fanami Gherkina, r\u00f3wnie\u017c zamiast domy\u015blnego zapisu test\u00f3w, mo\u017cemy skorzysta\u0107 z tego sposobu zapisu.<\/li>\n<\/ul>\n\n\n\n
Wady<\/h2>\n\n\n\n\n- Mo\u017cliwe, \u017ce komu\u015b spos\u00f3b zapisu mo\u017ce si\u0119 nie spodoba\u0107 i preferuje standardowe formu\u0142owanie test\u00f3w.<\/li>\n\n\n\n
- Dla niekt\u00f3rych os\u00f3b mo\u017ce by\u0107 to przerost formy nad tre\u015bci\u0105 i wol\u0105 sami szybko utworzy\u0107 framework dla swoich cel\u00f3w.<\/li>\n\n\n\n
- Dla istniej\u0105cych projekt\u00f3w mo\u017ce by\u0107 to kosztowne, \u017ceby zacz\u0105\u0107 z niego korzysta\u0107, bo musimy dostosowa\u0107 testy do nowej konwencji.<\/li>\n<\/ul>\n\n\n\n
Pami\u0119tajmy, \u017ce sam CodeceptJS nie jest rozwi\u0105zaniem na ka\u017cdy przypadek. W 99% nie unikniemy sytuacji, \u017ce b\u0119dzie potrzebna nam wi\u0119ksza wiedza programistyczna. Zyskujemy g\u0142\u00f3wnie to, \u017ce CodeceptJS dostarcza nam gotowe modu\u0142y takie jak np. tworzenie zrzut\u00f3w ekran\u00f3w po ka\u017cdym kroku w testach lub tworzenie raportu z test\u00f3w. Dodatkowo nale\u017cy te\u017c pami\u0119ta\u0107, \u017ce CodeceptJS bazuje na innych popularnych i sprawdzonych frameworkach, kt\u00f3re s\u0105 wykorzystywane w testach automatycznych.<\/p>\n\n\n\n
Czego potrzebujemy?<\/h2>\n\n\n\n\n- Ja korzystam z Visual Studio Code \u2013 jest to darmowy edytor kodu.<\/li>\n\n\n\n
- NPM \/ NXM \u2013 menad\u017cer pakiet\u00f3w, kt\u00f3rym pobierzemy potrzebny nam CodeceptJS oraz inne potrzebne pakiety takie jak np. Puppeteer. Podczas inicjalizowania CodeceptJS b\u0119dziemy mieli informacje o tym, \u017ce potrzebujemy jeszcze co\u015b doinstalowa\u0107.<\/li>\n<\/ul>\n\n\n\n
Instalacja CodeceptJS<\/h2>\n\n\n\n
CodeceptJS mo\u017cemy zainstalowa\u0107 na kilka sposob\u00f3w, np. poprzez npma.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/npm.png\")
<\/a><\/figure>\n\n\n\nPo zainstalowaniu npm przechodz\u0119 do pobrania CodeceptJS. Po pobraniu moim oczom ukazuje si\u0119 taki widok:<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/instaled_codeceptjs.png\")
<\/a><\/figure>\n\n\n\nPo wywo\u0142aniu komendy codeceptjs<\/strong> prezentowany jest tzw. \u201ehelp\u201ddla wszystkich komend. C<\/span>zyli, w skr\u00f3cie, wylistowanie dost\u0119pnych komend wraz z komentarzem co one robi\u0105.<\/p>\n\n\n\nPierwszy test w CodeceptJS<\/h2>\n\n\n\n
Jak b\u0119dzie wygl\u0105da\u0142 test?<\/p>\n\n\n\n
\n- Przejd\u0119 na stron\u0119, na kt\u00f3rej znajduje si\u0119 formularz kontaktowy – https:\/\/testblogselenium.wordpress.com\/contact\/<\/a>.<\/li>\n\n\n\n
- Wype\u0142ni\u0119 trzy pola tre\u015bci\u0105 (Name, Email, Comment).<\/li>\n\n\n\n
- Wy\u015bl\u0119 ten formularz.<\/li>\n\n\n\n
- Sprawdz\u0119 wy\u015bwietlanie komunikatu \u201eMessage Sent (go back)\u201d.<\/li>\n<\/ul>\n\n\n\n
Prac\u0119 rozpoczynam od inicjalizacji CodeceptJS. Robi\u0119 to z poziomu konsoli (najlepiej utworzy\u0107 przed tym sobie folder w tej \u015bcie\u017cce np. poprzez mkdir \u2018nazwa folderu\u2019<\/strong> z konsoli lub poprzez graficzny interfejs u\u017cytkownika).<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/codeceptjs_init.png\")
<\/a><\/figure>\n\n\n\nCodeceptJS zawiera przyjemny kreator projektu. Wywo\u0142ujemy go poprzez u\u017cycie komendy codeceptjs init<\/strong>. W tym miejscu CodeceptJS zapyta nas o kilka rzeczy, kt\u00f3re potrzebne s\u0105 do stworzenia projektu. Zaczynam od wskazania, jak\u0105 notacje nazwy b\u0119d\u0105 zawiera\u0142y nasze testy. Mo\u017ce to by\u0107 np. .\/*_test.js – czyli ka\u017cdy plik, kt\u00f3ry b\u0119dzie spe\u0142nia\u0142 to za\u0142o\u017cenie b\u0119dzie brany pod uwag\u0119 podczas uruchamiania test\u00f3w. Pliki o innej nazwie, nawet je\u017celi b\u0119d\u0105 zawiera\u0142y kod testu, nie b\u0119d\u0105 brane pod uwag\u0119.<\/p>\n\n\n\nNast\u0119pnie decydujemy, kt\u00f3rego helpera chcemy u\u017cy\u0107, ja w tym miejscu u\u017cyje Puppeteera.<\/p>\n\n\n\n
Czym jest Puppeteer?<\/h2>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/puppeteer.png\")
<\/a>\u017ar\u00f3d\u0142o: „https:\/\/github.com\/GoogleChrome\/puppeteer”<\/figcaption><\/figure>\n\n\n\nSam Puppeteer m\u00f3g\u0142by mie\u0107 po\u015bwi\u0119cony osobny wpis. W skr\u00f3cie Puppeteer pozwala na sprawne korzystanie z Chromium \/ Chrome nie tylko do cel\u00f3w test\u00f3w, ale do wi\u0119kszo\u015bci potrzebnych akcji, kt\u00f3re chcemy wykona\u0107, np. pobranie pliku pdf, czy do automatyzacji innych akcji zwi\u0105zanych z przegl\u0105dark\u0105.<\/p>\n\n\n\n
Dzia\u0142a te\u017c szybciej ni\u017c Selenium WebDriver z ChromeDriverem. Du\u017c\u0105 zalet\u0105 jest wsparcie asynchroniczno\u015bci, dzi\u0119ki temu unikamy w kodzie dodawania tzw. sleep\u00f3w i test jest znacznie bardziej stabilny.<\/p>\n\n\n\n
Wracaj\u0105c do kodu testu, w nast\u0119pnym kroku decydujemy gdzie chcemy, \u017ceby by\u0142y przechowywane rezultaty naszych test\u00f3w. Domy\u015blnie jest to folder .\/output. Rezultatami mog\u0105 by\u0107 zrzuty ekranu, czy np. pliki, kt\u00f3re wygenerowa\u0142 Allure podczas uruchomienia test\u00f3w, kt\u00f3re potrzebne s\u0105 do wygenerowania raportu.<\/p>\n\n\n\n
Po czym pojawia si\u0119 pytanie o lokalizacje, je\u017celi w testach chcemy u\u017cywa\u0107 niestandardowych znak\u00f3w. Po tym kroku przechodz\u0119 do podania \u015bcie\u017cki do naszej strony. Poda\u0142em \u015bcie\u017ck\u0119 bezwzgl\u0119dn\u0105 do strony, kt\u00f3ra b\u0119dzie testowana, bo jest to jeden test, wi\u0119c lepiej oszcz\u0119dzi\u0107 ten czas egzekucji testu i bezpo\u015brednio si\u0119 uda\u0107 pod wskazan\u0105 podstron\u0119. Oczywi\u015bcie, je\u017celi nie by\u0142by to przyk\u0142ad taki jak ten, nasz adres, kt\u00f3ry by\u015bmy podali, powinien by\u0107 stron\u0105 g\u0142\u00f3wn\u0105, kt\u00f3r\u0105 testujemy. Mo\u017cliwe jest r\u00f3wnie\u017c przekazywanie r\u00f3\u017cnych adres\u00f3w url poprzez parametr, je\u017celi nasze testy uruchamiamy np. na kilku \u015brodowiskach. Ostatnie pytanie jest o to, czy chc\u0119, \u017ceby Puppeteer by\u0142 w trybie headless, czy nie. Je\u017celi nie, to nie b\u0119d\u0119 widzie\u0107 okna przegl\u0105darki z uruchamiaj\u0105cym si\u0119 testem – b\u0119dzie on uruchomiony w tle. Ja zaznaczy\u0142em \u201eYes\u201d wi\u0119c okno przegl\u0105darki b\u0119dzie widoczne.<\/p>\n\n\n\n
CodeceptJS – Tworzenie pliku testu z kreatora<\/h2>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/codeceptjs_create_file.png\")
<\/figure>\n\n\n\nPo stworzeniu pierwszego testu przechodzimy do otworzenia naszego folderu w Visual Studio Code. Mo\u017cemy zauwa\u017cy\u0107, \u017ce CodeceptJS stworzy\u0142 kilku plik\u00f3w.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/codeceptjs_list_of_files.png\")
<\/a><\/figure>\n\n\n\nNajwa\u017cniejsze pliki:<\/p>\n\n\n\n
codecept.conf.js <\/strong>\u2013 jest to miejsce, w kt\u00f3rym s\u0105 zapisane ustawienia, kt\u00f3re podali\u015bmy podczas inicjalizacji. R\u00f3wnie\u017c sami mo\u017cemy t\u0105 sekcje rozszerza\u0107.<\/p>\n\n\n\ncontactForm_test.js <\/strong>\u2013 jest to plik zawieraj\u0105cy test, kt\u00f3ry utworzyli\u015bmy.<\/p>\n\n\n\nsteps.d.ts<\/strong> \u2013 Plik wygenerowany dla naszego Visual Studio Code, kt\u00f3ry zawiera informacje o metodach dla IntelliSense. Bazuj\u0105c na tym, widzimy po kropce informacje o metodach, kt\u00f3re mamy do dyspozycji.<\/p>\n\n\n\nsteps_file.js<\/strong> \u2013 W tym miejscu mo\u017cemy doda\u0107 metody, kt\u00f3re pojawi\u0142by si\u0119 po \u201eI.\u201d.<\/p>\n\n\n\nCodeceptJS \u2013 przydatne metody<\/h2>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/methods_after_i.png\")
<\/a><\/figure>\n\n\n\nCodeceptJS ma kilkadziesi\u0105t przydatnych metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 podczas pisania test\u00f3w. Mo\u017ce to by\u0107 np.:<\/p>\n\n\n\n
\n- I.click(\u2018string\u2019) lub I.click(\u2018selector\u2019) – pozwala na klikni\u0119cie w okre\u015blony element.<\/li>\n\n\n\n
- I.fillField(\u2018Pole\u2019,\u2019nazwa\u2019) \u2013 pozwala nam wype\u0142ni\u0107 okre\u015blone pole tekstem. Poza nazw\u0105 pola mo\u017ce by\u0107 to r\u00f3wnie\u017c selektor cssowy, kt\u00f3ry reprezentuje element na stronie.<\/li>\n\n\n\n
- I.see(\u2018something\u2019) \u2013 metoda, kt\u00f3rej u\u017cywam do zrobienia asercji, kt\u00f3ra sprawdzi wy\u015bwietlanie elementu w CodeceptJS. Parametrem mo\u017ce by\u0107 tekst lub okre\u015blony selektor.<\/li>\n<\/ul>\n\n\n\n
Test wygl\u0105da tak.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/test_how_it_looks.png\")
<\/a><\/figure>\n\n\n\nPrzede wszystkim rozpoczynam prac\u0119 z CodeceptJS od u\u017cycia metody I.amOnPage(\u201e\/\u201d); (podczas inicjalizowania projektu wskaza\u0142em adres do strony (https:\/\/testblogselenium.wordpress.com\/contact\/<\/a>), kt\u00f3r\u0105 b\u0119dziemy testowa\u0107, wi\u0119c dlatego wystarczy u\u017cy\u0107 \u201e\/\u201d).<\/p>\n\n\n\nNast\u0119pnie przechodz\u0119 do wype\u0142nienia tekstem pola Name. CodeceptJS radzi sobie z wpisywaniem tekstu, gdy pole ma powi\u0105zanego ze sob\u0105 labela, tak jak jest to w tym przypadku. Oczywi\u015bcie, je\u017celi trafimy na przypadek bardziej skomplikowany, gdzie podanie nazwy nie wystarczy, to mo\u017cemy u\u017cy\u0107 w tym miejscu okre\u015blonego locatora css lub xpath.<\/p>\n\n\n\n
Podobne jest w 7 i 8 linijce – wype\u0142niam tre\u015bci\u0105 pola \u201eEmail\u201d oraz \u201eComment\u201d. Natomiast w 9 linijce korzystamy z metody I.click(\u2018Submit\u2019), kt\u00f3ra pozwala klika\u0107 w okre\u015blony element. Tym elementem mo\u017ce by\u0107 tekst, jak i r\u00f3wnie\u017c okre\u015blony selector css lub xpath.<\/p>\n\n\n\n
Test ko\u0144czy si\u0119 asercj\u0105. Aby sprawdzi\u0107, czy dany element, tekst wy\u015bwietla si\u0119 na stronie, korzystamy z metody I.see(\u2018something\u2019).<\/p>\n\n\n\n
Dodawanie Allure report dla CodeceptJS<\/h2>\n\n\n\n
Aby doda\u0107 Allure Report musimy przede wszystkim mie\u0107 zainstalowany allure-commandline na naszej maszynie, kt\u00f3ry b\u0119dzie generowa\u0142 nam raport z plik\u00f3w, kt\u00f3re stworz\u0105 si\u0119 podczas uruchomienia test\u00f3w.<\/p>\n\n\n\n
Instalowanie allure-commandline?<\/h2>\n\n\n\n
Allure commandline mo\u017cemy zainstalowa\u0107 poprzez npm\u2019a.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/allure_commandline-1.png\")
<\/a><\/figure>\n\n\n\nGdy mamy ju\u017c zainstalowany allure-commandline, przechodzimy do konfiguracji CodeceptJS, kt\u00f3ra znajduje si\u0119 w pliku \u2013 codecept.conf.js.<\/strong> W nim dodaj\u0119 sekcje z pluginem – w tym wypadku jest to Allure.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/allure_plugin.png\")
<\/a><\/figure>\n\n\n\nNast\u0119pnie dodaj\u0119 sekcje, kt\u00f3ra pozwoli nam tworzenie zrzut\u00f3w ekranu po ka\u017cdym kroku.<\/p>\n\n\n\n
Dodaj\u0119 sekcje \u201estepByStepReport\u201d. W niej ustawiam dwa parametry \u201eenabled\u201d, kt\u00f3ry powoduje, \u017ce raport jest tworzony, oraz parametr \u201escreenshotsForAllureReport\u201d, kt\u00f3ry pozwoli doda\u0107 zrzuty ekranu do raportu Allure.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/stepbystepreport.png\")
<\/a><\/figure>\n\n\n\nKod znajduje si\u0119 tutaj:<\/p>\n\n\n\n
https:\/\/github.com\/testingplusme\/IntroductionToCodeCeptJS<\/a><\/p>\n\n\n\nJak uruchomi\u0107 testy dla CodeceptJS?<\/h2>\n\n\n\n
\u017beby uruchomi\u0107 testy u\u017cywam w konsoli komendy:<\/p>\n\n\n
\nnpx codeceptjs run --steps\n<\/pre><\/div>\n\n\n\u017beby uruchomi\u0107 testy wraz z Allure korzystam w komendzie z pluginu Allure:<\/p>\n\n\n
\nnpx codeceptjs run --plugins allure\n<\/pre><\/div>\n\n\nGenerowanie Allure report:<\/p>\n\n\n
\nallure serve output\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/08\/allure_codeceptjs.png\")
<\/a><\/figure>\n\n\n\n<\/div>\n\n\n\nPodsumowanie<\/h2>\n\n\n\n
W dzisiejszym wpisie pokaza\u0142em, w jaki spos\u00f3b mo\u017cemy skorzysta\u0107 z CodeceptJS – jednego z lepszych framework\u00f3w JS dla Selenium WebDrivera \/ Puppeteer. Kod umie\u015bci\u0142em GitHubie. Strona, kt\u00f3r\u0105 u\u017cywamy w te\u015bcie jest r\u00f3wnie\u017c postawiona przeze mnie, wi\u0119c mo\u017cecie z niej korzysta\u0107 w celach startu przygody z CodeceptJS.<\/p>\n\n\n\n
\n\n\n\nChcesz lepiej zrozumie\u0107 aplikacje i systemy, kt\u00f3re testujesz? Do\u0142\u0105cz do ModernTester, poznaj najpotrzebniejsze narz\u0119dzia, frameworki oraz j\u0119zyki programowania i \u0107wicz na specjalnie przygotowanych \u015brodowiskach testowych: Platforma e-learningowa ModernTester<\/a><\/p>\n\n\n
Podstaw\u0105 jest to, \u017ce CodeceptJS narzuca sw\u00f3j format formu\u0142owania test\u00f3w. Domy\u015blnie jest to zapisanie w ten spos\u00f3b, \u017ce nasz krok wyj\u015bciowy testu zaczyna si\u0119 od u\u017cycia \u201eI\u201d. Ka\u017cdy z framework\u00f3w ma dodane predefiniowane kroki dla siebie, takie jak przej\u015bcie na stron\u0119, czy klikni\u0119cie w okre\u015blony element.<\/p>\n\n\n\n Pierwszy raz natkn\u0105\u0142em si\u0119 na ten framework kilka lat temu. Napisa\u0142em na ten temat kilka wpis\u00f3w, jednak po tym czasie widz\u0119, jak bardzo rozwin\u0105\u0142 si\u0119 on i jest warty uwagi.<\/p>\n\n\n\n Pami\u0119tajmy, \u017ce sam CodeceptJS nie jest rozwi\u0105zaniem na ka\u017cdy przypadek. W 99% nie unikniemy sytuacji, \u017ce b\u0119dzie potrzebna nam wi\u0119ksza wiedza programistyczna. Zyskujemy g\u0142\u00f3wnie to, \u017ce CodeceptJS dostarcza nam gotowe modu\u0142y takie jak np. tworzenie zrzut\u00f3w ekran\u00f3w po ka\u017cdym kroku w testach lub tworzenie raportu z test\u00f3w. Dodatkowo nale\u017cy te\u017c pami\u0119ta\u0107, \u017ce CodeceptJS bazuje na innych popularnych i sprawdzonych frameworkach, kt\u00f3re s\u0105 wykorzystywane w testach automatycznych.<\/p>\n\n\n\n CodeceptJS mo\u017cemy zainstalowa\u0107 na kilka sposob\u00f3w, np. poprzez npma.<\/p>\n\n\n\n Po zainstalowaniu npm przechodz\u0119 do pobrania CodeceptJS. Po pobraniu moim oczom ukazuje si\u0119 taki widok:<\/p>\n\n\n\n Po wywo\u0142aniu komendy codeceptjs<\/strong> prezentowany jest tzw. \u201ehelp\u201ddla wszystkich komend. C<\/span>zyli, w skr\u00f3cie, wylistowanie dost\u0119pnych komend wraz z komentarzem co one robi\u0105.<\/p>\n\n\n\n Jak b\u0119dzie wygl\u0105da\u0142 test?<\/p>\n\n\n\n Prac\u0119 rozpoczynam od inicjalizacji CodeceptJS. Robi\u0119 to z poziomu konsoli (najlepiej utworzy\u0107 przed tym sobie folder w tej \u015bcie\u017cce np. poprzez mkdir \u2018nazwa folderu\u2019<\/strong> z konsoli lub poprzez graficzny interfejs u\u017cytkownika).<\/p>\n\n\n\n CodeceptJS zawiera przyjemny kreator projektu. Wywo\u0142ujemy go poprzez u\u017cycie komendy codeceptjs init<\/strong>. W tym miejscu CodeceptJS zapyta nas o kilka rzeczy, kt\u00f3re potrzebne s\u0105 do stworzenia projektu. Zaczynam od wskazania, jak\u0105 notacje nazwy b\u0119d\u0105 zawiera\u0142y nasze testy. Mo\u017ce to by\u0107 np. .\/*_test.js – czyli ka\u017cdy plik, kt\u00f3ry b\u0119dzie spe\u0142nia\u0142 to za\u0142o\u017cenie b\u0119dzie brany pod uwag\u0119 podczas uruchamiania test\u00f3w. Pliki o innej nazwie, nawet je\u017celi b\u0119d\u0105 zawiera\u0142y kod testu, nie b\u0119d\u0105 brane pod uwag\u0119.<\/p>\n\n\n\n Nast\u0119pnie decydujemy, kt\u00f3rego helpera chcemy u\u017cy\u0107, ja w tym miejscu u\u017cyje Puppeteera.<\/p>\n\n\n\n Sam Puppeteer m\u00f3g\u0142by mie\u0107 po\u015bwi\u0119cony osobny wpis. W skr\u00f3cie Puppeteer pozwala na sprawne korzystanie z Chromium \/ Chrome nie tylko do cel\u00f3w test\u00f3w, ale do wi\u0119kszo\u015bci potrzebnych akcji, kt\u00f3re chcemy wykona\u0107, np. pobranie pliku pdf, czy do automatyzacji innych akcji zwi\u0105zanych z przegl\u0105dark\u0105.<\/p>\n\n\n\n Dzia\u0142a te\u017c szybciej ni\u017c Selenium WebDriver z ChromeDriverem. Du\u017c\u0105 zalet\u0105 jest wsparcie asynchroniczno\u015bci, dzi\u0119ki temu unikamy w kodzie dodawania tzw. sleep\u00f3w i test jest znacznie bardziej stabilny.<\/p>\n\n\n\n Wracaj\u0105c do kodu testu, w nast\u0119pnym kroku decydujemy gdzie chcemy, \u017ceby by\u0142y przechowywane rezultaty naszych test\u00f3w. Domy\u015blnie jest to folder .\/output. Rezultatami mog\u0105 by\u0107 zrzuty ekranu, czy np. pliki, kt\u00f3re wygenerowa\u0142 Allure podczas uruchomienia test\u00f3w, kt\u00f3re potrzebne s\u0105 do wygenerowania raportu.<\/p>\n\n\n\n Po czym pojawia si\u0119 pytanie o lokalizacje, je\u017celi w testach chcemy u\u017cywa\u0107 niestandardowych znak\u00f3w. Po tym kroku przechodz\u0119 do podania \u015bcie\u017cki do naszej strony. Poda\u0142em \u015bcie\u017ck\u0119 bezwzgl\u0119dn\u0105 do strony, kt\u00f3ra b\u0119dzie testowana, bo jest to jeden test, wi\u0119c lepiej oszcz\u0119dzi\u0107 ten czas egzekucji testu i bezpo\u015brednio si\u0119 uda\u0107 pod wskazan\u0105 podstron\u0119. Oczywi\u015bcie, je\u017celi nie by\u0142by to przyk\u0142ad taki jak ten, nasz adres, kt\u00f3ry by\u015bmy podali, powinien by\u0107 stron\u0105 g\u0142\u00f3wn\u0105, kt\u00f3r\u0105 testujemy. Mo\u017cliwe jest r\u00f3wnie\u017c przekazywanie r\u00f3\u017cnych adres\u00f3w url poprzez parametr, je\u017celi nasze testy uruchamiamy np. na kilku \u015brodowiskach. Ostatnie pytanie jest o to, czy chc\u0119, \u017ceby Puppeteer by\u0142 w trybie headless, czy nie. Je\u017celi nie, to nie b\u0119d\u0119 widzie\u0107 okna przegl\u0105darki z uruchamiaj\u0105cym si\u0119 testem – b\u0119dzie on uruchomiony w tle. Ja zaznaczy\u0142em \u201eYes\u201d wi\u0119c okno przegl\u0105darki b\u0119dzie widoczne.<\/p>\n\n\n\n Po stworzeniu pierwszego testu przechodzimy do otworzenia naszego folderu w Visual Studio Code. Mo\u017cemy zauwa\u017cy\u0107, \u017ce CodeceptJS stworzy\u0142 kilku plik\u00f3w.<\/p>\n\n\n\n Najwa\u017cniejsze pliki:<\/p>\n\n\n\n codecept.conf.js <\/strong>\u2013 jest to miejsce, w kt\u00f3rym s\u0105 zapisane ustawienia, kt\u00f3re podali\u015bmy podczas inicjalizacji. R\u00f3wnie\u017c sami mo\u017cemy t\u0105 sekcje rozszerza\u0107.<\/p>\n\n\n\n contactForm_test.js <\/strong>\u2013 jest to plik zawieraj\u0105cy test, kt\u00f3ry utworzyli\u015bmy.<\/p>\n\n\n\n steps.d.ts<\/strong> \u2013 Plik wygenerowany dla naszego Visual Studio Code, kt\u00f3ry zawiera informacje o metodach dla IntelliSense. Bazuj\u0105c na tym, widzimy po kropce informacje o metodach, kt\u00f3re mamy do dyspozycji.<\/p>\n\n\n\n steps_file.js<\/strong> \u2013 W tym miejscu mo\u017cemy doda\u0107 metody, kt\u00f3re pojawi\u0142by si\u0119 po \u201eI.\u201d.<\/p>\n\n\n\n CodeceptJS ma kilkadziesi\u0105t przydatnych metod, kt\u00f3rych mo\u017cemy u\u017cy\u0107 podczas pisania test\u00f3w. Mo\u017ce to by\u0107 np.:<\/p>\n\n\n\n Test wygl\u0105da tak.<\/p>\n\n\n\n Przede wszystkim rozpoczynam prac\u0119 z CodeceptJS od u\u017cycia metody I.amOnPage(\u201e\/\u201d); (podczas inicjalizowania projektu wskaza\u0142em adres do strony (https:\/\/testblogselenium.wordpress.com\/contact\/<\/a>), kt\u00f3r\u0105 b\u0119dziemy testowa\u0107, wi\u0119c dlatego wystarczy u\u017cy\u0107 \u201e\/\u201d).<\/p>\n\n\n\n Nast\u0119pnie przechodz\u0119 do wype\u0142nienia tekstem pola Name. CodeceptJS radzi sobie z wpisywaniem tekstu, gdy pole ma powi\u0105zanego ze sob\u0105 labela, tak jak jest to w tym przypadku. Oczywi\u015bcie, je\u017celi trafimy na przypadek bardziej skomplikowany, gdzie podanie nazwy nie wystarczy, to mo\u017cemy u\u017cy\u0107 w tym miejscu okre\u015blonego locatora css lub xpath.<\/p>\n\n\n\n Podobne jest w 7 i 8 linijce – wype\u0142niam tre\u015bci\u0105 pola \u201eEmail\u201d oraz \u201eComment\u201d. Natomiast w 9 linijce korzystamy z metody I.click(\u2018Submit\u2019), kt\u00f3ra pozwala klika\u0107 w okre\u015blony element. Tym elementem mo\u017ce by\u0107 tekst, jak i r\u00f3wnie\u017c okre\u015blony selector css lub xpath.<\/p>\n\n\n\n Test ko\u0144czy si\u0119 asercj\u0105. Aby sprawdzi\u0107, czy dany element, tekst wy\u015bwietla si\u0119 na stronie, korzystamy z metody I.see(\u2018something\u2019).<\/p>\n\n\n\n Aby doda\u0107 Allure Report musimy przede wszystkim mie\u0107 zainstalowany allure-commandline na naszej maszynie, kt\u00f3ry b\u0119dzie generowa\u0142 nam raport z plik\u00f3w, kt\u00f3re stworz\u0105 si\u0119 podczas uruchomienia test\u00f3w.<\/p>\n\n\n\n Allure commandline mo\u017cemy zainstalowa\u0107 poprzez npm\u2019a.<\/p>\n\n\n\n Gdy mamy ju\u017c zainstalowany allure-commandline, przechodzimy do konfiguracji CodeceptJS, kt\u00f3ra znajduje si\u0119 w pliku \u2013 codecept.conf.js.<\/strong> W nim dodaj\u0119 sekcje z pluginem – w tym wypadku jest to Allure.<\/p>\n\n\n\n Nast\u0119pnie dodaj\u0119 sekcje, kt\u00f3ra pozwoli nam tworzenie zrzut\u00f3w ekranu po ka\u017cdym kroku.<\/p>\n\n\n\n Dodaj\u0119 sekcje \u201estepByStepReport\u201d. W niej ustawiam dwa parametry \u201eenabled\u201d, kt\u00f3ry powoduje, \u017ce raport jest tworzony, oraz parametr \u201escreenshotsForAllureReport\u201d, kt\u00f3ry pozwoli doda\u0107 zrzuty ekranu do raportu Allure.<\/p>\n\n\n\n Kod znajduje si\u0119 tutaj:<\/p>\n\n\n\n https:\/\/github.com\/testingplusme\/IntroductionToCodeCeptJS<\/a><\/p>\n\n\n\n \u017beby uruchomi\u0107 testy u\u017cywam w konsoli komendy:<\/p>\n\n\n \u017beby uruchomi\u0107 testy wraz z Allure korzystam w komendzie z pluginu Allure:<\/p>\n\n\n Generowanie Allure report:<\/p>\n\n\n W dzisiejszym wpisie pokaza\u0142em, w jaki spos\u00f3b mo\u017cemy skorzysta\u0107 z CodeceptJS – jednego z lepszych framework\u00f3w JS dla Selenium WebDrivera \/ Puppeteer. Kod umie\u015bci\u0142em GitHubie. Strona, kt\u00f3r\u0105 u\u017cywamy w te\u015bcie jest r\u00f3wnie\u017c postawiona przeze mnie, wi\u0119c mo\u017cecie z niej korzysta\u0107 w celach startu przygody z CodeceptJS.<\/p>\n\n\n\n Chcesz lepiej zrozumie\u0107 aplikacje i systemy, kt\u00f3re testujesz? Do\u0142\u0105cz do ModernTester, poznaj najpotrzebniejsze narz\u0119dzia, frameworki oraz j\u0119zyki programowania i \u0107wicz na specjalnie przygotowanych \u015brodowiskach testowych: Platforma e-learningowa ModernTester<\/a><\/p>\n\n\n<\/a>CodeceptJS – historia<\/h2>\n\n\n\n
Jakie zalety ma CodeceptJS<\/h2>\n\n\n\n
\n
Wady<\/h2>\n\n\n\n
\n
Czego potrzebujemy?<\/h2>\n\n\n\n
\n
Instalacja CodeceptJS<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nPierwszy test w CodeceptJS<\/h2>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\nCzym jest Puppeteer?<\/h2>\n\n\n\n
<\/a>CodeceptJS – Tworzenie pliku testu z kreatora<\/h2>\n\n\n\n
<\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nCodeceptJS \u2013 przydatne metody<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\nDodawanie Allure report dla CodeceptJS<\/h2>\n\n\n\n
Instalowanie allure-commandline?<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nJak uruchomi\u0107 testy dla CodeceptJS?<\/h2>\n\n\n\n
\nnpx codeceptjs run --steps\n<\/pre><\/div>\n\n\n
\nnpx codeceptjs run --plugins allure\n<\/pre><\/div>\n\n\n
\nallure serve output\n<\/pre><\/div>\n\n\n
<\/a><\/figure>\n\n\n\nPodsumowanie<\/h2>\n\n\n\n
\n\n\n\n