|
|
Playwright is a recent browser automation tool that provides an alternative to Selenium.
For this example we will use Playwright Test Runner, which is based on Folio - a customizable test framework used to build higher-level test frameworks using Jest-like assertions. Playwright Test Runner is still fairly new as you can see in the official documentation:
If you want, you can use other runners (e.g. Jest, AVA, mocha). What you need:
|
To start using the Playwright Test Runner, follow the Get Started documentation.
The test consists of validating the login feature (with valid and invalid credentials) of the demo site, for which we have created a page object that will represent the loginPage
const config = require ("../config.json"); // models/Login.js class LoginPage { constructor(page) { this.page = page; } async navigate() { await this.page.goto(config.endpoint); } async login(username, password) { await this.page.fill(config.username_field, username); await this.page.fill(config.password_field, password); await this.page.click(config.login_button); } async getInnerText(){ return this.page.innerText("p"); } } module.exports = { LoginPage }; |
plus a configuration file where we have the identifiers that will match the elements in the page
{ "endpoint" : "https://robotwebdemo.herokuapp.com/", "login_button" : "id=login_button", "password_field" :"input[id=\"password_field\"]", "username_field" : "input[id=\"username_field\"]" } |
And define the test that will assert if the operation is successful or not
import {it, describe, expect} from "@playwright/test" import { LoginPage } from "./models/Login"; describe("Login validations", () => { it('Login with valid credentials', async({page}) => { const loginPage = new LoginPage(page); await loginPage.navigate(); await loginPage.login("demo","mode"); const name = await loginPage.getInnerText(); expect(name).toBe('Login succeeded. Now you can logout.'); }); it('Login with invalid credentials', async({page}) => { const loginPage = new LoginPage(page); await loginPage.navigate(); await loginPage.login("demo","mode1"); const name = await loginPage.getInnerText(); expect(name).toBe('Login failed. Invalid user name and password.'); }); }) |
The Playwright Test Runner provides a Jest like way of describing test scenarios, here you can see that it uses 'it, describe, expect'.
These are simple tests that will validate the login functionality by accessing the demo site, inserting the username and password (in one test with valid credentials and in another with invalid credentials), clicking the login button and validating if the page returned is the one that matches your expectation.
Once the code is implemented (and we will make it fail on purpose on the 'Login with invalid credentials' test due to missing word, to show the failure reports), can be executed with the following command:
npx folio -p browserName=chromium --reporter=junit,line --test-match=login.spec.ts |
First, define one extra parameter: "browserName" in order to execute the tests only with the chrome browser (chromium), otherwise the default behaviour is to execute the tests for the three available browsers (chromium, firefox and webkit).
The results are immediately available in the terminal
In this example, one test has failed and the other one has succeed, the output generated in the terminal is the above one and the corresponding Junit report is below:
<testsuites id="" name="" tests="2" failures="1" skipped="0" errors="0" time="2.592"> <testsuite name="login.spec.ts" timestamp="1617094735952" hostname="" tests="2" failures="1" skipped="0" time="2.37" errors="0"> <testcase name="Login validations Login with valid credentials" classname="login.spec.ts Login validations" time="1.358"> </testcase> <testcase name="Login validations Login with invalid credentials" classname="login.spec.ts Login validations" time="1.012"> <failure message="login.spec.ts:14:5 Login with invalid credentials" type="FAILURE"> login.spec.ts:14:5 › Login validations Login with invalid credentials ============================ browserName=webkit, headful=false, slowMo=0, video=false, screenshotOnFailure=false Error: expect(received).toBe(expected) // Object.is equality Expected: "Login failed. Invalid user name and password." Received: "Login failed. Invalid user name and/or password." 17 | await loginPage.login("demo","mode1"); 18 | const name = await loginPage.getInnerText(); > 19 | expect(name).toBe('Login failed. Invalid user name and password.'); | ^ 20 | }); 21 | }) at /Users/cristianocunha/Documents/Projects/Playwrighttest/login.spec.ts:19:22 at runNextTicks (internal/process/task_queues.js:58:5) at processImmediate (internal/timers.js:434:9) at WorkerRunner._runTestWithFixturesAndHooks (/Users/cristianocunha/Documents/Projects/Playwrighttest/node_modules/folio/out/workerRunner.js:198:17) </failure> </testcase> </testsuite> </testsuites> |
Repeat this process for each browser type in order to have the reports generated for each browser.
Notes:
As we saw in the above example, where we are producing Junit reports with the result of the tests, it is now a matter of importing those results to your Jira instance. You can do this by simply submitting automation results to Xray through the REST API, by using one of the available CI/CD plugins (e.g. for Jenkins) or using the Jira interface to do so.
|
.toc-btf { position: fixed; } |
.toc-btf { position: fixed; } |