Ich habe zehn Jahre lang Code getestet und geschrieben, und in den letzten vier Jahren habe ich Berichte im Programmkomitee der Heisenbug-Konferenz getestet. Heute werde ich über End-to-End-Tests, browserübergreifende Zugänglichkeit und den Nervenkitzel bei der Verwendung von Playwright Version 0.10.0 sprechen.Ende zu Ende
Warum brauchen wir End-to-End-Tests? Sie steuern den Browser und simulieren Benutzeraktionen. Zum Beispiel habe ich benutzerdefinierte Skripte beschrieben und möchte, dass sie mit jeder Version des Produkts getestet werden. Das manuelle Überprüfen aller Skripte für alle Versionen ist teurer und länger als automatisch.Es gibt verschiedene Werkzeuge: Selen, Puppenspieler, Winkelmesser, Zypresse und andere. Vor zwei Wochen wurde ein neues Tool veröffentlicht - Playwright, an dem Andrey Lushnikov, der Entwickler von Puppeteer, gearbeitet hat. Diese Bibliothek löst das Problem des Schreibens browserübergreifender Tests vollständig.
Der Original-Tweet von Andrey Lushnikov mit der Ankündigung.Puppenspieler vs. Dramatiker
Ich habe Puppeteer in mehreren Projekten verwendet, und insgesamt war es nicht schlecht. Außerdem erinnerte ich mich daran, dass Puppeteer Ende letzten Jahres eine Hauptversion von Version 2.0 hatte . Aber als ich in sein Archiv schaute , sah ich ein interessantes Bild:
Es scheint, dass ich nicht farbenblind bin, sondern ein bisschen zu viel Rot.Ich habe mich gefragt, warum Playwright besser ist - ein neues Tool, das in einer Microsoft-Organisation auf GitHub basiert .Warum ist Puppenspieler gut? Es startet einen kopflosen Browser und verwendet das DevTools-Protokoll , sodass die Tests schneller und stabiler als Selenium sind und Sie sie in angenehmem JavaScript schreiben können .Was ist gut an Playwright? Erstens hat es alle Puppenspielerbrötchen. Und zweitens können Sie browserübergreifende Tests schreiben - Sie können jeden Browser im Testcode auswählen : WebKit , Chromium und Firefox.Ein Moment der Selbstbildung: Browser-Engines Was braucht es, um einen browserübergreifenden Test auf Playwright zu schreiben? Ich brauchte npm , experimentelles Habr, Schulenglisch zum Lesen der Dokumentation, eine Tasse Kaffee und 15,5 Minuten.Installieren Sie Playwright . Wir schreiben in die Konsole:npm i playwrightScreenshot Habr. Kopieren Sie das Beispiel aus der Dokumentation:const playwright = require('playwright');
(async () => {
for (const browserType of ['chromium', 'firefox', 'webkit']) {
const browser = await playwright[browserType].launch();
const context = await browser.newContext();
const page = await context.newPage('http://habr.com/');
await page.screenshot({ path: `screenshots/example-${browserType}.png` });
await browser.close();
}
})();
Der Code auf Puppeteer wäre fast der gleiche:const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://habr.com');
await page.screenshot({path: 'screenshots/example.png'});
await browser.close();
})();
Der Test aus dem ersten Beispiel wird in drei Browsern ausgeführt. Es ist zwar unklar, in welchen Versionen und welche allgemein verfügbar sind. Die Dokumentation besagt, dass Playwright den Treiber für den Browser automatisch herunterlädt. Sie können auch einen bestimmten Browser angeben: const browser = await chromium.launch();
const context = await browser.newContext();
Um die Browserversion in Puppeteer auszuwählen, müssen Sie den Pfad zum Treiber angeben . In PlayWright gibt es keine solche Möglichkeit. Soweit ich weiß, wird immer die neueste Version der Engine verwendet, die bereits auf GitHub diskutiert wird .Übrigens, wenn Sie Screenshot-Tests mögen, seien Sie vorsichtig. Dramatiker und Puppenspieler machen unterschiedliche Screenshots in Chromium:
Aus irgendeinem Grund haben die Schriftarten unterschiedliche Größen. Ich habe ein Ticket auf GitHub gestartet .Playwright unterstützt WebKit, dh Tests in mobilen Browsern. Aber alle Smartphones und Tablets haben unterschiedliche Auflösungen - wie wählen Sie die aus, die Sie beim Ausführen von Tests benötigen? Ich habe 76 Geräte im Code deviceDescriptors.ts gefunden , einschließlich beliebter ModelleBlackBerry und JioPhone 2. Nützlich: Sie können iPhone 8 und iPhone 8 im Querformat auswählen. Der Testcode entspricht fast dem Test für einen normalen Browser:const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];
(async () => {
const browser = await webkit.launch();
const context = await browser.newContext({
viewport: deviceType.viewport,
userAgent: deviceType.userAgent
});
const page = await context.newPage('http://habr.com');
await page.screenshot({ path: `example-${deviceType.name}.png`});
await browser.close();
})();
Ein interessantes Feature von Playwright ist die Möglichkeit, die Geolokalisierung zu ändern. Dies ist praktisch, wenn Sie Karten testen. Beim Initialisieren des Browserkontexts müssen Sie die Koordinaten angeben:const context = await browser.newContext({
viewport: iPhone11.viewport,
userAgent: iPhone11.userAgent,
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});
Dies ist nicht mein erstes Testjahr und ich möchte manchmal sehen, wie der Test besteht. Puppenspieler hatte eine Option headless: false, die ein Browserfenster startete. Genau die gleiche Option gilt für Playwright:puppeteer.launch({headless: false});
playwright.launch({headless: false});
Da der Testcode in beiden Bibliotheken asynchron ist, können Sie ihn nicht einfach abrufen. Es gibt einen ganzen Absatz in der Puppenspieler-Dokumentation , aber nichts in der Playwright-Dokumentation. Darüber hinaus enthält die Playwright-Dokumentation keine Codebeispiele, aber es gibt ein Ticket für GitHub. Es scheint ein guter Grund zu sein, an einem Open Source-Projekt teilzunehmen. Und die Beispiele aus diesem Artikel über Dramatiker und Scherz habe ich in mein Repository gestellt .Ist es Zeit umzuziehen?
Es scheint, dass die Entwickler von Playwright bereit sind, schnell Funktionen hinzuzufügen und Fehler zu beheben. Zum Beispiel funktioniert das Herunterladen von Dateien derzeit nicht, aber Entwickler schreiben, dass sie das Problem beheben und es nicht schlechter sein wird als das von Puppeteer. Wenn Sie Tests nach Playwright portieren möchten, müssen Sie Tickets starten.Es scheint, dass das Playwright-Team das Beste in dieser Bibliothek zusammenstellen möchte. In GitHub-Tickets habe ich verschiedene Ideen zur Verbesserung der API gefunden - zum Beispiel das Hinzufügen von Funktionen wie in Cypress .Playwright unterstützt mehrere Browser und es ist bequemer, damit browserübergreifende Tests zu schreiben. Es stimmt, jetzt hat er Version 0.10.0, nicht viel Dokumentation, und SlackOverflow hat nur sechs Fragen. Ich empfehle, dass Sie sich die Veröffentlichungen von Playwright genau ansehen, sie jedoch noch nicht in der Produktion verwenden, da sich die API möglicherweise ändert.Entwickler Dramatiker auf Heisenbug
Ich teile die Neuigkeiten: Andrei Lushnikov wird auf der Heisenbug 2020 Piter-Konferenz, die vom 8. bis 9. April in St. Petersburg stattfinden wird, einen Vortrag über Dramatiker halten. Es gibt viele Fragen an ihn:- Warum heißt die neue Bibliothek Playwright und wo ist das Drama?
- Wann erscheinen die Beispiele in der Dokumentation und wie lange dauert es, bis auf die Veröffentlichung von Version 1.0 gewartet wird?
- Wie hoch ist die Wahrscheinlichkeit, dass die Abzeichen im Puppenspieler-Repository grün werden?
UPD: Ein Interview mit Andrei Lushnikov „Wenn Websites besser funktionieren, wird es perfekt sein“ wurde gerade veröffentlicht . Darin haben wir viel über Protokolle, Browser-Engines und externe Integrationen gesprochen.Tickets gibt es auf der Heisenbug-Website . Meinungen über Dramatiker und Puppenspieler - schreiben Sie in die Kommentare.
Und wenn Sie den Beitrag bis zum Ende lesen, aber aus irgendeinem Grund nicht mit Puppenspieler vertraut sind, schauen Sie sich Andreys Bericht von der letzten Heisenbug-Konferenz an, auf der er 55 Minuten lang über Puppenspieler sprach.