Automatizando testes com Playwright e PageObject: uma abordagem prática
Simplificando a automação de testes web com uma estrutura organizada e reutilizável
Introdução ao Playwright e ao PageObject
Automatizar testes web pode ser uma tarefa desafiadora, especialmente quando lidamos com aplicações complexas e em constante evolução. É aí que entra o “pageobject”, uma abordagem que visa simplificar a estruturação e organização dos testes. Ao adotar o “pageobject”, podemos criar uma estrutura clara e reutilizável, onde cada página da web e seus elementos são representados como objetos, facilitando a escrita e manutenção dos testes.
Neste artigo, exploraremos como o “pageobject” combinado com a poderosa biblioteca Playwright pode revolucionar a maneira como automatizamos testes, tornando-os mais práticos e eficientes. Prepare-se para descobrir uma abordagem que pode acelerar seu fluxo de trabalho e trazer resultados consistentes em suas automações de testes web.
Gostaria de lembrar que este artigo é uma continuação do Playwright Básico — Introdução à Automação de Testes Web , e seria interessante ter um conhecimento básico de Playwright para uma compreensão mais aprofundada do que será explicado aqui. Portanto, recomendo a leitura do primeiro artigo.
O que é PageObject?
O conceito de “pageobject”, é uma abordagem que visa organizar e estruturar os testes automatizados de forma mais intuitiva e reutilizável. Basicamente, cada página da web é mapeada como um objeto, contendo os elementos e ações que podem ser realizadas nessa página. Esse mapeamento permite que os testes interajam com os elementos da página de maneira simples e consistente, facilitando a escrita e a manutenção dos testes.
De forma prática, imagine que você está automatizando um processo de login em um site. Com o “pageobject”, em vez de repetir o código de localização e interação com os elementos de login em cada teste, você pode criar um objeto específico para a página de login. Esse objeto terá métodos para preencher o campo de usuário, o campo de senha e clicar no botão de login. Dessa forma, em cada teste que envolva o login, você simplesmente invoca esses métodos do objeto de página, tornando o código mais limpo, legível e fácil de manter. Se ocorrer alguma alteração na página de login, você precisará atualizar apenas o objeto de página, e não todos os testes que utilizam essa página. Isso aumenta a eficiência e a escalabilidade dos seus testes automatizados.
Estruturando o projeto no modelo “PageObject”
Primeiro, vamos começar a montar a estrutura do “PageObject”.
A ideia mais comum é dividir isso em duas pastas: uma para os arquivos do Page (coisas relacionadas à página em si) e outra para os testes. Isso ajuda a manter as coisas organizadas, separando o que é código de interação com a aplicação do que são os testes em si. Então, vamos lá, mãos à obra na montagem dessa estrutura!
Então, teremos a seguinte arquitetura de pastas:
- pages : Pasta onde encontraremos os arquivos com as classes que mapeiam as ações de cada “Page” e seus “Objects”.
- tests: Pasta onde encontraremos os arquivos “specs” do nosso projeto.
- utils: Pasta onde encontraremos funções e trechos de código que poderemos reaproveitar em diversos cenários.
Agora vamos para prática:
Aqui podemos ver a primeira “Page” criada; ela será responsável por todas as ações que a página inicial da Amazon pode realizar.
Podemos observar no código que a página inicial da Amazon se transformou em uma classe, enquanto suas ações tornaram-se funções dessa classe e também seus elementos tornaram-se objetos. Essa é a abstração necessária para criarmos um “Page Object”.
Podemos notar que algumas funções são genéricas, podendo assim ser reaproveitadas para outros testes. Também percebemos que utilizaremos a mesma função de pesquisa para qualquer produto desejado, sem acréscimo de código. Até mesmo para um teste que abordará outro cenário, essas funções poderão ser aproveitadas.
Essa mesma reusabilidade não era possível se não utilizássemos o “Page Object”, como podemos observar no artigo anterior de minha autoria.
Playwright Básico — Introdução à Automação de Testes Web
Agora, criaremos a “page” para o produto pesquisado.
E por fim criaremos a “Page” referente ao carrinho.
Agora, veremos como a reutilização de código nos beneficiou. Podemos perceber que cada “Page” tem suas ações específicas, o que nos permite reutilizá-las em todos os testes que realizarmos daqui para frente.
A parte de acessar o site, realizar a pesquisa e validar a pesquisa é realizada na classe da página inicial. Por outro lado, as funções de validar o produto e adicioná-lo ao carrinho são executadas na classe da página do produto. Por fim, as funções de validação do carrinho estão concentradas nessa última página.
Agora, verifiquemos como ficou o arquivo de teste:
A parte fundamental para a utilização do PageObject com o Playwright é definir a classe “Page” do Playwright como uma variável global, possibilitando assim seu uso em todo o seu código.
Podemos observar no arquivo de teste que reutilizamos funções das páginas nos testes. Ambos os casos de teste utilizam diversas funções, resultando na redução da quantidade de linhas de código, aprimorando a manutenção futura e diminuindo potenciais erros decorrentes de redundância.
Conclusão
Encerramos nossa exploração sobre a integração do PageObject com o Playwright, uma parceria que se revelou fundamental no cenário da automação de testes. Ao longo deste artigo, foram vitas maneiras pelas quais essa combinação não apenas otimiza os processos operacionais, mas também fortalece a construção de testes robustos e de fácil manutenção. Que este conhecimento proporcione melhorias contínuas na qualidade dos testes e simplifique a complexidade do desenvolvimento de software.
Fontes e links uteis
Fast and reliable end-to-end testing for modern web apps | Playwright
Download | Node.js (nodejs.org)
Segue meu LinkedIn: Rodrigo Cabral | LinkedIn
Segue meu GitHub: RodrigoOBC (Rodrigo de Brito de Oliveira Cabral) · GitHub
