Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
3 minutos de leitura
Autor(a)
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
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.
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.
Avalie este artigo
Organizando o CSS no seu projeto
Ler mais
Padrão BEM CSS: como criar componentes CSS reutilizáveis usando Block Element Modifier
Ler mais
Como colocar seu projeto no ar com o Github Pages?
Ler mais