Playwright tips and tricks

Playwright tips and tricks

Welcome to the "Playwright Tips and Tricks" series, where we dive into the technical intricacies of leveraging Playwright for web automation. From optimizing workflows to mastering advanced features, this blog is your resource for pushing the boundaries of what Playwright can achieve. Join us as we dissect code snippets, explore nuanced techniques, and unveil insider strategies to empower your web development projects. Let's unlock the full potential of Playwright's capabilities together! #Playwright #WebAutomation #TechnicalInsights - Generated by Chat GPT ^^
Playwright tips and tricks

Test steps

Improve your Playwright test's readability with steps

Test.step is a useful feature in Playwright that helps to improve the human readability of test reports by allowing for the breakdown of individual actions within a test and grouping of relevant steps together. This helps to provide a clearer understanding of what is happening within the test and can aid in debugging if an issue arises. 

One of the key benefits of test.step is that it updates the test steps section of the report to give a much clearer roadmap of what the test is covering and what steps it failed on. This can be especially helpful in identifying the root cause of a failure and can save time and effort in the debugging process.

 

Request interception

Playwright provides APIs to monitor and modify browser network traffic, both HTTP and HTTPS. Any requests that a page does, including XHRs and fetch requests, can be tracked, modified, and handled.

Network mocking

Let’s speed up your Playwright scripts with request interception.

Mock API

Check out our API mocking guide to learn more about how to

  • mock API requests and never hit the API

  • perform the API request and modify the response

  • use HAR files to mock network requests.

  • Output

Data-driven

Visual testing

Playwright Test includes the ability to produce and visually compare screenshots using await expect(page).toHaveScreenshot(). On first execution, the Playwright test will generate reference screenshots. Subsequent runs will compare against the reference.

Note: We can use mask, maxdiffpixels, stylepath to achieve the exactly image that we want to compare

 
  • Option mask: Locator[] masks given elements, overlaying them with pink #FF00FF boxes.

Reuse state & reuse authentication

The playwright executes tests in isolated environments called browser contexts. This isolation model improves reproducibility and prevents cascading test failures. Tests can load existing authenticated states. This eliminates the need to authenticate in every test and speeds up test execution.

https://playwright.dev/docs/auth#basic-shared-account-in-all-tests

https://playwright.dev/docs/auth#authenticate-with-api-request

https://playwright.dev/docs/codegen#preserve-authenticated-state

Multiple roles

When to use: You need to test how multiple authenticated roles interact together, in a single test.

Details: Use multiple BrowserContexts and Pages with different storage states in the same test.

Soft assertion

By default, failed assertion will terminate test execution. Playwright also supports soft assertions: failed soft assertions do not terminate test execution, but mark the test as failed.

At any point during test execution, you can check whether there were any soft assertion failures:

Note that soft assertions only work with Playwright test runner.

Parallel and Serial

Playwright Test runs tests in parallel. In order to achieve that, it runs several worker processes that run at the same time. By default, test files are run in parallel. Tests in a single file are run in order, in the same worker process.

You can control the number of parallel worker processes and limit the number of failures in the whole test suite for efficiency.

Serial mode

Use test.describe.serial() to group dependent tests to ensure they will always run together and in order. If one of the tests fails, all subsequent tests are skipped. All tests in the group are retried together.

Javascript Log Message and exception

Trace Viewer

Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests meaning you can go back and forward through each action of your test and visually see what was happening during each action.

Emulation

With Playwright you can test your app on any browser as well as emulate a real device such as a mobile phone or tablet. Simply configure the devices you would like to emulate and Playwright will simulate the browser behavior such as "userAgent", "screenSize", "viewport" and if it "hasTouch" enabled. You can also emulate the "geolocation", "locale" and "timezone" for all tests or for a specific test as well as set the "permissions" to show notifications or change the "colorScheme".

Refer: Emulation | Playwright

Env variable

To make environment variables easier to manage, consider something like .env files.

 


Evaluate JS

Playwright scripts run in your Playwright environment. Your page scripts run in the browser page environment. Those environments don't intersect, they are running in different virtual machines in different processes and even potentially on different computers.

The page.evaluate() API can run a JavaScript function in the context of the web page and bring results back to the Playwright environment. Browser globals like window and document can be used in evaluate.

example.ts
const href = await page.evaluate(() => document.location.href);

Playwright Test for VSCode

This extension integrates Playwright into your VS Code workflow. Here is what it can do:

Playwright Test for VS Code

 

More like this

Bug Bash? How To Run It?
Jun 15, 2022

Bug Bash? How To Run It?

A Summary of Live Coding a Simple CLI for gRPC Testing at Go Conference 2023
Jul 14, 2023

A Summary of Live Coding a Simple CLI for gRPC Testing at Go Conference 2023

Bear - Làm QA/QC Cũng Vui Như Chơi Game
Sep 16, 2022

Bear - Làm QA/QC Cũng Vui Như Chơi Game