Esercizio: Uso di Playwright in Visual Studio Code
Nella sezione precedente sono stati illustrati i concetti di base correlati alla configurazione dei test playwright e alla specifica di test playwright, ma è stata usata la riga di comando playwright per eseguire i test e visualizzare i report.
Cosa accade se fosse possibile eseguire questa operazione all'interno dell'ambiente di Visual Studio Code e disporre di un processo di interazione più visiva per la creazione, l'esecuzione e il debug, i test?
Con l'estensione Playwright Test per Visual Studio Code, si ottiene un'esperienza di sviluppo superiore e alcune funzionalità uniche degli strumenti che potrebbero diventare il tuo modo preferito per interagire con il runner di test Playwright. Presentazione
Come iniziare
La documentazione di Playwright include un tutorial completo con una guida video che ti consigliamo di guardare nel tuo tempo libero. In questa lezione si tenta di illustrare un subset di questi esercizi per consentire di acquisire familiarità con l'utilizzo.
Installare l'estensione Playwright
Installare l'estensione da Visual Studio Code Marketplace. Dopo l'installazione, è necessario individuare un'icona a forma di beaker sul lato sinistro della finestra di Visual Studio Code, come illustrato nello screenshot. Si noti che l'estensione rileva e raccoglie automaticamente le specifiche di test nel progetto.
Eseguire i test (headless)
Per eseguire i test in modalità headless (senza finestra del browser), assicurarsi che le opzioni Mostra browser e Mostra visualizzatore traccia siano deselezionate. Selezionare il pulsante verde play nella riga 3 del file example.spec.ts per eseguire il primo test. È anche possibile selezionare i pulsanti di riproduzione grigi, nella barra laterale dell’elenco di test, per eseguire tutti i test presenti nel file o per eseguire un test specifico.
Dopo aver eseguito i test, la scheda Risultati test apre una finestra in cui è possibile visualizzare l'intera cronologia delle esecuzioni dei test. È anche possibile eseguire il drill-down in un test e selezionare Esegui test per rieseguire tale test specifico.
Mostra browser (headed)
Se si vuole eseguire in modalità diretta , ovvero l'esecuzione dei test con una finestra del browser aperta, è possibile selezionare la casella Mostra browser prima di eseguire i test.
Playwright è un utente molto veloce, che può rendere difficile tenere traccia di ciò che accade nel test quando si usa Show browser. Per il debug, è consigliabile usare l'opzione Mostra visualizzatore traccia .
Mostra visualizzatore traccia (headed)
Selezionare la casella Mostra visualizzatore traccia e selezionare il pulsante di riproduzione verde per il secondo test. Verrà avviata la finestra del visualizzatore di traccia, che mostra una rappresentazione visiva dell'esecuzione del test.
Nella parte superiore verrà visualizzata una sequenza temporale del test su cui è possibile passare il puntatore del mouse per visualizzare lo stato del browser. Per selezionare un intervallo di tempo specifico su cui concentrarsi, selezionare e trascinare la sequenza temporale.
Nella barra laterale sinistra è possibile visualizzare le azioni eseguite durante l'esecuzione del test. Se si seleziona l'azione locator.click , verrà visualizzato un punto rosso sul pulsante Attività iniziali nello snapshot DOM.
A questo punto, selezionare l'asserzione expect.toBeVisible e verrà visualizzato lo snapshot DOM modificato per visualizzare la pagina Installazione con l'intestazione che si sta asserendo evidenziata. Sopra lo snapshot DOM, è possibile selezionare i pulsanti Prima e Dopo per visualizzare lo stato del DOM prima e dopo l'esecuzione dell'azione.
È possibile estrarre lo snapshot DOM in una finestra separata selezionando l'icona di estrazione nell'angolo in alto a destra. Può essere utile se si vuole esaminare il DOM durante il debug del test.
Parlando del debug, è anche possibile selezionare un localizzatore dallo snapshot DOM selezionando il pulsante Seleziona localizzatore nel pannello inferiore. Passare quindi il puntatore del mouse sugli elementi nello snapshot DOM per visualizzare il localizzatore per tale elemento. Selezionando un elemento, viene aggiunto alla casella Localizzatore nella parte inferiore del visualizzatore di traccia, dove è possibile modificarlo prima di copiarlo negli Appunti.
È possibile esplorare autonomamente il resto delle funzionalità del visualizzatore di traccia, ad esempio le schede Chiamata, Console, Rete e Origine .
Eseguire il debug dei test
Per il debug, è consigliabile eseguire i test con l'opzione Mostra visualizzatore traccia e usare la traccia del test per comprendere meglio cosa accade.
Tuttavia, con l'estensione Visual Studio Code, è anche possibile eseguire il debug dei test direttamente in Visual Studio Code, visualizzare i messaggi di errore, creare punti di interruzione e eseguire il debug in tempo reale dei test. Per altre informazioni, vedere la documentazione o guardare il video seguente per ottenere un'idea del supporto per il debug.
Un video di YouTube che illustra come generare un test di Playwright in Visual Studio Code.
Genera test
CodeGen genera automaticamente i test durante l'esecuzione di azioni nel browser, rendendo il modo più semplice per iniziare a creare test per flussi di lavoro complessi.
Per generare un test, selezionare il pulsante Registra nuovo nella barra laterale dei test in Visual Studio Code. Verrà visualizzata una finestra del browser in cui è possibile eseguire azioni che verranno registrate e trasformate in un test. Si noterà anche che viene creato un nuovo file nella tests cartella con il test generato.
Digitare un URL nella finestra del browser e iniziare a eseguire azioni come farebbe un utente. Verranno visualizzate le azioni registrate nel file di test in VS Code.
Ricreare il semplice test eseguito in precedenza passando al sito Web Playwright e selezionando il pulsante Inizia . È quindi possibile selezionare l'icona Assert Visibility sulla barra degli strumenti di Codegen e selezionare l'intestazione Installation per confermare che è visibile.
Altre informazioni sulla generazione di test sono disponibili nel video seguente.
Un video di YouTube su come generare test in Playwright
Passaggi successivi
In questa sezione si è appreso come usare l'estensione di Visual Studio Code per trovare ed eseguire test e come usare il visualizzatore di traccia per ottenere un'esperienza più visiva per il debug dei test.
Si è anche appreso come Visual Studio Code offre strumenti più avanzati per la generazione di test usando le funzionalità Registra un nuovo test, Pick Locator e Record at Cursor. A questo punto, è possibile applicare le nozioni fondamentali di Playwright in un progetto guidato per creare una specifica di test end-to-end per l'app di esempio.