Testcafe: Einfachere End-to-End-Web-App-Tests mit node.js

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 => {
    // 我们稍后将添加测试代码
});

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 => {
    // 我们稍后将添加测试代码
});

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!