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


Spis treści

Cyprys, polecenie

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ć()
  • .uncheck()
  • .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

opcjaDomyślnieOpis
klawisz AltfałszywyWłącz klawisz alternatywny (klawisz opcji na Macu), jako optionKey
ctrlKeyfałszywyWłącz kluczyk sterujący. Znany również jako: controlKey.
metakluczfałszywyUruchamia klawisz meta (klawisz Windows w Windows lub klawisz Command w Mac). Także: commandKeycmdKey.
klawisz ShiftfałszywyUruchamia klawisz Shift
logprawdziwyWyświetla logi w wierszu poleceń
siłafałszywyTa opcja wymusza akcję i wyłącza oczekiwanie na wykonalność
wielokrotnośćfałszywyKolejno klikaj wiele elementów
TimeoutdefaultCommandTimeoutCzas na .click() czekaj, zanim upłynie limit czasu
czekaj na animacjeczekaj na animacjeOpcja oczekiwania na zakończenie animacji elementów przed wykonaniem polecenia
Opcje w Click

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.

SekwencjaUwagi
{{}Wchodzi dosłowny { klucz
{backspace}Usuwa znak od prawej do lewej strony kursora
{del}Usuwa znak od lewej do prawej strony kursora
{downarrow}Przesuwa kursor w dół
{end}Przesuwa kursor na koniec linii
{enter}Wprowadza klawisz Enter
{esc}Wpisuje klawisz Escape
{home}Przesuwa kursor na początek linii
{insert}Umieszcza znak na prawo od kursora
{leftarrow}Przesuwa kursor w lewo
{movetoend}Przesuwa kursor na koniec elementu nadającego się do pisania
{movetostart}Przesuwa kursor na początek elementu nadającego się do pisania
{pagedown}Przewija w dół
{pageup}Przewija w górę
{rightarrow}Przesuwa kursor w prawo
{selectall}Zaznacza cały tekst, tworząc a selection range
{uparrow}Przesuwa kursor w górę

Opcje

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

opcjaDomyślnieOpis
delay10Opcja opóźnienia w czasie po każdym naciśnięciu klawisza
forcefalseWymusza wykonanie akcji i wyłącza czekam na wykonalność
logtrueWyświetla dzienniki w Dziennik poleceń
parseSpecialCharSequencestrueParsuj znaki specjalne dla ciągów otoczonych przez {}, Takie jak {esc}. Możesz ustawić opcję na false aby wprowadzić dosłowne znaki.
releasetrueTa opcja pozwala na włączenie modyfikatora pomiędzy poleceniami
scrollBehaviorscrollBehaviorPozycja rzutni do miejsca, w którym element ma być przewinięty przed wykonaniem dowolnego polecenia
timeoutdefaultCommandTimeoutCzas na czekanie .type() polecenie do rozwiązania przed upływem limitu czasu
waitForAnimationswaitForAnimationsPowiedzieć, czy czekać na elementy do zakończ animację przed wykonaniem jakiegokolwiek polecenia.
Opcje dla polecenia typu

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.

opcjaDomyślnieOpis
forcefalseWymusza to działanie i wyłącza oczekiwanie na wystąpienie możliwości działania
logtruePokazuje polecenie w dzienniku poleceń
scrollBehaviorscrollBehaviorPozycja rzutni, do której element musi zostać przewinięty przed wykonaniem polecenia
timeoutdefaultCommandTimeoutTa opcja to czas oczekiwania .clear() rozwiązać przed upływem czasu
waitForAnimationswaitForAnimationsSpowoduje to oczekiwanie na zakończenie animacji elementów przed wykonaniem polecenia.
Opcje jasnego polecenia

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.

opcjaDomyślnieOpis
forcefalseTa opcja wymusza wykonanie akcji i wyłącza oczekiwanie na wykonalność
logtrueWyświetla dzienniki w dzienniku poleceń i domyślnie jest ustawione jako prawda
timeoutdefaultCommandTimeoutTa opcja to czas oczekiwania .select() rozwiązać przed upływem czasu
Opcje wyboru polecenia

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)

opcja

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.

opcjaDomyślnieOpis
bubblestrueCzy wydarzenie powinno bąbelkować?
cancelabletrueCzy wydarzenie można odwołać
eventConstructorEventKonstruktor do tworzenia obiektu zdarzenia (np. MouseEvent, keyboardEvent)
Opcja polecenia wyzwalacza

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ć

callbackFn – Ta funkcja pobiera argument przekazany do polecenia

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

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

opcjaAkceptujeDomyślnieOpis
prevSubjectBooleanString or Arrayfalsedefiniuje sposób postępowania z wcześniej uzyskanym tematem.

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.Commands.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ć.

Plik Command.js

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(); });
Niestandardowe polecenia w pliku command.js

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 customCommand.spec.js w folderze integracji. Nasz plik specyfikacji będzie zawierał następujący kod

description("Przykład poleceń niestandardowych", () => { it("należy zalogować się za pomocą poleceń niestandardowych", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
Plik specyfikacji uzyskujący dostęp do polecenia niestandardowego

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" //
Sugestia dostarczona przez IntelliSense

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

Jestem entuzjastą testów i mam ponad 2 lata doświadczenia w dziedzinie testowania. Pasjonuje mnie testowanie i 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 do perfekcji, dlatego życzę moim czytelnikom doskonałego zrozumienia technologii. Jestem na bieżąco z nowymi technologiami związanymi z testowaniem i poświęcam czas na ich zrozumienie. Cieszę się, że mogę pomóc uczniom zrozumieć pojęcia związane z testowaniem. Połączmy się przez LinkedIn - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

Najnowsze posty