Angular Academy · Lezione

Scrivere test con Playwright

Automatizzare i flussi del browser con Playwright

Scrivere test con Playwright è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Il primo test Playwright

Un test Playwright è una funzione asincrona che riceve fixture come page. Importate test ed expect da @playwright/test e descrivete uno scenario utente.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

La fixture page

L'oggetto page rappresenta una singola scheda del browser. Ogni test riceve una page nuova e isolata in un contesto pulito, quindi i test non condividono accidentalmente cookie o memoria.

Navigare con goto

page.goto(url) carica un URL e attende che la pagina sia pronta. In combinazione con baseURL nella configurazione, potete usare percorsi relativi.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Trovare gli elementi con i locator

Un locator è un riferimento all'elemento valutato quando serve e dotato di attesa automatica. Preferite locator semantici come getByRole, getByLabel e getByText ai fragili selettori CSS.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Scrivere e fare clic

Usate fill per impostare i valori degli input e click per premere i pulsanti. Playwright attende automaticamente che gli elementi siano visibili e abilitati prima di agire.

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

L'attesa automatica elimina le attese instabili

A differenza degli strumenti più datati, Playwright attende automaticamente gli elementi e che le asserzioni diventino vere. Quasi mai servono timeout manuali, ed è questo che rende stabili i test.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Raggruppare i test con describe

Usate test.describe per raggruppare scenari correlati e condividere la configurazione con beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Testare un percorso utente completo

Concatenate le azioni per rappresentare un flusso completo. Ogni passaggio si legge come uno script del comportamento dell'utente.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Eseguire i test

Eseguite tutte le spec dalla CLI. Aggiungete --headed per osservare il browser oppure --ui per aprire il test runner interattivo di Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Eseguire il debug degli errori

In caso di errore Playwright può acquisire screenshot, video e una traccia da riprodurre passo dopo passo. Il visualizzatore delle tracce mostra il DOM a ogni azione, facilitando la diagnosi degli errori instabili.

npx playwright test --trace on
npx playwright show-trace trace.zip

L'isolamento dei test è importante

Poiché ogni test riceve un contesto del browser separato, non fate affidamento sull'ordine o sullo stato condiviso tra i test. Configurate i dati necessari a ciascun test nel relativo beforeEach o direttamente nel test.

Verifica rapida

Perché è opportuno evitare waitForTimeout?

Riepilogo

Un test Playwright usa la fixture page: goto per navigare, locator semantici (getByRole, getByLabel) per trovare gli elementi e fill/click per interagire. L'attesa automatica elimina le attese instabili. Raggruppate i test con describe, eseguiteli con npx playwright test ed eseguite il debug con le tracce.

Domande Frequenti

La lezione «Scrivere test con Playwright» è gratuita?

Sì — il testo completo di «Scrivere test con Playwright» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Scrivere test con Playwright»?

Automatizzare i flussi del browser con Playwright Eserciti Angular 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 Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular 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 2 di 4.

Quanto tempo richiede la lezione «Scrivere test con Playwright»?

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 Angular Academy?

Sì. Ogni lezione Angular 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

← Torna a Angular Academy