Getting started with Playwright
Published:
Once your website gets to a certain size or you have multi authors you will want to set out rules to follow and automate testing to make sure that all new updates reach the level you require before you publish them to the live website. This is where Playwright from Microsoft comes into play.
Playwright is a powerful tool for website testing, and there are several reasons why you might choose it:
Cross-Browser Testing: It supports multiple browsers like Chrome, Firefox, and Safari. This means you can ensure your website works seamlessly across different platforms.
End-to-End Testing: Playwright can simulate real user interactions, helping you catch bugs that only appear when your site is actually used.
Fast and Reliable: It's designed for speed and reliability, ensuring your tests run quickly and consistently.
Rich API: Playwright's API allows for complex testing scenarios, including handling file uploads, downloads, or interacting with web components.
Headless Mode: It can run in headless mode, which is useful for automated CI/CD pipelines as it doesn’t require a GUI.
Screenshots and Videos: You can capture screenshots and videos of your tests to help debug any issues.
Isolation: Playwright's context isolation ensures your tests do not interfere with each other, providing more accurate results.
Cross-language: Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java.
Lets explore getting started with Playwright
You can set up Playwright to work on your local machine on the command line or within your editor, within GitHub Codespaces or part of your release pipeline. You could also decide to run Playwright with Microsoft Playwright Testing on Azure plus many other services offer Playwright testing.
What do you need to be able to run Playwright tests from your own machine. You need to make sure you meet its System requirements which are
Node.js 18+
Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
macOS 13 Ventura, or later.
Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture.
If that's all OK then this page within Playwrights docs covers installing it using npm, yarn, pnpm or installing the VS Code Addin. Head to playwright.dev/docs/intro to get started.
How do you write tests
Tests can be defined in code within test files written in JavaScript or TypeScript or recorded in a browser using codegen. Playwright comes with the ability to generate tests for you as you perform actions in the browser and is a great way to quickly get started with testing.
Using playwright to test we can:
Use a web page as a user would, such as follow the steps to complete a form.
Test for 200 HTTP status (page ok) on each menu option and report if we get a 404 HTTP status (page not found).
Screenshot a page to record how each version release looked.
Check for things like page title, meta description, images having alt tags and they are filled in.
Test for Core Web Vitals measuring performance metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Contentful Paint (FCP) using tests.
Look for Accessibility (A11y) issues using third party addins. Playwright offers a package called @axe-core/playwright that integrates the axe-core accessibility testing engine into your Playwright tests.
Running tests in VS Code
Being able to work with Playwright right from within VS Code is such a time saver and makes testing feel much more part of a project instead of an extra feature. Again the Playwright docs cover this so well even including videos of the steps to get you up to speed. Head over to Getting started - VS Code page to get started.
Where to run Playwright
As we mentioned before you have plenty of choice in where to run Playwright such as Locally on your machine, in a GitHub Codespaces or as part of a CI/CD pipeline. Maybe as part of a GitHub Action again the Playwright docs have you covered with Setting up CI.
If you are looking for a central place to stage and run tests from then the new Microsoft Playwright Testing Preview on Azure enables us to do this plus a lot more. Currently we have not found time to explore this service fully yet but we do have plans to use it for some projects in 2025. We will let you know how we get on.
Why does JasmineDesign use Playwright and not one of the other testing tools.
We have found Playwright easy to use now, with the added feature of been able to run and view tests right from our code editor which is VS Code, making it so natural and not an extra task to carry out.
What about Videos
If you are looking to learn from video's, Then the Playwright doc's contains a number of them built right into it. However you should also check out these two channels on YouTube the Playwright's Channel and Checkly both of these are great resources for learning all about Playwright.
Alternatives for Website Testing
There are several great alternatives to Playwright for website testing. Here are a few popular options:
Puppeteer: Developed by Google, this Node.js library is great for browser automation and works well with headless testing
Selenium: A widely-used open-source framework that supports multiple programming languages and browsers It's highly flexible and has a large community
Cypress: An open-source tool that allows for end-to-end testing directly in the browser It's known for its ease of use and real-time test execution
WebdriverIO: A comprehensive testing utility that supports multiple browsers and integrates well with other testing frameworks
If you would be interested in some tips around one of these other testing tools let us know and we will see what we can do.
We are always happy to help
We hope that we have given you a little insight into how Playwright can become your best friend whilst testing websites. Should you have any questions or be looking for help with regards to website testing or testing with Playwright, reach out to see if we can help you.