Transcription

Witam bardzo serdecznie w Code16Challenge, nie przysłyszałeś się, nie będzie to Hot16Challenge, swoją karierę raperską już jakiś czas temu zawiesiłem, więc dzisiaj jedyne co chcę Ci pokazać to 16 linijek, w których wykonamy testy end-to-end, portalu się pomaga. Jeżeli nie wiesz co to są testy end-to-end to pokrótce wyjaśniam. Testy end-to-end są to takie testy, które w automatyczny sposób potrafią zasymulować zachowanie i interakcję użytkownika z naszą aplikacją. Dzisiejsze 16 linijek napiszę dla Was w Cypressie. Cypress jest to mega fajny framework umożliwiający testy w zasadzie wszystkiego co może zostać odpalone w przeglądarce. Zaraz zobaczycie, że Cypress naprawdę jest bardzo fajnym narzędziem, bo mamy dostęp do łatwego debugowania, wszystko się przeładowuje automatycznie oraz super szybko. Do tego mamy wsparcie dla Chroma, Firefoxa, Edge'a, Electrona i Brave'a, więc myślę, że jest to naprawdę fajne narzędzie. Dziękuję też za nominację Overmentowi, mam nadzieję, że sprostam wysoko zawieszonej poprzeczce. Jeżeli nie wiesz, czym jest akcja Code16Challenge, to jest to taka akcja zorganizowana przez programistów, która trochę naśladuje akcję zorganizowaną przez raperów o nazwie Hot16Challenge, w której po prostu trzeba zarapować 16 linijek, a jest to wszystko robione w szczytnym celu, ponieważ w ten sposób chcemy zachęcić wszystkich do wzięcia udziału w zbiórce dla medyków. Nie przedłużam więc i teraz Wam pokażę, jak możecie napisać proste testy z użyciem Cypressa, a zajmiemy się testowaniem niczego innego, jak właśnie platformy się pomaga. Cypressa do Waszego projektu możecie dodać bardzo prosto, nie jest konieczne instalacja jakichś nie wiadomo jakich zależności w Waszym systemie. Wystarczy, że użyjecie Yarn'a albo npm install i po prostu napiszecie sobie yarn.cypress i po chwili, czasami dłuższej chwili biblioteka powinna zostać zainstalowana. No dobra, u mnie Cypress już się zainstalował, więc przeskoczymy od razu prosto do kodu. Musimy sobie utworzyć wewnątrz naszego projektu folder o nazwie Cypress, a w nim musimy utworzyć sobie folder integration, gdzie będziemy dodawać w przyszłości nasze testy integracyjne, czyli inaczej mówiąc testy end-to-end i tutaj sobie tworzymy nowy plik, na przykład się pomaga spec.js i tu generalnie po prostu nazywacie sobie ten plik już jak chcecie, najlepiej dodać sobie przyrostek spec. Tu piszemy według specjalnej składni, czyli piszemy na przykład describe i tutaj w tym momencie opisujemy, co chcemy przetestować w naszym teście, tak żeby po prostu programista czy inna osoba później weryfikująca na przykład raporty z takich testów, żeby wiedziała po prostu, na przykład jeżeli coś się wykrzaczy, no to żeby wiedziała, co ten test, który wykrzaczył się tak naprawdę robi, bo wtedy jest to dodatkowa informacja zawsze, czy to jest jakiś ważny test, prawda, bo jeżeli ktoś nie może utworzyć nowej donacji, wyjść się pomaga, no to jest to dosyć poważna usterka, więc tutaj na przykład zrobimy się pomaga i tutaj sobie wewnątrz możemy już stworzyć przykładowy test, który nazwiemy sobie ads donation to cart i będziemy testować sobie dodawanie jakby nowego wsparcia do koszyka, jeżeli można tak powiedzieć i tutaj sobie, no co jest, nie chce ze mną współpracować dzisiaj edytor i wpisujemy sobie adres strony, której chcemy sobie przetestować. W tym przypadku będzie to strona siepomaga.pl ukośnik hot16challenge, na przykład sobie przetestujemy tę stronę i zapiszemy sobie ten plik i teraz oczywiście musimy uruchomić sobie Cypressa. W odpaleniu tej komendy Cypress wygląda w ten sposób. Widzicie, że macie tutaj fajny taki programik, który załadował się w waszym systemie operacyjnym i tutaj widzicie, że mamy póki co jeden test i ten test możemy sobie odpalić na przykład na Firefoxie albo elektronie, tutaj u mnie akurat jest chyba starsza wersja, ale generalnie możecie sobie wybrać na czym chcecie odpalać swoje testy. Ja swoje testy chcę odpalić na Chromie, więc teraz sobie kliknę run all specs i otworzyło się nam teraz nowe okno i tutaj widzicie, wstawiłem to okienko tak, żebyśmy mogli ciągle podglądać co się dzieje z tym naszym kodem no i widzicie, że mamy pierwszy jakby problem, że test się pomaga, nam nie przechodzi, ponieważ zrobiłem, jak to się zdarza zwykle przy nagrywaniu tego typu filmików, po prostu literówkę i tutaj mam cy.vist, nie ma tutaj czegoś takiego, bo oczywiście powinno być visit i zapisujemy to visit i widzicie, że Cypress od razu chwyta to i wchodzi mi na stronę, którą chcę teraz sobie przetestować i tutaj jakby będą kolejne kroki naszego testu. No i teraz tak naprawdę, co my chcemy tutaj przetestować? Chcemy przetestować, czy w momencie, gdy kliknę na przykład wesprzyj i wpiszę tutaj na przykład 100 zł, wpiszę sobie podpis fullstack.pl, później klikam wpłać teraz i chcę zaakceptować, chcę podać na przykład swój adres e-mail i chcę opłacić ten datek z użyciem bramki mbank. No i teraz zwróćcie uwagę, że normalnie w normalnym świecie, gdybyście pracowali nad tą aplikacją, się pomaga i na przykład ktoś wprowadziłby tu jakąś nowy kanał płatności albo coś by zmienił w strukturze tej strony albo cokolwiek zmienił w logice biznesowej tego jak działa koszyk, to za każdym razem tester musiałby wejść na tą stronę i po prostu sprawdzić, czy produkt może zostać dodany do koszyka. A my dzisiaj spróbujemy ten proces zautomatyzować i po prostu napisać do niego test. Więc test oczywiście rozpoczynamy od tego, że musimy odwiedzić stronę, którą chcemy przetestować i w tym przypadku jest to strona się pomaga. I widzicie, że tutaj mamy kolejne jakby kroki i w momencie, gdy sobie tutaj je zaznaczam, to wtedy mam dostęp do tak zwanych snapshotów, czyli takich zrzutów, co się działo w tym teście. No i oczywiście zaczynamy od tego, że wchodzimy na stronę, którą chcemy przetestować, a później co ja zrobiłem, później z tego co pamiętam, kliknąłem sobie na przycisk wesprzy. Więc możemy sobie teraz zobaczyć, ładnie otworzyć to w DevToolsach. Tutaj jakby moim ulubionym featurem w Cypressie jest to, że mamy tutaj dostęp normalnie do DevToolsów i możemy sobie sprawdzić, jak nazywa się ten konkretny link i co tutaj w nim mamy wpisane. No i widzimy, że mamy tutaj przycisk, a w zasadzie link z użyciem atrybutu A, którym ma tutaj tekst wesprzy. Więc w ten sposób musimy jakby powiedzieć Cypressowi, do czego my się chcemy tutaj dobrać. Więc teraz zrobimy sobie po prostu cy i tutaj wpiszemy sobie na przykład contains i tutaj wpiszemy, że chcemy, żeby był znacznik A i chcemy, żeby ten atrybut miał nazwę wesprzy i chcemy sobie na to kliknąć. I zapiszemy teraz to i zobaczymy, co się stanie tutaj z naszym kodzikiem. I widzicie, że jakby nasz test failnow, ponieważ tutaj jest problem z tym atrybutem, że musimy tutaj w jakiś sposób wymusić na tym, bo tutaj z tego, co widzę, ten element niby nie jest widoczny, tak to Cypress wykrył, więc sobie wpiszemy force i na przykład true, zapiszemy i zobaczymy, że teraz już to zadziałało. I teraz zobaczcie, testy działają w ten sposób, że na przykład gdyby jakiś programista coś schrzanił i na przykład zrobiłby jakiegoś babola i na przykład sprawiłby, że ten przycisk nie byłby tutaj widoczny, to wtedy nasz test by po prostu nie przeszedł. Zobaczcie, wpisałem tutaj jakby, że strona powinna zawierać znacznik A z napisem support, a Cypress tego nie mógł znaleźć na stronie, nie mógł kliknąć w to, więc wtedy to powoduje sfejlowanie testu. Więc jakby widzicie, że pisząc testy w ten sposób, jakby jesteśmy w stanie mieć pewność, że nasza aplikacja działa. Oczywiście czasami zdarza się tak, że testy przechodzą, a aplikacja mimo wszystko nie działa, ale oczywiście mówimy tutaj o takich sytuacjach, nazwijmy to poprawnych. Oczywiście ten kod, który dzisiaj Wam napiszę nie będzie w stu procentach zajebistym, najlepszym kodem Cypressa, bo po prostu chcę Wam pokazać dzisiaj to narzędzie, a jeżeli filmik Wam się spodoba, to dajcie znać w komentarzach, a nagram dla Was więcej rzeczy związanych z Cypressem. Ale wracajmy do naszego testu. Tym razem jesteśmy tutaj, no i chcemy po prostu zrobić nic innego, jak wpisać tutaj kwotę wsparcia, więc sobie sprawdzimy, jak tutaj ten input się nazywa. No i input się nazywa payment amount i sobie go po prostu teraz tutaj wklepiemy, a wklepiemy go w taki sposób, że znowu posłużymy się Cy, czyli to odwołanie do Cypressa, get i sobie tutaj wpiszemy, że chcemy input, którego nazwa jest równa temu, co tu właśnie skopiowałem i chcemy w tym inpucie sobie wpisać 100, czyli chcemy po prostu wpisać do tego inputu 100, czyli chcemy zasymulować takiego bardzo hojnego darczyńcę, który wpłaci tutaj 100. Teraz chcemy tutaj w podpisie wpisać, żeby było widać, kto jest taki bardzo hojny, więc tutaj znowu musimy się dobrać do inputa i ten input kolejny, który jest tutaj, możemy sobie sprawdzić, może ja sobie to otworzę tutaj na dole, żeby to było bardziej widoczne. I teraz ten podpis musimy się do niego dobrać przez name, payment, signature i tutaj sobie to skopiujemy i chcemy tutaj wpisać fullstack.pl. No i zapisujemy, zobaczymy, co się dzieje z naszym testem, klikamy, mamy wpisane fullstack no i teraz chcemy tak naprawdę przeskoczyć do koszyka Darowizn, więc chcemy to po prostu dodać do naszego koszyka. No i teraz musimy zrobić coś innego, bo tutaj jak widzicie, symulowaliśmy wpisywanie czegoś w formularz, a teraz musimy zasymulować nic innego jak po prostu kliknięcie w ten oto ładny przycisk, więc zrobimy to dosyć podobnie. Też mamy tutaj do użycia cy, tutaj sobie weźmiemy, tym razem musimy sobie sprawdzić, że mamy np. strona zawiera przycisk, czyli button, który ma labelkę do koszyka Darowizn i chcemy oczywiście sobie kliknąć w ten przycisk, zapisujemy nasz test, patrzymy, co się dzieje i widzimy, że wpadliśmy teraz do koszyka. No i tutaj teraz kolejna rzecz, którą byśmy chcieli przetestować to np. że ta kontrolka tutaj, która wskazuje, że w koszyku znajduje się jeden przedmiot, czy jedna donacja, czy jedna darowizna, o może tak lepiej można powiedzieć, to sobie znowu napiszemy contains i oczywiście już tutaj wprawne oko widza może widzieć, że się zbliżamy powoli do końca, bo już mamy naklepane 10 filmik i tutaj sobie zrobimy div ui i np. że jest tutaj zawartość 1 i ten test po prostu upewni się, że potem, gdy coś dodaliśmy do koszyka, to użytkownik faktycznie otrzymał informację o tym, że coś znajduje się w koszyku. Jeżeli tutaj w HTML-u po tej naszej akcji nie będzie diva o klasie ui, który ma zawartość 1, no to test oczywiście się wysypie i zgłosi to nam, że coś jest nie tak. I teraz co chcemy? Chcemy pójść do opłać koszyk darowizn, więc teraz znowu będziemy się musieli dobrać przez atrybut a i tutaj tym razem będzie opłać koszyk darowizn i tutaj już ten force nam najprawdopodobniej nie będzie potrzebny i widzicie, że te wszystkie operacje są wykonywane sekwencyjnie, więc jakby nie musimy tu pisać żadnych promisów, żadnych callbacków, żadnych async, awaitów, po prostu krok po kroku Cypress idzie po naszych instrukcjach. Dodatkowo fajna opcja jest taka, że np. jak tu bym wpisał słowo testowe dupa, to zobaczycie, że Cypress ma bardzo takie fajne zachowanie, że Cypress przez chyba 5 sekund, około 5 sekund, czeka zanim sfejluje test, czyli np. jeżeli wykonuje się jakaś akcja asynchroniczna w tle, która powoduje, że coś jest po chwili dostępne na Waszym UI-u, to jakby test od razu nie jest sfejlowany, więc ten test po prostu czeka, aż UI zmieni się po 5 sekundach i jeżeli faktycznie nie zmieni się i dalej jakby nie ma poszukiwanej rzeczy, czyli tej np. dupa koszyk darowizn, to wtedy dopiero sfejluje i to też jest bardzo fajna opcja, bo np. w Selenium albo w innych testach takich automatycznych end-to-end często trzeba czekać, np. wpisywać jakieś tam waity, że poczekaj 5 sekund, bo tutaj zaraz coś się zaktualizuje, natomiast w Cypressie jest to bardzo fajnie rozwiązane. Więc jesteśmy na opłać koszyk darowizn, wchodzimy tutaj na kolejną stronę i tutaj możemy sobie teraz np. sprawdzić, czy faktycznie ta moja darowizna wynosi 100 zł, czyli tutaj możemy namierzyć znowu diva, możemy sprawdzić, czy mamy diva o nazwie total amount i tutaj możemy sprawdzić np. czy wewnątrz tego diva znajduje się tekst 100 zł. I kolejna rzecz, którą chcemy zrobić, to oczywiście chcemy wpisać e-mail, chcemy wpisać e-mail testera. Oczywiście jak testujecie, to jakby testujecie na serwerze, który nie jest produkcyjny, żebyście faktycznie nie opłacali jakichś zamówień z użyciem waszych end-to-end testów. End-to-end testy odpalacie w bezpiecznym środowisku, w takim, w którym możecie namieszać i po prostu automatycznie wykonywać jakieś operacje. To taka rada poboczna, żeby nikt nie wpadł na pomysł, żeby to robić po prostu z jakiegoś, na jakimś serwerze produkcyjnym. No i tutaj zrobiłem, skopiowałem, bo było dużo pisania. Generalnie chcemy namierzyć... Generalnie chcemy namierzyć po prostu inputa i wpisać do niego ArturTester. Później w kolejnym kroku chcemy oczywiście kliknąć na ten przelew internetowy, ponieważ chcemy opłacić to z użyciem mBanku, więc jakby chcemy sprawdzić, że faktycznie nasza strona posiada tym razem diva, który ma po prostu w sobie napis przelew internetowy. I tutaj znowu, jeżeli coś by było nie tak z tym eY, jeżeli nie dałoby się w to kliknąć albo kliknięcie na przelew internetowy jakby nie spowodowało wyświetlenia się listy tych tutaj dostępnych kanałów płatności, to oczywiście test także by to wyłapał. I tutaj sobie piszemy przelew internetowy, klik, i oczywiście później chcemy sobie złapać na przykład mBank. mBank na przykład możemy sobie złapać w taki sposób, że możemy kliknąć po prostu na przykład na image, który ma title mBank, więc użyjemy tutaj znowu tego słynnego polecenia get. Tu chcemy złapać image, tu chcemy złapać po title. Title wynosi w tym przypadku mBank. I oczywiście chcemy nie wpisać coś, tylko po prostu sobie w to kliknąć. I zobaczmy, jak nasz test póki co przebiega. I coś tutaj poszło nie tak. Aha, taką samą sytuację mamy, że Cypress wyłapał sytuację, że nie ma pointer events na tym, więc też kliknięcie na taki element trzeba wymusić. I tutaj widzicie, że Cypress daje nam bardzo fajne podpowiedzi. Jest to naprawdę super narzędzie. No i mamy teraz, widzicie, oznaczony ten transfer. I teraz oczywiście ostatnią rzecz, jaką chcemy zrobić, bo widzicie, że już mamy 15 linijek, więc w ostatniej linijce możemy sobie po prostu wpisać kliknięcie w tą labelkę. Może to powiększę troszeczkę, bo jakby chcemy teraz kliknąć w to miejsce i oczywiście chcemy mieć możliwość przejścia do płatności. I tutaj możemy sobie złapać, że to jest jakaś tam labelka, czyli po prostu możemy sobie sprawdzić, że mamy labelkę, czyli mamy tutaj labelkę, w której chcemy... Akceptuję i chcemy w nią kliknąć. I oczywiście mamy 16 linijek. Ten test jakby nie jest w pełni skończony, bo moglibyśmy go sprawdzić, czy faktycznie kliknięcie w przejść do płatności powoduje przeredyrektowanie naszego użytkownika do bramki płatności. Ale myślę, że to było na potrzeby takie edukacyjne, żeby wam pokazać, jak fajne jest po prostu korzystanie z Cypressa. Cypress jest zajebisty z tego względu, jak już mówiłem, że po prostu odpalacie sobie ten test i w momencie, gdy coś pójdzie nie tak, gdy test się wysypie, to jakby jesteście wewnątrz Cypressa i możecie wystartować natychmiast z debugowaniem. Widzicie, dlaczego ten test się wysypał. Na przykład w Selenium czy w jakichś innych narzędziach często jest tak, że test się wysypuje, a wy później musicie go odtwarzać, jakoś go rekonstruować i tak dalej, żeby po prostu wiedzieć, co tam poszło nie tak. A tutaj jesteśmy centralnie w przeglądarce i możemy po prostu rozpocząć debugowanie i zastanawiać się, co poszło nie tak. To wszystko, co przygotowałem dla was na dzisiaj. Mam nadzieję, że Code 16 Challenge wam się podobał, że jesteście zainteresowani Cypressem. Jeżeli macie jakieś pytania do Cypressa, jeżeli chcecie zobaczyć więcej tego typu materiałów, w których pokażę, jak się używa Cypressa, jak go skonfigurować, jak go odpalić na GitHubie, jak na przykład zamokować jakieś sytuacje, jak się pisze takie testy na co dzień, to dajcie znać w sekcji komentarzy. Będzie mi bardzo miło, jeżeli klikniecie lajka pod tym filmikiem, bo dzięki temu filmik trafi do większej liczby zainteresowanych osób. A tutaj na ekranie widzicie moją stronę fullstack.pl, na której możecie zapisać się na newsletter. Jeżeli obejrzałeś filmik, podoba ci się taki Code 16 Challenge i chcesz wesprzeć tę akcję, do której masz link w opisie, to oczywiście zachęcam cię do wzięcia udziału w tej akcji. Zapomniałem jeszcze o bardzo ważnej rzeczy. Zapomniałem nominować osoby do nagrania kolejnych Code 16 Challenge albo Hot 16 Challenge, jak wolicie. Chciałbym nominować Piotra Kowalskiego, piecioszkę, z którym zaraz w ogóle mam live'a. Chciałbym nominować Macieja Kofela oraz webdefinsidera. Trzymam za Was kciuki, chcę zobaczyć Wasze szesnastki. Do zobaczenia.