The latest articles on DEV Community by Davi Limas (@davi_limas). https://dev.to/davi_limas https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2566821%2F90958106-5c31-473e-9f79-b78d5155a19f.jpg https://dev.to/davi_limas en Davi Limas Thu, 23 Jan 2025 16:44:59 +0000 https://dev.to/davi_limas/guia-completo-como-criar-mocking-com-playwright-3heo https://dev.to/davi_limas/guia-completo-como-criar-mocking-com-playwright-3heo <p>No desenvolvimento de aplicações, testar a integração com APIs e serviços externos é essencial para garantir que tudo funcione corretamente. No entanto, depender de serviços reais pode tornar os testes lentos e suscetíveis a falhas externas. É aí que entra o mocking. Utilizando o Playwright, podemos simular respostas de APIs, controlando assim o comportamento da aplicação durante os testes. Neste artigo, vamos explorar como criar mocking com Playwright, passo a passo.</p> <h2> O que é Mocking? </h2> <p>Mocking é uma técnica usada para simular respostas de APIs ou serviços externos. Isso permite que você teste sua aplicação em diferentes cenários sem depender de serviços reais, tornando os testes mais rápidos e previsíveis.</p> <h2> Criar Mocking com Playwright </h2> <p><strong>Passo 1:</strong> Configuração Inicial<br> Antes de começarmos, precisamos instalar o <strong>Playwright</strong>. Se ainda não o fez, instale utilizando o <strong>npm</strong>:</p> <p><code>npm install playwright</code></p> <p><strong>Passo 2:</strong> Criar um Script Básico<br> Vamos criar um script básico que abrirá um navegador e uma página:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bcln3ggy7rmz0h0k6uu.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bcln3ggy7rmz0h0k6uu.png" alt="Image description" width="800" height="693"></a></p> <p><strong>Passo 3:</strong> Interceptar Requisições<br> Agora, vamos interceptar as requisições e fornecer respostas mockadas. Para isso, utilizamos o método <strong>route</strong> do <strong>Playwright</strong>:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3vevz4jum1zph1vkjk6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg3vevz4jum1zph1vkjk6.png" alt="Image description" width="800" height="383"></a></p> <p>Neste exemplo, todas as requisições para **/api/data serão interceptadas e uma resposta mockada será fornecida. Isso permite testar como a aplicação lida com esta resposta específica.</p> <p><strong>Passo 4:</strong> Executar o Teste<br> Com as requisições interceptadas, podemos continuar com a execução dos testes. Por exemplo, acessando uma URL e validando o comportamento da aplicação:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy4ghhb1hl239yh48xqia.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy4ghhb1hl239yh48xqia.png" alt="Image description" width="800" height="247"></a></p> <h2> Exemplo Completo </h2> <p>Vamos juntar tudo em um exemplo completo:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgyi5jtmfk4xutl8szmef.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgyi5jtmfk4xutl8szmef.png" alt="Image description" width="800" height="729"></a></p> <p><em>O mocking com Playwright é uma ferramenta poderosa para testar aplicações de forma eficiente e controlada. Ao simular respostas de APIs, você garante que os testes sejam independentes de serviços externos, mais rápidos e previsíveis. Experimente incorporar o mocking em seus testes e veja como ele pode facilitar o desenvolvimento e a manutenção da sua aplicação.</em></p> playwright mocking test frontend