Playwright Básico — Introdução à Automação de Testes Web
Aprenda os fundamentos da automação de testes web com Playwright: desde a configuração inicial até a navegação e interação com elementos da página. Utilizando JavaScript.
Introdução ao Playwright
O Playwright é uma poderosa ferramenta de automação de testes web que oferece suporte a múltiplos navegadores, incluindo Chrome, Firefox e Safari. Sua finalidade é permitir que os desenvolvedores e testadores automatizem interações com páginas da web, como cliques, preenchimento de formulários e validação de resultados. Com uma API intuitiva e recursos avançados, como captura de evidências visuais, suporte a dispositivos móveis e emulação de redes, o Playwright torna o processo de automação de testes web mais eficiente, confiável e abrangente, ajudando a garantir a qualidade de aplicações web em diferentes navegadores e dispositivos.
O Playwright destaca-se em relação a outras ferramentas de automação de testes web devido aos seus principais recursos e vantagens. Ele oferece suporte nativo a múltiplos navegadores, permitindo a execução de testes em Chrome, Firefox e Safari consistentemente. Além disso, o Playwright possui uma API unificada, facilitando a transição entre diferentes navegadores e simplifica a manutenção dos testes. A capacidade de emular dispositivos móveis, a captura de evidências visuais detalhadas, a execução rápida de testes e o suporte para cenários complexos, como frames e pop-ups, são outros pontos fortes do Playwright, tornando-o uma escolha poderosa e versátil para a automação de testes web.
Configurando o ambiente de desenvolvimento
A instalação do Playwright e suas dependências é o primeiro passo para começar a utilizar essa poderosa ferramenta de automação de testes web. A instalação poderá ser feita através do gerenciador de pacotes npm ou yarn, além de suas dependências, como os navegadores Chrome, Firefox e Safari.
No primeiro passo, antes de começar a trabalhar com o Playwright, é essencial instalar o Node.js.
Para instalar o Node.js de forma rápida, siga este passo a passo:
- Acesse o site oficial do Node.js em https://nodejs.org.
- Na página inicial, você encontrará diferentes opções de download. Recomendamos escolher a versão LTS (Long Term Support), que oferece maior estabilidade e suporte a longo prazo.
- Selecione o seu sistema operacional (Windows, macOS ou Linux) e clique no botão de download correspondente.
- O download do instalador do Node.js será iniciado. Aguarde até que o download seja concluído.
- Após o download, execute o arquivo do instalador.
- Siga as instruções do assistente de instalação, aceitando os termos de uso e escolhendo as opções de configuração padrão, a menos que você tenha necessidades específicas.
- Após a conclusão da instalação, abra um terminal ou prompt de comando e digite o seguinte comando para verificar se o Node.js foi instalado corretamente:
node -v8. Além do Node.js, a instalação também inclui o npm (Node Package Manager). Verifique a versão do npm com o seguinte comando:
npm -vApós instalarmos o Node, vamos agora instalar o Playwright.
Passo 1 — Criar um novo projeto
Abra um terminal ou prompt de comando e navegue até o diretório em que deseja criar o projeto. Em seguida, execute o seguinte comando para criar um novo projeto Node.js:
npm init -yPasso 2 — Instalação do Playwright
npm init playwright@latest
Após instalado possivelmente você verá a seguinte composição de diretório:
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
Apagaremos a pasta “tests-examples/” e o arquivo “example.spec.ts” dentro da pasta “tests”. NÃO APAGAREMOS A PASTA “tests”.
Navegação básica com Playwright
Neste capítulo, exploraremos os fundamentos da automação de testes web usando Playwright. Aprenda a realizar a navegação entre páginas, interagir com elementos da página e executar ações básicas de automação, como cliques e preenchimento de formulários.
Na pasta “tests” crie um arquivo com o nome “amazonHome.spec.js”.
No arquivo colocaremos o seguinte código:
import { test, expect } from '@playwright/test';
test.use({
locale: 'pt-BR',
headless: true
});
test.beforeEach(async ({ page }) => {
global.page = page
});
test.afterEach(async ({ page }) => {
await page.close();
});
test('Validar tela principal da amazon', async () => {
await test.step('Navego para tela principal da amazon.com', async () => {
await page.goto('https://www.amazon.com.br/');
})
await test.step('Tela principal da amazon é apresentada', async () => {
const currentUrl = page.url();
expect(currentUrl).toBe('https://www.amazon.com.br/')
})
await test.step('Valido tela principal da amazon', async () => {
await page.waitForSelector('#nav-logo-sprites');
const logoElement = page.locator('#nav-logo-sprites');
const searchInput = page.locator('#twotabsearchtextbox');
const searchButton = page.locator('.nav-search-submit');
await expect(logoElement).toBeVisible();
await expect(searchInput).toBeVisible();
await expect(searchButton).toBeVisible();
})
});
Explicando os steps acima:
- No “step” ‘Navego para tela principal da amazon.com’ :
Estamos utilizando o Playwright para navegar até a tela principal do site da Amazon (https://www.amazon.com.br/). O comando page.goto é usado para carregar a URL desejada no navegador.
Ao executar esse trecho de codigo, o Playwright abrirá o navegador e carregará a página principal da Amazon. Essa etapa é crucial para iniciar os testes de automação e garantir que todas as interações subsequentes sejam efetuadas na página correta.
- No “step” ‘Navego para tela principal da amazon.com’ :
Neste trecho de código, estamos verificando se a tela principal da Amazon está sendo apresentada corretamente. Utilizamos o Playwright para obter a URL atual da página por meio do page.url(), e então usamos a função expect para comparar se a URL atual é exatamente igual a "https://www.amazon.com.br/".
Verificar a URL atual é uma forma eficaz de confirmar se a tela principal da Amazon está sendo exibida conforme esperado. Caso a URL não corresponda à esperada, o teste falhará, indicando a necessidade de investigação e correção.
- No “step” ‘Valido tela principal da amazon’:
Neste trecho de código, estamos validando a tela principal da Amazon, verificando a presença e visibilidade de elementos importantes. Utilizamos o Playwright para aguardar a existência desses elementos utilizando page.waitForSelector. Em seguida, atribuímos esses elementos aos respectivos localizadores logoElement, searchInput e searchButton.
Utilizamos a função expect para garantir que esses elementos sejam visíveis na tela. Com o await expect(logoElement).toBeVisible(), validamos se o elemento do logotipo está visível. O mesmo é feito para o campo de busca e o botão de pesquisa. Caso algum desses elementos não esteja visível, o teste falhará indicando a necessidade de investigação e correção.
Essa etapa é essencial para garantir que os elementos fundamentais da tela principal da Amazon estejam presentes e visíveis, assegurando que a página seja renderizada corretamente e pronta para ser interagida.
Executando o Playwright
Para realizarmos o teste, basta utilizar o comando:
npx playwright testEntão você verá o seguinte acontecer:
Agora veremos os passos que ele efetuou utilizando o modo debbug do palywright:
Podemos observar no vídeo que ele verifica a existência dos elementos indicados e conclui o teste com sucesso, com todos os testes passando com êxito.
Conclusão
Neste artigo, abordamos desde a introdução ao Playwright até a configuração do ambiente de desenvolvimento. Exploramos a navegação básica com o Playwright, demonstrando como realizar interações com elementos da página, como cliques e preenchimento de formulários. Além disso, vimos como executar testes utilizando o Playwright e como verificar a existência e visibilidade de elementos importantes.
No entanto, essa foi apenas a primeira parte do nosso guia sobre automação de testes com o Playwright. Na próxima parte, aprofundaremos o uso do conceito de Page Object, uma abordagem que visa tornar os testes mais estruturados, reutilizáveis e fáceis de manter.
Com a adoção do conceito de Page Object, sua equipe poderá criar testes mais robustos, flexíveis e fáceis de manter. A reutilização de objetos e interações encapsuladas em Page Objects promove a escalabilidade e a eficiência dos testes, permitindo que você acompanhe as mudanças na aplicação de forma mais ágil e confiável.
Acesse agora a continuação e fortaleça sua compreensão, explorando estratégias práticas e dicas valiosas. Para continuar esta jornada, clique no link que o conduzirá à Parte 2 e desvende novas perspectivas para aprimorar sua abordagem de teste.
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
