Sommario

• Cos'è Cypress Commands?
• Comandi di interazione dell'interfaccia utente forniti da Cypress
• Comando clic destro Cypress
• Comando doppio clic Cypress
• Comando clic Cypress
• Comando grilletto Cypress
• Comando tipo Cypress
• Comando di selezione Cypress
• Comando Cypress Check
• Comando Clear Cypress
• I comandi Cypress sono asincroni?
• Comandi personalizzati Cypress
• Concatenamento di comandi di asserzione in Cypress
• Sovrascrivere i comandi Cypress esistenti
• Comandi concatenabili Cypress
• Comando personalizzato genitore in Cypress
• Comando personalizzato figlio in Cypress
• Doppio comando personalizzato in Cypress
• Comandi personalizzati Cypress con esempio
• Comandi di importazione Cypress
• Comando personalizzato Cypress IntelliSense

Cos'è Cypress Commands?

Cypress ci fornisce API e metodi per interagire con l'interfaccia utente dell'applicazione. Sono conosciuti come Cypress Commands e aiutano con l'interazione dell'applicazione web. Tutti i comandi disponibili hanno metodi incorporati e invocheremo i metodi solo nei nostri casi di test. I comandi Cypress simuleranno un'azione simile a quella di un utente che tenta di eseguire operazioni sull'applicazione.

Comandi di interazione dell'interfaccia utente forniti da Cypress

Ci sono diversi comandi forniti da Cypress che interagiscono con l'interfaccia utente. Esamineremo l'elenco di tutti i comandi in dettaglio.

• .clic()
• .dblclic()
• .clic destro()
• .genere()
• .chiaro()
• .dai un'occhiata()
• .deseleziona()
• .Selezionare()
• .grilletto()

Comando clic Cypress

.clic() – Questo comando è per clicca qualsiasi elemento sul DOM.

Le seguenti sono le sintassi per il comando clic

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Come puoi vedere sopra, il clic accetta parametri come opzioni, posizione, ed coordinate.

Opzioni

Le possibili opzioni che possono essere passate al clic sono

posizioni

I diversi tipi di posizioni che possono essere passate a .click() sono

• centro (difetto)
• a sinistra
• destra
• top
• in alto a sinistra
• in alto a destra
• fondo
• in basso a sinistra
• in basso a destra

Esempio

cy.get('btn').click() //facendo clic sul pulsante cy.get('btn').click({ force: true }) //facendo clic sul pulsante passando l'opzione 'force' come true cy. get('btn').click('bottomRight') // facendo clic sul pulsante in basso a destra cy.get('btn').click(10, 70, { force: true }) // facendo clic sul pulsante con valore di posizione e forza vero

Comando doppio clic Cypress

Il doppio clic può essere ottenuto utilizzando dblclick() sintassi in Cypress.

Sintassi

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Opzioni

.dblclick() accetta tutte le opzioni accettate da .click(). Puoi trovare le opzioni nella sezione sopra.

posizioni

Tutte le possibili posizioni che sono specificate in .click() sono disponibili anche per dblclick(). L'elenco delle posizioni è consultabile nella sezione precedente.

Esempio

cy.get('button').dblclick() // Doppio clic sul pulsante cy.focused().dblclick() // Doppio clic sull'elemento con focus cy.contains('Home').dblclick() // Doppio fare clic sul primo elemento contenente 'Home' cy.get('button').dblclick('top') // Fare doppio clic sul pulsante in alto cy.get('button').dblclick(30, 10) // Fare doppio clic sulle coordinate 30 e 10

Comando clic destro Cypress

Questo comando Cypress, fa clic con il tasto destro sull'elemento DOM .rightclick() il comando non aprirà i menu contestuali del browser.rightclick() viene utilizzato per testare la gestione degli eventi relativi al clic con il tasto destro nell'applicazione come contextmenu.

Sintassi

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Opzioni

Come abbiamo visto sopra, tutte le opzioni accettate da .click() comando può essere configurato con .rightclick() anche il comando.

posizioni

Tutte le possibili posizioni che possono essere passate al .rightclick() è uguale a .click() menzionato sopra.

Esempio

cy.get('.welcome').rightclick() // Fare clic con il tasto destro su .welcome cy.focused().rightclick() // Fare clic con il tasto destro sull'elemento con focus cy.contains('January').rightclick() / / Fare doppio clic sul primo elemento contenente 'gennaio' cy.get('button').dblclick('topRight') // Fare doppio clic sul pulsante in alto a destra in posizione cy.get('button').dblclick(80, 20 ) // Fare doppio clic sulle coordinate 80 e 20

Comando tipo Cypress

.type() il comando inserisce il valore in un elemento DOM.

Sintassi

.type(text)
.type(text, options)

argomenti

.type() accetta la stringa come argomento. Valori passati a .type() può includere una qualsiasi delle sequenze di caratteri speciali fornite di seguito.

Opzioni

Possiamo passare gli oggetti come opzioni per modificare il comportamento predefinito di .type()

Esempio

Vediamo esempi per .type() command

cy.get('textarea').type('Hey there') // inserisci il valore nell'area di testo cy.get('body').type('{shift}') //abilita il tasto Maiusc cy.get ('body').type('{rightarrow}') //digita l'evento freccia destra 

Comando Clear Cypress

Il comando Clear cancellerà i valori nell'area di input o nel campo di testo.

Sintassi

La sintassi per il comando clear è la seguente.

.clear()
.clear(options)

Opzioni

Esamineremo le opzioni che possono essere passate al .clear() comando.

Esempio

Esaminiamo gli esempi per un comando chiaro

cy.get('[type="text"]').clear() // Cancella input di tipo text cy.get('textarea').type('Benvenuto!').clear() // Cancella textarea cy .focused().clear() // Cancella input/textarea focalizzati

Comando Cypress Check

Il comando check controllerà o, in parole più semplici, segnerà le caselle di controllo oi pulsanti di opzione. Puoi deselezionare le caselle di controllo o i pulsanti di opzione utilizzando il pulsante .uncheck() comando.

Sintassi

Capiremo la sintassi per il comando check in Cypress.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Opzioni

Le possibili opzioni che possono essere passate per selezionare/deselezionare i comandi sono le stesse del comando clear elencato sopra

Esempio

Esamineremo l'esempio di come possiamo usare i comandi check e uncheck.

cy.get('[type="checkbox"]').check() // Seleziona l'elemento checkbox cy.get('[type="radio"]').first().check() // Controlla la prima radio element cy.get('[type="radio"]').check('Male') //Controlla l'elemento radio che ha Male cy.get('[type="checkbox"]').uncheck() / /Deseleziona la casella elemento cy.get('[type="radio"]').uncheck() //Deseleziona il primo elemento radio cy.get('[type="checkbox"]').uncheck('Colazione') // Deseleziona l'elemento colazione

Comando di selezione Cypress

Il comando select Cypress ti permette di selezionare elementi all'interno di a etichetta.

Sintassi

La seguente è la sintassi per il comando select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Opzioni

Possiamo passare le opzioni per modificare il comportamento predefinito del comando select.

Esempio

Diamo un'occhiata agli esempi per il comando select

cy.get('select').select('butterfly') // Seleziona l'opzione 'butterfly' cy.get('select').select(0) // seleziona l'elemento con 0 index cy.get('select ').select(['pappagallo', 'pavone']) //seleziona l'opzione pappagallo e pavone

Comando grilletto Cypress

Il comando Trigger consente di attivare qualsiasi evento sull'elemento.

Sintassi

Esamineremo la sintassi per accedere al comando trigger

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Opzione

Il comando Trigger accetta tutte le opzioni menzionate per .clear() comando. Inoltre, ci sono poche opzioni che possiamo configurare elencate di seguito.

Esempio

Cerchiamo diversi modi di utilizzare .trigger() nel codice.

cy.get('a').trigger('mouseover') // Attiva l'evento mouseover su un collegamento cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown attivato alle button 0 cy.get('button').trigger('mouseup', topRight, {bolle: false }) //mouseup attivato sulla posizione topRight con l'impostazione della bolla come falsa

I comandi Cypress sono asincroni?

Tutti i comandi Cypress sono asincroni. Vengono messi in coda per l'esecuzione in un secondo momento e non aspetteranno il completamento dei comandi. Il comando Cypress non fa nulla al momento della loro invocazione, ma lo salvano per dopo per l'esecuzione. Puoi capire il comportamento asincrono di Cypress qui

Comandi concatenabili Cypress

In Cypress, possiamo usare una serie di comandi per interagire con gli elementi nel DOM. È imperativo capire come funziona internamente il concatenamento dei comandi. Se stiamo concatenando i comandi in una particolare riga, Cypress gestirà una promessa basata sulla catena di comandi e restituirà un comando basato sull'oggetto al comando successivo, fino alla fine della catena di comandi o al verificarsi di un errore.

Cypress ci consente di fare clic su un elemento o digitare in elementi utilizzando il tasto .click() or .type() comandi ottenendo gli elementi usando cy.get() or cy.contains(). Vediamo un semplice esempio di concatenamento di comandi

cy.get('textarea').type('Come stai?')

Nell'esempio sopra, cy.get() è un comando Cypress e .type() è un altro comando, dove stiamo concatenando il .type() comando su cy.get() comando, dicendogli di digitare al soggetto che viene prodotto dal cy.get() elemento. Allo stesso modo, possiamo concatenare tutti i comandi di cui abbiamo discusso sopra.

Concatenamento di comandi di asserzione in Cypress

Simile al concatenamento di più comandi utilizzando Cypress, possiamo anche concatenare le asserzioni con i comandi. Le asserzioni sono comandi che ti permettono di descrivere il previsto stato o comportamento dell'applicazione. Cypress attenderà che gli elementi raggiungano lo stato previsto e il test fallirà se le asserzioni non vengono superate. Vedremo come possiamo usare i comandi di concatenamento nell'asserire un elemento.

cy.get('button').should('be.disabled') //aspetta se il pulsante deve essere disabilitato cy.get('form').should('have.class', 'form-vertical') / /aspetta se il modulo deve avere la classe come 'form-vertical' cy.get('input').should('not.have.value', 'Name') // afferma se l'input non deve avere il valore 'Nome '

Come elencato sopra, stiamo usando il cy.get() comando e concatenandolo con il .should() comando asserzione per aspettarsi il comportamento in base al risultato. In questo modo, possiamo usare la catena comandi di asserzione in Cypress.

Comandi personalizzati Cypress

Cypress ci fornisce API per creare comandi basati sui nostri requisiti. Il comando personalizzato di Cypress è simile ai comandi predefiniti preesistenti, tranne per il fatto che è definito dall'utente. Con i comandi personalizzati, possiamo giocare con i comandi e concatenarli in base al nostro caso d'uso. I comandi personalizzati di Cypress sono utili nel nostro flusso di lavoro se è necessario riutilizzarli più e più volte nei test.

Vediamo la sintassi per creare un nuovo comando personalizzato in Cypress.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

dove gli argomenti sono i seguenti

Nome – Il nome del comando in stringa che vogliamo aggiungere o sovrascrivere

richiamataFn – Questa funzione accetta un argomento passato al comando

Opzioni – Passa qualsiasi oggetto opzioni per definire il comportamento del comando

Note: : le opzioni sono supportate solo per i comandi di aggiunta e non supporta i comandi di sovrascrittura

Le opzioni che prevSubject accetta sono i seguenti

• false – ignora gli argomenti precedenti (comando genitore)
• true – accettare i soggetti precedenti (comando figlio)
• optional – passare se si desidera iniziare una nuova catena o utilizzare una catena esistente (doppio comando)

Comando personalizzato genitore in Cypress

Vedremo come aggiungere un comando personalizzato genitore in Cypress. Il comando padre inizierà sempre una nuova catena di comandi, anche se hai concatenato un comando precedente. Il comando precedentemente concatenato verrà ignorato e un nuovo comando verrà sempre concatenato. Alcuni dei comandi principali sono cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Esempio

Vedremo un esempio di come scrivere un comando personalizzato genitore in Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //facendo clic sul link "Acquista ora" cy.clickLink('Compra Adesso')

Nell'esempio sopra, 'fare clic sul collegamento' è il nome del nostro comando personalizzato. Cercherà il etichetta. Nella riga 2, il comando ottiene 'a' e cerca il collegamento che contiene l'etichetta e fai clic sull'elemento. cy.clickLink() eseguirà l'azione nel file di prova e fa clic su "Compra Ora"Link.

Comando personalizzato figlio in Cypress

I comandi personalizzati figlio in Cypress sono concatenati a un comando padre oa un altro comando figlio. L'oggetto del comando precedente verrà ceduto alla funzione di callback.

Alcuni dei comandi Cypress che possono essere concatenati come comando figlio sono .click(), .trigger(), .should(), .find(), .as()

Esempio

Esamineremo un esempio su come concatenare un comando personalizzato figlio

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // avvolgere l'oggetto esistente e fare qualcosa con esso cy.wrap(subject).click({force:true }) }) //accesso a forceClick nel file di test cy.get("[data-test='panel-VALUES']").forceClick();

Nell'esempio sopra, stiamo nominando il nostro comando personalizzato come 'forza clic'. Stiamo passando l'argomento prevSubject all'elemento e avvolgendo l'oggetto esistente. Insieme a cy.wrap(), stiamo forzando il clic sull'oggetto. Quindi nel file di test, stiamo accedendo al comando personalizzato, 'forza clic' su a cy.get() comando.

Doppi comandi personalizzati in Cypress

I doppi comandi personalizzati sono ibridi tra un comando padre e un comando figlio. Puoi iniziare una nuova catena di comandi o concatenare un comando esistente. I doppi comandi sono utili se vogliamo che il nostro comando funzioni in modi diversi con o senza l'oggetto esistente.

Alcuni dei comandi che possono essere utilizzati per i comandi doppi sono cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Esempio

Vediamo un esempio di come utilizzare i doppi comandi personalizzati

Cypress.Commands.add('getButton', { prevSubject: 'optional' }, (subject) => { if (subject) { cy.get(subject).get('btn').its('button'); } else { cy.get('btn').its('pulsante'); } })

In alcuni casi, sarà necessario ottenere il pulsante del testo utilizzando getButton che acquisirà tutti i pulsanti dell'elemento. Ora possiamo usare getButton per concatenare con l'elemento genitore o concatenare l'elemento figlio, dove può invocare gli elementi del genitore.

Poiché prevSubject è facoltativo, possiamo passare l'oggetto come argomento o invocare il comando senza l'oggetto nel file di test come di seguito

cy.getButton() // senza oggetto cy.get('#loginBtn').getButton() // con oggetto

Sovrascrivere i comandi Cypress esistenti

Possiamo sovrascrivere i comandi Cypress già esistenti e modificare il comportamento per evitare di creare un altro comando che alla fine tenterà di utilizzare il comando originale.

Alcuni dei comandi originali di Cypress che possono essere sovrascritti sono cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Esempio

Vediamo un esempio su come sovrascrivere il Cypress esistente comando.

Cypress.Commands.overwrite('contiene', (originalFn, soggetto, filtro, testo, opzioni = {}) => { // determina se è stato passato un argomento di filtro if (tipo di testo === 'oggetto') { opzioni = testo testo = filtro filtro = non definito } options.matchCase = false return originalFn(oggetto, filtro, testo, opzioni) } )

Come abbiamo visto sopra, stiamo usando il Cypress.Comandi.sovrascrivi per modificare il comando Cypress esistente. Stiamo nominando il nostro comando personalizzato come contains e stiamo passando argomenti per determinare se l'argomento del filtro è passato.

Comandi di importazione Cypress

In questa sezione, capiremo come importare i comandi Cypress.

Dobbiamo creare i nostri comandi personalizzati Cypress nel cipresso/support/commands.js file. Aggiungeremo i comandi personalizzati nel file command.js e importeremo nel nostro file di test per usarlo.

Comandi personalizzati Cypress con esempio

Capiremo come creare un comando personalizzato e usarlo nel nostro file spec con esempi in tempo reale.

Come abbiamo visto sopra, dobbiamo aggiungere nuovi comandi personalizzati sotto il comandi.js file. In quel file, aggiungiamo un comando personalizzato per una funzione di accesso

Cypress.Commands.add("login", (nome utente, password) => { //aggiunta di un nuovo comando denominato login cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(nome utente); cy.get('[id=Password]').clear(); cy.get('[id=Password]').type(password); cy.get( '[tipo=invia]').click(); });

Nel codice sopra, stiamo nominando il nostro comando personalizzato come accesso. All'interno del comando personalizzato, abbiamo aggiunto i passaggi per cancellare il campo del nome utente e inserire il valore nel campo di testo. Allo stesso modo, stiamo cancellando il campo e aggiungendo la password nel campo della password. Successivamente, stiamo facendo clic sul pulsante di invio. Questo è un semplice comando personalizzato che accetta due argomenti: nome utente e password. Passeremo il valore per il nome utente e la password nel nostro file delle specifiche.

Ora creiamo un file spec denominato customCommand.spec.js nella cartella di integrazione. Il nostro file delle specifiche conterrà il seguente codice

description("Esempio di comandi personalizzati", () => { it("dovrebbe accedere utilizzando i comandi personalizzati", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("[email protected]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Come abbiamo visto sopra, stiamo accedendo al nostro comando personalizzato as cy.login() ,dove stiamo passando i valori di username e password.

Comandi personalizzati Cypress IntelliSense

IntelliSense fornisce suggerimenti di codice intelligenti nell'IDE o nell'editor di codice direttamente mentre scriviamo i test. Aiuta mostrando un popup che mostra la definizione del comando, il collegamento alla pagina della documentazione e gli esempi di codice. Se utilizziamo un editor di codice moderno come Visual Studio Code o IntellJ, IntelliSense sarà molto utile.

IntelliSense usa Typescript per comprendere e visualizzare la sintassi. Se scriviamo comandi personalizzati e forniamo definizioni TypeScript per i comandi personalizzati, possiamo utilizzare le triple barre per visualizzare IntelliSense, anche se il nostro progetto utilizza solo JavaScript.

Per configurare IntelliSense, dobbiamo descrivere il codice in cipresso/support/index.d.ts file.

// definizioni del tipo per l'oggetto Cypress "cy" /// dichiarare namespace Cypress { interface Chainable { /** * Login con credenziali * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }

Ora, dovremmo far sapere ai nostri file delle specifiche che ci sono alcune definizioni dattiloscritte nel indice.d.ts file. Quindi, all'inizio del nostro file delle specifiche, aggiungi il codice seguente per consentire a IntelliSense di fornirci suggerimenti.

// le definizioni dei tipi per comandi personalizzati come "login" // si risolveranno in "cypress/support/index.d.ts" //

Come abbiamo visto sopra, IntelliSense ci fornisce l'argomento che abbiamo fornito nel nostro file command.js e aiuta nel completamento automatico.

Aishwarya Lakshmi

Ciao... sono Aishwarya Lakshmi, ho completato il mio B.Tech e ho quasi 2+ anni di esperienza nel settore dei test. Sono un entusiasta dei test e una passione per i test e amo esplorare nuove cose nel mio campo e condividerle con i miei colleghi. Mi piace scrivere blog durante il mio tempo libero nel modo più semplice ma efficace. Come tester, mi piace avere le cose alla perfezione, quindi auguro ai miei lettori di avere una perfetta comprensione della tecnologia. Mi tengo aggiornato con le nuove tecnologie relative ai test e passo il tempo a capirle. Sono felice di aiutare gli studenti a comprendere i concetti durante i test.