Posted on: August 26, 2025 10:51 AM
Posted by: Renato
Categories: react reactjs playwright tests
Views: 260
End-to-End Testing React Components with Playwright
Testes de ponta a ponta (E2E) são essenciais para garantir que uma aplicação web se comporte corretamente da perspectiva do usuário. Enquanto os testes unitários e de integração se concentram em partes específicas de uma aplicação, os testes E2E verificam se todo o fluxo da aplicação funciona conforme o esperado. O Playwright, desenvolvido pela Microsoft, é um framework de testes moderno que se destaca na automação de interações do navegador para testes E2E. Este guia se aprofundará em como configurar e utilizar o Playwright para testar componentes React, abrangendo desde a configuração básica até recursos avançados.
1. Introdução ao Playwright
O Playwright é um framework de testes de código aberto projetado para lidar com a complexidade de aplicações web modernas. Ele oferece diversas vantagens para testes E2E:
- Testes Cross-Browser: O Playwright suporta múltiplos navegadores (Chromium, Firefox e WebKit) e permite testes em diferentes plataformas e dispositivos.
- Interação Automatizada: Com o Playwright, você pode simular interações do usuário, como cliques, digitação e envios de formulários. Interceptação de Rede: Simule e inspecione solicitações de rede para simular diferentes respostas do servidor e testar diversos cenários.
- Modo Headless: Execute testes em modo headless (sem interface gráfica do usuário) para execução mais rápida e consumo reduzido de recursos.
2. Configurando o Playwright para um Projeto React Etapa
1: Instalar o Playwright
Para começar, você precisa instalar o Playwright e os binários necessários do navegador. Execute os seguintes comandos no diretório do seu projeto:
npm install --save-dev @playwright/test
npx playwright install
@playwright/test: The Playwright test runner package.npx playwright install: Installs the required browser binaries for Playwright to work.
Step 2: Configure Playwright
Create a configuration file named playwright.config.ts in the root of your project. This file defines settings and options for your tests:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'Desktop Chrome',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'Desktop Firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'Desktop Safari',
use: { ...devices['Desktop Safari'] },
},
],
use: {
baseURL: 'http://localhost:3000', // Adjust URL to match your development server
},
});
projects: Defines different browser configurations for testing.use.baseURL: Specifies the base URL for the application being tested.
Step 3: Create Your First Test
Create a test file in the tests directory (or any directory of your choice). For example, create app.spec.ts to write your E2E tests:
import { test, expect } from '@playwright/test';
test('should load the homepage and display the correct content', async ({ page }) => {
await page.goto('/'); // Uses the baseURL defined in the configuration
// Check if the page title is correct
await expect(page).toHaveTitle(/React App/);
// Check if a specific element is visible
const header = await page.locator('h1');
await expect(header).toHaveText('Welcome to React');
// Simulate a user interaction
await page.click('button#login');
await expect(page.locator('text="Login successful"')).toBeVisible();
});
Explanation:
page.goto('/'): Navigates to the base URL.expect(page).toHaveTitle: Asserts that the page title matches the expected text.page.locator: Finds elements using CSS selectors.page.click: Simulates a click event.expect(...).toBeVisible(): Asserts that an element is visible.
3. Running Your Tests
To execute your Playwright tests, use the following command:
npx playwright test
This command runs all test files in the tests directory. You can also use additional options:
- Run in Headless Mode: Tests run without a graphical user interface for faster execution.
npx playwright test --headless
- Run in Specific Browser: Execute tests in a specific browser configuration.
npx playwright test --project=Desktop Chrome
- Run Tests in Watch Mode: Automatically rerun tests when files change.
npx playwright test --watch
4. Advanced Testing Scenarios
Network Interception and Mocking
Playwright allows you to intercept network requests and mock responses. This is useful for testing how your application handles different server responses:
import { test, expect } from '@playwright/test';
test('should handle network errors', async ({ page }) => {
await page.route('**/api/data', (route) =>
route.fulfill({ status: 500, body: 'Internal Server Error' })
);
await page.goto('/');
// Test behavior when the API returns an error
await expect(page.locator('text="Error loading data"')).toBeVisible();
});
Explanation:
page.route: Intercepts network requests matching the specified pattern.route.fulfill: Mocks a response with a status code and body.
Screenshots and Videos
Capturing screenshots and videos helps in debugging and verifying test results visually:
import { test, expect } from '@playwright/test';
test('should take a screenshot of the homepage', async ({ page }) => {
await page.goto('/');
await page.screenshot({ path: 'homepage.png' });
});
Explanation:
page.screenshot: Captures a screenshot of the page and saves it to the specified path.
Test Fixtures
Fixtures allow you to set up and tear down common test scenarios, improving test organization:
import { test, expect } from '@playwright/test';
test.describe('User login', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('should log in and display user profile', async ({ page }) => {
await page.fill('input[name="username"]', 'user');
await page.fill('input[name="password"]', 'password');
await page.click('button[type="submit"]');
await expect(page.locator('text="Welcome, user"')).toBeVisible();
});
});
Explanation:
test.beforeEach: Runs before each test in the describe block, setting up the initial state.page.fill: Simulates typing into an input field.
5. Integrating Playwright with CI/CD
Integrating Playwright tests into your Continuous Integration/Continuous Deployment (CI/CD) pipeline ensures that your tests run automatically with every build. Here’s an example configuration for GitHub Actions:
Create a .github/workflows/playwright.yml file:
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm install
- run: npx playwright install
- run: npx playwright test
Explanation:
actions/checkout: Checks out the repository.actions/setup-node: Sets up Node.js.npx playwright install: Installs browser binaries.npx playwright test: Runs the Playwright tests.
6. Conclusão
O Playwright fornece uma estrutura robusta para testes de ponta a ponta de aplicativos React, permitindo que você verifique se seu aplicativo funciona corretamente em diferentes navegadores e cenários. Sua API poderosa, suporte a vários navegadores e recursos avançados o tornam uma excelente opção para testes web modernos.
Ao integrar o Playwright ao seu fluxo de trabalho, você garante que seu aplicativo React ofereça uma experiência de usuário perfeita, detecte possíveis problemas antecipadamente e mantenha um software de alta qualidade. Para mais informações e recursos avançados, consulte a documentação do Playwright.
https://playwright.dev/
Explore como o Playwright pode aprimorar sua estratégia de testes personalizando sua configuração, aproveitando recursos avançados de teste e integrando-se aos seus pipelines de CI/CD para garantir uma cobertura de teste abrangente e a confiabilidade do aplicativo.
Fonte: https://dev.to/samuel_kinuthia/end-to-end-testing-react-components-with-playwright-part-1-3c15
- https://www.testrigtechnologies.com/blogs/integrating-playwright-with-react/
Donate to Site
Renato
Developer