Testy end-to-end w JavaScript. Cypress tutorial

[@JZP]

Piszecie testy do swoich aplikacji czy tylko testy na prodzie 😬? Jeśli tak, to czego używacie? Cypressa, TestCafe czy może Selenium?

[@katarzynamaciejewska9823]

Puppeteer + Jest 😊

[@tomaszdomagalski7221]

Super, więcej takich !

[@cthulhurlyeh3426]

To ten, pierwszy czy cuś. Witaj Kacprze :D.

[@przemuhdev]

Jeden szczegół :) powiedziałeś, że: cy.get("#welcome").contains("text"); sprawdza czy "welcome" zawiera tekst. IMHO to taki mocny skrót myślowy, który może wprowadzać w błąd. .contains nie sprawdza czy dany element zawiera tekst (bezpośrednio). Tylko szuka elementu pod węzłem #welcome, który ten tekst zawiera. W Twoim wypadku było to h1. Co prawda test się wysypie w momencie kiedy .contains nie znajdzie elementu, ale nie jest to bezpośrednia asercja. I np. zawołanie .contains na obiekcie, który nie zwraca węzła DOM jest błędem np. cy.title().contains("text")

[@JZP]

Fajnie, że się podobało. Bardzo dobry feedback, dzięki ;)

[@marcin5984]

A co z opóźnieniami? Na przykład gdyby backend zwrócił "200 OK", ale po.. 8 sekundach? Czy test nadal zakończy się powodzeniem?

[@JZP]

Bardzo dobre pytanie! Domyślnie Cypress czeka na elementy 4 sekundy więc dla przykładu, który opisujesz - test sfailuje. Są jednak metody na powiedzenie Cypressowi, jakie requesty robimy i na które powinien on poczekać dłużej. Więcej możesz doczytać tutaj - docs.cypress.io/guides/guides/network-requests#Waiting Pozdro!

[@robertlancman32]

Podczas szukania pierwszej pracy jakie testy powinny mnie interesować? I czy zazwyczaj od juniora wymaga wykonywania testów?

[@JZP]

Musisz umieć testować kod manualnie. Gdy powiesz, że skończyłeś pracę to powinno to oznaczać, że napisałeś kod, UI (jeśli robisz UI) wygląda tak jak na projekcie i porządnie sprawdziłeś jego działanie. Co do testów jednostkowych czy automatycznych to już zależy od firmy. Niektóre mogą wymagać tego od juniorów.

[@bartoszbadlewski8968]

udało się nagrać materiały o testach unitowych i integracyjnych?

[@JZP]

W ramach naszego kursu - zrozumiecreact.pl

[@bartoszbadlewski8968]

informacja dla osób, które się zacięły już w granicach 3-8 minutach. Dla nowszej wersji cypress wizualnie layout strony/aplikacji wygląda inaczej niż na filmie. Struktura w projektcie folderów i plików też jest inna. W samych testach nie macie integration pliku robionego automatycznie tylko cypress po uruchomieniu zrobil dla Was pliki e2e, fixtures, support. Te 2 ostatnie was nie interesuja. Wazny jest e2e i w tym pliku mozecie zrobic takie plik jak pokazał autor bez tworzenia podfolderów(ja tak zrobilem) bo inaczej Wam ich nie odczyta w aplikacji. Ja w aplikacji cypress zrobilem manualnie plik to dodal mi rozszerzenie spec.cy.js i to rozszerzenie jest czytane poprawnie i testy sie odpalaja. Więc to kolejny tip dla Was gdyby nie dopalał. Wiec mozecie dodac plik registration.spec.cy.js w folderze e2e manualnie albo przez aplikację. Normalnie aplikacja cypress po wybraniu przeglądarki wyswietli strukture testów tych stworzonych automatycznie w 2 folderach i na samym dole Wasze pliki jakie stworzyliście. Po wyborze w menu: e2e testing, potem zobaczycie cypress\e2e i bedzie walsnie folder getting started, advanced i na samym dole plik ktory stworzyliscie bez folderu. Po kliknieciu 2x w Wasz plik test sie odpali i zrobi to co potem zaprogramujecie zgodnie z filmikiem. Jeśli usuniecie getting started i advanced to bedziecie mieli tylko 1 swoj swtorzony plik w visual studio code lub recznie przez cypressa jako new spec. Mam nadzieje ze czesci osob pomogłem. Chwile rozkminialem to. Dodatkowo mialem serie fuckupów przy instalacji node z npm. Sam npm mi nie dziala do tej pory przez VSC. Musiałem kombinować z instalacją w zwykłym CMD. Tam wiele opcji wymagało odpalenie CMD jako administrator. Wszystkie rzeczy jakieg robię z NPM wymaga ode mnie uzycia CMD z administratorem. Pamietajcie, że nie uzyjecie NPM run start czy jego funkcji bez sciagniecia z gita repo. Repo ma juz skonfigurowany plik package.json, który to pozwoli Wam uzywać funkcji NPM. Ja nie sciagnalem repo i chcialem zrobic to manualnie i tez sie zacialem bo nie wiedzialem ze npm wymaga pliku package.json, który to jak jest skonfigurowany pozwala uzywać komend NPM. Co do 2 części z NPM nie jestem w 100% przekonany czy wszystko dobrze wyjasnilem ponieważ sam robilem to pierwszy raz i mialem stycznosc z testami automatycznymi pierwszy raz. Lece robic kolejne tutorialki. Pogladowo material jest tak podstawowy, ze nie warto go odtwarzać na kompie. Wszystko jest zrobione pod kolejne kursy płatne więc ma to sens pewnie tylko z mysla o zaplaceniu i kontynuacji. Samo zrobienie tego nic kompletnie nie da. dodatkowo tip: jesli nie dziala Wam NPM w VSC to w terminalu wczesniej odpalajac VSC jako admin dodajcie komende "Set-ExecutionPolicy Unrestricted" mi to pomogło i zaczely dzialac komendy NPM w terminalu przez vsc zamaist CMD. Przyspiesza to dzialanie.

[@Bajdster]

Jako osoba początkująca w automatyzacji chciałem zapytać czy Cypress jest prostszy od Selenium i jakie są jego rokowania na przyszłość jeśli chodzi o rynek pracy, dziękuję za odpowiedź

[@JZP]

Zdecydowanie prostszy, nie trzeba się przejmować wieloma rzeczami (np. czekaniem na elementy itd). Wiele firm przechodzi właśnie z Selenium na Cypressa.

[@kaziupir]

Używałem wcześniej protractora, który używa selenium i cypress jest 100 razy lepszy i prostszy.

[@kacperdygas1228]

A co ze stabilnością testu przy zmianie nazwy id np. z email na email_1 ?

[@JZP]

Test w takiej formie oczywiście by nie przeszedł. Nie chciałem już wchodzić w dość zaawansowane tematy utrzymania testów w filmie dla początkujących. Przy pisaniu "produkcyjnej" wersji testu można podejść do tego na wiele różnych sposobów. Zaczynając od wyszukiwania elementu po typie inputa (jeśli wiemy, że mamy tylko jedno takie pole i dość dużą szansę, że się nie zmieni), różnego rodzaju test-idków (zbudowanych na data atrybutach czy jakkolwiek inaczej) czy chociażby szukania inputa, który znajduje się "najbliżej" labela, który zawiera w sobie słowo "e-mail".

[@kacperdygas1228]

@@JZP Dziękuję za odpowiedź, te informacje są dla mnie pomocne, napisałem testy do aplikacji w nightwachjs, i zastanawiam się jak zrobić je bardziej stabilnie

[@JZP]

​@@kacperdygas1228 Super, po to tu jesteśmy! Polecam Ci poczytać sobie sekcję Good Practices z docs.cypress.io/guides/references/best-practices Jest mnóstwo powodów dla których testy E2E mogą być niestabilme.

[@kaziupir]

Ja polecam używać atrybutów data-xxx, nie klas i id.