Czego dowiesz si\u0119 z tekstu?<\/h2>\n\n\n\n\n- Jak zaimplementowa\u0107 page object pattern dla CodeceptJS?<\/li>\n\n\n\n
- Jak uruchomi\u0107 testy wsp\u00f3\u0142bie\u017cnie?<\/li>\n\n\n\n
- Jak skorzysta\u0107 z Data Table?<\/li>\n<\/ul>\n\n\n\n
Zaczn\u0119 od pokazania, w jaki spos\u00f3b w CodeCeptJS mo\u017cliwe jest uruchomienie test\u00f3w wsp\u00f3\u0142bie\u017cnie. Kopiuje przypadek testowy, kt\u00f3ry utworzy\u0142em w poprzednim wpisie i wklejam go cztery razy. Robi\u0119 to po to, \u017cebym m\u00f3g\u0142 pokaza\u0107 Ci dzia\u0142anie wsp\u00f3\u0142bie\u017cno\u015bci, a do tego potrzebne jest posiadanie wi\u0119cej test\u00f3w ni\u017c jeden. W kodzie prezentuj\u0119 si\u0119 to tak:<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/repeated_tests.png\")
<\/a><\/figure>\n\n\n\nKolejnym krokiem jest zapisanie tego pliku i skorzystanie z parametru run-workers 5, kt\u00f3ry uruchomi testy w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codeceptjs_minimum_version_node.png\")
<\/a><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\nCo, je\u017celi natrafimy na taki b\u0142\u0105d?<\/h2>\n\n\n\n
W tym przypadku trzeba pobra\u0107 wy\u017csz\u0105 wersje Node JSa.<\/p>\n\n\n\n![\"pobieranie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/node_js_version_higher.png\")
<\/a><\/figure>\n\n\n\nWybra\u0142em drug\u0105 opcj\u0119. W moim przypadku jest to instalacja node js dla Windowsa. Po tym kroku uruchamianie test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny b\u0119dzie dzia\u0142a\u0107.<\/p>\n\n\n\n
Filmik jak dzia\u0142aj\u0105 testy wsp\u00f3\u0142bie\u017cnie w trybie headless z Puppeteerem:<\/p>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codecept_js_parallel.gif\")
<\/a><\/figure>\n\n\n\nJe\u017celi chcia\u0142by\u015b widzie\u0107 okno przegl\u0105darki podczas egzekucji test\u00f3w, to w ustawieniach codecept.conf.js parametr show trzeba zmieni\u0107 na true<\/strong>. Domy\u015blnie testy uruchamiane s\u0105 w trybie headless.<\/p>\n\n\n\nImplementacja page object<\/span><\/h2>\n\n\n\nKod, kt\u00f3ry utworzy\u0142em w poprzednim wpisie, w tym kroku dostosuje do page object pattern. Potrzebuje zdefiniowa\u0107 metod\u0119, kt\u00f3ra b\u0119dzie wype\u0142nia\u0142a tre\u015bci\u0105 formularz kontaktowy. CodeceptJS ma mo\u017cliwo\u015b\u0107 wygenerowania w prosty spos\u00f3b page objectu dla okre\u015blonej strony.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codecept_own_steps.png\")
<\/a><\/figure>\n\n\n\nPrzechodz\u0119 do konsoli. W tzw. \u201ehelpie\u201d CodeceptJSa mam podpowied\u017a, \u017ce mog\u0119 u\u017cy\u0107 komendy codeceptjs gpo<\/strong>, kt\u00f3ra stworzy mi pusty page object. Po dodaniu pliku z page objectem przechodz\u0119 do dodania metody, kt\u00f3ra wype\u0142ni tre\u015bci\u0105 formularz kontaktowy.<\/p>\n\n\n\nTa komenda zawiera prosty konfigurator. Jestem pytany o to jak page object ma si\u0119 nazywa\u0107. Nada\u0142em nazw\u0119 contactFormPage nast\u0119pnie wybra\u0142em gdzie ma znale\u017a\u0107 si\u0119 m\u00f3j page object. Zostawi\u0142em domy\u015bln\u0105 \u015bcie\u017ck\u0119 \u201e.\/pages\/contactFormPage.js\u201d. W tym miejscu CodeceptJS stworzy folder pages, je\u017celi jeszcze go nie ma na dysku. Po stworzeniu mog\u0119 przej\u015b\u0107 do implementacji, kt\u00f3r\u0105 b\u0119dzie zawiera\u0142 ten page object.<\/p>\n\n\n\n
Nast\u0119pnie nale\u017cy doda\u0107 page object do codecept.conf.js<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codecept_js_include.png\")
<\/a><\/figure>\n\n\n\nTeraz wracam do pliku contactFormPage.js<\/strong> i implementuje metod\u0119, kt\u00f3ra b\u0119dzie wype\u0142nia\u0142a formularz kontaktowy i go wysy\u0142a\u0142a. Rozpoczynam od dodania nazwy metody w tym wypadku b\u0119dzie to fillForm(name, email, comment).<\/p>\n\n\n\nMetoda sk\u0142ada si\u0119 z czterech linijek. Zaczynam od podania warto\u015bci dla pola Name, nast\u0119pnie przekazuje warto\u015b\u0107 pola Email oraz dla pola Comment. Metod\u0119 ko\u0144cz\u0119 wys\u0142aniem formularza. Kto\u015b m\u00f3g\u0142by zapyta\u0107, czemu r\u00f3wnie\u017c asercji tutaj nie umie\u015bci\u0142em? Uwa\u017cam, \u017ce lepiej, gdy asercja znajduje si\u0119 w samym kodzie testu, bo:<\/p>\n\n\n\n
\n- Od razu w te\u015bcie wida\u0107 co jest sprawdzane.<\/li>\n\n\n\n
- Nie trzeba wchodzi\u0107 do implementacji metody.<\/li>\n\n\n\n
- Czasem nazwa metody mo\u017ce by\u0107 myl\u0105ca, a asercja odnosi si\u0119 do czego\u015b innego.<\/li>\n<\/ul>\n\n\n\n
![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codecept_page_object.png\")
<\/a><\/figure>\n\n\n\n<\/span>Przechodz\u0119 do contactForm_test.js, aby korzysta\u0107 z page objecta potrzebuje w parametrze testu przekaza\u0107 nazw\u0119 page objecta. <\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/scenario_with_page_as_parameter-1024x112.png\")
<\/a><\/figure>\n\n\n\nGdy zdefiniowa\u0142em to w ten spos\u00f3b, od tego momentu mog\u0119 korzysta\u0107 z page objecta w tym te\u015bcie. Test ma teraz trzy linijki zamiast wcze\u015bniejszych o\u015bmiu. Jako parametry podaje wcze\u015bniej u\u017cywane dane testowe. Zmiany dokonuje dla wszystkich skopiowanych test\u00f3w.<\/p>\n\n\n\n
Przydatne opcje<\/h2>\n\n\n\n
W ostatnim wpisie nie poruszy\u0142em tego, w jaki spos\u00f3b mog\u0119 debugowa\u0107 testy napisane w CodeceptJS. Jednym ze sposob\u00f3w jest skorzystanie z interaktywnego shella. \u017beby z tego skorzysta\u0107, u\u017cywam komendy:<\/p>\n\n\n
\nnpx codeceptjs shell\n<\/pre><\/div>\n\n\nDzi\u0119ki temu CodeceptJS otwiera okno przegl\u0105darki i mog\u0119 przetestowa\u0107 ka\u017cd\u0105 metod\u0119 CodeceptJS, kt\u00f3ra jest po „I.” w konsoli. W \u0142atwy spos\u00f3b sprawdzenie tego, czy kod b\u0119dzie dzia\u0142a\u0142 dla przegl\u0105darki.<\/p>\n\n\n\n
Innym sposobem na interaktywne debugowanie dla CodeceptJS jest dodanie „pause” pomi\u0119dzy akcjami. Ta komenda zatrzyma przegl\u0105dark\u0119 i mo\u017cemy sprawdzi\u0107, jak zachowuje si\u0119 dany test.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codeceptjs_debugging.png\")
<\/a><\/figure>\n\n\n\nDry \u2013 run pokazuje jakie testy zostan\u0105 uruchomione.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/codecept_dry_run.png\")
<\/a><\/figure>\n\n\n\n<\/div>\n\n\n\nCodeCeptJS – bardziej zaawansowany przyk\u0142ad<\/b><\/h2>\n\n\n\n
Tym razem przechodz\u0119 do bardziej zaawansowanego przyk\u0142adu, bo b\u0119d\u0119 korzysta\u0142 z Data Driven Tests. Czyli mo\u017cliwo\u015bci tworzenia i korzystania z danych testowych w spos\u00f3b dynamiczny.<\/p>\n\n\n\n![\"Widok](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/login_to_account.png\")
<\/a><\/figure>\n\n\n\nTest b\u0119dzie polega\u0142 na:<\/p>\n\n\n\n
\n- Wej\u015bcie do ekranu logowania wordpressa.<\/li>\n\n\n\n
- Podanie loginu do jednego konta.<\/li>\n\n\n\n
- Podanie has\u0142a do jednego konta.<\/li>\n\n\n\n
- Zalogowanie si\u0119 i sprawdzenie, czy nazwa u\u017cytkownika si\u0119 wy\u015bwietla.<\/li>\n<\/ol>\n\n\n\n
CodeceptJS zrobi to dla dw\u00f3ch kont.<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/code_codeceptjs-1024x538.png\")
<\/a><\/figure>\n\n\n\nPrac\u0119 rozpoczynam od utworzenia nowego pliku. Nazwa\u0142em go\u00a0checkAccounts_test.js\u00a0<\/strong>implementacje rozpoczynam od dodania Feature w pliku z nazw\u0105 obszaru, do kt\u00f3rego b\u0119d\u0105 odnosi\u0107 si\u0119 testy. Kolejnym krokiem jest zdefiniowanie accounts, kt\u00f3re korzystaj\u0105 ze struktury DataTable, kt\u00f3ra pozwala dla CodeceptJS umieszcza\u0107 r\u00f3\u017cnego rodzaju warto\u015bci np. dane do konta dla u\u017cytkownik\u00f3w.\u00a0To, \u017ce w nazwie korzystam z\u00a0@accounts<\/strong>\u00a0to jest to spos\u00f3b, w jaki definiuje si\u0119 tagi dla CodeceptJS. Tagi pomagaj\u0105 grupowa\u0107 testy.<\/p>\n\n\n\nPrzekazuje accounts do Data. Nast\u0119pnie przekazuje w scenariuszu warto\u015b\u0107 z „current”, kt\u00f3ry pozwoli pobra\u0107 warto\u015b\u0107 z date table.<\/p>\n\n\n\n
Test zaczyna si\u0119 od przej\u015bcia do panelu logowania wordpressa. Zrobi\u0142em to, podaj\u0105c pe\u0142n\u0105 \u015bcie\u017ck\u0119. Oczywi\u015bcie, gdybym zdefiniowa\u0142 domen\u0119, m\u00f3g\u0142bym odwo\u0142ywa\u0107 si\u0119 do \u015bcie\u017cki po \/. Wype\u0142niam pole login loginem, kt\u00f3ry znajduje si\u0119 w current.login. W tym miejscu korzystam ze wpisywania warto\u015bci do selectora. Po tym kroku klikam przycisk „Continue”. Pojawia mi si\u0119 pole password<\/strong>. W nie wpisuje has\u0142o tego u\u017cytkownika.<\/p>\n\n\n\nDoda\u0142em krok, kt\u00f3ry sprawdza, czy przycisk si\u0119 pojawi\u0142. W tym przypadku jest to przycisk „Log In”. Klikam w niego i dodaj\u0119 metod\u0119 I.waitInUrl(’\/me’,10)<\/strong>, kt\u00f3ra pozwala czeka\u0107 na pojawienie si\u0119 okre\u015blonej warto\u015bci w linku. Po tym kroku dodaj\u0119 krok czekaj\u0105cy na element I.waitForElement(’.profile-gravatar__user-display-name’, 15)<\/strong>, kt\u00f3ry jest odzwierciedleniem nazwy u\u017cytkownika wy\u015bwietlanym w dashbordzie . Test ko\u0144cz\u0119 dodaniem asercji, kt\u00f3ra sprawdzam, \u017ce ta warto\u015b\u0107 znajduje si\u0119 na tej stronie.<\/p>\n\n\n\nUruchamianie test\u00f3w z tagiem<\/h2>\n\n\n\n
Je\u017celi chcesz uruchomi\u0107 jak\u0105\u015b pul\u0119 test\u00f3w z okre\u015blonym tagiem, mo\u017cesz to zrobi\u0107 za pomoc\u0105 tej komendy:<\/p>\n\n\n
\ncodeceptjs run \u2013grep @accounts\n<\/pre><\/div>\n\n\nPopularne jest nadawanie tag\u00f3w np. @slow dla wolniejszych test\u00f3w, czy @basic dla podstawowych test\u00f3w, kt\u00f3re sprawdzaj\u0105 najwa\u017cniejsze rzeczy.<\/p>\n\n\n\n
Kod dost\u0119pny jest na GitHubie<\/h2>\n\n\n\n
https:\/\/github.com\/testingplusme\/IntroductionToCodeCeptJS\/tree\/second_artile_parallel_and_page_object<\/a><\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/09\/passed-all-tests-codeceptjs.png\")
<\/a><\/figure>\n\n\n\n<\/div>\n\n\n\n<\/span>Podsumowanie<\/h2>\n\n\n\nW dzisiejszym wpisie przedstawi\u0142em Ci, w jaki spos\u00f3b mo\u017cna skorzysta\u0107 w bardziej zaawansowany spos\u00f3b z CodeceptJS. W relatywnie \u0142atwy spos\u00f3b mo\u017cesz zaimplementowa\u0107 page object pattern, jak i r\u00f3wnie\u017c skorzysta\u0107 z uruchamiania wsp\u00f3\u0142bie\u017cnego test\u00f3w. Je\u017celi lubisz javascript, ten framework spokojnie mo\u017cesz wdro\u017cy\u0107 przy komercyjnym projekcie.<\/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
Zaczn\u0119 od pokazania, w jaki spos\u00f3b w CodeCeptJS mo\u017cliwe jest uruchomienie test\u00f3w wsp\u00f3\u0142bie\u017cnie. Kopiuje przypadek testowy, kt\u00f3ry utworzy\u0142em w poprzednim wpisie i wklejam go cztery razy. Robi\u0119 to po to, \u017cebym m\u00f3g\u0142 pokaza\u0107 Ci dzia\u0142anie wsp\u00f3\u0142bie\u017cno\u015bci, a do tego potrzebne jest posiadanie wi\u0119cej test\u00f3w ni\u017c jeden. W kodzie prezentuj\u0119 si\u0119 to tak:<\/p>\n\n\n\n Kolejnym krokiem jest zapisanie tego pliku i skorzystanie z parametru run-workers 5, kt\u00f3ry uruchomi testy w spos\u00f3b wsp\u00f3\u0142bie\u017cny.<\/p>\n\n\n\n <\/span><\/p>\n\n\n\n W tym przypadku trzeba pobra\u0107 wy\u017csz\u0105 wersje Node JSa.<\/p>\n\n\n\n Wybra\u0142em drug\u0105 opcj\u0119. W moim przypadku jest to instalacja node js dla Windowsa. Po tym kroku uruchamianie test\u00f3w w spos\u00f3b wsp\u00f3\u0142bie\u017cny b\u0119dzie dzia\u0142a\u0107.<\/p>\n\n\n\n Filmik jak dzia\u0142aj\u0105 testy wsp\u00f3\u0142bie\u017cnie w trybie headless z Puppeteerem:<\/p>\n\n\n\n Je\u017celi chcia\u0142by\u015b widzie\u0107 okno przegl\u0105darki podczas egzekucji test\u00f3w, to w ustawieniach codecept.conf.js parametr show trzeba zmieni\u0107 na true<\/strong>. Domy\u015blnie testy uruchamiane s\u0105 w trybie headless.<\/p>\n\n\n\n Kod, kt\u00f3ry utworzy\u0142em w poprzednim wpisie, w tym kroku dostosuje do page object pattern. Potrzebuje zdefiniowa\u0107 metod\u0119, kt\u00f3ra b\u0119dzie wype\u0142nia\u0142a tre\u015bci\u0105 formularz kontaktowy. CodeceptJS ma mo\u017cliwo\u015b\u0107 wygenerowania w prosty spos\u00f3b page objectu dla okre\u015blonej strony.<\/p>\n\n\n\n Przechodz\u0119 do konsoli. W tzw. \u201ehelpie\u201d CodeceptJSa mam podpowied\u017a, \u017ce mog\u0119 u\u017cy\u0107 komendy codeceptjs gpo<\/strong>, kt\u00f3ra stworzy mi pusty page object. Po dodaniu pliku z page objectem przechodz\u0119 do dodania metody, kt\u00f3ra wype\u0142ni tre\u015bci\u0105 formularz kontaktowy.<\/p>\n\n\n\n Ta komenda zawiera prosty konfigurator. Jestem pytany o to jak page object ma si\u0119 nazywa\u0107. Nada\u0142em nazw\u0119 contactFormPage nast\u0119pnie wybra\u0142em gdzie ma znale\u017a\u0107 si\u0119 m\u00f3j page object. Zostawi\u0142em domy\u015bln\u0105 \u015bcie\u017ck\u0119 \u201e.\/pages\/contactFormPage.js\u201d. W tym miejscu CodeceptJS stworzy folder pages, je\u017celi jeszcze go nie ma na dysku. Po stworzeniu mog\u0119 przej\u015b\u0107 do implementacji, kt\u00f3r\u0105 b\u0119dzie zawiera\u0142 ten page object.<\/p>\n\n\n\n Nast\u0119pnie nale\u017cy doda\u0107 page object do codecept.conf.js<\/p>\n\n\n\n Teraz wracam do pliku contactFormPage.js<\/strong> i implementuje metod\u0119, kt\u00f3ra b\u0119dzie wype\u0142nia\u0142a formularz kontaktowy i go wysy\u0142a\u0142a. Rozpoczynam od dodania nazwy metody w tym wypadku b\u0119dzie to fillForm(name, email, comment).<\/p>\n\n\n\n Metoda sk\u0142ada si\u0119 z czterech linijek. Zaczynam od podania warto\u015bci dla pola Name, nast\u0119pnie przekazuje warto\u015b\u0107 pola Email oraz dla pola Comment. Metod\u0119 ko\u0144cz\u0119 wys\u0142aniem formularza. Kto\u015b m\u00f3g\u0142by zapyta\u0107, czemu r\u00f3wnie\u017c asercji tutaj nie umie\u015bci\u0142em? Uwa\u017cam, \u017ce lepiej, gdy asercja znajduje si\u0119 w samym kodzie testu, bo:<\/p>\n\n\n\n <\/span>Przechodz\u0119 do contactForm_test.js, aby korzysta\u0107 z page objecta potrzebuje w parametrze testu przekaza\u0107 nazw\u0119 page objecta. <\/p>\n\n\n\n Gdy zdefiniowa\u0142em to w ten spos\u00f3b, od tego momentu mog\u0119 korzysta\u0107 z page objecta w tym te\u015bcie. Test ma teraz trzy linijki zamiast wcze\u015bniejszych o\u015bmiu. Jako parametry podaje wcze\u015bniej u\u017cywane dane testowe. Zmiany dokonuje dla wszystkich skopiowanych test\u00f3w.<\/p>\n\n\n\n W ostatnim wpisie nie poruszy\u0142em tego, w jaki spos\u00f3b mog\u0119 debugowa\u0107 testy napisane w CodeceptJS. Jednym ze sposob\u00f3w jest skorzystanie z interaktywnego shella. \u017beby z tego skorzysta\u0107, u\u017cywam komendy:<\/p>\n\n\n Dzi\u0119ki temu CodeceptJS otwiera okno przegl\u0105darki i mog\u0119 przetestowa\u0107 ka\u017cd\u0105 metod\u0119 CodeceptJS, kt\u00f3ra jest po „I.” w konsoli. W \u0142atwy spos\u00f3b sprawdzenie tego, czy kod b\u0119dzie dzia\u0142a\u0142 dla przegl\u0105darki.<\/p>\n\n\n\n Innym sposobem na interaktywne debugowanie dla CodeceptJS jest dodanie „pause” pomi\u0119dzy akcjami. Ta komenda zatrzyma przegl\u0105dark\u0119 i mo\u017cemy sprawdzi\u0107, jak zachowuje si\u0119 dany test.<\/p>\n\n\n\n Dry \u2013 run pokazuje jakie testy zostan\u0105 uruchomione.<\/p>\n\n\n\n Tym razem przechodz\u0119 do bardziej zaawansowanego przyk\u0142adu, bo b\u0119d\u0119 korzysta\u0142 z Data Driven Tests. Czyli mo\u017cliwo\u015bci tworzenia i korzystania z danych testowych w spos\u00f3b dynamiczny.<\/p>\n\n\n\n Test b\u0119dzie polega\u0142 na:<\/p>\n\n\n\n CodeceptJS zrobi to dla dw\u00f3ch kont.<\/p>\n\n\n\n Prac\u0119 rozpoczynam od utworzenia nowego pliku. Nazwa\u0142em go\u00a0checkAccounts_test.js\u00a0<\/strong>implementacje rozpoczynam od dodania Feature w pliku z nazw\u0105 obszaru, do kt\u00f3rego b\u0119d\u0105 odnosi\u0107 si\u0119 testy. Kolejnym krokiem jest zdefiniowanie accounts, kt\u00f3re korzystaj\u0105 ze struktury DataTable, kt\u00f3ra pozwala dla CodeceptJS umieszcza\u0107 r\u00f3\u017cnego rodzaju warto\u015bci np. dane do konta dla u\u017cytkownik\u00f3w.\u00a0To, \u017ce w nazwie korzystam z\u00a0@accounts<\/strong>\u00a0to jest to spos\u00f3b, w jaki definiuje si\u0119 tagi dla CodeceptJS. Tagi pomagaj\u0105 grupowa\u0107 testy.<\/p>\n\n\n\n Przekazuje accounts do Data. Nast\u0119pnie przekazuje w scenariuszu warto\u015b\u0107 z „current”, kt\u00f3ry pozwoli pobra\u0107 warto\u015b\u0107 z date table.<\/p>\n\n\n\n Test zaczyna si\u0119 od przej\u015bcia do panelu logowania wordpressa. Zrobi\u0142em to, podaj\u0105c pe\u0142n\u0105 \u015bcie\u017ck\u0119. Oczywi\u015bcie, gdybym zdefiniowa\u0142 domen\u0119, m\u00f3g\u0142bym odwo\u0142ywa\u0107 si\u0119 do \u015bcie\u017cki po \/. Wype\u0142niam pole login loginem, kt\u00f3ry znajduje si\u0119 w current.login. W tym miejscu korzystam ze wpisywania warto\u015bci do selectora. Po tym kroku klikam przycisk „Continue”. Pojawia mi si\u0119 pole password<\/strong>. W nie wpisuje has\u0142o tego u\u017cytkownika.<\/p>\n\n\n\n Doda\u0142em krok, kt\u00f3ry sprawdza, czy przycisk si\u0119 pojawi\u0142. W tym przypadku jest to przycisk „Log In”. Klikam w niego i dodaj\u0119 metod\u0119 I.waitInUrl(’\/me’,10)<\/strong>, kt\u00f3ra pozwala czeka\u0107 na pojawienie si\u0119 okre\u015blonej warto\u015bci w linku. Po tym kroku dodaj\u0119 krok czekaj\u0105cy na element I.waitForElement(’.profile-gravatar__user-display-name’, 15)<\/strong>, kt\u00f3ry jest odzwierciedleniem nazwy u\u017cytkownika wy\u015bwietlanym w dashbordzie . Test ko\u0144cz\u0119 dodaniem asercji, kt\u00f3ra sprawdzam, \u017ce ta warto\u015b\u0107 znajduje si\u0119 na tej stronie.<\/p>\n\n\n\n Je\u017celi chcesz uruchomi\u0107 jak\u0105\u015b pul\u0119 test\u00f3w z okre\u015blonym tagiem, mo\u017cesz to zrobi\u0107 za pomoc\u0105 tej komendy:<\/p>\n\n\n Popularne jest nadawanie tag\u00f3w np. @slow dla wolniejszych test\u00f3w, czy @basic dla podstawowych test\u00f3w, kt\u00f3re sprawdzaj\u0105 najwa\u017cniejsze rzeczy.<\/p>\n\n\n\n https:\/\/github.com\/testingplusme\/IntroductionToCodeCeptJS\/tree\/second_artile_parallel_and_page_object<\/a><\/p>\n\n\n\n W dzisiejszym wpisie przedstawi\u0142em Ci, w jaki spos\u00f3b mo\u017cna skorzysta\u0107 w bardziej zaawansowany spos\u00f3b z CodeceptJS. W relatywnie \u0142atwy spos\u00f3b mo\u017cesz zaimplementowa\u0107 page object pattern, jak i r\u00f3wnie\u017c skorzysta\u0107 z uruchamiania wsp\u00f3\u0142bie\u017cnego test\u00f3w. Je\u017celi lubisz javascript, ten framework spokojnie mo\u017cesz wdro\u017cy\u0107 przy komercyjnym projekcie.<\/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><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nCo, je\u017celi natrafimy na taki b\u0142\u0105d?<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nImplementacja page object<\/span><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nPrzydatne opcje<\/h2>\n\n\n\n
\nnpx codeceptjs shell\n<\/pre><\/div>\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nCodeCeptJS – bardziej zaawansowany przyk\u0142ad<\/b><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\nUruchamianie test\u00f3w z tagiem<\/h2>\n\n\n\n
\ncodeceptjs run \u2013grep @accounts\n<\/pre><\/div>\n\n\n
Kod dost\u0119pny jest na GitHubie<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/span>Podsumowanie<\/h2>\n\n\n\n
\n\n\n\n