Set up and Develop Playwright Mocha Test Scripts with TestWise IDE
A step-by-step guide (with video) to create a test project for a Playwright+Mocha test script in TestWise IDE.
This article will be free to all readers next week.
The video below uses an Appium + WinAppDriver script to:
- Launch the TestWise IDE v7 (currently in alpha).
- Create a new Playwright + Mocha test project in TestWise IDE.
- Script a complete user login test script.
- Execute the newly created Playwright test.
All within 50 seconds. (fully automated, no human intervention)
This article shows how you do it step by step.
1. Prerequisite: Install Node.js, Playwright and Test libraries
First of all, you need to get Node.js installed first.
Install the Playwright automation package.
npm install --global playwright
Then, install its browser drivers.
npx playwright install
You will see the output like the below:
Downloading Chromium 117.0.5938.62 (playwright build v1080)
downloaded to /Users/ME/Library/Caches/ms-playwright/chromium-1080
Downloading Firefox 117.0 (playwright build v1424)
downloaded to /Users/ME/Library/Caches/ms-playwright/firefox-1424
Downloading Webkit 17.0 (playwright build v1908)
downloaded to /Users/ME/Library/Caches/ms-playwright/webkit-1908
Install Mocha, the test syntax framework.
npm install --global mocha
2. Verify Test Execution Setup
I have a habit of immediately verifying the operation. Execute the following commands in a terminal.
% cd
% git clone https://github.com/testwisely/buildwise-samples
If you don’t use Git (for version control), I highly encourage learning it, and it is quite easy to use. Check out our 10-Minute Guide to Git Version Control for Testers.
You will find a set of folders and files under ~/buildwise-samples
. Go to that folder in your terminal. Then, in the same terminal window, run these two commands (one by one).
% cd buildwise-samples/e2e-mocha-playwright
% npm install
% mocha tests/01_login_spec.js
You shall see a Chromium browser open and run two test cases (in one test script file) in it.
3. Install TestWise IDE
Since the Playwright Mocha scripts are JavaScript files, you may use any programming editor, such as Visual Studio Code or JavaScript-specific IDEs, such as WebStorm.
TestWise IDE is a Next-Gen Functional Testing IDE designed for E2E testing. I learned Test Automation with TestWise (Disclaimer: My father created TestWise). You may use TestWise in free mode with just minor constraints (relaunch the app after 15 test executions).
You may choose any tool to develop Playwright test scripts (in plain text). That’s the beauty of being open-source and in a well-known language.
Even if you are not using TestWise, I still encourage you to explore the test project structure that TestWise uses. It is simple and embraces the Maintainable Automated Test Design, which has been well-proven in many successful test automation projects. You can take advantage of the proven structure and supporting files (e.g. helper and page classes) even using a different testing tool.
4. Create a Test Project and your first Playwright Mocha test script in TestWise IDE.
TestWise uses the concept of ‘Project’ to confine the test scripts and supporting files.
1). Click menu ‘File’ > “New Project”.
Fill in the following information:
Project name: <any text>
Location: <an empty folder>
Automation Driver: Playwright
Test Script Syntax: Mocha
Website URL: <your website base URL>
2). Click the “OK” button to create the test project.
Here is how the test project shows in TestWise.
A brief explanation of the folder and files:
spec
Folder:
Contains test script files in the format of XXX_spec.jspages
Folder:
Contains the page classes (see Page Object Model), theabstract_page.js
is already created.test_helper.js
Shared test helper (see Maintainable Automated Test Design)Rakefile
&buildwise.rake
for integratingXXX.tpr
File
TestWise project file
5. Create your first Playwright PyTest test in TestWise IDE.
3). Run the empty test script
Click new_spec.js
(in the PROJECT EXPLORER on the left) to open in an editor. Click the blue triangle button (on the toolbar) to run it.
You shall see a Chromium browser launch, open our target website, and close.
4). Write test statements in TestWise.
I enter the three login statements using Snippet (a TestWise feature), which is efficient and fun.
For example, type aw
followed by a Tab key, will expand to await
. Type pf
, followed by a Tab key (page.fill
), enter #username
, another Tab key, enter agileway
, then a Tab key again.
await page.fill('#username', 'agileway')
Anyway, the login test case will be:
it('Case Name', async function() {
// this.timeout(2000);
// example steps, edit or delete to add your own.
await page.fill("#username", "agileway")
await page.fill("#password", "testwise")
await page.click("input:has-text('Sign in')")
});
Rename the test case name, from it('Case Name', ...
to it('Can login OK', ...
.
5. Rerun the test case (in TestWise).
6. Full Test Script
const { chromium } = require('playwright');
var path = require("path");
var assert = require('assert');
const timeOut = 15000;
let page, browser, context
var helper = require('../test_helper');
// An example in below: var FlightPage = require('../pages/flight_page.js')
// BEGIN: import pages
//
// END: import pages
describe('Test Suite', function() {
this.timeout(5000); // override default timeout 2000ms
before(async function() {
// this.timeout(3000);
browser = await chromium.launch({
headless: false,
});
context = await browser.newContext();
page = await context.newPage();
});
beforeEach(async function() {
// this.timeout(3000);
await page.goto(helper.site_url());
});
after(async function() {
if (!helper.is_debugging()) { // don't close browser if running individual test
browser.close();
}
});
it('Can Login OK', async function() {
// this.timeout(2000);
await page.fill("#username", "agileway")
await page.fill("#password", "testwise")
await page.click("input:has-text('Sign in')")
await page.textContent("#flash_notice").then(function(notice) {
assert.equal("Signed in!", notice)
})
});
});