Cypress Promise i Cypress Asynchronous: 13 ważnych faktów

by

W naszym poprzednim artykuł, widzieliśmy konfiguracje w Cypress i różne opcje, które można skonfigurować w plikach JSON. Ten artykuł zrozumie Cyprysowa obietnica i Cyprys asynchroniczny zachowanie z praktycznym wdrożeniem i przykładami w naszym projekcie. Omówimy również, jak włączyć awaits do naszego kodu asynchronicznego i kilka podstawowych funkcji, takich jak wrap() i task(). Zacznijmy!

Cypress Promise i Cypress Asynchronous:

Cyprysowa obietnica i Cyprys asynchroniczny natura to tylko niektóre z podstawowych pojęć. Jak każdy inny framework JavaScript, Cypress również obraca się wokół Asynchronous i Promises. Cypress obsługuje wewnętrznie wszystkie zachowania asynchroniczne i jest ukryte przed użytkownikiem. Użyjemy .then() ręcznie obsługiwać obietnice w naszym kodzie. Istnieją zewnętrzne pakiety, takie jak Cypress-promise w npm, w których możemy manipulować asynchronicznym zachowaniem Cypress. Omówimy szczegółowo każdy z tych tematów.

Cypress Promise i Cypress Asynchronous
Cyprysowa obietnica

Spis treści

Cyprys asynchroniczny

Jak wiemy Cypress opiera się na Węzeł JS. Każdy framework, który jest napisany jako kompilacja z Node.js, jest asynchroniczny. Zanim zrozumiemy asynchroniczne zachowanie Cypressa, powinniśmy poznać różnicę między naturą synchroniczną a asynchroniczną.

Synchroniczna natura

W programie synchronicznym, podczas wykonywania kodu, tylko jeśli pierwsza linia zostanie wykonana pomyślnie, druga linia zostanie wykonana. Czeka, aż zostanie wykonana pierwsza linia. Działa sekwencyjnie.

Natura asynchroniczna

Kod jest wykonywany jednocześnie, czeka na wykonanie każdego kroku bez zawracania sobie głowy stanem poprzedniego polecenia. Chociaż napisaliśmy nasz kod sekwencyjnie, kod asynchroniczny jest wykonywany bez oczekiwania na zakończenie jakiegokolwiek kroku i jest całkowicie niezależny od poprzedniego polecenia/kodu.

Co jest asynchroniczne w Cyprysie?

Wszystkie polecenia Cypress są z natury asynchroniczne. Cypress ma opakowanie, które rozumie sekwencyjny kod, który piszemy, umieszcza je w opakowaniu i uruchamia się później, gdy wykonujemy kod. Tak więc Cypress wykonuje całą naszą pracę związaną z asynchroniczną naturą i obietnicami!

Zrozummy na to przykład.

 it('kliknij opcję technologii, aby przejść do adresu URL technologii', funkcja () { cy.visit('https://techiescience.com/') // Żadne polecenie nie zostało wykonane //kliknij opcję technologii cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Tutaj też nic nie jest wykonywane .click() // Jeszcze nic się nie dzieje cy.url() // Tutaj też nie są wykonywane żadne polecenia .should('include', '/technology') // Nie, nic. }); // Teraz wszystkie funkcje testowe zostały zakończone // Cypress umieścił wszystkie polecenia w kolejce i teraz będą one uruchamiane po kolei

To było całkiem proste i zabawne. Teraz zrozumieliśmy, jak działają polecenia Cypress Asynchronous. Zanurzmy się głębiej w to, gdzie próbujemy mieszać kod synchronizacji i asynchroniczny.

Mieszanie poleceń synchronicznych i asynchronicznych Cypress

Jak widzieliśmy, polecenia Cypress są asynchroniczne. Podczas wstrzykiwania dowolnego kodu synchronicznego Cypress nie czeka na wykonanie kodu synchronizacji; stąd polecenia synchronizacji są wykonywane jako pierwsze, nawet bez oczekiwania na jakiekolwiek poprzednie polecenia Cypress. Przyjrzyjmy się krótkiemu przykładowi, aby lepiej zrozumieć.

 it('kliknij opcję technologii, aby przejść do adresu URL technologii', funkcja () { cy.visit('https://techiescience.com/') //kliknij opcję technologii cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Tutaj również nie wykonano żadnych poleceń .should('include', '/technology') // Nie, nic. console.log("To ma sprawdzić dziennik") // Zaloguj, aby sprawdzić zachowanie asynchroniczne }); });
zrzut ekranu dziennika 1
Synchroniczne wykonanie polecenia dziennika

Dziennik jest dodawany na końcu kodu, który jest poleceniem synchronizacji. Po uruchomieniu testu widać, że dziennik został wydrukowany jeszcze przed załadowaniem strony. W ten sposób Cypress nie czeka na polecenie synchroniczne i wykonuje je nawet przed wykonaniem swoich poleceń.

Jeśli chcemy, aby wykonały się zgodnie z oczekiwaniami, powinniśmy owinąć go wewnątrz .then() funkcjonować. Zrozummy na przykładzie.

it('kliknij opcję technologii, aby przejść do adresu URL technologii', funkcja () { cy.visit('https://techiescience.com/') //kliknij opcję technologii cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Tutaj również nie wykonano żadnych poleceń .should('include', '/technology') // Nie, nic.then(() => { console.log("To ma sprawdzić log") // Zaloguj, aby sprawdzić zachowanie asynchroniczne }); });
po synchronizacji dziennika
Wykonywanie asynchroniczne za pomocą polecenia .then()

Co to jest obietnica Cyprysa?

Jak widzieliśmy powyżej, Cypress umieszcza w kolejce wszystkie polecenia przed wykonaniem. Mówiąc szczegółowo, możemy powiedzieć, że Cypress dodaje obietnice (polecenia) do łańcucha obietnic. Cypress sumuje wszystkie polecenia jako obietnicę w łańcuchu.

Aby zrozumieć obietnice, porównaj je z rzeczywistym scenariuszem. Wyjaśnienie definiuje Obietnicę również w naturze asynchronicznej. Jeśli ktoś Ci obiecuje, to też odrzucać or spełnić oświadczenie, które złożyli. Podobnie, asynchronicznie, obietnice albo odrzucać or spełnić kod, który owijamy w obietnicę.

Jednak Cypress dba o wszystkie obietnice i nie ma potrzeby manipulowania nimi za pomocą naszego niestandardowego kodu. Jako programiści JavaScript ciekawi nas, jak używać Czeka w naszych poleceniach. Cypress API są zupełnie inne niż ogólnie. Przyjrzymy się temu szczegółowo w dalszej części tego samouczka.

Stany cyprysowych obietnic

Obietnice mają trzy różne stany w oparciu o polecenia Cypress. Oni są

  • Zdecydowany – Występuje, gdy krok/polecenie zostanie pomyślnie wykonane.
  • Do czasu – Proszę podać, gdzie rozpoczęła się egzekucja, ale wynik jest niepewny.
  • Odmowa – Występuje, gdy krok się nie powiódł.

Jako programiści JavaScript, mamy tendencję do pisania obietnic w naszym kodzie i zwracania ich. Na przykład,

//Ten kod służy wyłącznie do celów demonstracyjnych. opis('Przykład cyprysu ', funkcja () { it('kliknij opcję technologii, aby przejść do adresu URL technologii', funkcja () { cy.visit('https://techiescience. com/') //kliknij opcję technologiczną cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl- treść zdjęć > a > .fl-photo-img') .then(() => { return cy.click(); }) cy.url() .then(() => { return cy.should(' include', '/technologia') }) }); });

Tutaj zwracamy obietnice do każdego z poleceń. Nie jest to wymagane w Cyprysie. Na szczęście Cypress zajmuje się wszystkimi obietnicami wewnętrznie i nie musimy dodawać obietnic na każdym kroku. Cyprys ma możliwość ponownej próby opcja, gdzie ponawia próbę wykonania polecenia przez określony czas. Zobaczymy przykład kodu bez ręcznego dołączania obietnic.

    it('kliknij opcję technologii, aby przejść do adresu URL technologii', funkcja () { cy.visit('https://techiescience.com/') //kliknij opcję technologii cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() .should('include', '/technology') }); });
PRÓBA
Polecenia Cypress z obietnicami obsługiwanymi wewnętrznie

Powyższy kod nie jest niezgrabny i łatwy do odczytania i zrozumienia. Cypress obsługuje całą pracę obietnic i jest ukryty przed użytkownikiem. Więc nie musimy się martwić o obsługę lub zwrot obietnic w dowolnym miejscu!

Jak korzystać z await w Cypress?

Jak omówiono powyżej, Cypress ma swój sposób obsługi kodu asynchronicznego, tworząc kolejkę poleceń i uruchamiając je po kolei. Dodawanie awaits do poleceń nie będzie działać zgodnie z oczekiwaniami. Ponieważ Cypress obsługuje wszystko wewnętrznie, radzę nie dodawać awaits do kodu.

Jeśli chcesz dodać czeka, możesz skorzystać z biblioteki innej firmy, takiej jak Cyprys-obietnica to zmienia sposób działania Cyprysa. Ta biblioteka pozwoli Ci korzystać obiecuje w poleceniach i użyj oczekiwać w kodzie

Pozwól nam zrozumieć, jakie czekają sposoby użycia i jak ich nie używać.

Czekaj nie powinieneś używać w ten sposób

//Nie używaj oczekiwania w ten sposób opisz('Odwiedź stronę', () => { (async () => { cy.visit('https://techiescience.com/') oczekuj cy.url(). powinien('uwzględnić', '/technologia'); })() })

Zamiast tego możesz użyć tego

opisz('Odwiedź stronę', () => { cy.visit('https://techiescience.com/').then(async () => oczekuj cy.url().should('include', ' /technologia') ()) })

Będzie to działać dla wszystkich poleceń Cypress.

Okład cyprysowy

wrap() jest funkcją w Cypressie, która zwraca dowolny obiekt, który jest przekazywany jako argument.

Składnia

cy.wrap(subject)
cy.wrap(subject, options)

Spójrzmy na przykład, jak uzyskać dostęp wrap() w naszym kodzie.

const getName = () => { return 'Koń' } cy.wrap({ name: getName }).invoke('name').should('eq', 'Horse') // true

W tym przykładzie zawijamy getName a następnie przywołaj jego nazwę.

Cypress Wrap Obietnica

Możemy zawinąć obietnice, które są zwracane przez kod. Polecenia będą czekać na rozwiązanie obietnicy przed uzyskaniem dostępu do uzyskanej wartości i. następnie przejdź do następnego polecenia lub potwierdzenia.

const customPromise = new Promise((resolve, remove) => { // używamy funkcji setTimeout() w celu uzyskania dostępu do kodu asynchronicznego. setTimeout(() => { resolve({ type: 'success', message: 'Jabłka i Pomarańcze' , }) }, 2500) }) it('powinien czekać na rozwiązanie obietnic', () => { cy.wrap(customPromise).its('message').should('eq', 'Jabłka i Pomarańcze' ) });

Kiedy kłótnia w cy.wrap() jest obietnicą, będzie czekać na rozwiązanie obietnicy. Jeśli obietnica zostanie odrzucona, test zakończy się niepowodzeniem.

Cyprys-obietnica npm

Jeśli chcemy manipulować obietnicami Cypress, możemy dodatkowo skorzystać z biblioteki lub pakietu o nazwie Cyprys-obietnica i włączyć go do naszego kodu. Ten pakiet pozwoli Ci przekonwertować Cyprys, polecenie w obietnicę i pozwala na oczekiwanie lub asynchronizację w kodzie. Jednak te warunki nie zadziałają before or beforeEach bloki. Na początek powinniśmy zainstalować pakiet w naszym projekcie, przekazując w terminalu następującą komendę.

npm i cypress-promise

Po zainstalowaniu terminal będzie wyglądał mniej więcej tak.

Screenshot 2021 08 11 o godzinie 9.43.42:XNUMX
Cypress-obietnica instalacji

Po instalacji powinniśmy zaimportować bibliotekę do naszego pliku testowego.

import promisify from 'cypress-promise'

Dzięki tej bibliotece możesz tworzyć i zastępować natywną obietnicę Cypress i używać awaits i asynchronii w kodzie. Powinieneś uzyskać dostęp do obietnicy za pomocą promisify słowo kluczowe. Spójrzmy na przykład tego samego.

import promisify z 'cypress-promise' it('powinien uruchamiać testy z async/await', async() => { const apple = await promisify(cy.wrap('apple')) const oranges = await promisify(cy.wrap ('pomarańcze')) oczekiwać(jabłko).to.equal('jabłko') oczekiwać(pomarańcze).to.equal('pomarańcze') });
Screenshot 2021 08 11 o godzinie 9.49.02:XNUMX
Obietnica w cyprysie-obietnica

To było bardzo proste i przyjemne do nauczenia! W ten sposób możesz przypisać kod asynchroniczny w Cypress.

Cyprysowe zadanie asynchroniczne

task() to funkcja w Cypress, która uruchamia kod w Node. To polecenie umożliwia przełączanie się z przeglądarki do węzła i wykonywanie poleceń w węźle przed zwróceniem wyniku do kodu.

Składnia

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() zwraca wartość lub obietnicę. task() nie powiedzie się, jeśli obietnica zostanie zwrócona jako undefined. W ten sposób ułatwia użytkownikowi przechwytywanie literówek, w których zdarzenie nie jest obsługiwane w niektórych scenariuszach. Jeśli nie musisz zwracać żadnej wartości, przekaż null wartość.

Często Zadawane Pytania

Czy Cyprys jest synchroniczny czy asynchroniczny?

Cyprys jest Asynchroniczny zwracając polecenia w kolejce zamiast czekać na zakończenie wykonywania poleceń. Chociaż jest asynchroniczny, nadal uruchamia wszystkie kroki testowe sekwencyjnie. Cypress Engine obsługuje całe to zachowanie.

Czy w Cypress można złapać łańcuch obietnic?

Cypress jest zaprojektowany w taki sposób, że nie będziemy w stanie dotrzymać obietnic. Te polecenia nie są dokładnie Obietnicami, ale wygląda na obietnicę. W ten sposób nie możemy dodać wyraźnych funkcji obsługi, takich jak catch.