W ostatnim artykule zobaczyliśmy, czym jest Cypress, jego architekturą, procesem instalacji i wymaganiami wstępnymi do instalacji. Zanim jednak zaczniemy pisać nasze testy, musimy zainstalować Cypress. Kliknij tutaj aby uzyskać szczegółowe instrukcje instalacji Cypress.

Przykład cyprysu

W tym artykule omówimy Przykład cyprysu, przykłady JSON, zmienne i aliasy oraz sposób pisania przypadków testowych. Więc zacznijmy.

Spis treści

Cyprysowy przykład JSON

Początkowo, kiedy otwieramy nasz Cypress Test Runner, a cypress.json tworzony jest plik konfiguracyjny. Zwykle przechowujemy fragment kodu, który umożliwia zaimplementowanie i zachowanie niektórych właściwości, które pomagają w wykonywaniu programu lub kodu automatyzacji. Podobnie Cypress ma również plik JSON do przechowywania wszelkich wartości, które dostarczamy jako właściwości konfiguracyjne.

Przyjrzyjmy się niektórym przykłady, które możemy skonfigurować w naszym Cypress JSON plik.

Cypress ma już przypisane pewne domyślne wartości konfiguracyjne. Istnieje kilka opcji, które możemy dostosować do naszych wymagań. Na przykład możemy zapewnić baseURL nieruchomość w naszym cypress.json plik. Tak więc za każdym razem, gdy uruchamiamy skrypt, ustawiany jest baseURL i wyzwalany.

opcja	Wartości domyślne	Opis
bazowy URL	zero	Ta opcja może być używana jako URL przedrostek dla cy.żądanie() or cy.wizyta() Polecenia.
uważaj na zmiany plików	prawdziwy	Ta opcja jest domyślnie ustawiona jako prawda. Obserwuje pliki pod kątem zmian i uruchamia je ponownie po wprowadzeniu jakichkolwiek modyfikacji.

Poniżej znajduje się migawka, w której zmodyfikowaliśmy właściwości baseURL i watchForFileChanges w naszym Cypress.json plik.

Uwaga: W dalszej części omówimy wszystkie opcje Cypress Configuration jako osobny temat.

Otwórz Cyprys

Wcześniej widzieliśmy, jak stworzyć projekt Cypress. Tutaj zobaczymy, jak otworzyć i uruchomić program Cypress Test. Więc zanurkujmy!

Jeśli zainstalowałeś Cypress przez npm, został on zainstalowany w katalogu ./node_modules. W związku z tym możemy otworzyć nasze Program uruchamiający testy Cypress przez przekazanie polecenia npm z korzeń naszego katalogu projektów.

Cypress możemy otworzyć na jeden z poniższych sposobów

1. wydając polecenie pełnej ścieżki

./node_modules/.bin/cypress open

2. za pomocą skrótu do npm bin

$(npm bin)/cypress open

3. za pomocą npx

Tutaj npx jest obsługiwany tylko z npm > v5.2 lub możemy go zainstalować osobno.

npx cypress open

4. za pomocą przędzy

yarn run cypress open

Teraz zobaczymy, jak otworzyć Cypress, przekazując polecenie pełnej ścieżki w naszym terminalu.

1. Musisz przekazać polecenie, o którym mowa powyżej w punkcie 1, a w terminalu widać następujące

2. Po chwili możemy zobaczyć uruchamianie programu Cypress Test i będziemy mogli zobaczyć program uruchamiający test, jak pokazano poniżej. Po uruchomieniu programu uruchamiającego testy można było zobaczyć kilka przykładowych przypadków testowych. Cypress utworzył folder testowy w katalogu głównym naszego projektu, który pomaga nam w podstawowej konfiguracji i pisaniu przypadków testowych.

Wróćmy teraz do VS Code. Po pierwsze, możesz wyświetlić niektóre struktury folderów, które zostały zapełnione. Teraz podzielmy każdą ze struktur folderów i przyjrzyjmy się im szczegółowo.

Struktura folderów w cyprysie

Jak widać, Cypress stworzył strukturę folderów w naszym edytorze kodu. Omówimy je szczegółowo.

Zmienne i aliasy

Omówimy szczegółowo zmienne i aliasy w Cypress.

Ponieważ rozumiemy i uczymy się Cypress, może być nam trudno zrozumieć Asynchroniczne API natura w Cyprysie. Ale jak zobaczymy w przyszłości wiele przykładów, będzie to bułka z masłem. Wiele nowoczesnych przeglądarek używa asynchronicznych interfejsów API, a nawet podstawowe moduły Node są pisane za pomocą kodu asynchronicznego. Co więcej, kod asynchroniczny jest obecny wszędzie w kodzie JavaScript. Dlatego przyjrzymy się wartościom zwracanym w Cypress.

Zwróć wartości w cyprysie

Wszystkie polecenia Cypress są w kolejce i biegać asynchronicznie. Dlatego my nie może przypisywać ani wchodzić w interakcje z żadnymi zwracanymi wartościami dowolnych poleceń Cypress. Zobaczymy mały przykład tego samego.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Zamknięcia

Nie możemy uzyskać dostępu do atrybutów przycisku za pomocą wspomnianego powyżej polecenia. Zamiast tego możemy wydać polecenia Cypress za pomocą .then(). Nazywamy to zamknięcia.

.następnie()

.then() pomaga uzyskać dostęp do wątku, który jest wynikiem poprzedniego polecenia. Jeśli zrozumiałeś rodzime obietnice, jest to ten sam sposób, w jaki .then() działa z Cypress. Możemy również zagnieździć różne polecenia wewnątrz .then(). Każde zagnieżdżone polecenie może uzyskać dostęp do poprzedniego polecenia w pętli. Zobaczymy to na przykładzie.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Użyliśmy Zamknięcia w powyższym przykładzie, co pozwala nam zachować w pętli odniesienie do poprzedniego polecenia.

Zmienne

Zwykle mamy tendencję do przypisywania wartości do zmiennej. Ale w Cypress ledwo używamy const, var, let. Kiedy używamy domknięć, możemy uzyskać dostęp do otrzymanych obiektów bez przypisywania ich do zmiennej.

Istnieją jednak przypadki, w których możemy zadeklarować zmienną, gdy zmiany stanu obiektu (obiekty zmienne). Na przykład, jeśli chcemy porównać plik przedmiot do poprzedniej wartości, zadeklarujemy je do zmiennej, aby porównać ją z następną wartością. Przeanalizujmy przykład.

<button>increment</button>

You clicked button <span id="num">0</span> times

Tutaj rozpiętość z liczbą 0 rośnie za każdym razem, gdy klikamy przycisk. Tak więc obiekt przycisku ma tendencję do zmiany swojego stanu za każdym razem.

Przyjrzyjmy się teraz, jak możemy przypisać to do zmiennej w naszym kodzie Cypress.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Ponieważ span zmienia swój stan za każdym razem, gdy klikamy przycisk, możemy przypisać go do zmiennej, aby porównać jego obecny i poprzedni stan. Tylko w przypadku zmiennych obiektów będziemy wymagać zmiennych, a użycie const to dobre podejście.

Pseudonimy

Wcześniej widzieliśmy, jakie są zmienne i ich ograniczenia w Cypress. Aby przezwyciężyć to ograniczenie, w grę wchodzą aliasy. Alias ​​to jeden z potężnych konstruktów w Cypress. Przyjrzymy się temu szczegółowo na przykładach.

Ogólnie rzecz biorąc, aliasy mogą pomóc w pracy jako zmienna. Istnieją jednak przypadki użycia, w których alias może nam pomóc zamiast zmiennej.

1. Ponowne użycie elementów DOM

Możemy aliasować elementy DOM, a później uzyskać do nich dostęp do ponownego użycia. Aliasy również przezwyciężają ograniczenia .następnie() dowództwo.

2. Udostępnianie kontekstu

W uproszczeniu współdzielenie kontekstu to współdzielenie obiektu między hakami i testami. Podstawowym przypadkiem użycia kontekstu udostępniania jest radzenie sobie z cy.fixture – czyli załadowanie ustalonego zestawu danych do pliku.

Jak uzyskać dostęp do aliasów?

Tutaj zobaczymy, jak uzyskać dostęp do aliasów. Będziemy używać .as() polecenie, aby przypisać element do późniejszego użycia. Wymaganym parametrem jest pseudonim. Nazwa aliasu jest używana jako odniesienie w obrębie cy.get() or cy.wait() używając @ prefiks.

Przyjrzymy się przykładowi, jak uzyskać dostęp do aliasów.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

W pierwszym wierszu otrzymujemy identyfikator user_login z DOM. Używamy wtedy .as() i deklarując nazwę użytkownika. W drugiej linii uzyskujemy dostęp do naszego aliasu za pomocą @ symbol i wykonanie rodzaj akcji.

Przykład testu cyprysowego

Zaczniemy pisać nasz pierwszy przypadek testowy z Cypressem. To bardzo proste i łatwe. Ale wcześniej przyjrzymy się konstrukcjom testu Cypress.

Podstawowe konstrukcje cyprysowe

Cypress zaadoptował składnię Mocha dla swoich przypadków testowych i wykorzystuje wszystkie opcje, które zapewnia Mocha. Poniżej znajdują się podstawowe konstrukcje Cypress, które są powszechnie używane w naszych przypadkach testowych.

• Opisać() – łączy wszystkie przypadki testowe w jeden większy test i grupuje je razem. Przyjmuje dwa parametry – opis testu i funkcję zwrotną.
• to() – zapisujemy indywidualne przypadki testowe w naszym bloku it(). Ten blok przyjmuje również dwa parametry — co robi test, a drugi parametr to funkcja zwrotna.
• po() – wykonuje się to po wszystkich testach w pliku spec.
• po każdym() – odbywa się to po każdym indywidualnym przypadku testowym.
• przed() – uruchamia się przed wszystkimi testami w pliku spec.
• przedKażdy() – wykonuje przed każdym indywidualnym przypadkiem testowym.

Jak napisać przypadek testowy?

Zanim zaczniemy, powinniśmy wiedzieć, czym jest przypadek testowy, napisać go i jakie są kroki dla podstawowego przypadku testowego.

1. Warunek wstępny – Stan aplikacji, którą zamierzamy przetestować.

2. Działania – Wykonujemy jakąś akcję na aplikacji.

3. twierdzenie – Twierdzimy lub potwierdzamy zmienione zachowanie dotyczące naszych działań.

Rozważymy LambdaGeeks aplikacja dla naszych przykładów testowych. W tej samej procedurze rozważymy automatyzację następującego scenariusza

1. Odwiedź stronę internetową https://lambdageeks.com/

2. Sprawdź, czy tytuł to Home – Lambda Geeks
Cyprys używa cy jako jego definicję typu. Będziemy dołączać cy polecenie, aby wywołać dowolne metody.
Najpierw utwórzmy nowy plik w naszym edytorze kodu.

1. Utwórz nowy folder o nazwie Demo w folderze integracji.

2. W folderze Demo utwórz nowy plik przykład.js. W tym pliku napiszemy nasz pierwszy przypadek testowy.

Teraz zacznijmy pisać nasze przypadki testowe!

1. 1. Najpierw odwiedzimy stronę za pomocą odwiedzać() metoda w Cyprysie. To polecenie spowoduje przejście do podanego przez nas adresu URL. Obejmiemy je wewnątrz bloków define() i it().

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Po otwarciu aplikacji zweryfikujemy tytuł za pomocą get() metoda w Cyprysie .get() pobiera wszystkie selektory CSS z DOM.

Dostęp do tytułu uzyskujemy za pomocą title() metody i potwierdzamy, używając biblioteki Chai z poleceniem, przekazując pierwszy parametr jako równy, w skrócie eq. Drugim parametrem jest oczekiwany ciąg znaków.

 cy.title().should('eq','Home - Lambda Geeks')

Hurra! W dwóch prostych krokach napisaliśmy nasz przypadek Cypress Test.

Oto pełny kod naszego przypadku testowego

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});

Cyprysowy przykład logowania

Zobaczymy przykłady, jak zautomatyzować stronę logowania za pomocą Cypress. Jak widzieliśmy wcześniej, napisanie przypadku testowego w Cypress jest proste. Przejdźmy teraz do ustawiania wartości w polu tekstowym i asercji.

1. Odwiedzamy stronę https://demo.applitools.com/ stosując cy.visit dowództwo.

 cy.visit('https://demo.applitools.com/')

2. Wpisz nazwę użytkownika w polu nazwy użytkownika za pomocą komendy type. Będziemy przekazywać nazwę użytkownika jako ciąg znaków w typie jako parametr.

 cy.get('#username').type('test123')

3. Podobnie piszemy to samo polecenie, aby wprowadzić hasło

 cy.get('#password').type('123')

4. Teraz klikamy przycisk logowania za pomocą click() metoda w Cyprysie.

cy.get('#log-in').click();

5. Po zalogowaniu lądujemy na stronie aplikacji. Dlatego twierdzimy, że adres URL ma /app rozszerzenie za pomocą .include() słowo kluczowe w chai. Pierwszym parametrem powinno być słowo kluczowe, które potwierdzamy, a drugim oczekiwanym wynikiem.

cy.url().should('include', '/app')

W pięciu prostych krokach napisaliśmy kompletny kod do funkcji logowania. Poniżej znajduje się pełny kod w celach informacyjnych.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Rozwiązania typowych problemów podczas uruchamiania Cypress i FAQ

Mogą wystąpić pewne typowe problemy, z którymi przyjdzie nam się zmierzyć, gdy spróbujemy uruchomić Cypress. Omówimy niektóre z typowych problemów.

1. Nie można znaleźć polecenia „Cypress” podczas polecenia Otwórz Cypress

Raz po instalacji powinniśmy przekazać polecenie open cypress z katalogu głównego katalogu projektu. Na przykład utworzyłeś projekt o nazwie CypressProject; powinieneś zdać npm init polecenie, przechodząc do folderu CypressProject. Możesz nawigować, wydając poniższe polecenie w terminalu

cd CypressProject

Gdy znajdziesz się w katalogu głównym projektu, przekaż npm init polecenie, aby pobrać zależności.

Teraz, aby otworzyć Cypress, niektórzy próbują przejść do /node_modules folder i ./bin a następnie przekaż polecenie otwarcia cyprysu. Jednak to nie działa w ten sposób. Zamiast tego daj całe polecenie open z katalogu głównego katalogu projektu, aby otworzyć Cypress.

./node_modules/.bin/cypress open

Uważaj też na ukośnik '/'. Zawsze podawaj to '/' otworzyć Cyprys.

2. Cyprys nie można załadować, ponieważ uruchamianie skryptów jest w tym przypadku wyłączone system

Podczas instalowania Cypressa w systemie Windows możesz czasami napotkać powyższy błąd. Dzieje się tak z powodu wyjątku bezpieczeństwa. Możemy rozwiązać ten błąd, przekazując poniższe polecenie w PowerShell.

Set-ExecutionPolicy RemoteSigned

Kroki ku reprodukcji:

• Otwórz PowerShell
• Uruchom to polecenie Set-ExecutionPolicy RemoteSigned
• Typ Yes
• Teraz otwórz Cyprys, przechodząc ./node_modules/.bin/cypress open. Test Runner otworzy się teraz.

FAQ

1. Jakie systemy operacyjne obsługuje Cypress?

Podpory cyprysowe Mac, Windows, Linux systemy operacyjne.

2. Czy Cypress obsługuje automatyzację w natywnych aplikacjach mobilnych?

Cypress nigdy nie będzie mógł działać w natywnej aplikacji mobilnej. Ale możemy testować aplikacje mobilne napisane w przeglądarce, takiej jak Iconic Frameworks.

3. Czy Cypress obsługuje tylko aplikacje oparte na Javascript?

Nie! Cypress może współpracować z dowolną przeglądarką internetową napisaną w językach takich jak Ruby on Rails, Node, PHP, C#. Ale będziemy pisać nasze testy w JavaScript. W przeciwnym razie Cypress może wchodzić w interakcje z dowolnym interfejsem, zapleczem, językiem i platformą.