Get best of the week

Playwright - Microsoft Playwright and New Testing Tool



I have been testing and writing code for ten years, and for the past four years I have been testing reports in the program committee of the Heisenbug conference. Today I’ll talk about end-to-end tests, cross-browser accessibility, and the thrill of using Playwright version 0.10.0.

End to end


Why do we need end-to-end tests? They control the browser and simulate user actions. For example, I have described custom scripts and want them to be tested with each version of the product. Checking all scripts for all versions manually is more expensive and longer than automatic.

There are different tools: Selenium, Puppeteer, Protractor, Cypress and others. Two weeks ago, a new tool was released - Playwright, which was worked on by Andrey Lushnikov, the developer of Puppeteer. This library completely solves the problem of writing cross-browser tests.




The original tweet by Andrey Lushnikov with the announcement.

Puppeteer vs. Playwright


I used Puppeteer in several projects, and overall it was not bad. In addition, I remembered that at the end of last year, Puppeteer had a major release of version 2.0 . But when I looked into his repository , I saw an interesting picture:


It seems that I am not color blind, but a bit too much red.

I wondered why Playwright is better - a new tool that neatly rests on GitHub in a Microsoft organization.

Why is Puppeteer good? It launches a headless browser and uses the DevTools protocol , so the tests are faster and more stable than Selenium, and you can write them in pleasant JavaScript .

What is good about Playwright? Firstly, it has all the Puppeteer buns. And secondly, it allows you to write cross-browser tests - you can select any browser in the test code : WebKit , Chromium and Firefox.

A moment of self-education: browser engines
WebKit — Safari .

Chromium — Blink, Webkit. Blink Google Chrome, ., Microsoft Edge, Opera Vivaldi.

Firefox — Gecko. Chro Servo, Rust.


What does it take to write a cross-browser test on Playwright? I needed npm , experimental Habr, school English for reading documentation, a cup of coffee and 15 and a half minutes.

Install Playwright . We write in the console:
npm i playwright

Screenshot Habr. Copy the example from the 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();
   }
})();

The code on Puppeteer would be almost the same:

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

The test from the first example will be run in three browsers. True, it is unclear in which particular versions and which are generally available. The documentation says that Playwright automagically download the driver for the browser. You can also specify a specific browser:

 const browser = await chromium.launch();  // Or 'firefox' or 'webkit'.
 const context = await browser.newContext();

To select the browser version in Puppeteer, you need to specify the path to the driver. There is no such possibility in PlayWright. As I understand it, the latest version of the engine will always be used, which is already being discussed on GitHub.

By the way, if you like screenshot tests, be careful. Playwright and Puppeteer take different screenshots in Chromium:


For some reason, the fonts are of different sizes. I started a ticket on GitHub.

Playwright supports WebKit, which means tests in mobile browsers. But all smartphones and tablets have different resolutions - how to choose the ones you need when running tests? I found 76 devices in deviceDescriptors.ts code , including popular modelsBlackBerry and JioPhone 2. From useful: you can choose iPhone 8 and iPhone 8 in landscape mode. The test code is almost the same as the test for a regular 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();
})();

An interesting feature of Playwright is the ability to change geolocation, it will come in handy when testing maps. When initializing the browser context, you need to specify the coordinates:

const context = await browser.newContext({
   viewport: iPhone11.viewport,
   userAgent: iPhone11.userAgent,
   geolocation: { longitude: 12.492507, latitude: 41.889938 },
   permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});

This is not my first year in testing and sometimes like to see how the test passes. Puppeteer had an option headless: falsethat launched a browser window. Exactly the same option is with Playwright:

puppeteer.launch({headless: false});
playwright.launch({headless: false});

Since the test code on both libraries is asynchronous, you can’t just grab it. There is a whole paragraph in the Puppeteer documentation , but nothing in the Playwright documentation. In addition, there are no code examples in the Playwright documentation, but there is a ticket on GitHub. It looks like a good reason to participate in an open source project. And the examples from this article on Playwright and Jest I put into my repository .

Is it time to move?


It seems that the developers of Playwright are ready to quickly add features and fix bugs. For example, downloading files does not work right now, but developers write that they will fix it and it will be no worse than Puppeteer’s. If you want to port tests to Playwright, be prepared to start tickets.

It seems that the Playwright team wants to put together the very best in this library. In GitHub tickets, I found several ideas for improving the API - for example, adding features like in Cypress .

Playwright supports multiple browsers, and it is more convenient to write cross-browser tests with it. True, now he has version 0.10.0, not a lot of documentation, and SlackOverflow has only six questions. I recommend that you watch the releases of Playwright closely, but do not rush to use it in production yet, as the API may change.

Developer Playwright on Heisenbug


I share the news: Andrei Lushnikov will give a talk about Playwright at the Heisenbug 2020 Piter conference, which will be held on April 8-9 in St. Petersburg. There are many questions to him:

  • why is the new library called Playwright and where does the drama
  • when will the examples appear in the documentation and how long will it wait for the release of version 1.0
  • what is the probability that the badges in the Puppeteer repository turn green

UPD: An interview with Andrei Lushnikov “If websites work better, it will be perfect” has just been released . In it, we talked a lot about protocols, browser engines and external integrations.

Tickets are on the Heisenbug website . Opinions about Playwright and Puppeteer - write in the comments.
And if you read the post to the end, but for some reason are not familiar with Puppeteer, look at Andrey's report from the last Heisenbug conference, where he talked about Puppeteer for 55 minutes.

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles