Dopo il loading messaggio, ho continuato la mia esplorazione di Nightwatch con gli Oggetti Pagina e la produzione dei comandi.

Torna dove abbiamo lasciato il progetto standard ronda notturna che si possono trovare già adempiuti con gli aggiornamenti di questo articolo sulla filiale comando di affermazione-oggetto-pagina.
Inizia aggiungendo nel file root della configurazione i percorsi delle cartelle (che abbiamo 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"],
[...]

Quindi, continua con gli Oggetti Pagina

Oggetto pagina

Prima di tutto, promemoria: il pattern dell'oggetto della pagina definisce un'astrazione che permette di allegare a una parte di una pagina, un oggetto che sarà responsabile della sua guida. Questo approccio ha molti vantaggi. Tra le tante cose, questo ti permette di scrivere i tuoi selettori CSS solo una volta e quindi di evitare ripetizioni di codice. Inoltre, i test diventano molto più leggibili esponendo alcuni 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 responsabile della 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 legati ai selettori CSS, la seconda parte 'comando' permette di creare i metodi di business usati nei nostri test. Grazie all'utilizzo di alias (Es: '@searchInput') nei metodi, non ripetiamo i selettori CSS ed evitiamo la minaccia di errore.

Suggerimenti: Personalmente, di solito uso return 'this.api' nei comandi perché 'this.api' corrisponde al parametro 'browser' nei test. Restituendolo, possiamo concatenare le chiamate di diversi oggetti di pagina.

Ora, la prova NW/Test/Researchongoogle.test.js sembra 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();
    }
};

È molto leggibile, non è vero? (vedere: vecchia versione)
Grazie al nostro Google.js nella directory degli oggetti della pagina, possiamo accedere a un metodo google che dà accesso a un oggetto pagina con lo stesso nome.

Comando

In questa parte ti spiegherò come costruire comandi più complessi con l'uso del prototipo. Questo formato di comando permette di gestire, tra l'altro, l'asincronismo. Se la nostra esigenza è relativamente semplice e sincrona, rimani sul formato semplice mostrato nel doc.
Come un oggetto pagina, per creare un comando è necessario creare un file nella cartella dedicata a questo utilizzo. Creiamo questo 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;

Quindi, un comando in Nightwatch è un prototipo che eredita Emettitore di eventi e che contiene un metodo 'command'.
Per segnalare a Nightwatch che questo comando è terminato, dobbiamo inviare il 'completamento di una' evento, e poi per essere concatenabili torniamo 'questo'. Dopo averlo integrato nel test otteniamo 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

Questo articolo, con il precedente che trattava lo stesso argomento, ora sei pronto per scrivere test accettabili efficienti, leggibili e di facile manutenzione e allo stesso tempo ridurre 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″]