Dopo articolo della scorsa settimana, Continuo la mia esplorazione di Nightwatch con le pagine degli oggetti e la realizzazione del comando.

Riprendiamo da dove eravamo rimasti con il progetto nightwatch-boilerplate che trovate già completato con gli argomenti di questo articolo in filiale comando di affermazione-oggetto-pagina.
Iniziamo aggiungendo alla radice del file di configurazione i percorsi delle cartelle (che avremo creato in precedenza) in modo che Nightwatch possa trovare ogni parte:

[...]
"page_objects_path": "nw/pages",
"custom_commands_path" : ["nw/commands"],
"custom_assertions_path" : ["nw/assertions"],
[...]

E andiamo direttamente all'oggetto Pagina

Oggetto pagina

Ricordiamo che il pattern Page Object definisce un'astrazione che permette di associare ad una parte della pagina un oggetto che la guiderà. Ciò, tra l'altro, permette di non ripetere i selettori CSS e rende i test molto più leggibili esponendo metodi aziendali (Es: browser.page.google().search()) anziché metodi tecnici (Es: […] browser. click('button[name=btnG]')[…]).
In pratica creeremo un file nw/pages/google.js descrivendo l'oggetto della pagina per la pagina di ricerca di Google:

module.exports = {
    elements: {
        searchInput: 'input[type=text]',
        searchBtn: 'button[name=btnG]'
    },
    commands: [{
        fillInSearchInput () {
            this
                .waitForElementVisible('body')
                .setValue('@searchInput', this.api.globals.searchTerm);
            return this.api;
        },
        submit () {
            this
                .waitForElementVisible('@searchBtn')
                .click('@searchBtn')
                .api.pause(1000);
            return this.api;
        }
    }]
};

La prima parte 'elemento', crea alias associati ai selettori CSS, la seconda parte 'command' ti consente di creare i metodi aziendali utilizzati successivamente nei nostri test. Noterai l'uso di alias (Es: '@searchInput') nei metodi per non ripetere i selettori e quindi limitare il rischio di errori.

Suggerimenti: Da parte mia, preferisco restituire 'this.api' nei comandi, perché 'this.api' corrisponde al parametro 'browser' nei test. E quindi restituendolo possiamo concatenare le chiamate di diversi oggetti di pagina.

Il test NW/Test/Researchongoogle.test.js ora si presenta così:

module.exports = {
    'Search on google': (browser) => {
        browser
            .init()
            .page.google().fillInSearchInput()
            .page.google().submit()
            .assert.containsText('#main', browser.globals.movieName)
            .end();
    },
    after: (browser) => {
        browser.end();
    }
};

È più chiaro, vero? Attraverso il nostro fascicolo Google.js nella cartella degli oggetti della pagina, abbiamo accesso a un metodo google consentendo di utilizzare l'oggetto pagina omonimo e di eseguire operazioni sulla pagina in modo più leggibile rispetto a prima (cfr: vecchia versione)

Comando

In questa parte spiegherò come costruire comandi più complessi utilizzando il prototipo. Questo formato di comando permette di gestire, tra l'altro, gli asincronismi. Se la tua esigenza è relativamente semplice e sincrona, rimani sul formato semplice visibile sul doc.
Come un oggetto pagina, per creare un comando è necessario creare un file nella directory prevista a tale scopo. Creiamo il file nw/commands/longCommand.js con questo contenuto:

const util = require('util');
const events = require('events');
const LONG_TIME = 2000;
function Cmd() {
    events.EventEmitter.call(this);
}
util.inherits(Cmd, events.EventEmitter);
Cmd.prototype.command = function () {
    setTimeout(() => this.emit('complete'), LONG_TIME);
    return this;
};
module.exports = Cmd;

Un comando è dunque in Nightwatch un prototipo da cui eredita Emettitore di eventi nodo e che contiene un metodo 'command'.
Per segnalare a Nightwatch che questo comando è stato completato, dobbiamo emettere l'evento 'completamento di una', e perché sia ​​incatenabile torniamo 'questo'. Una volta integrati nel test, ci ritroviamo con questa versione finale:

module.exports = {
    'Search on google': (browser) => {
        browser
            .init()
            .longCommand()
            .page.google().fillInSearchInput()
            .page.google().submit()
            .assert.containsText('#main', browser.globals.movieName)
            .end();
    },
    after: (browser) => {
        browser.end();
    }
};

Conclusione

Con questo articolo, insieme a precedente sullo stesso argomento, ora sei pronto per scrivere test di accettazione efficaci, leggibili e di facile manutenzione, riducendo al minimo i tempi di esecuzione.
Matteo Bretone CTO a JS Repubblica
[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]