Page Object: como automatizar testes com biblioteca Cypress

Nesse artigo vamos conhecer o padrão PageObject e sua função quando falamos em testes automatizados.

PageObject é um padrão de design que ajuda a aprimorar a manutenção de testes e reduzir a duplicação de código, também pode ser utilizado para descrever e documentar o fluxo de uma aplicação. Para entender na prática como aplicar PageObject criaremos um teste automatizado responsável por fazer o login em uma aplicação.

Criando um teste

O código abaixo foi escrito utilizando a biblioteca cypress e descreve os passos para fazer login em um site:

describe('Login', function(){
  it('Sign in', function(){
 	cy.visit('www.site.com.br')
 	cy.get('input[type="email"]').type('[email protected]')
 	cy.get('input[type="password"]').type('senha')
 	cy.get('btn').contains('Entrar').click()
   })
})

Neste teste estamos dizendo para o cypress entrar em um site, preencher os inputs com email e senha e clicar no botão de entrar.

À primeira vista, esse código não parece ter nada de incorreto e realmente não tem, se a automatização fosse apenas essa poderíamos parar por aqui. Porém o mais comum de acontecer é ter vários testes dentro de um mesmo arquivo, os nomes dos inputs podem mudar e rapidamente fica muito difícil de gerenciar o que está acontecendo. Já que por enquanto só estamos testando o login, podemos antecipar esses problemas e aplicar o padrão PageObject.

Aplicando o PageObject

A ideia do PageObject é separar os elementos em arquivos diferentes baseados nas páginas em que eles aparecem, assim, escrevemos todos os elementos e métodos específicos daquela página em seu arquivo que é uma classe JavaScript e usamos diretamente nos scripts de teste.

Seguindo esse princípio, criamos uma classe que vai representar o login do nosso teste:

class login {
  email(){
 	return cy.get('input[type="email"]')
   }
  senha(){
   return cy.get('input[type="password"]')
	}
   entrar(){
	return cy.get('btn').contains('Entrar')
	}
 }
export default login

Cada um dos métodos dessa classe representa uma ação de teste. Com a classe criada podemos chamar os métodos da classe login dentro do arquivo de teste login:

import Login from '../login.js'
describe('Login', function(){
 const login = new Login()
  it('Sign in', function(){
 	cy.visit('www.site.com.br')
 	login.email().type('[email protected]')
 	login.senha().type('senha')
 	login.entrar().click()
  })
})

Como podemos ver no código acima, a página de login corresponde a um PageObject e esse PageObject pode ser chamado nos Scripts de teste para realizar o login na aplicação. O benefício que ganhamos é que, se a interface mudar, os testes em si não precisam mudar, apenas o código dentro do objeto da página precisa mudar.

Se você gostou desse conteúdo e quer saber mais, aqui na Alura temos uma Formação Front-end onde vamos nos aprofundar ainda mais em HTML e CSS e principalmente em JavaScript.