Running Playwright Mocha tests in BuildWise CT Server
Setting up a suite of Playwright Mocha tests in BuildWise to run continuously!
I am currently undertaking an internship, where I have been using Microsoft’s Playwright test automation framework for automated UI testing. I completed the test suite in raw Selenium WebDriver + RSpec first which was much easier. Once I started writing a couple of tests in Playwright, I have been working on getting it set up on a Continuous Testing (CT) server.
BuildWise is an open-source Continuous Testing Server available online for free. See this article for why Continuous Testing is a crucial process in software development:
Playwright Test Runner vs Playwright with Mocha
Playwright with PlaywrightTest (Playwright’s default syntax framework) cannot be set up in a CT server yet (from my understanding). As I was not able to find any solutions online that enabled this.
Luckily, Playwright supports other test syntax frameworks (called third-party runners in their documentation). To run Playwright in BuildWise, you should use the Mocha test syntax framework. Mocha is one of the most popular JavaScript syntax frameworks.
This article will cover how to set up a Playwright Mocha project to run in BuildWise, a CT Server.
Installing BuildWise
First follow this article to install BuildWise and familiarise yourself with the navigation.
Creating a Project
Fill in details for your new project (I am using the sample Playwright + Mocha one in the above guide’s GitHub repo). Importantly, set the test framework to Mocha (JavaScript) on the bottom right.
Now, we want to verify whether the test repository is checked out correctly. So let’s kick off a build first. Click ‘Build Now’.
For mine, it ran for a while without doing anything, so cancel the build (I cancelled it at 120 seconds, feel free to cancel it sooner than that).
Click on the project name to edit the configuration (in my case, AgileTravel Build Playwright Mocha).
If a config error states that project sources were not checked out like the image below, then manually do so.
In a new command window, go to C:/agileway/tmp/.buildwise/<your project identifier>.
Clone your test repository under the name sources.
In sources, do a quick test execution on command line to ensure everything is working as intended.
My tests are running which is a good sign 😊. Head back to BuildWise, and trigger another build.
Viewing a Build
Again, click ‘Build Now’ on your project.
Your build should start, checkout the latest commit from the repo then begin running the test. You should see some Chrome browsers pop up and run the tests. Here is an in-progress screenshot I took of the build executing:
Viewing a Build’s Failures
Here were the results of my build, with one failure.
I can see that 02_flight_spec.js failed, if you click on the red Failure on the Result column, you can see the error in more detail (and a screenshot). For my build, I can see that it failed due to a timeout error.
From the error output, now you can go into your tests and fix the error (in my case, I can increase the time out or simply rerun the build to see if it always times out). It is very helpful to copy the error line to your clipboard to quickly get to the troublesome area.
BuildWise will automatically pull your latest commit automatically when the build begins, so you can focus on committing your test changes.
I hope this article was able to help you set up a CT server to run Playwright with Mocha E2E automated UI tests. Happy testing 😊
