Cypress Assertion: 9 faktów, które powinieneś wiedzieć

Cypress Assertion pomaga nam potwierdzić konkretną asercję. Asercje to kroki weryfikacyjne, które zapewniają, że oczekiwany wynik jest równy wynikowi rzeczywistemu. W automatyzacji testów wystawiamy oświadczenie w celu sprawdzenia, czy test generuje oczekiwany wynik. Jeśli asercja się nie powiedzie, przypadek testowy zakończy się niepowodzeniem, zapewniając, że wystąpił błąd. W tym artykule omówimy Cypress Assertion z implementacją Handson i przykładami.

Spis treści

Twierdzenie cyprysowe

Co to jest asercja cyprysowa?

Cypress używa i opakowuje bibliotekę asercji Chai i rozszerzenia, takie jak Sinon i JQuery. Cypress automatycznie czeka i ponawia próbę, aż asercja zostanie rozwiązana. Asercje można wykorzystać do opisania tego, jak aplikacja powinna wyglądać. Możemy użyć asercji Cypress z kombinacją waitów, ponowień, blokowania, aż osiągnie pożądany stan.

Cyprysowy tekst potwierdzenia

W ogólnym języku angielskim opisalibyśmy twierdzenie w stylu: Spodziewam się, że przycisk będzie miał tekst logowania. To samo stwierdzenie można zapisać w Cypress jako

cy.get('button').should('have.value', 'login')

Powyższa asercja przejdzie, jeśli przycisk ma wartość „login”.

Cyprysowe wspólne twierdzenia

Istnieje zestaw typowych asercji Cypress, których używamy w naszych przypadkach testowych. Będziemy ich używać z .should() . Przyjrzyjmy się przypadkowi użycia i przykładom.

Niektóre z typowych twierdzeń Cypress są wymienione poniżej

  1. Długość
  2. wartość
  3. Kontekst tekstu
  4. Klasa
  5. Istnienie
  6. CSS
  7. Widoczność
  8. Stan
  9. Mienie dla osób niepełnosprawnych

Zapewnienie długości cyprysu

length() sprawdzi, czy dany element ma długość

cy.get('dropdown').should('have.length', 5)

Twierdzenie o wartości cyprysu

Wartość Cypress zatwierdzi, jeśli dany element ma oczekiwaną wartość

cy.get('textfield').should('have.value', 'first name')

Asercja kontekstu tekstu cyprysowego

Kontekst tekstowy zatwierdzi, jeśli element ma określony tekst

cy.get('#user-name').should('have.text', 'John Doe')

Asercja klasy cyprysów

Sprawdza, czy klasa jest obecna, czy dany element powinien mieć klasę

cy.get('form').find('input').should('have.class', 'disabled')

Twierdzenie o istnieniu cyprysu

Polecenie istnienia sprawdza, czy dany element jest obecny lub istnieje w DOM, czy nie

cy.get('#button').should('exist')

Cyprysowa asercja CSS

CSS Assertion sprawdza, czy poszczególne elementy mają określoną właściwość

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

Cyprysowe potwierdzenie widoczności

Cypress Visibility Assertion potwierdza, czy element DOM jest widoczny w interfejsie użytkownika

cy.get('#form-submit').should('be.visible')

Twierdzenie o stanie cyprysu

Potwierdza stan elementu DOM

cy.get(':radio').should('be.checked')

Potwierdzenie własności niepełnosprawnych cyprysów

Asercja właściwości Cypress Disabled potwierdza, czy element jest wyłączony

cy.get('#example-input').should('be.disabled')

Cyprysowe potwierdzenie ponowienia

Pojedyncze polecenie, po którym następuje asercja, zostanie wykonane w kolejności. Początkowo polecenie zostanie wykonane, a następnie zostanie wykonane asercja. Pojedyncze polecenie, po którym następuje wiele asercji, również zostanie wykonane w kolejności – odpowiednio pierwsza i druga asercja. Więc kiedy pierwsza asercja przejdzie, pierwsza i druga asercja zostaną ponownie wykonane wraz z poleceniami.

Na przykład poniższe polecenie zawiera oba .should() i .and() polecenia asercji, gdzie .and() jest inaczej znany jako .should()

cy.get('.todo-list li') // polecenie .should('have.length', 2) // asercja .and(($li) => { // 2 kolejne asercje expect($li.get (0).textContent, 'pierwszy element').to.equal('do zrobienia A') expect($li.get(1).textContent, 'drugi element').to.equal('do zrobienia B') })

Przykłady asercji cyprysowej

W tej sekcji omówimy różne typy asercji w Cypress, takie jak

  • Niejawne twierdzenie
  • Jawne stwierdzenie

Przyjrzymy się szczegółowo obu rodzajom z przykładami

Ukryta asercja w cyprysie

W domniemanym stwierdzeniu używamy .should() or .and() polecenia. Te polecenia asercji dotyczą aktualnie podanego tematu w łańcuchu poleceń. Zależą one od wcześniej podanego tematu.

Przyjrzymy się przykładowi, jak używać .should() or .and() Polecenia

cy.get('button').should('have.class', 'enabled')

Z .and() który jest aliasem .should() , możemy łączyć wiele asercji. Te polecenia są bardziej czytelne.

cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')

Powyższy przykład jest powiązany z .should() stwierdzając, że powinien mieć klasę „aktywny”, a następnie .and() jest wykonywany w stosunku do tego samego polecenia. Jest to bardzo pomocne, gdy chcemy potwierdzić wiele poleceń.

Wyraźne stwierdzenie w cyprysie

Przekazywanie wyraźnego podmiotu w asercjach należy do jawnego typu asercji Cypress. Tutaj użyjemy expect i assert polecenia jako asercja. Jawne asercje są używane, gdy chcemy użyć wielu asercji dla tego samego podmiotu. Używamy również wyraźnych asercji w Cyprys, kiedy chcemy zrobić niestandardowe logiki przed dokonaniem asercji.

Przyjrzymy się przykład dla wyraźnego cyprysu twierdzenie

oczekiwać(true).to.be.true //sprawdza wartość logiczną expect(object).to.equal(object)

Negatywne stwierdzenie cyprysu

Podobnie jak w przypadku twierdzeń pozytywnych, w Cypressie istnieją twierdzenia negatywne. Będziemy używać słowa kluczowego „not” dodanego do przedrostka instrukcji asercji. Zobaczmy przykład negatywnej asercji

cy.get('#loading').should('not.be.visible')

Asercja negatywna jest zalecana tylko w przypadkach, w których sprawdza się, czy dany warunek nie jest już dostępny po wykonaniu określonej akcji przez aplikację.

Załóżmy na przykład, że przełącznik jest sprawdzony i sprawdźmy, czy został usunięty

// na początku element jest oznaczony jako ukończony cy.contains('li.todo', 'Write testy') .should('have.class', 'completed') .find('.toggle') .click() / / usunięto klasę CSS cy.contains('li.todo', 'Write testing').should('not.have.class', 'completed')

Cypress niestandardowa wiadomość potwierdzenia

Dzięki Cypress możemy dostarczyć dodatkowe informacje lub niestandardowe komunikaty dla asercji, korzystając z biblioteki dopasowań. Matchers składają się z małych funkcji, które różnicują wartości i generują szczegółowy komunikat o błędzie. Chai Biblioteka asercji sprawi, że nasz kod będzie wyglądał bardziej czytelnie, a niepowodzenie testów będzie bardzo przydatne

const oczekiwa = wymaga('chai').expect it('sprawdza liczbę', () => { const value = 10 const oczekiwany = 3 oczekiwany(wartość).to.equal(oczekiwany) })
cyj
Niestandardowy komunikat o błędzie Cyprys

Najlepsze praktyki w zakresie asercji cyprysów

Możemy napisać wiele asercji w jednym bloku, używając łańcucha poleceń. Nie jest konieczne pisanie pojedynczej asercji, jak w testach jednostkowych. Wielu pisze asercje jak poniżej. Można pisać w ten sposób, ale zwiększa to linię kodu i redundancję.

opisz('mój formularz', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'has validation attribute', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // sprawdzenie, czy #first ma wymagane pole } ) it('ma aktywną klasę', () => { cy.get('#first').should('have.class', 'active') // sprawdzanie czy #first ma aktywną klasę }) it( 'ma sformatowane imię', () => { cy.get('#first').should('have.value', 'Ashok') // sprawdzenie, czy #first zamienił pierwszą literę na wielką }) })

Jak widać powyżej, powtarzany jest ten sam selektor i typ asercji. Zamiast tego możemy połączyć te polecenia w jedno potwierdzenie, które wykonuje wszystkie sprawdzenia w sposób liniowy.

description('mój formularz', () => { before(() => { cy.visit('/users/new') }) it('waliduje i formatuje imię', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .wartość', 'Ashok') }) })

Jak wspomniano powyżej, możemy połączyć pojedynczy selektor z wieloma asercjami! Jest to jedna z zalecanych najlepszych praktyk pisania asercji w Cypress.

Aby zapoznać się z modelem obiektów strony w Cypress, kliknij tutaj.