Testy automatyczne Cypress przykładowe skrypty

Testy automatyczne Cypress przykładowe skrypty to wpis pokazujący w jaki sposób rozszerzyć możliwości Cypressa. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa może spotkać się z sytuacjami, że będziemy potrzebowali dodatkowego wsparcia by napisać nasze testy. W ramach tworzenia testów automatycznych, możecie mieć różne zagwozdki jak podejść do pewnych testów, albo jakie testy stworzyć. W ramach tego wpisu wskażemy Wam przykładowe testy które możecie zaimplementować w swoich projektach. Nie będą to najprostsze skrypty typu click, ale też nie będą to rozbudowane testy automatyczne. Czas na bardziej skomplikowane tematy – nadejdzie. 

Jako Ambasador Cypressa mam na celu rozpowszechnianie wiedzy o tym narzędziu, promowanie wartości jakie nam przyświecają.

Bad Linki

Przykładowy skrypt, który pozwala sprawdząć status linków na naszej stronie:

  it('Check bad link', () => {
    cy.get("a").each(page => {
      const link = page.prop('href')
      cy.request({
        url: link,
        failOnStatusCode: false  // check links and response
      }).then(response => {
        Cypress.log({
          name: link,
          message: response.status
        })
      })
    })

Kodowanie strony

Oto przykład skryptu gdzie weryfikujemy kodowanie strony.

    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')

Sprawdzenie title stron

Przykładowy skrypt w którym sprawdzamy nazwę naszej strony

    cy.title().should('include', 'Page name')

Lokalizacja hosta

Oto przykład skryptu gdzie sprawdzamy lokalizację hosta

    expect(location.hostname).to.eq('www.example-page.com')

Full screenshot z blokadą elementów

Teraz przykład skryptu w którym robimy screenshot i blokujemy pewne elementy by nie pokazywały się przy dłuższej stronie.

    fullScreenshot() {
        cy.get(main.header).invoke('css', 'position', 'relative');
        cy.get(main.footer).scrollIntoView({ duration: 6000 })
        cy.screenshot({ capture: 'fullPage' });
        cy.get(main.header).invoke('css', 'position', 'fixed');

Zapisanie wartości do pliku

Oto przykład skryptu gdzie możemy zapisać wartość do pliku. 

    saveUrl() {
        cy.get(navigationUrl).click()
        cy.wait(main.shortWait)
        cy.url().then(url => {
            const saveLocation = `./cypress/Url/location.md`
            cy.writeFile(saveLocation, url)
        })

Sprawdzenie routingu 

Teraz czas na przykład skryptu, gdzie sprawdzamy routing. Możemy skorzystać do weryfikacji przy po kliknięciu w zakładkę news znajdujemy się na tej stronie. 

    checkRouting() {
        cy.url().should('include', '/yourPageAddress')

Dodawanie plików w inpucie

Tutaj dodajemy nowy plik np. do naszego inputu i sprawdzamy możliwość uploadu. 

    }
    addnewFile() {
        cy.xpath("/descendant::input[contains(@type, 'file')]") 
            .attachFile(yourFixturePath) 

Logowanie z wykorzystaniem enva

Jak masz konieczność logowania i dodajesz dane do plików env, możesz je wywoływać w metodach:

    }
    loginNewUserNotShowLoginAndPass() {
        cy.get(userNamePlace).click().type(Cypress.env('login')) 
        cy.get(passwordPlace).click().type(Cypress.env('password')) 

Otwieranie strony w tym samym oknie

Tutaj przykład skryptu gdzie mamy stronę która otwiera się w nowym oknie. My zaś z racji specyfiki Cypressa możemy wymusić otwarcie w tym samym oknie. Dodatkowo dodaliśmy od razu możliwość wpisania htaccessa. 

    }
    openInThisSameWindowNewPopup() {
        cy.xpath("/descendant::a[contains(@class, 'newPage')]").invoke('attr', 'href').then(($attr) => {
            cy.visit(`${$attr}`, {
                auth: {
                    username: Cypress.env('auth_username'),
                    password: Cypress.env('auth_password')
                }
            })
        })
        cy.contains('Text')

  }
    loopForExample() {
        for (var i = 1; i < 7; i++) { // here You have loop set
            cy.get(elementToClick).click()

Najechanie na element

Najechanie myszką by wyzwolić pojawienie się np. wyskakującej wiadomości etc. 

 cy.get(myElement).trigger('mouseover')

Swipowanie

cy.get('.element-to-swipe').then(($el) => { 
cy.wrap($el).trigger('pointerdown', { clientX: 200, clientY: 200 }); 
cy.wrap($el).trigger('pointermove', { clientX: 100, clientY: 200 }); 
cy.wrap($el).trigger('pointerup', { clientX: 100, clientY: 200 }); 
}); 
cy.contains('Swiped left');

Sprawdzenie czy jest widoczny robot txt

describe('Check for a robots.txt file', () => {
it('Should have a robots.txt file', () => {
cy.request('https://example.com/robots.txt').then((response) => {
expect(response.status).to.eq(200)
})
})
})

Sprawdzenie opisów alt obrazków

describe('Verify images have alt tags', () => {
it('Should not have any images without alt tags', () => {
cy.visit('https://example.com')
cy.get('img').should('have.attr', 'alt')
})
})

Podsumowanie. 

Artykuł Testy automatyczne Cypress przykładowe skryptyy – jest kolejnym krokiem dla Was by rozpocząć przygodę z tym narzędziem, Z racji popularyzacji narzędzia i dużego wsparcia które otrzymał Cypress na rozwój, będziemy poszerzać wpisy na ten temat. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.

+2