Tutorial: Step by Step Implement Continuous Testing with Playwright: Part 1: Set up Playwright
How to set up Playwright for beginners!
This article series is for absolute beginners who want to learn and use Playwright E2E (Web) Test Automation.
Part 1: Set up Playwright
Part 3: Run your first Playwright Test
Part 4: Tool & Project Structure
Part 5: Gain Productivity
Part 6: Design with Maintenance in mind
Part 7: More Tests
Part 8: Set up Continuous Execution
Part 9: Run a small suite of Playwright tests in BuildWise, sequentially
Part 10: Parallel Playwright test execution in BuildWise
Part 11: FAQ
The end goal is to set up tests and run a suite of Playwright tests in parallel in a continuous testing server, in a matter of hours. Some readers might think this goal is a bit ambitious for beginners. However, I believe every E2E test automation engineer should aim for this from the start — otherwise, they’re not taking it seriously.
Zhimin: While a few hours, days, or even weeks are certainly not enough to master E2E test automation and Continuous Testing, a good and practical guide like this will help learners gain clarity on the right path and destination. After that, practice more and grow. Highlly recommend this series!
When I began my internship (where I was assigned to testing), I achieved this on Day 1 by running a few business automated tests using Selenium WebDriver with RSpec. My team leader was deeply impressed, but for me, it was just normal — this was how my father had always taught me. Later, a senior test automation engineer from the Sydney office (the head of the so-called Test Excellence Center) watched my video presentation to the entire division (recommended by my team leader). He then requested that I use Playwright instead. The next day, I had over 20 Playwright tests running in BuildWise. Ironically, this senior struggled to maintain his own ~12 Playwright tests. (Later, he even attempted to sabotage my work, but that’s another story…)
This article series is highly practical, and I strongly encourage you to follow the steps hands-on. For simplicity, I’ll be demonstrating on macOS, specifically the new M4 Mac Mini — an ideal machine for Test Automation and Continuous Testing. All my instructions will also work on Linux and Windows too, with some OS-specific variances.
To emphasize key points, I will omit some common setup instructions, such as installing Node.js, Ruby, and MySQL, as there are plenty of resources available online for those.
The goal here is to give you a clear understanding of what an effective Playwright setup looks like in a proper Agile project, where Continuous Testing (executing a comprehensive E2E test suite as daily regression testing) is at the heart of the process. Mastering this setup can also be beneficial in job interviews, not just by talking about it, but by demonstrating E2E test automation and Continuous Testing in action.
Now, let’s get started.
Set up Playwright
Compared to Selenium WebDriver, the Playwright set-up is longer and more confusing. There are some new concepts such as
npm node_modules
Even in JavaScript, choose between JS and TS (TypeScript)
Installing custom browser
The test syntax framework was embedded in, with unnatural test execution syntax (that’s some tradeoff here)
The above are unnecessary for Selenium WebDriver.
Anyway, let’s follow the official (and default) setup in Playwright’s official documentation.
Playwright supports several different programming languages. Setting aside my personal preferences, let’s go with the default one (TypeScript), as demonstrated in the official documentation.
1. Install
Create a new folder, e.g. whenwise-playwright-tests,
mkdir whenwise-playwright-tests
cd whenwise-playwright-testsThen run the command below in a terminal window from there to install Playwright.
npm init playwright@latestAccept all default options.
It will take about 2–3 minutes.
A set-up is incomplete unless we verify it, a tester’s mindset. Let’s run a Playwright test.
2. Run the sample test
After the end of installation, we see this.
So, I follow the suggestion (to execute a sample test). Run the command.
npx playwright testThen, it seemed doing something (without visual), about 10 seconds later, the console output:
And a web page pops up in a Chrome browser window.
I am an experienced test automation engineer and found the above confusing, which needs a bit of explanation.
The execution was for only one test script
example.spec.tscontaining two test cases ('get started link'and'has title'), but was run 3 times for three browser types: Chromium (Chrome), Firefox and WebKit (Safari)By default, the execution in Playwright is set in headless mode, which is not right (in my opinion), at least for beginners. You don’t get the satisfaction of seeing it executed!
Again, with Selenium WebDriver, the set up and learning process is more natural and quicker)
We will fix that and a few other unnatural default settings in Part 2.
Related reading: