W tym samouczku szczegółowo omówimy Cypress Automation Framework. W tym artykule omówimy, czym jest Cypress, czym różni się od innych frameworków testowych, architekturą Cypress i procedurą instalacji. Cyprys to ekscytujący temat i nauka też jest fajna. Zaczynajmy!

Platforma automatyzacji Cypress

Cypress Automation Framework to czyste narzędzie testowe oparte na Javascript, które koncentruje się głównie na testowaniu front-end w nowoczesnych aplikacjach internetowych. Dzięki Cypress aplikacje można łatwo testować dzięki wizualnemu interfejsowi, który umożliwia śledzenie wykonywania testów. W ten sposób Cypress jest dobrodziejstwem zarówno dla programistów, jak i inżynierów QA, ułatwiając pisanie skryptów i wykonywanie testów. Ponadto jest wyposażony w charakterystyczny program uruchamiający testy, który ułatwia manipulację DOM i działa bezpośrednio w przeglądarce.

Spis treści

Czym jest Cyprys?

Cypress jest szybszy, lepszy i zapewnia ostateczne testy, które działają w przeglądarce. Cypress jest głównie porównywany z Selenium, ale jest zupełnie inny. Cypress nie działa na szczycie Selenium, co oznacza, że ​​jest całkowicie niezależny. Zamiast tego Cypress działa na Mocha, który jest ponownie bogatym w Javascript frameworkiem testowym. Jest kompatybilny tylko z Biblioteką Asercji Chai, która ma dostęp do szerokiej gamy asercji BDD i TDD.

Cypress skupia się głównie na trzech różnych typach testów. Są to testy End-to-End, testy jednostkowe i testy integracyjne. Cypress może wykonywać dowolne testy, które można uruchomić w przeglądarce. Ponadto oferuje różne możliwości wyśmiewania i walidacji, które są zachwycone testowaniem front-end.

Przeglądarki obsługiwane przez Cypress to Chrome, Firefox, Edge, Electron i Brave. Co więcej, testowanie w różnych przeglądarkach jest łatwo osiągalne dzięki Cypress. Wreszcie, chociaż Cypress obsługuje tylko JavaScript, można go również napisać za pomocą Typescript, głównie napisanego za pomocą JavaScript.

Cyprysowa automatyzacja

Cypress to narzędzie typu open source z bezpłatnym testerem, ale ma różne ceny dla zespołów i firm, w których pobierają opłaty za pulpit nawigacyjny. Jednak pulpit nawigacyjny jest do pewnego stopnia bezpłatny, chyba że masz dodatkowe funkcje, takie jak wykrywanie płatków, obsługa poczty e-mail, integracja z Jira i wiele innych.

Cypress służy głównie do automatyzacji skryptów w Internecie (może zautomatyzować wszystko, co działa w przeglądarce). Nigdy nie może działać na natywnych aplikacjach mobilnych, ale może zautomatyzować niektóre funkcje aplikacji mobilnych, jeśli są one opracowane w przeglądarce.

Korzyści

W Cypress dostępnych jest wiele niesamowitych funkcji, które wyróżniają się na tle innych narzędzi automatyzacji. Omówmy tutaj niektóre z głównych funkcji, a inne części omówimy później, gdy zaczniemy pisać nasze przypadki testowe!

1. Automatyczne oczekiwanie – Cypress ma zaletę automatycznego czekania. Nigdy nie będziemy musieli dodawać sił czekania i uśpienia na czekanie, aż DOM pobierze element. Cypress automatycznie czeka na jakąkolwiek interakcję z elementami i wykonanie asercji. Dzięki temu testy są szybkie!
2. Podróż w czasie – Cypress przechwytuje zrzuty ekranu podczas wykonywania testu. Wyniki możemy przeglądać wizualnie w czasie rzeczywistym, po prostu najeżdżając na wykonane polecenia na pulpicie nawigacyjnym. W ten sposób testy są łatwiejsze do debugowania
3. Testy debugowania – Cypress może debugować testy z popularnych narzędzi, takich jak narzędzia programistyczne. Błędy są czytelne, a stosy można łatwo śledzić.
4. Żądania pośrednika Cypress ma opcje potwierdzania i kontrolowania zachowań funkcji, odpowiedzi sieci lub liczników czasu używanych przez stubów i szpiegów.
5. Ciągła integracja – Cypress nie jest zależny od żadnych innych dodatkowych usług CI. Jednak po uruchomieniu polecenia testu integracja jest łatwo dostępna.

Mit o Cyprysie

Istnieje mit, że Cypress może działać tylko w aplikacjach internetowych przyjaznych Javascript. Cypress może jednak testować dowolne aplikacje internetowe zbudowane przy użyciu Django, Ruby on Rails, Laravel itp. Ponadto Cypress obsługuje każdy z języków programowania, takich jak PHP, Python, Ruby, C# itp. Jednak nasze testy piszemy w Javascript ; poza tym Cypress działa w każdej aplikacji.

Składniki cyprysu

Cypress składa się z dwóch głównych elementów. Oni są Biegacz testowy i Panel Użytkownika.

Biegacz testowy – Cypress zapewnia ten unikalny program uruchamiający testy, w którym użytkownik może przeglądać polecenia podczas wykonywania i testowaną aplikację.

W programie Test runner znajduje się kilka podskładników. Oni są

1. Dziennik poleceń – To jest wizualna reprezentacja zestawu testów. Możesz zobaczyć polecenia wykonane w teście, szczegóły asercji i bloki testowe.
2. Menu statusu testu – To menu pokazuje liczbę przypadków testowych, które zakończyły się powodzeniem lub niepowodzeniem oraz czas potrzebny na wykonanie.
3. Podgląd adresu URL – Daje to informacje o testowanym adresie URL w celu śledzenia wszystkich ścieżek adresów URL.
4. Rozmiar rzutni – Możesz ustawić rozmiar okna aplikacji do testowania różnych układów responsywnych
5. Podgląd aplikacji – W tej sekcji wyświetlane są polecenia uruchamiane w czasie rzeczywistym. Tutaj możesz użyć Devtools do debugowania lub sprawdzania każdej bazy.

Deska rozdzielcza: Cypress Dashboard daje możliwość dostępu do rejestrowanych testów. Dzięki usłudze Dashboard możemy być świadkami liczby zdanych, nieudanych lub pominiętych testów. Ponadto możemy wyświetlić migawki nieudanych testów za pomocą cy. polecenie zrzutu ekranu(). Możesz także obejrzeć film z całego testu lub klip z nieudanych testów.

Cyprysowa architektura

Większość narzędzi testowych działa na serwerze poza przeglądarką i wykonuje polecenia przez sieć. Ale Cypress działa w przeglądarce, w której działa również aplikacja. W ten sposób może uzyskać dostęp do wszystkich elementów DOM i wszystkiego w przeglądarce.

Serwer Node działa za Cypressem po stronie klienta. W ten sposób serwer węzła i Cypress współdziałają ze sobą, towarzyszą i wykonują zadania wspierające wykonanie. Ponieważ ma dostęp zarówno do frontonu, jak i zaplecza, reakcja na aplikację w czasie rzeczywistym podczas wykonywania jest dobrze wykonywana i może również wykonywać zadania, które działają nawet poza przeglądarką.

Cypress współdziała również z warstwą sieciową i przechwytuje polecenia czytając i zmieniając ruch w sieci. Na koniec Cypress wysyła żądania HTTP i odpowiedzi z serwera węzła do przeglądarki. Ponieważ Cypress działa w warstwie sieciowej, pomaga modyfikować kod, który może zakłócać automatyzację przeglądarki internetowej. Komunikacja między serwerem Node a przeglądarką odbywa się za pośrednictwem protokołu WebSocket, który rozpoczyna wykonywanie po uruchomieniu serwera proxy.

Cypress kontroluje wszystkie polecenia uruchamiane w przeglądarkach i poza nimi. Ponieważ jest zainstalowany na komputerze lokalnym, bezpośrednio współdziała z systemem operacyjnym w celu nagrywania wideo, przechwytywania migawek, uzyskiwania dostępu do warstwy sieciowej i łatwego wykonywania operacji na systemie plików. Cypress może uzyskać dostęp do wszystkiego, od DOM, obiektów okien, pamięci lokalnej, warstwy sieciowej i DevTools.

Zainstaluj Cyprys

W tej sekcji omówimy proces instalacji, który należy wykonać przed napisaniem naszych przypadków testowych. Cypress można pobrać na dwa różne sposoby. Oni są

1. Zainstaluj przez npm
2. Bezpośrednie pobieranie

Zanim zainstalujemy Cypress, możemy potrzebować kilku warunków wstępnych, aby rozpocząć instalację przez npm. Zobaczmy je szczegółowo.

Wymagania wstępne

Przed napisaniem naszych przypadków testowych będziemy wymagać spełnienia pewnych warunków wstępnych.

• Jak omówiono powyżej, Cypress działa na serwerze węzła; dlatego będziemy musieli zainstalować Node.js.
• Ponadto, aby napisać nasze przypadki testowe, potrzebujemy edytora kodu lub IDE.

W tym przykładzie użyjemy Visual Studio Code. Zagłębmy się więc w szczegóły.

Instalacja Node.js na Macu

Tutaj omówimy kroki, aby pobrać Node.js na Maca. Nawigować do https://nodejs.org/en/download/. Teraz wylądujesz na stronie pobierania.

1. Kliknij Instalator macOS. Po kliknięciu poniżej możesz znaleźć pobrany plik pakietu. Kliknij plik pkg, aby zainstalować Node.js

2. Po kliknięciu pliku .pkg otworzy się instalator Node. Sekcja wprowadzająca zawiera wersje Node.js i npm. Kliknij Kontynuuj

3. Kliknij przycisk Zgadzam się, a następnie Kontynuuj. Pojawi się wyskakujące okienko umożliwiające dostęp do plików w folderze pobierania. Kliknij OK.

4. W tej sekcji możesz wybrać miejsce docelowe, do którego ma zostać pobrany Node.js. Ponownie możesz wybrać zgodnie z przestrzenią systemową. Tutaj wybieram domyślną lokalizację.

5. Kliknij przycisk Instaluj. Po kliknięciu pojawi się wyskakujące okienko z pytaniem o hasło systemowe. Wprowadź swoje hasło i kliknij Zainstaluj oprogramowanie.

6. Hurra! Zainstalowaliśmy pakiet Node.js i npm. Kliknij Zamknij, aby zakończyć instalację.

Instalacja kodu programu Visual Studio na komputerze Mac

Pomyślnie zainstalowaliśmy Node.js. Teraz zainstalujmy nasz edytor kodu Visual Studio Code. Kod VS to potężne narzędzie, które posiada wszystkie wbudowane funkcje JavaScript. Przejdźmy więc do etapów instalacji programu Visual Studio Code.

Tutaj omówimy kroki, aby pobrać kod VS na Maca. Najpierw przejdź do https://code.visualstudio.com/download wylądować na stronie pobierania kodu VS.

1. Kliknij ikonę Maca. Poniżej możesz zobaczyć pobieranie pakietu.

2. Kliknij pobrany plik, aby rozpakować pakiet. Po rozpakowaniu możesz znaleźć kod programu Visual Studio w pobranych plikach w Finderze.

3. Hurra! Pobraliśmy nasz edytor kodu. Kliknij ikonę, aby otworzyć kod programu Visual Studio.

Stworzenie nowego projektu Cypress

Zobaczymy teraz, jak utworzyć nowy projekt węzła w naszym Visual Studio Code. Po kliknięciu ikony kodu VS wylądujesz na stronie powitalnej. Następnie kliknij folder Add Workspace, aby utworzyć nowy folder.

Po kliknięciu folderu pojawi się wyskakujące okienko z prośbą o dodanie nowego folderu. Teraz kliknij lokalizację, w której chcesz dodać obszar roboczy. Następnie kliknij Nowy folder i Dodaj nazwę folderu jako CypressProject i kliknij Otwórz.

Teraz stworzyliśmy folder dla naszego testu Cypress. Zanim zaczniemy pisać nasze testy, powinniśmy zainstalować plik package.json. Przed zainstalowaniem wyjaśnijmy, czym jest plik package.json.

Co to jest plik Package.json?

Package.json zawiera wszystkie pakiety npm w pliku, zwykle znajdującym się w katalogu głównym projektu. Zwykle znajduje się w katalogu głównym projektu Node.js. Ten plik zawiera wszystkie odpowiednie metadane niezbędne dla projektu. Przekazuje wszystkie informacje do npm i pomaga w identyfikacji projektu i obsłudze zależności. Plik Package.json zawiera informacje, takie jak nazwa projektu, wersje, licencja, zależności i wiele innych.
Teraz zrozumieliśmy, czym jest plik package.json. Zacznijmy więc, aby pobrać plik w naszym kodzie programu Visual Studio.

1. Aby wykonać nasze polecenia, musimy otworzyć Terminal. W górnej części kodu VS kliknij terminal. Gdy menu się otworzy, kliknij Nowy terminal.

2. Po otwarciu terminala wpisz poniższe polecenie w katalogu projektu i naciśnij Enter.

npm init

3. Po naciśnięciu klawisza Enter można zobaczyć wyświetlane informacje. Możesz wpisać wymagane dane w Terminalu i nacisnąć Enter, aby uzyskać wszystkie pola.

• Nazwa pakietu: Możesz nadać przesyłce dowolną nazwę. Pozostawiłem to pole puste, ponieważ jest wstępnie wypełnione nazwą folderu, którą utworzyliśmy.
• Wersja: Podaje informacje o wersji npm. Możesz to pominąć i nacisnąć Enter.
• Opis: Tutaj możesz dodać do paczki dodatkowe informacje. W razie potrzeby możesz wpisać opis i ponownie nacisnąć Enter.
• Punkt wejścia: reprezentuje punkt wejścia aplikacji. Ponieważ jest on wstępnie wypełniony index.js, możemy pominąć to pole i nacisnąć Enter.
• Polecenie testowe: Polecenie wydane do uruchomienia testu. Tutaj nie jest konieczne wydawanie żadnych poleceń, ale w razie potrzeby z pewnością możesz podać dowolne polecenie.
• Repozytorium Git: To pole wymaga ścieżki do repozytorium git. Możesz również pozostawić to pole puste.
• Słowa kluczowe: Unikalne słowa kluczowe ułatwiające identyfikację projektu. Możesz też pominąć to pole.
• Autor: Zwykle jest to nazwa użytkownika osoby. Możesz dodać swoje imię i nacisnąć Enter.
• Licencja: Licencja jest wstępnie wypełniona ISC. Możesz kontynuować, naciskając Enter.

• 4. Po naciśnięciu klawisza Enter Terminal poprosi o potwierdzenie, podając wszystkie podane przez Ciebie dane. Rodzaj Tak i ponownie naciśnij Enter.

Wygenerowaliśmy teraz plik package.json. Możesz wyświetlić plik w edytorze kodu z dostarczonymi przez nas informacjami.

Kroki instalacji Cyprysa

Zainstalowaliśmy wszystkie wymagania wstępne dla naszego pobierania Cypress, węzła i zainicjowanego npm. Jak wspomniano powyżej, Cypress można pobrać na dwa sposoby.

Pobierz Cyprys przez npm

Aby zainstalować Cypress, musisz przekazać wymienione poniżej polecenie w Terminalu. Ponadto będziesz musiał podać polecenie w katalogu projektu, aby zainstalować węzeł i wygenerować plik package.json.

npm install cypress --save-dev

Po przekazaniu polecenia pobierze wszystkie odpowiednie zależności wymagane dla projektu. Podczas pisania tego artykułu najnowsza wersja Cypress jest 7.7.0. Wersja może się różnić w momencie pobierania.

W odniesieniu do powyższego obrazu widać, że pobraliśmy Cypress. Możesz zweryfikować pobraną reprezentację w Terminalu i dodanie devDependencies w pliku package.json.

Bezpośrednie pobieranie

Możemy pobrać Cypress bezpośrednio z ich CDN, jeśli nie używasz w projekcie pakietu Node lub npm. Jednak nagrywanie testów w Dashboard nie jest możliwe poprzez bezpośrednie pobieranie.

Możesz pobrać, klikając Pobierz Cypress bezpośrednio z tego link. Spowoduje to bezpośrednie pobranie pakietu. Po pobraniu pakietu otwórz plik zip i kliknij dwukrotnie. Cypress będzie działał bez konieczności instalowania zależności. To pobieranie zawsze będzie pobierać najnowszą wersję, a platforma zostanie wykryta automatycznie. Zaleca się jednak pobieranie Cypress przez npm zamiast bezpośredniego pobierania.

Aby uzyskać więcej postu na temat technologii, odwiedź naszą Strona technologii.

Aishwarya Lakszmi

Cześć… nazywam się Aishwarya Lakshmi, ukończyłem B.Tech i mam prawie 2 lata doświadczenia w domenie testowania. Jestem entuzjastą testowania i pasjonuję się testowaniem. Uwielbiam odkrywać nowe rzeczy w mojej dziedzinie i dzielić się nimi z rówieśnikami. W wolnym czasie lubię pisać blogi w najprostszy, ale skuteczny sposób. Jako tester lubię mieć wszystko dopracowane do perfekcji, dlatego życzę moim czytelnikom doskonałego zrozumienia technologii. Na bieżąco śledzę nowe technologie związane z testowaniem i poświęcam czas na ich zrozumienie. Cieszę się, że mogę pomóc uczniom zrozumieć pojęcia używane w testowaniu.