Page Object: como automatizar testes com biblioteca Cypress

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:

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:

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.