Projeto Aquabot Testing — Parte 4

Olá, pessoas.

No último post, nós automatizamos os casos de teste 03 e 04 da lista de casos de teste escrita na Parte 2.

Agora vamos voltar para os casos de teste 01 e 02. Mas, primeiro, preciso introduzir um novo conceito.

Modificações no DOM

“Document Object Model” (DOM) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.

O HTML DOM é um padrão de modelo de objetos e uma interface programável para o HTML. Ele define:

• Os elementos HTML como objetos
• As propriedades de todos os elementos HTML
• Os métodos para acessar todos os elementos HTML
• Os eventos para todos os elementos HTML

Algumas vezes serão necessárias algumas alterações nas propriedades no DOM para fazermos nossos testes, e é isso que vamos precisar fazer para nossos testes neste post.

Validação de página recarregada

Vamos dar uma olhada no nosso primeiro caso de teste:

Cenário Caso de Teste 01 — Clicando na logo Aquabot
Dado que estou na home do site Aquabot Testing Playground 
Quando eu clico na logo Aquabot 
Então a página será recarregada
E eu serei redirecionada para a home do site Aquabot Testing Playground  

Depois que clicamos na logo do site a página será recarregada, e vamos ver a mesma página novamente, mas como nós vamos validar que o site foi recarregado?

E é aqui onde as alterações no DOM se tornam úteis!

Quando a página recarrega, ela retorna ao seu estado inicial, então todas as alterações que o usuário fez serão perdidas. Alguns sites mantêm as alterações do usuário, mas não é o nosso caso.

Portanto, tudo o que precisamos fazer é adicionar uma alteração na nossa página e verificar que essa propriedade não estará mais lá depois que a página recarregar.

Primeiro, vamos adicionar nossa alteração e verificar que ela realmente está lá:

cy.window().then(w => w.beforeReload = true)
cy.window().should('have.prop', 'beforeReload', true)

Então, nós clicamos na logo para a página recarregar e verificamos se a propriedade não está mais lá:

cy.get('.logo-image > img').click()    cy.window().should('not.have.prop', 'beforeReload')

E é isso. Simples né?

O teste completo fica assim:

beforeEach(() => {
    cy.visit('https://aquabottesting.com/index.html')
})

it('clicks on aquabot logo should reload the page', () => {
    cy.window().then(w => w.beforeReload = true)
    cy.window().should('have.prop', 'beforeReload', true)
    cy.get('.logo-image > img').click()
    cy.window().should('not.have.prop', 'beforeReload')
})

O próximo caso de teste tem o comportamento oposto ao do primeiro, vamos ver:

Cenário Caso de Teste 02 — Clicando no botão Home
Dado que estou na home do site Aquabot Testing Playground 
Quando eu clico no botão Home
Então o sistema não fará nada 

E agora, como vamos validar que o sistema não mudou?

Da mesma maneira que verificamos que a propriedade que adicionamos no DOM desapareceu, agora vamos verificar que a propriedade ainda está lá!

cy.window().should('have.prop', 'beforeReload')

O teste completo fica assim:

beforeEach(() => {
    cy.visit('https://aquabottesting.com/index.html')
})

it('clicks on Home button nothing will happen', () => {
    cy.window().then(w => w.beforeReload = true)
    cy.window().should('have.prop', 'beforeReload', true)
    cy.contains('Home').click()
    cy.window().should('have.prop', 'beforeReload')
})

E é isso para este post, deem uma olhada no projeto nesse link e nos vemos no próximo.