Comandi Cypress e comandi personalizzati: 21 fatti importanti

Comandi Cypress Cy

Il cipresso è un potente framework di test che consente agli sviluppatori di automatizzare i test end-to-end per applicazioni web. Uno di le caratteristiche principali di cipresso è il suo vasto set of comandi incorporati, che semplificano l'interazione con gli elementi di una pagina web. Oltre a questi comandi incorporati, Cypress ti consente anche di creare comandi personalizzati, che possono migliorare ulteriormente le capacità delle tue prove In questa sezione, esploreremo alcuni di il più comunemente usato Comandi personalizzati di Cypress.

Comando clic Cypress

Il cipresso click() Il comando viene utilizzato per simulare un utente che fa clic su un elemento in una pagina Web. Questo comando è particolarmente utile quando si desidera interagire con pulsanti, collegamenti o qualsiasi altro elemento cliccabile. Per usare il click() comando, è sufficiente fornire un selettore che identifichi l'elemento su cui si desidera fare clic. Cypress simulerà quindi un clic evento su quell'elemento.

Ecco un esempio di come puoi usare il click() comando in Cypress:

javascript
cy.get('button').click();

In questo esempio, il get() comando viene utilizzato per individuare un elemento pulsante sulla pagina, e poi il click() comando è usato per simulare un clic on quel bottone.

Comando doppio clic Cypress

Il cipresso dblclick() comando è simile a click() comando, ma è specificamente utilizzato per simulare un doppio clic evento su un elemento. Doppio clic è spesso usato per innescare determinate azioni o comportamenti su una pagina web. Per usare il dblclick() comando, è necessario fornire un selettore che identifichi l'elemento su cui si desidera fare doppio clic.

Ecco un esempio di come puoi usare il dblclick() comando in Cypress:

javascript
cy.get('.element').dblclick();

In questo esempio, il get() comando viene utilizzato per individuare un elemento con la classe “elemento” sulla pagina, e poi il dblclick() comando è usato per simulare un doppio clic su quell'elemento.

Comando clic destro Cypress

Il cipresso rightclick() comando è usato per simulare un clic destro evento su un elemento. Clic destro si apre spesso un menu contestuale con opzioni aggiuntive o azioni per l'usor scegliere da. Per usare il rightclick() comando, è necessario fornire un selettore che identifichi l'elemento su cui si desidera fare clic con il pulsante destro del mouse.

Ecco un esempio di come puoi usare il rightclick() comando in Cypress:

javascript
cy.get('#element').rightclick();

In questo esempio, il get() comando viene utilizzato per individuare un elemento con l'id “elemento” sulla pagina, e poi il rightclick() comando è usato per simulare un clic destro su quell'elemento.

Comando tipo Cypress

Il cipresso type() Il comando viene utilizzato per simulare la digitazione del testo in un campo di input o in un'area di testo su una pagina web. Questo comando è particolarmente utile quando si desidera testare input del modulo or funzionalità di ricerca. Per usare il type() comando, è necessario fornire un selettore che identifichi il campo di immissione o textarea, quindi fornire il testo che si desidera digitare.

Ecco un esempio di come puoi usare il type() comando in Cypress:

javascript
cy.get('input[name="username"]').type('JohnDoe');

In questo esempio, il get() comando viene utilizzato per individuare un campo di input con il nome “nomeutente” sulla pagina, e poi il type() comando viene utilizzato per simulare la digitazione il testo “JohnDoe"In quel campo di input.

Comando Clear Cypress

Il cipresso clear() Il comando viene utilizzato per cancellare il testo da un campo di input o da un'area di testo in una pagina web. Questo comando viene spesso utilizzato in combinazione con il type() comando per cancellare qualsiasi testo esistente prima di digitare nuovo testo. Per usare il clear() comando, è necessario fornire un selettore che identifichi il campo di immissione o area di testo.

Ecco un esempio di come puoi usare il clear() comando in Cypress:

javascript
cy.get('input[name="username"]').clear();

In questo esempio, il get() comando viene utilizzato per individuare un campo di input con il nome “nomeutente” sulla pagina, e poi il clear() comando è usato per cancellare qualsiasi testo esistente da quel campo di input.

Comando Cypress Check

Il cipresso check() comando è usato per controllare una casella di controllo o un pulsante di opzione su una pagina web. Questo comando è particolarmente utile quando si desidera testare la selezione di opzioni o scelte. Per usare il check() comando, è necessario fornire un selettore che identifichi il controllocasella o pulsante di opzione.

Ecco un esempio di come puoi usare il check() comando in Cypress:

javascript
cy.get('input[type="checkbox"]').check();

In questo esempio, il get() comando viene utilizzato per individuare un elemento casella di controllo sulla pagina, e poi il check() comando è usato per controllare quella casella di controllo.

Comando di selezione Cypress

Il cipresso select() comando viene utilizzato per selezionare un opzione da un menu a discesa menu su una pagina web. Questo comando è particolarmente utile quando si desidera testare la selezione di opzioni da un menu a discesa. Per usare il select() comando, è necessario fornire un selettore che identifichi il menu a tendina, quindi fornire il valore o testo di l'opzione vuoi selezionare.

Ecco un esempio di come puoi usare il select() comando in Cypress:

javascript
cy.get('select[name="country"]').select('USA');

In questo esempio, il get() comando viene utilizzato per individuare un menu a discesa menu con il nome “paese” sulla pagina, e poi il select() comando viene utilizzato per selezionare l'opzione con il testo "USA" da quella discesa.

Comando grilletto Cypress

Il cipresso trigger() comando viene utilizzato per attivare un evento su un elemento di una pagina web. Questo comando è particolarmente utile quando si vuole simulare un evento specifico, come un passaggio del mouse or una pressione di un tasto. Per usare il trigger() comando, è necessario fornire un selettore che identifichi l'elemento, quindi fornire l'evento vuoi innescare.

Ecco un esempio di come puoi usare il trigger() comando in Cypress:

javascript
cy.get('.element').trigger('mouseover');

In questo esempio, il get() comando viene utilizzato per individuare un elemento con la classe “elemento” sulla pagina, e poi il trigger() comando è usato per simulare un passaggio del mouse evento su quell'elemento.

È prodotto in solo alcuni esempi of i comandi personalizzati che Cypress fornisce. Facendo leva questi comandi, puoi creare test potenti ed espressivi che simulano accuratamente interazioni dell'utente con la tua applicazione web. Comandi personalizzati in Cypress aiuta a semplificare il tuo codice di prova e renderlo più leggibile e gestibile. Quindi vai avanti ed esplora l'intera gamma of Comandi personalizzati di Cypress per migliorare il flusso di lavoro dei test.

Comandi personalizzati Cypress

Comandi personalizzati in Cypress ti permettono di estendere la funzionalità of il framework di test di Cypress creando i tuoi comandi riutilizzabili. Questi comandi personalizzati può essere utilizzato per incapsulare sequenze complesse di azioni, affermazioni o qualsiasi altra funzionalità che ti ritrovi a usare frequentemente nei tuoi test. In questa sezione, esploreremo diversi aspetti of Comandi personalizzati di Cypress e come possono migliorare il flusso di lavoro dei test.

Comando personalizzato genitore in Cypress

Un comando personalizzato padre in Cypress è un comando che incapsula una sequenza di azioni o asserzioni. Serve come un'astrazione di alto livello, permettendoti di scrivere test più leggibili e gestibili. Creando un comando personalizzato padre, puoi ridurre duplicazione del codice e rendi i tuoi test più modulari.

Per creare un comando personalizzato padre, puoi utilizzare il file Cypress.Commands.add() metodo fornito da Cypress. Questo metodo accetta due argomenti: il nome del comando personalizzato e una funzione che definisce il comportamento del comando. All'interno della funzione, puoi usare esistente Comandi di cipresso compiere azioni o fare affermazioni.

Ecco un esempio di comando personalizzato padre che accede a un utente:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Con questo comando personalizzato, puoi semplicemente chiamare cy.login(username, password) nei tuoi test da eseguire l'accesso azione. Questo migliora la leggibilità dei tuoi test e li rende più facili da mantenere.

Comando personalizzato figlio in Cypress

Un comando figlio personalizzato in Cypress è un comando che estende un comando esistente fornito da Cypress. Ti permette di aggiungere funzionalità aggiuntive o modificare il comportamento di il comando esistente. Questo può essere utile quando si desidera personalizzare il comportamento di un comando in base alle proprie esigenze le vostre specifiche esigenze di test.

Creare un comando figlio personalizzato, è possibile utilizzare il comando Cypress.Commands.overwrite() metodo fornito da Cypress. Questo metodo accetta due argomenti: il nome del comando che si desidera estendere e una funzione che ne definisce il comportamento il comando esteso. All'interno della funzione, puoi chiamare il comando originale utilizzando Cypress.Commands.overwrite().

Ecco un esempio di un comando figlio personalizzato che estende il cy.click() comando per aggiungere un ritardo prima di cliccare:

javascript
Cypress.Commands.overwrite("click", (originalFn, subject, options) => {
const delay = options && options.delay ? options.delay : 500;
cy.wait(delay);
originalFn(subject);
});

Con questo comando personalizzato, ora puoi passare un ulteriore delay opzione per il cy.click() comando da introdurre un ritardo prima il clic l'azione viene eseguita. Ciò consente di simulare scenari in cui l'usor potrebbe prendere a volte interagire con l'elemento

Doppi comandi personalizzati in Cypress

Doppi comandi personalizzati in cipresso sono una combinazione di genitore e comandi personalizzati figlio. Incapsulano una sequenza di azioni o asserzioni mentre estendono anche un comando esistente. Questo fornisce un modo potente creare comandi riutilizzabili e personalizzabili.

Creare un doppio comando personalizzato, puoi utilizzare sia il file Cypress.Commands.add() e Cypress.Commands.overwrite() metodi forniti da Cypress. Ciò consente di definire il comportamento del comando personalizzato ed estendere un comando esistente a lo stesso tempo.

Ecco un esempio di un doppio comando personalizzato che accede a un utente ed esegue un'azione specifica:

javascript
Cypress.Commands.add("loginAndPerformAction", (username, password, action) => {
cy.login(username, password);
cy.get("#action-button").click();
cy.contains(action).click();
});

Con questo comando personalizzato, puoi accedere a un utente ed eseguire un'azione specifica in un unico comando. Ciò migliora la leggibilità e la riusabilità dei test.

Sovrascrivere i comandi Cypress esistenti

In Cypress, puoi anche sovrascrivere esistente Comandi di cipresso modificare il loro comportamento. Questo può essere utile quando si desidera personalizzare il comportamento di un comando in base alle proprie esigenze le vostre specifiche esigenze di test.

Da sovrascrivere un comando Cypress esistente, è possibile utilizzare il comando Cypress.Commands.overwrite() metodo fornito da Cypress. Questo metodo accetta due argomenti: il nome del comando che vuoi sovrascrivere e una funzione che ne definisce il comportamento il comando sovrascritto. All'interno della funzione, puoi chiamare il comando originale utilizzando Cypress.Commands.overwrite().

Importazione di comandi personalizzati di Cypress

Dopo aver definito i comandi personalizzati, puoi importarli in i file di test di Cypress per usarli nei tuoi test. Cipresso fornisce un modo semplice per importare comandi personalizzati utilizzando il file support cartella.

Per importare comandi personalizzati, crea un file detto commands.js nel support cartella di il tuo progetto Cypress. in questo file, puoi importare i tuoi comandi personalizzati utilizzando il file import dichiarazione e registrarli con Cypress utilizzando il file Cypress.Commands.add() or Cypress.Commands.overwrite() metodi.

Comandi personalizzati Cypress IntelliSense

Cipresso fornisce Supporto IntelliSense per comandi personalizzati, semplificando la scrittura di test con comandi personalizzati. IntelliSense fornisce completamento del codice e documentazione per comandi personalizzati, aiutandoti a scrivere test in modo più efficiente.

Per abilitare IntelliSense per i comandi personalizzati, è necessario installare il file @types/cypress pacchetto in il tuo progetto. Questo pacchetto fornisce Definizioni TypeScript per Cypress, incluso il supporto per i comandi personalizzati.

Una volta installato il @types/cypress pacchetto, puoi iniziare a utilizzare IntelliSense per i comandi personalizzati in i file di test di Cypress. IntelliSense fornirà suggerimenti e documentazione per i comandi personalizzati durante la digitazione, semplificando la scrittura dei test.

In conclusione, i comandi personalizzati in Cypress lo sono una caratteristica potente che ti permette di estendere la funzionalità of il framework di test di Cypress. Ti permettono di creare comandi riutilizzabili e personalizzabili, migliorando la leggibilità, la manutenibilità e l'efficienza dei test. Se è necessario incapsulare una sequenza di azioni, estendere un comando esistente o sovrascrivere un comando esistente, i comandi personalizzati forniscono modo flessibile e intuitivo per migliorare il flusso di lavoro dei test.

Esempi e casi d'uso

Esempio di funzione di accesso

Uno dei i casi d'uso più comuni per i comandi personalizzati in Cypress sta implementando una funzione di accesso. Questo ti permette di riutilizzare facilmente la logica di accesso operanti in più prove, Rendendo la tua suite di test più efficiente e gestibile.

Diciamo che hai un'applicazione web con una pagina di accesso ciò richiede un nome utente e parola d'ordine. Invece di ripetere le fasi di accesso in ogni test, puoi creare un comando personalizzato da gestire il processo di accesso.

Ecco un esempio di come puoi definire un comando personalizzato per l'accesso:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Con questo comando personalizzato, ora puoi accedere facilmente semplicemente chiamando cy.login(username, password) nelle tue prove Ciò migliora la leggibilità dei test e riduce la duplicazione del codice.

Esempio di comando Riprova

Un altro esempio utile di comandi personalizzati in Cypress sta implementando un meccanismo di ripetizione per test traballanti. Test traballanti sono test che occasionalmente falliscono a causa di problemi intermittenti, come ritardi di rete or condizioni di gara.

Cypress fornisce un built-in retry comando che consente di riprovare un comando specifico o affermazione più volte finché non passa o raggiunge il numero massimo di tentativi.

Di seguito è riportato un esempio di come è possibile definire un comando personalizzato che riprova un comando specifico:

javascript
Cypress.Commands.add("retryCommand", { prevSubject: true }, (subject) => {
return cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

In questo esempio, il comando personalizzato retryCommand prende un soggetto as un argomento e riprova il comando should("be.visible") on quel soggetto per un massimo of 5 secondi.

Puoi quindi utilizzare questo comando personalizzato nei tuoi test in questo modo:

javascript
cy.get(".element").retryCommand();

Questo comando personalizzato aiuta a gestire test traballanti riprovando automaticamente il comando finché non passa o scade. Migliora la stabilità dei vostri test e riduce falsi positivi.

Promise e Async/Await Esempio

Cypress ti consente anche di lavorare con promesse e sintassi async/await, rendendola più facile da gestire operazioni asincrone nelle tue prove Puoi creare comandi personalizzati che sfruttano le promesse o async/await to perform operazioni complesse o aspettare condizioni specifiche.

Ecco un esempio di come puoi definire un comando personalizzato che attende che un elemento sia visibile usando async/await:

javascript
Cypress.Commands.add("waitForElement", { prevSubject: true }, async (subject) => {
await cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

In questo esempio, il comando personalizzato waitForElement prende un soggetto as un argomento e attende che l'elemento sia visibile utilizzando il should("be.visible") asserzione.

Puoi quindi utilizzare questo comando personalizzato nei tuoi test in questo modo:

javascript
cy.get(".element").waitForElement();

Questo comando personalizzato semplifica la manipolazione of operazioni asincrone nei tuoi test, rendendoli più leggibili e gestibili.

Questi esempi dimostrare il potere e flessibilità dei comandi personalizzati in Cypress. Creando comandi personalizzati riutilizzabili, puoi migliorare l'efficienza, leggibilità e stabilità di la tua suite di test.
Conclusione

In conclusione, Comandi di cipresso e Comandi personalizzati di Cypress cambiano ciclicamente strumenti potenti che può migliorare notevolmente la tua automazione di test sforzi. Il incorporato Comandi di cipresso fornire un'ampia gamma di funzionalità con cui interagire la tua applicazione mentre la lavorazione del prodotto finito avviene negli stabilimenti del nostro partner i comandi personalizzati ti permettono di creare comandi riutilizzabili e specializzati su misura per le tue esigenze specifiche. Facendo leva questi comandi, tu puoi scrivere test puliti, concisi e gestibili che sono facili da capire e aggiornare. Che tu lo sia un principiante or un collaudatore esperto, incorporando Comandi di cipresso e i comandi personalizzati nel tuo flusso di lavoro di test semplificheranno senza dubbio il tuo processo di test e aiutarti a consegnare software di alta qualità. Quindi, perché aspettare? Inizia ad esplorare il mondo of Comandi di cipresso e comandi personalizzati oggi e prendi la tua automazione di test a il livello successivo!

Domande frequenti

Come si installa Cypress?

Per installare Cypress, puoi seguire questi passaggi:

1. Aperto il tuo terminale or prompt dei comandi.
2. Spostarsi il tuo progetto directory.
3. Esegui il comando npm install cypress per installare Cypress in locale.

Come posso aggiornare Cypress all'ultima versione?

Per aggiornare Cypress a l'ultima versione, Puoi usare di test command:

npm update cypress

Questo aggiornerà Cypress a l'ultima versione disponibile.

Come posso utilizzare i comandi personalizzati in Cypress?

Per utilizzare i comandi personalizzati in Cypress, è necessario definirli in il tuo progettofile di supporto di. Ecco come puoi farlo:

1. Creare un nuovo file detto commands.js nel cypress/support directory.
2. Definisci i tuoi comandi personalizzati utilizzando il file Cypress.Commands.add() metodo.
3. Risparmi il file e riavvia il tuo collaudatore Cypress.

Ora puoi usare i tuoi comandi personalizzati durante i tuoi test Cypress.

Perché i miei comandi personalizzati non funzionano in Cypress?

Se i tuoi comandi personalizzati non funzionano in Cypress, assicurati di controllare di test :

1. Assicurati di aver definito correttamente i comandi personalizzati in il file di supporto.
2. Verificarlo il file di supporto è correttamente incluso in la tua configurazione Cypress.
3. Verificare la presenza di eventuali errori di sintassi o errori di battitura le definizioni dei comandi personalizzati.

Come posso riprovare un comando personalizzato in Cypress?

Per riprovare un comando personalizzato in Cypress, puoi utilizzare il file .retry() metodo. Ecco un esempio:

javascript
cy.customCommand().retry(3);

Questo riproverà il comando personalizzato fino a 3 volte se fallisce.

Come posso utilizzare asserzioni personalizzate in Cypress?

Per utilizzare affermazioni personalizzate in Cypress, puoi definirli usando il chai libreria di asserzioni. Ecco un esempio:

javascript
chai.Assertion.addMethod('customAssertion', function(expected) {
// Assertion logic goes here
});

Una volta definito, puoi usare il tuo affermazioni personalizzate nei tuoi test Cypress.

Come posso utilizzare i selettori personalizzati in Cypress?

Per utilizzare selettori personalizzati in Cypress, puoi definirli usando il cy.get() metodo. Ecco un esempio:

javascript
Cypress.Commands.add('customSelector', (selector) => {
return cy.get(`[data-custom="${selector}"]`);
});

Una volta definito, puoi usare il tuo selettori personalizzati nei tuoi test Cypress.

Come posso eseguire il debug dei miei test Cypress?

Per eseguire il debug dei test Cypress, puoi utilizzare il file cy.debug() comando. Ecco un esempio:

javascript
cy.customCommand().debug();

Questo farà una pausa l'esecuzione della prova e aperto la console di debug del test runner di Cypress.

Come posso migliorare le prestazioni dei miei test Cypress?

Per migliorare la prestazione dei tuoi test Cypress, puoi seguire queste buone pratiche:

1. Usa il cy.wait() giudiziosamente da evitare ritardi inutili.
2. Ridurre al minimo l'uso of cy.get() E l'uso selettori personalizzati quando possibile.
3. Usa il cy.intercept() comando per stub o derisione richieste di rete.
4. Eseguire i test in modalità senza testa (--headless) per esecuzione più rapida.

Dove posso trovare la documentazione per Cypress?

È possibile trovare la documentazione ufficiale per Cipresso a https://docs.cypress.io. La documentazione fornisce informazioni dettagliate su come utilizzare Cypress, comprese le guide, Riferimenti API, ed esempi.