Menu Zamknij

Cypress – czas na testy responsywności

Testowanie UI w różnych rozdzielczościach to żmudny proces wymagający powtarzania tych samych kroków wielokrotnie. Najpierw zmieniasz ustawienia rozdzielczości, następnie oglądasz interesujący Cię UI, aby w kolejnym korku znowu zmienić rozdzielczość... A co powiesz na automatyzację tego procesu w Cypress? Zainteresowanych zapraszam do dalszej części artykułu. 🙂

Jak już pewnie domyślacie się ze wstępu Cypress pozwala nam na testowanie naszej aplikacji w różnych rozdzielczościach. Aby ułatwić użytkownikowi konfigurację, posiada nawet listę zdefiniowanych rozdzielczości dla popularnych urządzeń. Dzięki temu nie trzeba się zastanawiać jaką rozdzielczość ma urządzenie, dla którego test chcemy przeprowadzić, wystarczy wpisać jego nazwę. 🙂 Lista dostępna jest tutaj.

Ustawienia rozdzielczości dla całego projektu

Cypress w swoich ustawieniach ma domyślnie zdefiniowane parametry rozdzielczości jako 1000×600 px. Z tego powodu cały nasz projekt testowy będzie testowany dla takiej rozdzielczości.  Oczywiście możemy bez problemu je zmienić. Aby tego dokonać wystarczy w pliku cypress.json zdefiniować w jakiej rozdzielczości chcemy, aby nasz UI był testowany. Przykładowo, jeśli chcemy aby nasze UI było testowane w rozdzielczości 1920×1080 px to należy zmienić wartości  następujących parametrów: { "viewportWidth": 1920, "viewportHeight": 1080 }
Oczywiście, aby zmienić szerokość w jakiej chcemy testować należy operować wartościami dla parametru viewportWidth, a aby zmienić wysokość wartościami dla parametruviewportHeight.

A gdyby tak każdy test case testować w innej rozdzielczości? 🙂

Czy zdarzyła się Wam sytuacja, że w Waszym projekcie chcieliście konkretny przypadek testowy weryfikować w innej rozdzielczości, bo np. w inny sposób prezentowane jest menu strony głównej na przeglądarce desktopowej i  mobilnej? Cypress pozwala nam również na wprowadzenie takich ustawień.

Brzmi wspaniale, prawda? Poniżej instrukcja jak to zrobić. 😉

Aby w naszym poleceniu zdefiniować rozdzielczość dla konkretnego test case należy użyć polecenia:

cy.viewport(szerokość, wysokość)

Nową wiedze najlepiej przyswaja się poprzez stosowanie jej w praktyce,  zatem poniżej przykładowe użycie.

  describe('Resize the viewport to 550px x 750px', () => {
        it('User should be able to see notice cookies', () => {

            cy.viewport(550, 750)
            cy.visit("https://www.zdalnewarsztatyqa.pl/kontakt")
            cy.get('#cn-accept-cookie')
                .should('is.visible')
        })
    })

W powyższym kodzie definiujemy rozdzielczość cy.viewport(550, 750), dla naszego przypadku testowego omawianego tutaj, który sprawdza czy komunikat z akceptacją ciasteczek jest niewidoczny po ich akceptacji.

Jak wykonać test case dla kilku rozdzielczości i nie powielać kodu?

Poprzedni przykład wygląda banalnie, prawda? 🙂

Pewnie teraz zaczynacie się zastanawiać, co jeśli chcielibyście zmienić rozdzielczość dla wybranego przypadku testowego kilkukrotnie? Najgorszym wyborem byłoby powielenie kodu z zastosowaniem innego ustawienia rozdzielczości. My jednak chcemy w naszym kodzie stosować dobre praktyki, dlatego mam propozycję innego rozwiązania.

Poniżej prezentuję przykładową pętle, która pozwoli obsłużyć nam taki wariant.

    describe('Dynamically test multiple viewports', () => {

        const sizes = ['macbook-15', 'ipad-2', [1920, 1080]]

        sizes.forEach((size) => {

            context(`Tests resolution: ${size}`, function () {
                it('Should have proper tittle', () => {

                    cy.visit("https://www.zdalnewarsztatyqa.pl/kontakt")
                    cy.title()
                        .should('eq', 'kontakt – Zdalne Warsztaty QA')
                })

                it('User should be able to see notice cookies', () => {

                    cy.visit("https://www.zdalnewarsztatyqa.pl/kontakt")
                    cy.get('#cn-accept-cookie')
                        .should('is.visible')
                })
            })
        })
    })
W celu zdefiniowania rozdzielczości w jakich będziemy testować tworzymy tablicę:
sizes = ['macbook-15', 'ipad-2', [1920, 1080]]
Następnie w petli forEach dla każdej rozdzielczości zdefiniowanej w tablicy sizes wykonujemy przypadki testowe omawiane tutaj.

Zmiana orientacji ekranu

Możliwości zmiany rozdzielczości udało nam się już omówić, zatem pozostaje nam jeszcze odpowiedź na pytanie co ze zmianą orientacji ekranu?

W Cypress mamy oczywiście taką możliwość. 😉 W tym celu wystarczy dodać parametr landscape

Zastosowanie takiego rozwiązania zaprezentujemy na przykładzie poniżej.

    describe('Resize the viewport to landspape iphone 6', () => {

        it('User should be able to see notice cookies', () => {

            cy.viewport('iphone-6', 'landscape')

            cy.visit("https://www.zdalnewarsztatyqa.pl/kontakt")

            cy.get('#cn-accept-cookie')
                .should('is.visible')

        })
    })

W powyższym przykładzie nasz test case weryfikujemy dla rozdzielczości takiej jak na urządzeniu iPhone 6 ze zmienioną orientacją ekranu, a mówi o tym następująca linia kodu:

cy.viewport('iphone-6', 'landscape')

Podsumowanie

Testy responsywności to dość ważny choć czasochłonny fragment dla większości scenariuszy testowych. Aby zatem ułatwić sobie zadanie warto dodać je do naszych zautomatyzowanych testów regresji. W Cypress jest to dość prosta operacja, dzięki której w szybki sposób otrzymujemy zwrotną informację o tym, czy nasz serwis/aplikacja jest responsywne.

W artykule pozostawiłem odpowiedź na pytania:

  • Jak zmienić rozdzielczość dla całego projektu?
  • Jak zmienić rozdzielczość dla poszczególnego przypadku testowego?
  • Jak przetestować przypadek testowy w kilku rozdzielczościach i nie powielać kodu?
  • Jak zmienić orienatcję ekranu?

Cały kod zawarty w artykule tradycyjnie dostępny na naszym GitHub. 🙂

Dajcie proszę znać w komentarzu, czy temat Wam się spodobał. Jeśli macie jakieś pytanie, to piszcie śmiało. 😉

Mam nadzieję, że informację zawarte w tym artykule były dla Was przydatne. Zapraszam Was również do śledzenia informacji o kolejnych artykułach. Jeśli chcecie dowiedzieć się o nich z pierwszej ręki zapraszamy do dołączenia do naszego Newslettera oraz grupy Facebook.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *