Modello a oggetti della pagina, Comunemente noto come POM, è un modello popolare in qualsiasi framework di automazione. Page Object Model può essere applicato anche in Cypress. Page Object Model presenta molti vantaggi nella creazione di un framework per l'automazione dei test, come la riduzione della duplicazione del codice e l'aumento della manutenibilità e della leggibilità. Cypress ci offre la flessibilità di incorporare Page Object Model nello script di test. In questo articolo, esamineremo la creazione di un modello a oggetti di pagina in Passo di cipresso per passo con esempi.

Sommario:

• Che cos'è il modello a oggetti di pagina?
• Architettura del framework del modello dell'oggetto della pagina
• Vantaggi dell'utilizzo di Page Object Model in Cypress
• Modello oggetto pagina passo passo Cypress con esempio
• Accesso agli oggetti di pagina nel file Spec
• Come utilizzare i dispositivi come origine dati di test nel modello oggetto della pagina in Cypress?
• Accesso ai valori dal file JSON nel file del test case
• Domande frequenti

Che cos'è il modello a oggetti di pagina?

Page Object Model è un modello di progettazione in cui il gli oggetti della pagina sono separati dagli script di test di automazione. I test di automazione ci offrono molte leve che ci avvantaggiano nei test; tuttavia, ci sono alcuni risultati come la duplicazione del codice e un aumento del rischio di manutenibilità man mano che il progetto cresce. Cerchiamo di capire il significato di POM con un esempio.

Considera che abbiamo più pagine nella nostra applicazione come la pagina di accesso, la pagina di registrazione e la pagina di prenotazione dei voli.

• La pagina Login contiene tutti gli elementi web delle funzionalità di login
• La Registrazione contiene tutte le modalità e gli elementi web del processo di registrazione
• La sezione Prenota voli contiene gli elementi web della pagina di prenotazione del volo

Ci sono tre casi di test, vale a dire TC1, TC2 e TC3.

• TC1 contiene i casi di test di accesso.
• TC2 contiene casi di test di accesso e registrazione
• TC3 contiene casi di test di accesso, registrazione e prenotazione del volo

Ora, la pagina di accesso interagisce con TC1.

La pagina di registrazione deve interagire con TC1 e TC2, e

La pagina di prenotazione del volo deve interagire con TC1, TC2 e TC3

Come puoi vedere, ci sono funzionalità comuni tra tutti e tre i casi di test. Invece di scrivere i metodi e i localizzatori di login in tutti i file del test case, possiamo averli separatamente e accedervi attraverso i file. In questo modo il codice non viene ripetuto ed è facilmente leggibile.

Una delle migliori pratiche nella codifica è un concetto chiamato ASCIUTTO. Significa Non essere ripetitivo. Come dice chiaramente il modulo completo, non dovremmo ripetere le righe di codice ancora e ancora. Per superare questo, Modello a oggetti della pagina svolge un ruolo importante nelle migliori pratiche di codifica.

Architettura del framework del modello dell'oggetto della pagina

I struttura del modello a oggetti di pagina l'architettura è un'architettura collaudata che può essere personalizzata con metodi semplici. Oggi quasi tutte le aziende seguono metodologie agili, che implicano integrazione, sviluppo e test continui. I tester di automazione mantengono il framework di test per lavorare insieme al processo di sviluppo con il Modello a oggetti della pagina. È un significativo modello di progettazione nel mantenimento del framework di test di automazione man mano che il codice cresce con nuove funzionalità.

L'oggetto pagina è un modello di progettazione che è una classe orientata agli oggetti che interagisce con le pagine dell'applicazione che stiamo testando. L'oggetto della pagina comprende Classe di pagina ed Casi test. Classe di pagina consiste di metodi e localizzatori per interagire con gli elementi web. Creiamo classi separate per ogni pagina dell'applicazione. Creeremo metodi individuali per ogni funzionalità e li accederemo nel nostro file delle specifiche.

Vantaggi dell'utilizzo di Page Object Model in Cypress

1. I metodi sono riutilizzabile in tutto il progetto e di facile manutenzione quando il progetto cresce. Le righe di codice diventano meno leggibile ed ottimizzato.
2. Page Object Pattern suggerisce di separare il operazioni e flusso che stiamo eseguendo nell'interfaccia utente da verifica passi. Quando seguiamo lo schema POM, tendiamo a scrivere codice pulito e facilmente comprensibile.
3. Con il modello a oggetti pagina, oggetti ed casi test sono indipendenti l'uno dall'altro. Possiamo chiamare gli oggetti ovunque nel progetto. In questo modo, se utilizziamo strumenti diversi come TestNG/JUnit per i test funzionali o Cucumber per i test di accettazione, è facile accessibile.

Modello oggetto pagina passo passo Cypress con esempio

Questa sezione spiega come creare un modello a oggetti di pagina in Cypress con esempi in tempo reale che possiamo implementare nei progetti. Capiremo dalla configurazione di base e dal processo passo-passo per la creazione di un modello a oggetti di pagina.

Discutiamo lo scenario su cui scriveremo le funzioni in questo esempio.

1. Spostarsi https://admin-demo.nopcommerce.com/ sito web
2. Inserisci nome utente e password validi
3. Fare clic sul pulsante Accedi
4. Convalida l'URL se è aggiunto con /admin dopo il login

Creeremo due file: un file PageObject e un file spec per questo esempio. Cominciamo!

Passo 1 : Apri il nostro progetto in codice VS. Crea una cartella chiamata OggettoPagina sotto il integrazione cartella. In questa cartella è possibile creare file oggetto di pagina per qualsiasi modulo.

Passo 2 : Crea un file chiamato LoginPage.js sotto il OggettoPagina cartella. In LoginPage.js, scriveremo i metodi che coinvolgono le funzionalità di accesso.

Passo 3 : Iniziamo a scrivere il nostro primo metodo di prova in la pagina di accesso.js file. Dobbiamo prima creare una classe che esporteremo nel nostro file spec. Chiameremo la nostra classe come Pagina di login

classe LoginPage { }

Sulla base del nostro pseudocodice, il nostro primo passo è navigare verso l'URL. Chiameremo il nostro metodo as navigate(). All'interno del nostro metodo di navigazione, aggiungeremo il file cy.visit() funzione da Cypress.

 naviga() { cy.visit('https://admin-demo.nopcommerce.com/') }

Passo 4 : Ora, dovremo inserire il nome utente nel nostro campo email. Chiameremo il nostro metodo come Inserisci l'email(). Innanzitutto, dovremmo ottenere il localizzatore del campo e-mail e accedervi tramite cy.get() comando. Quindi cancelleremo il campo usando il clear() comando e aggiungi il nome utente usando il type() comando. Nel nostro metodo, passiamo un parametro nome utente per passare il valore nel file spec. In questo modo, manteniamo generico l'accesso a questo metodo se è richiesto un ID e-mail diverso.

enterEmail(nome utente) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(nome utente); restituisci questo }

Invece di scrivere il cy.get() comando due volte nel codice sopra, possiamo semplicemente eseguirne il loop con il punto operatore.

  enterEmail(nome utente) { cy.get('[id=Email]') .clear() .type(nome utente); restituisci questo }

Potresti averlo notato return this nella riga 9. questo indica che il file Inserisci l'email il metodo appartiene al particolare Pagina di login classe. Fondamentalmente, questo rappresenta la classe

Passo 5 : Dobbiamo creare un metodo per le password simile al nostro metodo enterEmail. Chiameremo il nostro metodo password as enterPassword(). Inizialmente, otterremo il localizzatore per la password, cancelleremo il campo e digiteremo il valore di input. Passeremo un parametro al nostro metodo chiamato psd e l'accesso in type() comando.

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) restituisci questo }

Passo 6 : Il nostro ultimo metodo sarebbe fare clic sul pulsante di accesso. Chiameremo il nostro metodo come submit(). Otterremo il localizzatore e faremo clic sul pulsante utilizzando il click() metodo da Cypress.

 submit() { cy.get('[type=submit]').click() }

step 7: Ora, dobbiamo esportare questa classe per usarla nel nostro file delle specifiche. Per questo, aggiungiamo solo una riga al di fuori della nostra classe e possiamo accedervi facilmente nel nostro file delle specifiche.

esporta la pagina di accesso predefinita

Evviva! Abbiamo creato un file Page Object per il nostro progetto. È stato abbastanza semplice e facile!

Accesso agli oggetti di pagina nel file Spec

Passiamo ora al nostro file del test case. Dobbiamo creare un file spec nella nostra cartella di integrazione. Chiameremo il nostro file spec POMDemo.spec.js.

Passo 1 : Per accedere ai nostri metodi nel file LoginPage.js, dobbiamo importare li nel nostro file delle specifiche. Importiamo utilizzando l'istruzione import. Dovremmo accedere al file LoginPage.js usando ../

Nel nostro caso, il percorso è ../integration/PageObject/LoginPage. Quindi, l'istruzione di importazione sarà simile alla seguente.

importa LoginPage da "../integration/PageObject/LoginPage"

Passo 2 : Poiché usiamo Mocha, scriveremo il nostro test case all'interno describe() ed it() bloccare. descrivere() rappresenta a suite di prova, e it() rappresenta a caso di prova. Entrambi i blocchi sono una funzione e accettano un parametro stringa che include il descrizione del test.

describe("Cypress POM Test Suite", funzione () { })

All'interno del blocco di descrizione, scriveremo il nostro it() aggiungendo la descrizione come login con credenziali valide.

it("Accedi con credenziali valide", funzione () { })

Passo 3 : Per accedere ai nostri metodi dal nostro file oggetto Page, dovremmo creare un'istanza per la nostra classe Login. Per creare un'istanza per la classe login, dobbiamo dichiarare una variabile e assegnarla al nostro file di classe usando il tasto nuovi parola chiave. Con la variabile dichiarata, possiamo accedere facilmente ai metodi dal file oggetto Page.

                                               const login = new LoginPage();

Note:: Con la variabile login, possiamo accedere ai metodi dalla classe dell'oggetto Page. Quando iniziamo a digitare login. , il vscode elencherà i suggerimenti di tutti i metodi disponibili nel file LoginPage.js. Questo ci aiuta a verificare di aver esportato e importato correttamente la nostra classe!

Passo 4 : Chiamiamo il nostro navigate() metodo per visitare l'URL. Questa è la prima azione nel nostro caso di test.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Login with valid credentials", function() { const login = new LoginPage(); login.navigate(); }); });

Passo 5 : Dovremmo inserire il nome utente nel campo email. Accediamo al enterEmail() con la accesso oggetto. enterEmail() il metodo accetta un parametro nome utente. Quindi dovremmo passare il valore per il nome utente come a stringa nel nostro file delle specifiche

/// import LoginPage from "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); }) })

Passo 6 : Simile al passaggio 5, dovremmo chiamare il nostro enterPassword() passando la password come parametro nella stringa.

/// import LoginPage from "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); }) })

Passo 7 : Successivamente, dobbiamo fare clic sul pulsante di accesso. Chiameremo il metodo submit() dal nostro file oggetto della pagina.

/// import LoginPage from "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); login.submit(); }) })

Passo 8 : Dopo aver effettuato l'accesso, dobbiamo affermare l'URL. Verificheremo se l'URL è pari all'URL dopo il login. Per l'affermazione, useremo il Chai libreria di asserzioni, integrata con Cypress.

/// import LoginPage from "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

L'immagine sopra rappresenta il test di accesso. Siamo stati in grado di scrivere un test case con un Page Object Model con pochi semplici passaggi. Ora eseguiamo il test case e vediamo il risultato.

Apriremo il test runner di Cypress e faremo clic sul file delle specifiche ed eseguiremo il nostro test case. Controllare questo articolo su come aprire il test runner di Cypress.

Evviva! Abbiamo scritto con successo un test case che utilizza Page Object Model in Cypress. Possiamo incorporare questo modello in progetti in tempo reale. Ci sono molti modi in cui possiamo scrivere i metodi in un file oggetto di pagina. Ti ho mostrato un esempio che è standard e funziona per qualsiasi progetto. Puoi anche scrivere solo il funzione di ritorno nel file oggetto della pagina e quindi fare clic su e Digitare direttamente nel nostro file delle specifiche.

Vedremo un altro modello che possiamo usare nel progetto. Anche questo metodo funzionerà perfettamente.

In questo tipo, restituiremo solo la funzione di localizzazione nel nostro metodo ed eseguiremo azioni nel file di test. Scriveremo il codice per lo stesso scenario che abbiamo visto sopra.

Oggetto pagina – LoginPage.js

class LoginPage { navigare() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } export LoginPage predefinito

Come abbiamo visto sopra, stiamo scrivendo solo il localizzatore all'interno della nostra funzione e restituendoli. Il ritorno rappresenta che il particolare metodo appartiene al classe LoginPage.js. Non stiamo aggiungendo alcuna azione nei nostri metodi.

File delle specifiche – POMDemo.spec.js

Esamineremo l'esempio di accesso ai metodi nel file spec.

/// import LoginPage from "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[email protected]'); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Qui, chiamiamo il metodo dal file PageObject ed eseguiamo le azioni del test case. Quindi, per prima cosa, chiamiamo la nostra variabile di riferimento accesso e poi aggiungendolo con il metodo enterEmail() e infine aggiungendo l'azione Digitare. Nel nostro type(), stiamo passando il nome utente APPREZZIAMO.

Come puoi vedere, tutti i comandi sono stati eseguiti e il test case è passato!

Puoi scegliere il modello di oggetto di pagina più adatto al tuo progetto e alla tua opinione. Non esiste una regola particolare per attenersi a una sola procedura.

Come utilizzare i dispositivi come origine dati di test nel modello oggetto della pagina in Cypress?

Nei nostri esempi di Page Object Model, abbiamo passato il valore del nome utente e della password direttamente nel file Page Object o direttamente nel file del test case. Questa sezione capirà come usare infissi in cipresso per mantenere i dati al sicuro e non esposti. Dovremmo cercare di mantenere tutte le credenziali e i dati in un file e accedervi. In questo modo, è facile da mantenere e i dati sensibili come nome utente e password non vengono esposti. Questo metodo è anche una delle procedure che dobbiamo seguire in Page Object Pattern.

Come discusso prima, Fixture aiuta a memorizzare i dati in un file JSON o file excel o una libreria esterna come Apache POI. Utilizzeremo questi dati creando una variabile e accedendovi nel nostro file delle specifiche. Cerchiamo di capire con un esempio.

Cypress fornisce una cartella chiamata "infissi.” Creeremo un JSON file chiamato Credenziali.json sotto la cartella 'Apparecchi'.

Dichiariamo il nostro nome utente, password e valori URL che dobbiamo convalidare in un formato JSON nel credenziali.json file.

{ "nome utente": "[email protected]", "password" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Accesso ai valori dal file JSON nel file del test case

Poiché abbiamo definito i valori nel nostro file JSON, accederemo ad essi nel nostro file del test case utilizzando infissi da Cipresso. Accederemo al valore JSON con questo parola chiave. Avvolgiamo la funzione fixture in a prima() blocco.

describe("Cypress POM Test Suite", function() { before(function() { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) – questa linea rappresenta che stiamo passando il credenziali.json file come parametro per il nostro cy.apparecchio() comando. Qui, non siamo tenuti a passare se si tratta di un file JSON. Basta passare il nome del file da solo. Più tardi, passiamo dati di test come parametro nella funzione e accedere a dati di test variabile usando questo.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function() { before(function() { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Accedi con credenziali valide", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit();cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail(this.testdata.username) – Questo recupererà il valore del nome utente dal file credenziali.json e lo compilerà nel campo email.

login.enterPassword(this.testdata.password) – Questo recupererà il valore della password dal file credenziali.json e lo inserirà nel campo della password

cy.url().should('be.equal', this.testdata.adminUrl) – Questo otterrà l'adminUrl dal file credenziali.json e lo convaliderà nell'asserzione

Ora, eseguiamo il test case per il risultato.

Come possiamo vedere, i casi di test sono stati eseguiti e sono passati. Questo esempio ti aiuterà a scrivere un test case basato sui dati di base. Puoi incorporarlo nel tuo progetto usando questo metodo. Puoi creare nuovi file JSON nella cartella Fixture, aggiungere valori relativi ai dati di test e accedervi attraverso qualsiasi file di test.

Domande frequenti

Cypress supporta il modello a oggetti di pagina?

Certo. Cypress offre tutta la flessibilità per giocare con le pagine e gli oggetti nel repository. È facile da implementare.

Quale Page Object Model dovrei usare dagli esempi precedenti?

Non esiste una regola particolare per attenersi a un solo modo di Page Object Model. Puoi usare qualsiasi modello che è stato discusso sopra. Sei libero di personalizzare il modello in base al tuo progetto.

Perché dovrei usare gli infissi nel Page Object Model in Cypress?

Fixture aiuta a memorizzare dati sensibili come nome utente, password e URL in un file separato come JSON o Excel. Ciò garantisce la sicurezza dell'applicazione e l'accesso ad essi facilmente in qualsiasi file del progetto. Per accedere al file JSON, usiamo infissi per usarlo nel nostro file spec.

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.