testcafe: node.js Framework zur Vereinfachung der automatisierten Tests von Webanwendungen

Kernpunkte:

• testcafe ist ein Webanwendungs ??-Test -Framework, das auf Node.js basiert und das Setup und den laufenden Prozess automatisierter Tests vereinfacht. Es deckt alle Testphasen ab, einschlie?lich des Starts eines Browsers, des Ausführens eines Tests, des Sammelns von Ergebnissen und zum Erstellen von Berichten.
• testcafe erfordert keine Browser -Plugins oder andere Abh?ngigkeiten und unterstützt Tests in einem beliebten modernen Desktop oder mobilen Browser. Es ist auch mit Cloud -Testdiensten und unkonventionellen Browsern über das Plugin -?kosystem kompatibel.
• testcafe bietet eine Vielzahl von Testvorg?ngen, von schwebem bis zum Datei-Upload, und verfügt über einen integrierten automatischen Wartezeitmechanismus, ohne manuelles Warten oder Winterschlaf hinzuzufügen. Es unterstützt auch das Seitenobjektmuster, das Objektdarstellungen der zu testenden Seite einführt und es im Testcode verwendet.
• testcafe kann in beliebte Taskl?ufer und kontinuierliche Integrationssysteme integriert werden, was es zu einem gemeinsamen Werkzeug für Routineaufgaben macht und Projekttests in automatisierten Entwicklungsworkflows einrichten. Es kann auch Tests gleichzeitig über mehrere Browser ausgeführt werden, wodurch der Testprozess beschleunigt wird.

Dieser Artikel wird von Vasily Strelyaev, einem Mitglied des Testcafe-Teams, erkl?rt, um die Vorteile dieses neuen Rahmens für node.js-basierte Anwendungstests zu erkl?ren.

Front-End-Webentwickler wissen, wie schwierig es ist, automatisierte Tests für Webanwendungen einzurichten. Auch die Installation eines Testframeworks kann eine Herausforderung sein. Viele vorhandene L?sungen erfordern Selen, das mit Browser -Plugins und JDK geliefert wird.

Sie müssen auch eine Testumgebung einrichten, bevor Sie mit dem Test beginnen, dh die Verarbeitung der Konfigurationsdatei. Sp?ter k?nnen Sie feststellen, dass einige Teile der Testumgebung (z. B. Berichte) fehlen und Sie sie separat finden und installieren müssen.

testcafe ist ein neuer Open Source, Node.js-basiertes End-to-End-Test-Framework für Webanwendungen.

Es ist für alle Testphasen verantwortlich: Starten des Browsers, Ausführen des Tests, Sammeln von Testergebnissen und Generierung von Berichten. Es erfordert weder Browser -Plugins noch andere Abh?ngigkeiten: Es funktioniert nicht in der Box.

In diesem Artikel werde ich zeigen, wie:

• schreiben Sie Ihren ersten Test
• Führen Sie es in lokalen Maschinen- und Cloud -Testdiensten aus
Erstellen Sie eine Testaufgabe für den Aufgabenl?ufer

Testcafe

installieren

Zun?chst müssen Sie Node.js auf Ihrem Computer installieren. Wenn Sie keine haben, besuchen Sie ihre Website und laden Sie sie herunter oder überlegen Sie, ob Sie einen Versionsmanager (z. B. NVM) verwenden.

Nach Abschluss des Node.js erfordert die Installation von TestCafe nur einen Befehl:

npm install -g testcafe

Wenn Sie Linux/Mac verwenden und Sudo hinzufügen müssen, sollten Sie in Betracht ziehen, NPM -Berechtigungen zu beheben.

Schreiben von Tests

Wir werden einen Test für die Testcafe -Demo -Seite schreiben.

?ffnen Sie den Code -Editor Ihrer Wahl und erstellen Sie eine neue test.js -Datei.

Fügen Sie zun?chst eine Anweisung für die Fixture hinzu, die auf http://devexpress.github.io/testcafe/example/demo Webseite:

verweist:

npm install -g testcafe

Fügen Sie dann einen Test hinzu:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Lassen Sie unseren Test nun den Text in das Eingabebuch "Entwicklername" eingeben und klicken Sie auf die Schaltfl?che "Senden":

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我們稍后將添加測(cè)試代碼
});

Hier haben wir TypeText verwendet und auf Testvorg?nge klicken. TestCafe bietet viele solcher Vorg?nge, vom Verlebten bis zum Datei -Upload.

Kehren wir zu unserem Test zurück. Die Schaltfl?che Senden wird Sie zu einer Seite umleiten, auf der "Danke, %Benutzername %!"

Wir werden überprüfen, ob der Text auf dieser Seite den richtigen Namen enth?lt:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Um dies zu tun, erstellen wir einen Selektor, um den Artikeltitel zu identifizieren. Nach dem Testvorgang fügen wir eine Behauptung hinzu, zu überprüfen, ob der Text lautet: "Danke, Peter Parker!"

Seitenobjekt

testcafe Team f?rdert die Verwendung von Seitenobjektmustern im Test. Mit diesem Muster k?nnen Sie eine Objektdarstellung der getesteten Seite einführen und in Ihrem Testcode verwenden. Mal sehen, wie wir das machen.

Erstellen Sie eine neue Datei Page-Object.js und deklarieren Sie eine Seitenklasse:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Bisher interagieren unsere Tests mit drei Seiten Elementen: Entwicklername Eingabe, Einreichungsschaltfl?che und der Titel "Danke". Deshalb fügen wir der Seitenklasse drei Selektoren hinzu:

export default class Page {
    constructor () {
    }
}

In der Testdatei finden Sie auf Page-Object.js, erstellen Sie eine Instanz der Seitenklasse und verwenden Sie ihre Felder im Testvorgang:

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

verwenden Sie den Seitenobjektmodus, Sie k?nnen alle Selektoren an einem Ort speichern. Wenn sich die zu testende Webseite ?ndert, müssen Sie nur eine Datei aktualisieren - Page -Object.js.

Testen lokal ausführen

Um diesen Test auf der lokalen Maschine auszuführen, ben?tigen Sie nur einen Befehl:

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

testcafe wird automatisch Google Chrome finden und starten und Tests ausführen.

In ?hnlicher Weise k?nnen Sie diesen Test in Safari oder Firefox ausführen, indem Sie einfach seinen Namen angeben.

Sie k?nnen den Befehl testcafe-list-browser verwenden, um die Liste der von Testcafe auf Ihrer Maschine erkannten Browser anzuzeigen:

Testoperationsbericht

Nach Abschluss des Tests gibt TestCafe den Bericht an die Konsole aus:

Wenn der Test fehlschl?gt, stellt TestCafe eine Anrufseite mit einem Anrufstapel an, der zeigt, wo der Fehler aufgetreten ist:

Sie k?nnen aus fünf integrierten Berichtsformaten ausw?hlen oder nach Add-Ons suchen, die verschiedene Formate unterstützen.

Starten Sie den Test aus der IDE

Sie k?nnen Testcafe -Tests von beliebten IDEs wie VS -Code oder Sublimetext mithilfe eines dedizierten Plugins ausführen:

Tests im Cloud -Testdienst ausführen

W?hrend testcafe Tests in einem beliebten modernen Desktop oder mobilen Browser ausführen kann, verfügt es auch über ein ?kosystem von Plug-Ins, die mit Cloud-Testdiensten, kopflosen Browsern und anderen unkonventionellen Browsern kompatibel sind.

In diesem Abschnitt werden wir Tests auf Saucelabs durchführen, einer beliebten automatisierten Testwolke. Es beherbergt Hunderte von virtuellen Maschinen mit unterschiedlichen Betriebssystemen und Browsern.

Um Tests auf Saucelabs durchzuführen, ben?tigen Sie ein Saucelabs -Konto. Wenn Sie keinen haben, besuchen Sie https://saucelabs.com/ und erstellen Sie ein neues Konto. Sie erhalten die erforderlichen Anmeldeinformationen: Benutzername und Zugriffsschlüssel.

Jetzt müssen Sie das Testcafe -Plugin installieren, das mit Saucelabs kompatibel ist:

npm install -g testcafe

Da dieses Plugin im lokalen Verzeichnis installiert ist, müssen Sie auch testcafe lokal installieren:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Befolgen Sie vor Verwendung des Saucelabs -Plugins bitte die Anweisungen in der Dokumentation der Saucelabs, um den Benutzernamen zu speichern und auf die Umgebungsvariablen Sauce_USERNAME und Sauce_Access_Key zuzugreifen.

Sie k?nnen jetzt Ihre Tests auf der virtuellen Maschine der Saucelabs in der Cloud ausführen:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我們稍后將添加測(cè)試代碼
});

Sie k?nnen eine vollst?ndige Liste der verfügbaren Browser und virtuellen Maschinen auf Saucelabs anzeigen, indem Sie den folgenden Befehl ausführen:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Aufgaben zum Aufgabenl?ufer

hinzufügen

Taskl?ufer sind nützlich, wenn Sie Routineaufgaben in Ihrem Entwicklungsworkflow automatisieren müssen.

Integration in den Task -L?ufer ist eine gute L?sung für den Ausführen von Testcafe -Tests zum Entwicklungszeit. Aus diesem Grund hat die Testcafe -Community Plugins entwickelt, die es in die beliebtesten Node.js -Task -L?ufer integrieren.

In diesem Tutorial werden wir gulp.js.

Wenn Sie nicht mit gulp.js auf Ihrem Computer installiert sind, installieren Sie es global und lokal in Ihrem Projekt mit dem folgenden Befehl:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Installieren Sie das Gulp -Plugin, das TestCafe in gulp.js integriert:

export default class Page {
    constructor () {
    }
}

Wenn Sie eine gulpFile.js -Datei in Ihrem Projekt haben, fügen Sie die folgenden Aufgaben hinzu. Andernfalls erstellen Sie diese Aufgabe, um eine neue gulpfile.js zu erstellen:

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

Diese Aufgabe führt Tests in der Datei test.js in Chrome und Firefox aus. Weitere Informationen zur Gulp -Plugin -API finden Sie in der GitHub -Seite.

Sie k?nnen diese Aufgabe jetzt wie folgt aus der Befehlszeile ausführen:

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Test auf der kontinuierlichen Integrationsplattform

testcafe bietet eine leistungsstarke Befehlszeile und Programmierschnittstelle, mit der es mit den meisten modernen CI -Systemen einfach zu bedienen ist.

Testlaufberichte k?nnen in JSON-, Xunit- und Nunit -Formaten, die von den beliebtesten CI -Systemen verstanden werden, wiedergegeben werden.

TestCafe -Dokumentation enth?lt ein Rezept, in dem erkl?rt wird, wie Tests für GitHub -Projekte auf Travis CI eingerichtet werden.

Zusammenfassung

In diesem Artikel zeige ich, wie Sie mit Ihrem ersten Testcafe -Test beginnen und schlie?lich E2E -Tests in den Prozess Ihres Projekts integrieren. Sie k?nnen selbst erleben, wie einfach es ist, eine Webanwendung mit TestCafe zu testen.

Wenn Sie Fragen zu Testcafe haben, kommentieren Sie bitte unten eine Frage im Forum oder besuchen Sie die GitHub -Seite.

testcafe faq

Wie unterscheidet sich TestCafe von anderen End-to-End-Testwerkzeugen?

testcafe ist ein eindeutiges End-to-End-Test-Tool, da kein Webdriver oder eine andere Testsoftware erforderlich ist. Es l?uft auf node.js und verwendet einen Proxy, um Skripte in den Browser zu injizieren. Auf diese Weise kann es Benutzeraktionen automatisieren und behaupten, dass Elemente auf der Seite wie erwartet ausgeführt werden. Es unterstützt Tests auf mehreren Browsern und Plattformen, einschlie?lich mobiler Ger?te. Es bietet auch Funktionen wie automatisches Warten, Echtzeitdiagnose und gleichzeitige Testausführung.

Kann ich Testcafe für mobile Tests verwenden?

Ja, TestCafe unterstützt mobile Tests. Es kann Tests auf iOS- und Android -Ger?ten sowie auf mobilen Emulatoren und Emulatoren durchführen. Sie k?nnen auch mobile Ger?te in Ihrem Desktop -Browser simulieren. Dies macht es zu einem universellen Tool zum Testen von reaktionsschnellen Webanwendungen.

Wie geht TestCafe mit asynchronen Operationen aus?

testcafe verfügt über einen integrierten automatischen Wartenmechanismus. Dies bedeutet, dass Sie Ihren Tests nicht manuell Wartezeit oder Winterschlaf hinzufügen müssen. Testcafe wartet automatisch auf das Laden von Seite und XHR vor und nach jeder Operation. Es wartet auch darauf, dass das Element sichtbar ist, bevor es mit ihm interagiert.

Kann ich Testcafe -Tests in mehreren Browsern gleichzeitig ausführen?

Ja, TestCafe erm?glicht es Ihnen, Tests gleichzeitig in mehreren Browsern auszuführen. Dies kann Ihren Testprozess erheblich beschleunigen. Sie k?nnen die Anzahl der gleichzeitigen Testl?ufe beim Starten des Tests angeben.

Wie kann man Tests in Testcafe debuggen?

testcafe bietet verschiedene Methoden zum Debuggen und Testen. Es enth?lt einen Debug -Modus, der den Test macht und es Ihnen erm?glicht, den Status der zu diesem Zeitpunkt getesteten Seite anzusehen. Es enth?lt auch Echtzeit-Teststatusberichte, Screenshots und Videoaufzeichnung von Testsitzungen.

Kann ich Testcafe für Cross-Browser-Tests verwenden?

Ja, TestCafe unterstützt Cross-Browser-Tests. Es kann Tests gleichzeitig in mehreren Browsern ausführen, sei es auf lokalen Maschinen oder auf Remote -Ger?ten. Es unterstützt alle beliebten Browser wie Chrome, Firefox, Safari und Internet Explorer.

Wie kann Testcafe -Seitennavigation handeln?

testcafe behandelt automatisch die Seitennavigation. Es wartet, bis die Seite geladen wird, bevor der Test beginnt, und nach jeder Aktion, die eine neue Seite verursacht. Dies bedeutet, dass Sie keinen speziellen Code hinzufügen müssen, um die Seitennavigation zu verarbeiten.

Kann ich Testcafe mit einem kontinuierlichen Integrationssystem verwenden?

Ja, TestCafe kann in beliebte kontinuierliche Integrationssysteme wie Jenkins, Teamcity, Travis usw. integriert werden. Es kann Berichte in einer Vielzahl von Formaten erstellen, einschlie?lich Xunit, die von diesen Systemen verwendet werden k?nnen.

Wie kann ich Datei -Uploads in TestCafe behandeln?

testcafe bietet einen speziellen Vorgang für das Datei -Upload. Sie k?nnen den T.SetFilestoUPload -Vorgang verwenden, um Dateien hochzuladen. Dieser Vorgang nimmt einen Selektor an, der die Dateieingabe und eine Zeichenfolge identifiziert, die den Pfad zum Hochladen der Datei angibt.

Kann ich Testcafe für Leistungstests verwenden?

W?hrend testcafe haupts?chlich für Funktionstests verwendet wird, kann es auch für Leistungstests verwendet werden. Sie k?nnen es verwenden, um die Zeit zu messen, die für den Betrieb, das Laden von Seite und AJAX -Anfragen erforderlich ist. Für detailliertere Leistungstests müssen Sie jedoch m?glicherweise ein dediziertes Leistungstest -Tool verwenden.

Diese überarbeitete Ausgabe beh?lt die Originalbildstandorte und -formate bei gleichzeitiger Umschreibung des Inhalts für Originalit?t.

Das obige ist der detaillierte Inhalt vonTestcafe: Einfachere End-to-End-Web-App-Tests mit node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!