0Pricing
React Academy · Lezione

Introduzione a Playwright per React

Scriva test Playwright che aprano un browser, interagiscano con l'app React e verifichino i risultati.

Introduzione a Playwright per React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cos'è Playwright

Playwright è un framework di test E2E per Node.js che controlla i browser reali Chromium, Firefox e WebKit. È ideale per testare i flussi completi di un'app React, inclusi routing, autenticazione e interazioni con le API.

Installazione

Installi Playwright e i relativi binari dei browser con un solo comando.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Configurazione di Playwright per React

Configuri Playwright in modo che avvii il server di sviluppo prima di eseguire i test.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Scrivere il primo test

I test utilizzano page, un oggetto che rappresenta una pagina del browser. Navighi verso un URL, interagisca con gli elementi e verifichi il risultato.

import { test, expect } from '@playwright/test';

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Locator

I locator di Playwright sono simili alle query di RTL. Preferisca i locator basati sui ruoli, perché sono più resilienti.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Fare clic e digitare

Interagisca con gli elementi utilizzando click(), fill(), press() e selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Attendere la navigazione

Playwright attende automaticamente che gli elementi siano pronti, ma può attendere esplicitamente il completamento della navigazione o delle richieste di rete.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Verifiche

Utilizzi expect(locator) con i matcher integrati di Playwright. Questi attendono automaticamente che la condizione risulti vera.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Acquisire screenshot in caso di errore

Quando configurato, Playwright acquisisce automaticamente screenshot e trace in caso di errore del test. Abiliti questa opzione nella configurazione.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Eseguire i test

Esegua tutti i test in modalità headless oppure utilizzi --ui per aprire l'explorer interattivo dei test, che consente di esaminare visivamente i test passo dopo passo.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Trace Viewer di Playwright

Quando un test non riesce, apra il file di trace con npx playwright show-trace per riprodurre il test passo dopo passo, con screenshot, richieste di rete e log della console.

Integrazione CI

In CI, Playwright viene eseguito in modalità headless per impostazione predefinita. Installi i browser con npx playwright install --with-deps ed esegua i test come un normale script npm.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Verifica rapida

Quale metodo di Playwright dovrebbe utilizzare per compilare un campo di input testuale?

Riepilogo

Playwright testa browser reali e attende automaticamente che gli elementi siano pronti. Utilizzi locator basati sui ruoli, fill() e click() per le interazioni, expect(locator) per le verifiche e la modalità --ui per il debug visivo durante lo sviluppo.

Domande Frequenti

La lezione «Introduzione a Playwright per React» è gratuita?

Sì — il testo completo di «Introduzione a Playwright per React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Introduzione a Playwright per React»?

Scriva test Playwright che aprano un browser, interagiscano con l'app React e verifichino i risultati. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Introduzione a Playwright per React»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Integration testing con React Testing Library
  2. Test di UI asincrone e chiamate API con MSW
  3. Introduzione a Playwright per React
  4. Test end-to-end di form e flussi utente
← Torna a React Academy