Artigos > Front-end

Page Object: o que é?

Felipe Nascimento
Felipe Nascimento

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.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1268 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas