Spis treści

• Co to są polecenia cyprysowe?
• Polecenia interakcji interfejsu użytkownika dostarczane przez Cypress
• Polecenie kliknięcia prawym przyciskiem myszy cyprys
• Polecenie podwójnego kliknięcia Cyprys
• Cyprys kliknij polecenie
• Polecenie wyzwalacza cyprysowego
• Polecenie typu cyprys
• Polecenie wyboru cyprysu
• Polecenie kontroli cyprysu
• Cyprys Wyczyść Polecenie
• Czy polecenia Cypress są asynchroniczne?
• Cyprysowe polecenia niestandardowe
• Łączenie poleceń asercji w Cypress
• Nadpisywanie istniejących poleceń Cypress
• Cyprysowe polecenia łańcuchowe
• Nadrzędne polecenie niestandardowe w Cyprysie
• Dziecko niestandardowe polecenie w Cyprysie
• Podwójne niestandardowe polecenie w cyprysie
• Cypress niestandardowe polecenia z przykładem
• Polecenia importu cyprysów
• Cypress niestandardowe polecenie IntelliSense

Co to są polecenia cyprysowe?

Cypress zapewnia nam API i metody interakcji z interfejsem użytkownika aplikacji. Są one znane jako polecenia Cypress i pomagają w interakcji z aplikacją internetową. Wszystkie dostępne polecenia mają wbudowane metody i będziemy je wywoływać tylko w naszych przypadkach testowych. Polecenia Cypress będą symulować działanie podobne do działania użytkownika próbującego wykonać operacje na aplikacji.

Polecenia interakcji interfejsu użytkownika dostarczane przez Cypress

Cypress udostępnia różne polecenia, które współdziałają z interfejsem użytkownika. Szczegółowo przyjrzymy się liście wszystkich poleceń.

• .Kliknij()
• .dblklik()
• .kliknij prawym przyciskiem()
• .rodzaj()
• .jasne()
• .sprawdzać()
• odznacz()
• .Wybierz()
• .cyngiel()

Cyprys kliknij polecenie

.Kliknij() – To polecenie ma: kliknij dowolny element w DOM.

Poniżej przedstawiono składnię polecenia kliknij

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Jak widać powyżej, kliknięcie akceptuje parametry takie jak opcje, stanowisko, i współrzędne.

Opcje

Możliwe opcje, które można przekazać do kliknięcia, to

Pozycje

Różne typy pozycji, które można przekazać do .click(), to

• środek (domyślnym)
• lewo
• prawo
• Top
• u góry z lewej
• w prawym górnym rogu
• dolny
• na dole po lewej
• prawy dolny

Przykład

cy.get('btn').click() //kliknięcie przycisku cy.get('btn').click({ force: true }) //kliknięcie przycisku poprzez przekazanie opcji 'force' jako true cy. get('btn').click('bottomRight') // kliknięcie przycisku w prawym dolnym rogu cy.get('btn').click(10, 70, { force: true }) // kliknięcie przycisku z wartość pozycji i siła prawda

Polecenie podwójnego kliknięcia Cyprys

Podwójne kliknięcie można osiągnąć za pomocą dblclick() składnia w cyprysie.

Składnia

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Opcje

.dblclick() akceptuje wszystkie opcje, które są akceptowane przez .click(). Możesz znaleźć opcje w powyższej sekcji.

Pozycje

Wszystkie możliwe pozycje, które są określone w .click() są również dostępne dla dblclick(). Lista stanowisk znajduje się w powyższej sekcji.

Przykład

cy.get('button').dblclick() // Podwójne kliknięcie przycisku cy.focused().dblclick() // Podwójne kliknięcie na elemencie z fokusem cy.contains('Home').dblclick() // Podwójne kliknij na pierwszy element zawierający 'Home' cy.get('button').dblclick('top') // Podwójne kliknięcie na przycisk na górnej pozycji cy.get('button').dblclick(30, 10) // Kliknij dwukrotnie na współrzędne 30 i 10

Polecenie kliknięcia prawym przyciskiem myszy cyprys

To polecenie Cypress, klika prawym przyciskiem myszy element DOM .rightclick() polecenie nie otworzy menu kontekstowych przeglądarki.rightclick() służy do testowania obsługi zdarzeń związanych z prawym przyciskiem myszy w aplikacji, takich jak contextmenu.

Składnia

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Opcje

Jak widzieliśmy powyżej, wszystkie opcje, które są akceptowane przez .click() polecenie można skonfigurować za pomocą .rightclick() polecenie też.

Pozycje

Wszystkie możliwe pozycje, które można przekazać do .rightclick() jest taki sam jak .click() wspomniano powyżej.

Przykład

cy.get('.welcome').rightclick() // Kliknij prawym przyciskiem na .welcome cy.focused().rightclick() // Kliknij prawym przyciskiem myszy na elemencie z fokusem cy.contains('January').rightclick() / / Kliknij prawym przyciskiem myszy pierwszy element zawierający 'Styczeń' cy.get('button').dblclick('topRight') // Kliknij dwukrotnie przycisk w prawym górnym rogu cy.get('button').dblclick(80, 20 ) // Kliknij dwukrotnie na współrzędne 80 i 20

Polecenie typu cyprys

.type() polecenie wprowadza wartość do elementu DOM.

Składnia

.type(text)
.type(text, options)

Argumenty

.type() akceptuje ciąg jako argument. Wartości przekazane do .type() może zawierać dowolną ze specjalnych sekwencji znaków podanych poniżej.

Opcje

Możemy przekazać obiekty jako opcje, aby zmodyfikować domyślne zachowanie .type()

Przykład

Zobaczmy przykłady dla .type() komenda

cy.get('textarea').type('Hej tam') // wprowadź wartość w polu tekstowym cy.get('body').type('{shift}') //włącza klawisz Shift cy.get ('body').type('{rightarrow}') //typ zdarzenia strzałka w prawo 

Cyprys Wyczyść Polecenie

Polecenie Wyczyść wyczyści wartości w obszarze wprowadzania lub w polu tekstowym.

Składnia

Składnia polecenia clear jest następująca.

.clear()
.clear(options)

Opcje

Przyjrzymy się opcjom, które można przekazać do .clear() dowództwo.

Przykład

Przyjrzyjmy się przykładom, aby uzyskać jasne polecenie

cy.get('[type="text"]').clear() // Wyczyść wprowadzony tekst typu cy.get('textarea').type('Welcome!').clear() // Wyczyść obszar tekstowy cy .focused().clear() // Wyczyść skoncentrowane dane wejściowe/obszar tekstowy

Polecenie kontroli cyprysu

Polecenie check sprawdzi lub w prostszych słowach zaznaczy pola wyboru lub przyciski radiowe. Możesz odznaczyć pola wyboru lub przyciski radiowe, używając .uncheck() dowództwo.

Składnia

Zrozumiemy składnię polecenia check w Cypress.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Opcje

Możliwe opcje, które można przekazać w celu zaznaczenia/odznaczenia poleceń, to opcje takie same jak w przypadku polecenia czyszczenia wymienionego powyżej

Przykład

Przyjrzymy się przykładowi, w jaki sposób możemy używać poleceń check i uncheck.

cy.get('[type="checkbox"]').check() // Sprawdź element pola wyboru cy.get('[type="radio"]').first().check() // Sprawdź pierwsze radio element cy.get('[type="radio"]').check('Male') //Sprawdź element radiowy, który ma Male cy.get('[type="checkbox"]').uncheck() / /Odznacz element pola wyboru cy.get('[type="radio"]').uncheck() //Odznacz pierwszy element radiowy cy.get('[type="checkbox"]').uncheck('Śniadanie') // Odznacz element śniadaniowy

Polecenie wyboru cyprysu

Polecenie wybierz Cypress pozwala wybrać elementy w obrębie a etykietka.

Składnia

Poniżej znajduje się składnia polecenia select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Opcje

Możemy przekazać opcje, aby zmodyfikować domyślne zachowanie polecenia select.

Przykład

Przyjrzyjmy się przykładom polecenia select

cy.get('select').select('butterfly') // Wybierz opcję 'butterfly' cy.get('select').select(0) // wybiera element z indeksem 0 cy.get('select ').select(['papuga', 'paw']) //wybiera opcję papuga i paw

Polecenie wyzwalacza cyprysowego

Polecenie Trigger pomaga wyzwolić dowolne zdarzenie na elemencie.

Składnia

Przyjrzymy się składni dostępu do polecenia wyzwalacza

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Option

Polecenie wyzwalania akceptuje wszystkie opcje, które są wymienione dla .clear() Komenda. Dodatkowo istnieje kilka opcji, które możemy skonfigurować, które są wymienione poniżej.

Przykład

Pozwól nam na różne sposoby wykorzystania .trigger() w kodzie.

cy.get('a').trigger('mouseover') // Wyzwolenie zdarzenia najechania myszą na link cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown wyzwolony w button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup wywoływane na pozycji topRight z ustawieniem bubble jako false

Czy polecenia Cypress są asynchroniczne?

Wszystkie polecenia Cypress są asynchroniczne. Są one ustawiane w kolejce do wykonania w późniejszym czasie i nie będą czekać na zakończenie poleceń. Polecenia Cypress nie robią nic w momencie ich wywołania, zamiast tego zachowują je na później do wykonania. Możesz zrozumieć asynchroniczne zachowanie Cypress tutaj

Cyprysowe polecenia łańcuchowe

W Cypress możemy użyć serii poleceń do interakcji z elementami w DOM. Konieczne jest zrozumienie, jak łączenie poleceń działa wewnętrznie. Jeśli łączymy polecenia w określonej linii, Cypress obsłuży obietnicę opartą na łańcuchu poleceń i wyda polecenie na podstawie tematu następnego polecenia, aż do zakończenia łańcucha poleceń lub wystąpienia błędu.

Cypress pozwala nam kliknąć element lub wpisać elementy za pomocą .click() or .type() polecenia, pobierając elementy za pomocą cy.get() or cy.contains(). Zobaczmy prosty przykład łączenia poleceń

cy.get('textarea').type('Jak się masz?')

W powyższym przykładzie cy.get() to jedno polecenie Cypress i .type() to kolejna komenda, w której łączymy .type() polecenie na cy.get() polecenie, mówiąc mu, aby pisał do tematu, który jest wynikiem zapytania cy.get() element. Podobnie możemy połączyć wszystkie polecenia, które omówiliśmy powyżej.

Łączenie poleceń asercji w cyprysie

Podobnie jak w przypadku łączenia wielu poleceń za pomocą Cypressa, możemy również łączyć asercje z poleceniami. Asercje to polecenia, które pozwalają opisać spodziewany stan lub zachowanie aplikacji. Cypress poczeka, aż elementy osiągną oczekiwany stan, a test zakończy się niepowodzeniem, jeśli asercje nie przejdą. Zobaczymy, jak możemy użyć poleceń łączenia w asercję elementu.

cy.get('button').should('be.disabled') //oczekuj, czy przycisk powinien być wyłączony cy.get('form').should('have.class', 'form-vertical') / /oczekuj, czy formularz powinien mieć klasę 'form-vertical' cy.get('input').should('not.have.value', 'Name') // sprawdź, czy dane wejściowe nie powinny mieć wartości 'Name '

Jak wspomniano powyżej, używamy cy.get() dowodzenie i łączenie go z .should() polecenie asercji, aby oczekiwać zachowania na podstawie wyniku. W ten sposób możemy użyć łańcucha polecenia asercji w Cypress.

Cyprysowe polecenia niestandardowe

Cypress dostarcza nam API do tworzenia poleceń w oparciu o nasze wymagania. Niestandardowe polecenie Cypress jest podobne do domyślnych poleceń, które istnieją wcześniej, z wyjątkiem tego, że jest określony przez użytkownika. Dzięki niestandardowym poleceniom możemy bawić się poleceniami i łączyć je w zależności od naszego przypadku użycia. Niestandardowe polecenia Cypress są przydatne w naszym przepływie pracy, jeśli potrzebujesz ich wielokrotnie w testach.

Zobaczmy składnię tworzenia nowego polecenia niestandardowego w Cypress.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

gdzie argumenty są następujące

Nazwa – Nazwa polecenia w ciągu, który chcemy dodać lub nadpisać

oddzwonienieFn – Ta funkcja pobiera argument przekazany do polecenia

Opcje – Przekaż dowolny obiekt opcji, aby zdefiniować zachowanie polecenia

Note : opcje są obsługiwane tylko dla poleceń dodawania i nie obsługują poleceń nadpisywania

Opcje, które prevSubject akceptuje są następujące

• false – zignoruj ​​poprzednie tematy (polecenie rodzica)
• true – zaakceptuj poprzednie tematy (polecenie potomne)
• optional – podaj, czy chcesz rozpocząć nowy łańcuch, czy użyć istniejącego łańcucha (podwójna komenda)

Nadrzędne polecenie niestandardowe w Cyprysie

Zobaczymy, jak dodać nadrzędne polecenie niestandardowe w Cypress. Polecenie nadrzędne zawsze rozpocznie nowy ciąg poleceń, nawet jeśli połączyłeś poprzednie polecenie. Poprzednio połączone polecenie zostanie zignorowane, a nowe polecenie będzie zawsze połączone. Niektóre z poleceń nadrzędnych to cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Przykład

Zobaczymy przykład, jak napisać niestandardowe polecenie nadrzędne w Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label.click() }) //kliknięcie linku "Kup teraz" cy.clickLink('Kup Ale już')

W powyższym przykładzie „kliknij link' to nazwa naszego niestandardowego polecenia. Będzie szukać etykieta. W wierszu 2 polecenie otrzymuje 'a', wyszukaj link zawierający etykietę i kliknij element. cy.clickLink() wykona akcję w pliku testowym i kliknie „Kup teraz”Link.

Dziecko niestandardowe polecenie w Cyprysie

Polecenia niestandardowe w Cypress są powiązane z poleceniem nadrzędnym lub innym poleceniem potomnym. Temat z poprzedniego polecenia zostanie przekazany do funkcji zwrotnej.

Niektóre z poleceń Cypress, które można łączyć jako polecenia potomne, to: .click(), .trigger(), .should(), .find(), .as()

Przykład

Przyjrzymy się przykładowi, jak połączyć niestandardowe polecenie podrzędne

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // zawiń istniejący temat i zrób coś z nim cy.wrap(subject).click({force:true }) }) //dostęp do forceClick w pliku testowym cy.get("[data-test='panel-VALUES']").forceClick();

W powyższym przykładzie nazywamy nasze niestandardowe polecenie jako „WymuśKliknięcie„. Przekazujemy argument prevSubject do elementu i zawijamy istniejący podmiot. Z cy.wrap(), wymuszamy kliknięcie w temat. Następnie w pliku testowym uzyskujemy dostęp do niestandardowego polecenia „WymuśKliknięcie' na cy.get() dowództwo.

Podwójne niestandardowe polecenia w cyprysie

Podwójne polecenia niestandardowe są hybrydą między poleceniem nadrzędnym i potomnym. Możesz rozpocząć nowy ciąg poleceń lub odłączyć istniejące polecenie. Podwójne polecenia są pomocne, jeśli chcemy, aby nasze polecenie działało na różne sposoby z istniejącym podmiotem lub bez niego.

Niektóre z poleceń, których można użyć do poleceń podwójnych, to: cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Przykład

Zobaczmy przykład, jak używać podwójnych poleceń niestandardowych

Cypress.Commands.add('getButton', { prevSubject: 'opcjonalne' }, (temat) => { if (temat) { cy.get(subject).get('btn').its('button'); } else { cy.get('btn').its('button'); } })

W niektórych przypadkach będziemy musieli pobrać przycisk tekstu za pomocą getButton, który zdobędzie cały przycisk elementu. Teraz możemy użyć getButton, aby połączyć element z rodzicem lub połączyć element potomny, gdzie może wywołać elementy rodzica.

Ponieważ prevSubject jest opcjonalne, możemy przekazać temat jako argument lub wywołać polecenie bez tematu w pliku testowym, jak poniżej

cy.getButton() // bez tematu cy.get('#loginBtn').getButton() // z tematem

Nadpisywanie istniejących poleceń cyprysowych

Możemy nadpisać już istniejące polecenia Cypress i zmodyfikować zachowanie, aby uniknąć tworzenia kolejnego polecenia, które na końcu będzie próbowało użyć oryginalnego polecenia.

Niektóre z oryginalnych poleceń Cypress, które można zastąpić: cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Przykład

Zobaczmy przykład, jak możemy nadpisać istniejący Cypress dowództwo.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // określ, czy argument filtru został przekazany if (typeof text === 'object') { options = tekst tekst = filtr filtr = niezdefiniowany } options.matchCase = false return originalFn(temat, filtr, tekst, opcje) } )

Jak widzieliśmy powyżej, używamy Cypress.Command.overwrite aby zmodyfikować istniejące polecenie Cypress. Nazywamy nasze niestandardowe polecenie jako contains i przekazujemy argumenty, aby określić, czy argument filtru przeszedł.

Polecenia importu cyprysów

W tej sekcji zrozumiemy, jak importować polecenia Cypress.

Musimy utworzyć nasze niestandardowe polecenia Cypress w cyprys/support/commands.js plik. Dodamy niestandardowe polecenia w pliku command.js i zaimportujemy do naszego pliku przypadku testowego, aby go użyć.

Cypress niestandardowe polecenia z przykładem

Zrozumiemy, jak utworzyć niestandardowe polecenie i użyć go w naszym pliku spec z przykładem w czasie rzeczywistym.

Jak widzieliśmy powyżej, musimy dodać nowe niestandardowe polecenia pod komendy.js plik. W tym pliku dodajmy niestandardowe polecenie dla funkcji logowania

Cypress.Commands.add("login", (nazwa użytkownika, hasło) => { //dodanie nowego polecenia o nazwie login cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(nazwa użytkownika); cy.get('[id=Hasło]').clear(); cy.get('[id=Hasło]').type(hasło); cy.get( '[typ=prześlij]').click(); });

W powyższym kodzie nazywamy nasze niestandardowe polecenie jako Zaloguj Się. Wewnątrz niestandardowego polecenia dodaliśmy kroki czyszczenia pola nazwy użytkownika i wprowadzania wartości w polu tekstowym. Podobnie czyścimy pole i dodajemy hasło w polu hasła. Później klikamy przycisk Prześlij. Jest to proste niestandardowe polecenie, które akceptuje dwa argumenty: nazwę użytkownika i hasło. Przekażemy wartość nazwy użytkownika i hasła w naszym pliku specyfikacji.

Teraz stwórzmy plik specyfikacji o nazwie niestandardoweCommand.spec.js w folderze integracji. Nasz plik specyfikacji będzie zawierał następujący kod

opisz("Przykład poleceń niestandardowych", () => { it("należy zalogować się przy użyciu poleceń niestandardowych", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .Zaloguj sie("[email chroniony]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Jak widzieliśmy powyżej, uzyskujemy dostęp do naszego niestandardowego polecenia jako cy.login() , gdzie przekazujemy wartości nazwy użytkownika i hasła.

Cypress niestandardowe polecenia IntelliSense

IntelliSense udostępnia inteligentne sugestie dotyczące kodu w środowisku IDE lub edytorze kodu bezpośrednio podczas pisania testów. Pomaga, wyświetlając wyskakujące okienko, które wyświetla definicję polecenia, link do strony dokumentacji i przykłady kodu. Jeśli używamy dowolnego nowoczesnego edytora kodu, takiego jak Visual Studio Code lub IntellJ, IntelliSense będzie bardzo przydatny.

IntelliSense używa Typescript do zrozumienia i wyświetlania składni. Jeśli piszemy niestandardowe polecenia i dostarczamy definicje TypeScript dla poleceń niestandardowych, możemy użyć potrójnych ukośników, aby wyświetlić IntelliSense, nawet jeśli nasz projekt używa tylko JavaScript.

Aby skonfigurować IntelliSense, musimy opisać kod w cyprys/wsparcie/indeks.d.ts plik.

// wpisz definicje dla obiektu Cypress "cy" /// zadeklaruj przestrzeń nazw Cypress { interfejs Chainable { /** * Zaloguj się z danymi uwierzytelniającymi * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }

Teraz powinniśmy poinformować nasze pliki specyfikacji, że w pliku . znajdują się definicje maszynopisu indeks.d.ts plik. Tak więc na początku naszego pliku specyfikacji dodaj poniższy kod, aby umożliwić IntelliSense dostarczanie nam sugestii.

// wpisz definicje poleceń niestandardowych, takich jak "login" // zmieni się na "cypress/support/index.d.ts" //

Jak widzieliśmy powyżej, IntelliSense zapewnia nam argumentację, którą podaliśmy w naszym pliku command.js i pomaga w automatycznym uzupełnianiu.

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.