I learnt about it from a mention on Twitter and thought to give it a whirl.
This post is purely meant to be a sketchy guide on getting started with it ( with less focus on it’s overall architecture & philosophy, however, importantly, for that start with the docs here )
Toolkit for this post –
- VS Code as IDE
- Chrome as the browser
- OS = macOS
Installation and set up –
- Install playwright framework using npm on your terminal –>
npm i -D playwright
- Check Node.js has been installed successfully and is in your path –>
nodecommand on your terminal should return a prompt like below. Ctrl+C twice to exit.
- Lets create a simple .js file that we will use to write our test and run it using Node.js
- Ensure Google Chrome’s canary build is installed at default location –>
/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary
Build code for your test –
- Test is — Visit a contemporary e-commerce web site, browse for some items, then login user a username & password combination , but the combo is incorrect, assert on the error message displayed
- Code pattern followed is async & await
- Declare that you will use chromium based browser for your testing –>
- Declare that you will use inbuilt assertions in your test –>
- Write a snippet to launch an instance of Chrome, headful, by providing a path to the chrome canary and navigate to the webapp under test.
- Selecting elements is a breeze and no need to write waits ! Can select elements based on text easily
- Find our dynamic error message on a failed login ,get it’s content and perform a rudimentary assertion on it
- Run ! –> node <file_name>.js
Putting it all together …
Initial Playwright experience
- Found writing the test very intuitive
- Loved not having to write explicit waits
- Stoked about the straightforwardness of dealing with selectors
Will definitely explore Playwright more !