Je teste et j'écris du code depuis dix ans et depuis quatre ans, je teste des rapports au comité de programme de la conférence Heisenbug. Aujourd'hui, je vais parler des tests de bout en bout, de l'accessibilité entre les navigateurs et de la convivialité de Playwright version 0.10.0.De bout en bout
Pourquoi avons-nous besoin de tests de bout en bout? Ils contrôlent le navigateur et simulent les actions des utilisateurs. Par exemple, j'ai décrit des scripts personnalisés et je souhaite qu'ils soient testés avec chaque version du produit. La vérification manuelle de tous les scripts pour toutes les versions est plus coûteuse et plus longue que automatique.Il existe différents outils: sélénium, marionnettiste, rapporteur, cyprès et autres. Il y a deux semaines, un nouvel outil a été publié - Playwright, sur lequel Andrey Lushnikov, le développeur de Puppeteer, a travaillé. Cette bibliothèque résout complètement le problème de l'écriture de tests inter-navigateurs.
Le tweet original d' Andrey Lushnikov avec l'annonce.Marionnettiste vs. Dramaturge
J'ai utilisé Puppeteer dans plusieurs projets, et dans l'ensemble ce n'était pas mal. De plus, je me souvenais qu'à la fin de l'année dernière, Puppeteer avait une version majeure de la version 2.0 . Mais quand j'ai regardé dans son dépôt , j'ai vu une image intéressante:
il semble que je ne suis pas daltonien, mais un peu trop rouge.Je me demandais pourquoi Playwright était meilleur - un nouvel outil qui repose parfaitement sur GitHub dans une organisation Microsoft.Pourquoi le marionnettiste est-il bon? Il lance un navigateur sans tête et utilise le protocole DevTools , donc les tests sont plus rapides et plus stables que Selenium, et vous pouvez les écrire en JavaScript agréable .Qu'est-ce qui est bon chez Playwright? Tout d'abord, il a tous les petits pains de marionnettiste. Et deuxièmement, il vous permet d'écrire des tests inter-navigateurs - vous pouvez sélectionner n'importe quel navigateur dans le code de test : WebKit , Chromium et Firefox.Un moment d'auto-éducation: les moteurs de navigation Que faut-il pour écrire un test multi-navigateur sur Playwright? J'avais besoin de npm , de Habr expérimental, d'anglais scolaire pour lire la documentation, d'une tasse de café et de 15 minutes et demie.Installez Playwright . Nous écrivons dans la console:npm i playwrightCapture d'écran Habr. Copiez l'exemple de la documentation: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();
}
})();
Le code sur Puppeteer serait presque le même: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();
})();
Le test du premier exemple sera exécuté dans trois navigateurs. Certes, il n'est pas clair dans quelles versions particulières et lesquelles sont généralement disponibles. La documentation indique que Playwright télécharge automatiquement le pilote pour le navigateur. Vous pouvez également spécifier un navigateur spécifique: const browser = await chromium.launch();
const context = await browser.newContext();
Pour sélectionner la version du navigateur dans Puppeteer, vous devez spécifier le chemin d' accès au pilote. Il n'y a pas une telle possibilité dans PlayWright. Si je comprends bien, la dernière version du moteur sera toujours utilisée, ce qui est déjà en cours de discussion sur GitHub.Au fait, si vous aimez les tests de captures d'écran, soyez prudent. Playwright et Puppeteer prennent différentes captures d'écran dans Chromium:
pour une raison quelconque, les polices sont de tailles différentes. J'ai commencé un ticket sur GitHub.Playwright prend en charge WebKit, ce qui signifie des tests dans les navigateurs mobiles. Mais tous les smartphones et tablettes ont des résolutions différentes - comment choisir celles dont vous avez besoin lors des tests? J'ai trouvé 76 appareils dans le code deviceDescriptors.ts , y compris les modèles populairesBlackBerry et JioPhone 2. D'utile: vous pouvez choisir iPhone 8 et iPhone 8 en mode paysage. Le code de test est presque le même que le test pour un navigateur classique: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();
})();
Une fonctionnalité intéressante de Playwright est la possibilité de modifier la géolocalisation, elle sera utile lors des tests de cartes. Lors de l'initialisation du contexte du navigateur, vous devez spécifier les coordonnées:const context = await browser.newContext({
viewport: iPhone11.viewport,
userAgent: iPhone11.userAgent,
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});
Ce n'est pas ma première année de test et j'aime parfois voir comment le test réussit. Puppeteer avait une option headless: falsequi ouvrait une fenêtre de navigateur. Exactement la même option est avec Playwright:puppeteer.launch({headless: false});
playwright.launch({headless: false});
Étant donné que le code de test sur les deux bibliothèques est asynchrone, vous ne pouvez pas simplement le saisir. Il y a tout un paragraphe dans la documentation Puppeteer , mais rien dans la documentation Playwright. De plus, il n'y a pas d'exemples de code dans la documentation Playwright, mais il y a un ticket sur GitHub. Cela semble être une bonne raison de participer à un projet open source. Et les exemples de cet article sur Playwright et Jest que j'ai mis dans mon référentiel .Est-il temps de bouger?
Il semble que les développeurs de Playwright soient prêts à ajouter rapidement des fonctionnalités et à corriger des bugs. Par exemple, le téléchargement de fichiers ne fonctionne pas pour le moment, mais les développeurs écrivent qu'ils vont le réparer et ce ne sera pas pire que celui de Puppeteer. Si vous souhaitez porter des tests sur Playwright, préparez-vous à démarrer les tickets.Il semble que l'équipe Playwright veuille rassembler le meilleur de cette bibliothèque. Dans les tickets GitHub, j'ai trouvé plusieurs idées pour améliorer l'API - par exemple, ajouter des fonctionnalités comme dans Cypress .Playwright prend en charge plusieurs navigateurs, et il est plus pratique d'écrire des tests inter-navigateurs avec. Certes, il a maintenant la version 0.10.0, pas beaucoup de documentation, et SlackOverflow n'a que six questions. Je vous recommande de regarder attentivement les versions de Playwright, mais ne vous précipitez pas pour l'utiliser en production, car l'API peut changer.Développeur Playwright sur Heisenbug
Je partage la nouvelle: Andrei Lushnikov donnera une conférence sur le dramaturge lors de la conférence Heisenbug 2020 Piter, qui se tiendra les 8 et 9 avril à Saint-Pétersbourg. Il lui pose de nombreuses questions:- pourquoi la nouvelle bibliothèque s'appelle Playwright et d'où vient le drame
- quand les exemples apparaîtront dans la documentation et combien de temps faudra-t-il pour attendre la sortie de la version 1.0
- quelle est la probabilité que les badges du référentiel Puppeteer deviennent verts
UPD: Une interview d'Andrei Lushnikov «Si les sites Web fonctionnent mieux, ce sera parfait» vient d'être publiée . Dans ce document, nous avons beaucoup parlé des protocoles, des moteurs de navigateur et des intégrations externes.Les billets sont sur le site Web de Heisenbug . Opinions sur le dramaturge et le marionnettiste - écrivez dans les commentaires.
Et si vous lisez le post à la fin, mais pour une raison quelconque, vous ne connaissez pas Puppeteer, regardez le rapport d' Andrey de la dernière conférence Heisenbug, où il a parlé de Puppeteer pendant 55 minutes.