Nach dem Ladepfosten, setzte ich meine Erkundung von Nightwatch mit den Seitenobjekten und der Befehlserstellung fort.

Kehren Sie dorthin zurück, wo wir das Boilerplate-Projekt verlassen haben Nachtwache-Boilerplate die bereits mit den Updates dieses Artikels auf dem Zweig erfüllt gefunden werden können Seitenobjekt-Assertion-Befehl.
Fügen Sie zunächst in der Stammdatei der Konfiguration die Pfade zu den Ordnern hinzu (die wir zuvor erstellt haben), damit Nightwatch jeden Teil finden kann:

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

Fahren Sie dann mit den Seitenobjekten fort

Seitenobjekt

Zunächst einmal zur Erinnerung: Das Seitenobjektmuster definiert eine Abstraktion, die es ermöglicht, an einen Teil einer Seite ein Objekt anzuhängen, das für dessen Steuerung verantwortlich ist. Dieser Ansatz hat viele Vorteile. Dies ermöglicht Ihnen unter anderem, Ihre CSS-Selektoren nur einmal zu schreiben und dann Codewiederholungen zu vermeiden. Außerdem werden Tests viel besser lesbar, indem einige Geschäftsmethoden (z. B. browser.page.google().search) anstelle von technischen Methoden (z. B. browser.click('button[name=btnG]')[ …]) offengelegt werden. .
In der Praxis erstellen wir eine Datei nw/pages/google.js Beschreibung des Seitenobjekts, das für die Google-Forschungsseite verantwortlich ist:

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;
        }
    }]
};

Der erste Teil „Element“ erstellt Aliase, die an CSS-Selektoren gebunden sind, der zweite Teil „Befehl“ ermöglicht die Erstellung der in unseren Tests verwendeten Geschäftsmethoden. Dank der Verwendung von Aliasen (z. B. „@searchInput“) in den Methoden wiederholen wir die CSS-Selektoren nicht und vermeiden die Fehlergefahr.

Tipps: Ich persönlich verwende normalerweise return ‚this.api‘ in den Befehlen, weil ‚this.api‘ in den Tests mit dem Parameter ‚browser‘ übereinstimmt. Durch die Rückgabe können wir Aufrufe verschiedener Seitenobjekte verketten.

Der Test nw/tests/researchOnGoogle.test.js sieht nun folgendermaßen aus:

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();
    }
};

Es ist sehr lesenswert, nicht wahr? (sehen: alte Version)
Danke an unsere google.js Datei im Verzeichnis der Seitenobjekte können wir auf eine Methode zugreifen Google die Zugriff auf ein Seitenobjekt mit demselben Namen gewährt.

Befehl

In diesem Teil werde ich Ihnen erklären, wie Sie mithilfe des Prototyps komplexere Befehle erstellen. Dieses Befehlsformat ermöglicht es unter anderem, die Asynchronität zu handhaben. Wenn unser Bedarf relativ einfach und synchron ist, bleiben Sie auf dem einfaches Format, das im Dokument gezeigt wird.
Um einen Befehl zu erstellen, müssen Sie wie bei einem Seitenobjekt eine Datei in dem für diese Verwendung vorgesehenen Ordner erstellen. Lassen Sie uns diese Datei erstellen nw/commands/longCommand.js mit diesem Inhalt:

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;

Ein Befehl in Nightwatch ist also ein Prototyp, der von ihm erbt EreignisEmitter und die eine Methode enthält 'Befehl'.
Um Nightwatch zu signalisieren, dass dieser Befehl beendet ist, müssen wir die 'gesamten ' Ereignis, und um dann verkettbar zu sein, kehren wir zurück 'fehlen uns die Worte.'. Nachdem wir es in den Test integriert haben, erhalten wir diese endgültige Version:

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();
    }
};

Fazit

Dieser Artikel mit der vorherige zum selben Thema, sind Sie nun bereit, effiziente, lesbare und einfach zu wartende akzeptable Tests zu schreiben und gleichzeitig die Ausführungszeit zu verkürzen.
Matthew Breton CTO bei JS Republik
[separator type=““ size=““ icon=“star“] [actionbox color=“default“ title=““ description=“JS-REPUBLIC ist ein auf JavaScript-Entwicklung spezialisiertes Dienstleistungsunternehmen. Wir sind ein anerkanntes Ausbildungszentrum. Alle unsere technischen Schulungen finden Sie auf unserer Partnerseite für Schulungen“ btn_label=“Unser Training“ btn_link=“http://training.ux-republic.com“ btn_color=“primary“ btn_size=“big“ btn_icon=“star“ btn_external ="1"]