Playwright: Advanced Features and Annotations

Learn about the Playwright Inspector tool, mobile device emulation capabilities, and annotations.

Let’s explore the advanced features of the Playwright framework that front-end developers and SDETs can and should use.

Note: Measuring code coverage is also considered a powerful capability within software test automation. Keep in mind that for Playwright, the code coverage with Istanbul is currently supported on Chromium-based browsers only.

Emulating mobile devices

As opposed to the Cypress framework, Playwright offers built-in mobile device emulation capabilities that can validate against the mobile device viewports and color schemes to show how a web application will look and behave. While it doesn’t replace a real mobile device test, it does extend the test coverage capabilities within Playwright. Additional mobile-specific capabilities center on specifying the geolocation, time zones, and locales of the web application under test.

In the code snippet and screenshot that follow, we can see how, by using Playwright, we can navigate to the Google website on an iPhone 13 Pro smartphone while setting a German locale (de-DE).

Clicking the “Run” button below will open an iPhone 13 Pro viewport size:

Get hands-on with 1200+ tech skills courses.