Cypress Commands & Custom Commands: 21 ważnych faktów

Polecenia Cypress Cy

Cyprys jest potężny framework testowy która umożliwia programistom automatyzację kompleksowych testów dla Aplikacje internetowe. Jeden z kluczowe cechy Cyprysu jest jego bogaty zestaw of wbudowane polecenia, które ułatwiają interakcję z elementami strony internetowej. Oprócz tych wbudowane polecenia, Cypress umożliwia także tworzenie niestandardowych poleceń, które mogą jeszcze bardziej ulepszyć możliwości swoich testów. W w tej sekcji, zwiedzimy niektóre z nich najczęściej używany Niestandardowe polecenia Cypress.

Cyprys kliknij polecenie

Cyprys click() polecenie służy do symulacji kliknięcia przez użytkownika elementu na stronie internetowej. To polecenie jest szczególnie przydatne, gdy chcesz wchodzić w interakcję z przyciskami, łączami lub dowolny inny klikalny element. Aby użyć click() polecenie, wystarczy podać selektor identyfikujący element, który chcesz kliknąć. Następnie Cypress przeprowadzi symulację kliknięcie wydarzenie na tym elemencie.

Oto przykład użycia click() polecenie w Cypress:

javascript
cy.get('button').click();

W tym przykładzie get() polecenie służy do lokalizacji element przycisku na stronie, a następnie click() polecenie służy do symulacji kliknięcie on ten przycisk.

Polecenie podwójnego kliknięcia Cyprys

Cyprys dblclick() polecenie jest podobne do click() polecenie, ale jest ono specjalnie używane do symulacji podwójne kliknięcie wydarzenie na elemencie. Podwójne kliknięcie jest często używany do wyzwalania pewne działania lub zachowania na stronie internetowej. Aby skorzystać z dblclick() polecenie, musisz podać selektor identyfikujący element, który chcesz dwukrotnie kliknąć.

Oto przykład użycia dblclick() polecenie w Cypress:

javascript
cy.get('.element').dblclick();

W tym przykładzie get() polecenie służy do lokalizowania elementu za pomocą element klasy” na stronie, a następnie dblclick() polecenie służy do symulacji podwójne kliknięcie na tym elemencie.

Polecenie kliknięcia prawym przyciskiem myszy cyprys

Cyprys rightclick() polecenie służy do symulacji kliknij prawym przyciskiem myszy wydarzenie na elemencie. Kliknięcie prawym przyciskiem często otwiera menu kontekstowe z opcje dodatkowe lub działania dla uzywaćr do wybrania z. Aby skorzystać z rightclick() polecenie, musisz podać selektor identyfikujący element, który chcesz kliknąć prawym przyciskiem myszy.

Oto przykład użycia rightclick() polecenie w Cypress:

javascript
cy.get('#element').rightclick();

W tym przykładzie get() polecenie służy do lokalizowania elementu za pomocą element identyfikacyjny” na stronie, a następnie rightclick() polecenie służy do symulacji kliknij prawym przyciskiem myszy na tym elemencie.

Polecenie typu cyprys

Cyprys type() polecenie służy do symulowania wpisywania tekstu w polu wejściowym lub obszarze tekstowym na stronie internetowej. To polecenie jest szczególnie przydatne, gdy chcesz przetestować dane wejściowe formularza or funkcja wyszukiwania. Aby użyć type() polecenie, musisz podać selektor, który identyfikuje pole wejściowe lub obszar tekstowy, a następnie podaj tekst, który chcesz wpisać.

Oto przykład użycia type() polecenie w Cypress:

javascript
cy.get('input[name="username"]').type('JohnDoe');

W tym przykładzie get() polecenie służy do lokalizowania pola wejściowego za pomocą nazwa „nazwa użytkownika” na stronie, a następnie type() polecenie służy do symulowania pisania tekst „JohnDoe" w to pole wejściowe.

Cyprys Wyczyść Polecenie

Cyprys clear() polecenie służy do usuwania tekstu z pola wejściowego lub obszaru tekstowego na stronie internetowej. Polecenie to jest często używane w połączeniu z poleceniem type() polecenie wyczyszczenia dowolny istniejący tekst przed wpisaniem nowy tekst. Aby użyć clear() polecenie, musisz podać selektor, który identyfikuje pole wejściowe lub obszar tekstowy.

Oto przykład użycia clear() polecenie w Cypress:

javascript
cy.get('input[name="username"]').clear();

W tym przykładzie get() polecenie służy do lokalizowania pola wejściowego za pomocą nazwa „nazwa użytkownika” na stronie, a następnie clear() polecenie służy do czyszczenia dowolny istniejący tekst od to pole wejściowe.

Polecenie kontroli cyprysu

Cyprys check() polecenie służy do sprawdzania pole wyboru lub przycisk radiowy na stronie internetowej. To polecenie jest szczególnie przydatne, gdy chcesz przetestować selekcja opcji lub wyborów. Aby skorzystać z check() polecenie, musisz podać selektor, który identyfikuje rachunekpole lub przycisk opcji.

Oto przykład użycia check() polecenie w Cypress:

javascript
cy.get('input[type="checkbox"]').check();

W tym przykładzie get() polecenie służy do lokalizacji element pola wyboru na stronie, a następnie check() polecenie służy do sprawdzania to pole wyboru.

Polecenie wyboru cyprysu

Cyprys select() polecenie służy do wybierania opcja od menu rozwijane menu na stronie internetowej. To polecenie jest szczególnie przydatne, gdy chcesz przetestować selekcja opcji z menu rozwijane. Aby użyć select() polecenie, musisz podać selektor, który identyfikuje menu rozwijane, a następnie podaj wartość lub tekst opcja chcesz wybrać.

Oto przykład użycia select() polecenie w Cypress:

javascript
cy.get('select[name="country"]').select('USA');

W tym przykładzie get() polecenie służy do lokalizacji menu rozwijane menu z nazwa „kraj” na stronie, a następnie select() polecenie służy do wybierania opcja z tekstem „USA” z to menu rozwijane.

Polecenie wyzwalacza cyprysowego

Cyprys trigger() polecenie służy do wyzwalania wydarzenie na elemencie strony internetowej. To polecenie jest szczególnie przydatne, gdy chcesz przeprowadzić symulację konkretne wydarzenie, Takie jak najechanie myszką or naciśnięcie klawisza. Aby użyć trigger() polecenie, musisz podać selektor identyfikujący element, a następnie podać wydarzenie chcesz wywołać.

Oto przykład użycia trigger() polecenie w Cypress:

javascript
cy.get('.element').trigger('mouseover');

W tym przykładzie get() polecenie służy do lokalizowania elementu za pomocą element klasy” na stronie, a następnie trigger() polecenie służy do symulacji najechanie myszką wydarzenie na tym elemencie.

To są tylko kilka przykładów of niestandardowe polecenia które zapewnia Cypress. Poprzez wykorzystanie te polecenia, możesz tworzyć mocne i wyraziste testy które dokładnie symulują interakcje użytkownika z swoją aplikację internetową. Polecenia niestandardowe w Cypress pomaga usprawnić swój kod testowy i uczynić go bardziej czytelnym i łatwym w utrzymaniu. Więc idź i zwiedzaj pełny zakres of Niestandardowe polecenia Cypress aby usprawnić przebieg testów.

Cyprysowe polecenia niestandardowe

Polecenia niestandardowe w Cypress pozwalają na rozszerzenie funkcjonalność of framework testowy Cypress tworząc własne polecenia wielokrotnego użytku. Te niestandardowe polecenia może być stosowany do kapsułkowania złożone sekwencje działań, twierdzeń lub jakąkolwiek inną funkcjonalność z których często korzystasz w swoich testach. W w tej sekcji, będziemy zwiedzać różne aspekty of Niestandardowe polecenia Cypress i w jaki sposób mogą usprawnić przepływ pracy podczas testowania.

Nadrzędne polecenie niestandardowe w Cyprysie

Niestandardowe polecenie nadrzędne w Cypress jest poleceniem, które zawiera sekwencję działań lub stwierdzeń. Służy jako abstrakcja na wysokim poziomie, umożliwiając pisanie bardziej czytelne i łatwiejsze w utrzymaniu testy. Tworząc nadrzędne polecenie niestandardowe, możesz zmniejszyć duplikacja kodu i uczyń swoje testy bardziej modułowymi.

Aby utworzyć nadrzędne polecenie niestandardowe, możesz użyć metody Cypress.Commands.add() metoda dostarczona przez firmę Cypress. Ta metoda przyjmuje dwa argumenty: nazwę niestandardowego polecenia i funkcję definiującą zachowanie polecenia. W ramach funkcji możesz użyć Przede wszystkim system został opracowany Komendy cyprysowe do wykonywania działań lub formułowania twierdzeń.

Oto przykład niestandardowego polecenia nadrzędnego, które loguje użytkownika:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Dzięki temu niestandardowemu poleceniu możesz po prostu zadzwonić cy.login(username, password) w testach do wykonania login akcja. Poprawia to czytelność testów i ułatwia ich konserwację.

Dziecko niestandardowe polecenie w Cyprysie

Niestandardowe polecenie podrzędne w Cypress to polecenie rozszerzające istniejące polecenie dostarczane przez Cypress. Pozwala dodawać dodatkowa funkcjonalność lub zmodyfikować zachowanie istniejące polecenie. Może to być przydatne, gdy chcesz dostosować zachowanie polecenia do własnych potrzeb Twoje specyficzne potrzeby testowe.

Do stworzenia naszych klocków polecenie niestandardowe podrzędne, możesz użyć Cypress.Commands.overwrite() metoda dostarczona przez firmę Cypress. Ta metoda przyjmuje dwa argumenty: nazwę polecenia, które chcesz rozszerzyć, oraz funkcję definiującą zachowanie rozszerzone polecenie. W ramach funkcji możesz dzwonić oryginalne polecenie za pomocą Cypress.Commands.overwrite().

Oto przykład polecenie niestandardowe podrzędne które rozszerza cy.click() polecenie dodania opóźnienie przed kliknięciem:

javascript
Cypress.Commands.overwrite("click", (originalFn, subject, options) => {
const delay = options && options.delay ? options.delay : 500;
cy.wait(delay);
originalFn(subject);
});

Za pomocą tego niestandardowego polecenia możesz teraz przekazać dodatkowe delay opcja do cy.click() polecenie wprowadzenia opóźnienie zanim kliknięcie akcja jest wykonywana. Pozwala to symulować scenariusze, w których uzywaćr może zabrać czasami do interakcji z elementem.

Podwójne niestandardowe polecenia w cyprysie

Podwójne polecenia niestandardowe w Cypress są kombinacja rodzica i niestandardowe polecenia podrzędne. Zawierają sekwencję działań lub stwierdzeń, jednocześnie rozszerzając istniejące polecenie. To zapewnia potężny sposób tworzyć polecenia wielokrotnego użytku i konfigurowalne.

Do stworzenia naszych klocków podwójne polecenie niestandardowe, możesz użyć obu Cypress.Commands.add() i Cypress.Commands.overwrite() metod dostarczonych przez Cypress. Pozwala to zdefiniować zachowanie niestandardowego polecenia i rozszerzyć istniejące polecenie w o tym samym czasie.

Oto przykład podwójne polecenie niestandardowe który loguje użytkownika i wykonuje konkretne działanie:

javascript
Cypress.Commands.add("loginAndPerformAction", (username, password, action) => {
cy.login(username, password);
cy.get("#action-button").click();
cy.contains(action).click();
});

Za pomocą tego niestandardowego polecenia możesz zalogować użytkownika i wykonać konkretne działanie in jedno polecenie. Poprawia to czytelność i możliwość ponownego użycia testów.

Nadpisywanie istniejących poleceń cyprysowych

W Cypress możesz także nadpisywać Przede wszystkim system został opracowany Komendy cyprysowe modyfikować ich zachowanie. Może to być przydatne, gdy chcesz dostosować zachowanie polecenia do własnych potrzeb Twoje specyficzne potrzeby testowe.

Aby nadpisać istniejące polecenie Cypress, możesz użyć Cypress.Commands.overwrite() metoda dostarczona przez firmę Cypress. Ta metoda przyjmuje dwa argumenty: nazwę polecenia, które chcesz zastąpić, oraz funkcję definiującą zachowanie nadpisane polecenie. W ramach funkcji możesz dzwonić oryginalne polecenie za pomocą Cypress.Commands.overwrite().

Importowanie niestandardowych poleceń Cypress

Po zdefiniowaniu poleceń niestandardowych możesz je zaimportować do pliki testowe Cypress używać ich w swoich testach. Cyprys zapewnia prosty sposób aby zaimportować niestandardowe polecenia za pomocą pliku support teczka.

Aby zaimportować niestandardowe polecenia, utwórz plik o imieniu commands.js support folder z Twój projekt Cypress, w ten plik, możesz zaimportować własne polecenia za pomocą pliku import oświadczenie i zarejestruj je w Cypress za pomocą Cypress.Commands.add() or Cypress.Commands.overwrite() Metody.

Cypress niestandardowe polecenia IntelliSense

Cyprys zapewnia Obsługa IntelliSense dla poleceń niestandardowych, co ułatwia pisanie testów za pomocą poleceń niestandardowych. IntelliSense zapewnia uzupełnianie kodu oraz dokumentację niestandardowych poleceń, co pomaga w efektywniejszym pisaniu testów.

Aby włączyć technologię IntelliSense dla poleceń niestandardowych, należy zainstalować @types/cypress pakiet w Twój projekt. Ten pakiet zapewnia Definicje TypeScript dla Cypress, w tym obsługa niestandardowych poleceń.

Po zainstalowaniu @types/cypress pakiet, możesz zacząć używać technologii IntelliSense do obsługi poleceń niestandardowych w pliki testowe Cypress. Funkcja IntelliSense będzie wyświetlać sugestie i dokumentację dotyczącą poleceń niestandardowych podczas pisania, co ułatwi pisanie testów.

Podsumowując, niestandardowe polecenia w Cypress są potężna funkcja co pozwala na przedłużenie funkcjonalność of framework testowy Cypress. Umożliwiają tworzenie polecenia wielokrotnego użytku i konfigurowalne, poprawiając czytelność, łatwość konserwacji i wydajność testów. Niezależnie od tego, czy chcesz zawrzeć sekwencję działań, rozszerzyć istniejące polecenie, czy zastąpić istniejące polecenie, polecenia niestandardowe zapewniają elastyczny i intuicyjny sposób aby usprawnić przebieg testów.

Przykłady i przypadki użycia

Przykład funkcji logowania

Jednym z najczęstsze przypadki użycia dla niestandardowych poleceń w Cypress jest wdrażany funkcję logowania. Dzięki temu można łatwo ponownie wykorzystać logika logowania w poprzek wiele testów, Co sprawia, swój zestaw testów bardziej wydajne i łatwiejsze w utrzymaniu.

Powiedzmy, że masz aplikacja internetowa z stronę logowania To wymaga nazwa użytkownika i hasło. Zamiast powtarzać kroki logowania in każdy test, możesz utworzyć niestandardowe polecenie do obsługi proces logowania.

Oto przykład zdefiniowania niestandardowego polecenia logowania:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Dzięki temu niestandardowemu poleceniu możesz teraz łatwo zalogować się, po prostu dzwoniąc cy.login(username, password) w Twoich testach. Poprawia to czytelność testów i ogranicza powielanie kodu.

Ponów przykład polecenia

Kolejny przydatny przykład niestandardowych poleceń w Cypress wdraża mechanizm ponawiania prób dla chybione testy. Błędne testy to testy, które czasami kończą się niepowodzeniem z powodu sporadyczne problemy, Takie jak opóźnienia w sieci or warunki wyścigu.

Cypress zapewnia wbudowaną funkcję retry polecenie umożliwiające ponowienie próby konkretne polecenie lub twierdzenie wiele razy, aż przejdzie lub osiągnie maksymalna liczba ponownych prób.

Oto przykład definiowania niestandardowego polecenia, które ponawia próbę konkretne polecenie:

javascript
Cypress.Commands.add("retryCommand", { prevSubject: true }, (subject) => {
return cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

W tym przykładzie polecenie niestandardowe retryCommand trwa temat as argument i ponawia wykonanie polecenia should("be.visible") on ten temat dla maksymalnie of 5 sekund.

Następnie możesz użyć tego niestandardowego polecenia w swoich testach w następujący sposób:

javascript
cy.get(".element").retryCommand();

To niestandardowe polecenie pomaga sobie poradzić chybione testy automatycznie ponawiając wykonanie polecenia, aż do jego zakończenia lub upłynięcia limitu czasu. To się polepsza stabilność testów i zmniejsza się fałszywe alarmy.

Przykład obietnicy i asynchronizacji/oczekiwania

Cypress umożliwia także pracę z obietnicami i składnią asynchroniczną/await, co ułatwia obsługę operacje asynchroniczne w Twoich testach. Możesz tworzyć niestandardowe polecenia, które wykorzystują obietnice lub asynchronizację/oczekiwanie na wykonanie złożone operacje lub poczekaj szczególne warunki.

Oto przykład zdefiniowania niestandardowego polecenia oczekującego na widoczność elementu przy użyciu async/await:

javascript
Cypress.Commands.add("waitForElement", { prevSubject: true }, async (subject) => {
await cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

W tym przykładzie polecenie niestandardowe waitForElement trwa temat as argument i czeka, aż element będzie widoczny za pomocą should("be.visible") twierdzenie.

Następnie możesz użyć tego niestandardowego polecenia w swoich testach w następujący sposób:

javascript
cy.get(".element").waitForElement();

To niestandardowe polecenie upraszcza obsługa of operacje asynchroniczne w testach, czyniąc je bardziej czytelnymi i łatwymi w utrzymaniu.

Te przykłady wykazać moc i elastyczność niestandardowych poleceń w Cypress. Tworząc niestandardowe polecenia wielokrotnego użytku, możesz poprawić wydajność, czytelność i stabilność swój zestaw testów.
Wnioski

Podsumowując Komendy cyprysowe i Niestandardowe polecenia Cypress są potężne narzędzia co może znacznie wzbogacić automatyzację testów starania. Wbudowany Komendy cyprysowe zapewniać szeroki zasięg funkcjonalności, z którymi można wchodzić w interakcję Twoje zgłoszenie, podczas niestandardowe polecenia pozwalają tworzyć polecenia wielokrotnego użytku i wyspecjalizowane dostosowane do Twoje specyficzne potrzeby. Poprzez wykorzystanie te polecenia, Możesz pisać czyste, zwięzłe i łatwe w utrzymaniu testy które są łatwe do zrozumienia i aktualizacji. Czy jesteś Początkujący or doświadczony tester, zawierające Komendy cyprysowe i niestandardowe polecenia w przepływie pracy testowej niewątpliwie usprawnią Twój proces testowania i pomogę Ci dostarczyć wysokiej jakości oprogramowanie. Więc po co czekać? Zacznij odkrywać świat of Komendy cyprysowe i niestandardowe polecenia już dziś i weź automatyzację testów do Następny poziom!

Często Zadawane Pytania

Jak zainstalować Cypressa?

Aby zainstalować Cypress, możesz wykonać następujące czynności te kroki:

1. Otwarte swojego terminala or wiersz polecenia.
2. Nawigować do Twój projekt katalogiem.
3. Uruchom polecenie npm install cypress aby zainstalować Cypress lokalnie.

Jak mogę zaktualizować Cypress do najnowszej wersji?

Aby zaktualizować Cypress do Najnowsza wersja, Można użyć Poniższa komenda:

npm update cypress

Spowoduje to aktualizację Cypress do najnowsza dostępna wersja.

Jak mogę używać niestandardowych poleceń w Cypress?

Aby używać niestandardowych poleceń w Cypress, musisz je zdefiniować w Twój projektplik pomocniczy. Oto jak możesz to zrobić:

1. Stwórz nowy plik nazywa commands.js cypress/support katalogiem.
2. Zdefiniuj własne polecenia za pomocą Cypress.Commands.add() Metoda.
3. Zapisz plik i uruchom ponownie Twój tester Cypress.

Teraz możesz używać niestandardowych poleceń podczas testów Cypress.

Dlaczego moje niestandardowe polecenia nie działają w Cypress?

Jeśli Twoje niestandardowe polecenia nie działają w Cypress, sprawdź to Poniższa:

1. Upewnij się, że poprawnie zdefiniowałeś polecenia niestandardowe w plik pomocniczy.
2. Zweryfikuj to plik pomocniczy jest poprawnie uwzględniony konfiguracja Cypressa.
3. Sprawdź jakiekolwiek błędy składniowe lub literówki niestandardowe definicje poleceń.

Jak mogę ponowić próbę wykonania niestandardowego polecenia w Cypress?

Aby ponowić próbę wykonania niestandardowego polecenia w Cypress, możesz użyć metody .retry() metoda. Oto przykład:

javascript
cy.customCommand().retry(3);

Spowoduje to ponowienie polecenia niestandardowego maksymalnie 3 razy, jeśli się nie powiedzie.

Jak mogę używać niestandardowych potwierdzeń w Cypress?

Aby korzystać z niestandardowe twierdzenia w Cypress możesz je zdefiniować za pomocą chai biblioteka twierdzeń. Oto przykład:

javascript
chai.Assertion.addMethod('customAssertion', function(expected) {
// Assertion logic goes here
});

Po zdefiniowaniu możesz użyć swojego niestandardowe twierdzenia w testach Cypress.

Jak mogę używać niestandardowych selektorów w Cypress?

Aby korzystać z niestandardowe selektory w Cypress możesz je zdefiniować za pomocą cy.get() metoda. Oto przykład:

javascript
Cypress.Commands.add('customSelector', (selector) => {
return cy.get(`[data-custom="${selector}"]`);
});

Po zdefiniowaniu możesz użyć swojego niestandardowe selektory w testach Cypress.

Jak mogę debugować testy Cypress?

Aby debugować testy Cypress, możesz użyć cy.debug() Komenda. Oto przykład:

javascript
cy.customCommand().debug();

To spowoduje pauzę wykonanie testu i otwarty konsola debugowania programu uruchamiającego test Cypress.

Jak mogę poprawić wydajność moich testów Cypress?

Ulepszyć wydajność swoich testów Cypress, możesz śledzić te najlepsze praktyki:

1. Zastosowanie cy.wait() rozsądnie unikać niepotrzebne opóźnienia.
2. Zminimalizować uzywać of cy.get() I użyć niestandardowe selektory kiedykolwiek możliwe.
3. Użyj cy.intercept() polecenie stubowania lub kpiny żądania sieciowe.
4. Uruchom testy w tryb bezgłowy (--headless) Dla szybsza realizacja.

Gdzie mogę znaleźć dokumentację dla Cypress?

Można znaleźć oficjalna dokumentacja dla Cyprysu o godz https://docs.cypress.io. Dokumentacja zapewnia dokładna informacja jak korzystać z Cypress, w tym przewodniki, Referencje APIi przykłady.