How one can begin UI automated assessments with Playwright – ISS Artwork Weblog | AI | Machine Studying

Some great benefits of utilizing Playwright for UI testing?

Within the trendy traits of net purposes improvement the nice benefit is to have a possibility to create automated assessments shortly, launch them and get consultant execution outcomes for the evaluation. That’s why to realize it and acquire the sting over the favored webDriver and Chrome DevTools protocol applied sciences, Microsoft began its open supply challenge Playwright, which gives QA engineers with following options in UI automated testing:

1. Playwright helps 3 important browser engines: Chromium (Chrome, Opera, Edge browsers), WebKit (Safari browser) and Gecko (Firefox browser). Whether it is crucial to check an online software within the cell model of those browser engines – no downside, use system DescriptorsSource.json file which Playwright builders hold within the up to date state to emulate cell, pill or desktop gadgets;
2. Playwright helps Linux, Home windows and Mac OS working methods;
3. Playwright launches assessments in headless or headful modes;
4. Playwright works with fashionable browser automation protocols: Chrome DevTools Protocol (Chromium engine), WebInspector protocol (WebKit engine) and Juggler protocol (Gecko engine) to let your assessments have entry to Permissions, Geo location, ServiceWorkers and Networks information inside your browsers;
5. Playwright works with its personal built-in locators and, in fact, helps CSS and XPath locators, that are utilized in Selenium + WebDriver testing instruments;
6. Playwright comes with a Check Generator out of the field. This generator will enable you to generate a number of assessments utilizing browser GUI, save the Typescript code for them and shortly get all locators to your assessments;
7. Playwright has an official extension for Visible Studio Code, so check code improvement, debugging and execution may be very simple and simple.

In case you are prepared, let’s begin with Playwright set up and VS Code extension setup. This text consists of video tutorials in Full HD (1080p) decision for many of the steps to view and perceive work with Playwright from the very starting. Moreover, all of the Typescript code demonstrated within the article is offered in our public repository on the GitHub.

By default, playwright documentation describes set up for Node.js package deal supervisor and we’re going to use it too. The documentation additionally consists of documentation for Python, Java and .NET. To get it simply choose the required programming language on the high of the navigation menu. On this article Playwright set up is demonstrated for Ubuntu 22.04 LTS OS, however Playwright could be put in on Home windows and Mac working methods too, as we now have talked about above.

Playwright device set up

Create a brand new folder in your house listing, let’s name it “playwright”. Open terminal and paste this command to put in Playwright:
npm init playwright@newest

Then, choose “Typescript” because the default language, “assessments” folder title, “false” for GitHub Actions workflow, “true” to put in all 3 Playwright browsers and “false” to put in Playwright system dependencies. These are the steps for the default Playwright set up. That’s all! After the set up is completed, we are able to see a command within the Terminal window to run Playwright check instance:
npx playwright check

Playwright will run this check instance in headless mode for browser, so we are able to see the next message after these assessments are handed:
npx playwright show-report

This command will open the default browser on the “localhost:9323” report URL and show outcomes for passing 2 assessments in 3 browsers – Chromium, Firefox, WebKit – 6 assessments in complete.

These two assessments are positioned within the “instance.spec.ts” file, the configuration for the check run is positioned in “playwright.config.ts” file by which we are able to configure Playwright to specify browsers to run assessments. The report URL web page incorporates clickable hyperlinks for every of 6 assessments – handed or failed. We will click on on every hyperlink to view all steps of each check with time spent for every check operation within the Typescript code.

The “playwright.config.ts” file known as the International configuration file. It gives many choices to run Playwright end-to-end assessments: timeouts, baseURLs, browsers, mode headless or headful, time zones, permissions, geolocations, and so on. – all of the options adjusted for the check from the Playwright device builders.

All these steps, describing the set up, are proven within the video.

Playwright extension set up within the Visible Studio Code

To jot down, report, debug and run new assessments Playwright device builders suggest  utilizing open-source Visible Studio Code IDE and set up official Playwright extension from the VS Code market. VS Code might be downloaded and put in from the official VS Code website for Linux, Home windows or Mac OS methods. Set up VS code to comply with check examples on this article.

Home windows or Mac OS methods. Set up VS code to comply with check examples on this article. Launch Visible Studio, click on on the “Extensions” menu within the left tab of the IDE and seek for “Playwright” extension. “Playwright Check for VS Code” is the official title of the Playwright extension from Microsoft. Press the “Set up” button to proceed with set up of the Playwright extension. After the set up is completed, a brand new “Testing” menu will seem within the left tab. Now, VS Code is able to work with Playwright assessments. We will use two assessments that Playwright has generated throughout set up and which we now have positioned within the  “playwright” folder to point out debug and run assessments from Visible studio.

Playwright extension set up within the Visible Studio Code is proven within the subsequent video.

Working and debugging assessments within the Visible Studio Code

Open the “playwright” folder in VS Code and the default Playwright construction of the folder and recordsdata will likely be displayed. Let’s open the “instance.spec.ts” file – we are able to see 2 assessments in it:‘has title’ and ‘get began hyperlink’. Playwright extension means that you can run any of those assessments by clicking the “Run” button from the left column close to the rows numbers.

Open the “Testing” menu on the left bar of the VS Code, all of the assessments from the “assessments” folder will likely be displayed within the “Check Explorer”. This “Testing” menu shows important “Playwright” options for check execution: “Present browser” checkbox, “Decide locator”, “Document new”, “Document at cursor”, “Reveal check output”. 

“Check Explorer” means that you can run and debug assessments.

To begin debugging, press the “Debug” button within the “Testing” menu. VS Code will begin a debugging session for the check.

Headful mode is all the time enabled for browsers for Debug Check launch, even when you’ve got disabled “Present browser” checkbox within the Playwright choices sub-menu.

All handed assessments will likely be marked with inexperienced checkboxes within the “Testing” menu.

Working and debugging assessments within the Visible Studio Code are proven within the subsequent video.

Set up of an online software for demo UI assessments with Playwright

Let’s attempt to write a couple of assessments for an actual net software. For this function we’re going to use Mantis Bug Tracker (MantisBT) as a demo software. This software could be simply put in on the native host and used to apply your abilities in writing assessments in Playwright.

Really, we aren’t going to jot down assessments. We are going to report them largely! Playwright consists of a superb check recorder, which significantly reduces time for writing code of assessments, offering an easy mechanism for trying to find net components locators and inserting them into the code of assessments.

Set up MantisBT following this video instruction.

After the set up, add the next string into the “config_inc.php” file which is situated within the folder the place you could have put in Mantis:
$g_enable_email_notification = ‘OFF’;

Add this string within the e-mail configuration part of the configuration file.

It is going to enable you create new accounts with out clicking the affirmation hyperlink within the e-mail, despatched to each new consumer.

MantisBT set up web site path might be present in Mantis. Click on Handle – Web site data:

Creation of a UI check with the Playwright check recorder

As it’s declared above, Playwright offers us a possibility to report interactions with an online software beneath a check utilizing an inner check recorder after which to generate ready-to-run (or edit/refactor) code for assessments. Let’s create a primary recorded check in Playwright for including a brand new consumer with a developer position within the MantisBT software and verification that the created consumer will have the ability to login to Mantis.

In VS Code click on on the “Document new” button within the “Testing” menu. Playwright will create a brand new “test-1.spec.ts” file with default ‘check’ and the message, that the “codegen” is began. “Codegen” is the core module of the Playwright Check Generator.

In a couple of moments Playwright will open the browser window (which you arrange as default for the Playwright extension), after which it’s essential execute every step of the check state of affairs manually. Fortuitously, we have to go all of the testing steps as soon as solely, after which, after recording is stopped, we’ll get a brand new recorded code for the check.

Open the MantisBT software within the browser tab and click on into the “Username” area, which is highlighted with a pink colour by the Playwright check recorder. Clicks on the net components of the web page return locators for all net components you might be working with and place them into the code of the check being recorded.

Authenticate in Mantis beneath the title of “administrator and the password which was outlined throughout the set up of Mantis. After that navigate to the handle part after which to the handle customers tab. Create a brand new consumer with the developer position, confirming the empty password.

After the brand new consumer is created, go away the applying and authenticate in it once more, however beneath a newly created consumer, utilizing an empty password. Arrange a brand new password within the consumer’s account web page and authenticate once more within the software with the identical consumer, utilizing the created password. That is the use case. For the brand new consumer we set the title “developer1”.

Now, we are able to shut the browser window and cease the check recording utilizing the “Cancel” button within the backside proper of codegen window.

And eventually, don’t overlook to pick out and click on Save All in VS Code from the File menu. The recorded check code will appear like on this screenshot:

All of the steps of this check have been recorded on this video.

Working the recorded check within the Playwright

Let’s attempt to run the recorded check. First, choose “File Explorer” menu in VS Code, open “test-1.spec.ts” file, change ‘check’ to the ‘Check Add a brand new Developer’ title within the code, rename file in “File Explorer” to the “test-add-new-developer.spec.ts”. Then open “playwright.config.ts” and set the next parameter in it:
    hint: ‘on’, //’on-first-retry’

This selection means that you can monitor all steps of the check throughout recording into the particular archive which could be considered or investigated afterwards utilizing “show-report” command:
npx playwright show-report

Monitoring the check code will enable you vastly in debugging and checking the execution of every check code line. Don’t overlook to save lots of all modifications.

Open once more the “test-add-new-developer.spec.ts” file and press the “Run” button within the left column close to the rows numbers.

As we now have already created the “developer1” consumer, MantisBT returns an error throughout the check run, that’s why the steps the place a brand new consumer has the empty password can’t be handed. Because of this check execution is frozen on this line:
await web page.getByRole(‘hyperlink’, title: ‘developer1 ( Developer1 Identify )’ ).click on();

After the timeout passes, this check fails. To see the check hint particulars, use this command:
npx playwright show-report

Check hint particulars will present, all of the steps executed and error message, that the “developer1” consumer already exists:

The final recorded line from the check is the road the place “developer1” can not login with the empty password.

Let’s repair this recorded check to create a consumer with a novel title. We have to substitute “developer1” to “developer2” string within the “test-add-new-developer.spec.ts” file utilizing VS Code. Use “Edit” – “Exchange” – “Exchange All” operation to make the substitute and save the modified file. Run once more the ‘Check Add a brand new Developer’ check and it’ll go. Now, we have to refactor this check code to get a possibility to create a brand new “developer” consumer with none guide “Exchange All” operations.

All steps to run recorded check are proven on this video

Parametrization of the assessments with the assistance of the .env file

This small half explains why we have to use the .env file with Playwright. Usually we have to parametrize assessments in code refactoring. For instance, on this article we begin our check on the localhost URL, however in actuality there could be a number of testing environments, hosted on distant servers with actual IP addresses or domains. So, it’s higher to make use of atmosphere variables for server host, URLs, logins, passwords, and so on, for his or her subsequent use within the code of assessments. That’s the reason the .env file is meant to retailer all of those atmosphere variables in a single place.

Playwright works with atmosphere variables from .env file and we merely have to do these two steps:

Open terminal, change listing to the “playwright” folder, and run this npm command:
npm set up dotenv –save

Open “playwright.config.ts” file in VS Code, uncomment the next string after which click on Save All Information entry:
require(‘dotenv’).config();

Now, we’re able to proceed with the check code refactoring.

Refactoring code of the ‘Add a brand new Developer’ check

Let’s change some default preferences within the “playwright.config.ts” file. First, let’s change the utmost timeout for one check:
  /* Most time one check can run for. */
  timeout: 120 * 1000,

Second, let’s improve timeout worth throughout which the check ought to await the situation to be met:
  count on:
     * Most time count on() ought to await the situation to be met.
     * For instance in `await count on(locator).toHaveText();`
     */
    timeout: 10000
  ,

Because it’s described above, create a brand new .env file within the default “playwright” folder and paste these variables there:
MANTISBT_URL=’http://localhost/mantisbt/’
MANTISBT_LOGIN_PAGE=’login_page.php’
MANTISBT_ADMIN_LOGIN=’administrator’
MANTISBT_ADMIN_PASS=’PswA123456_’
MANTISBT_DEVELOPER_PASS=’123456′

They’re the values used within the check. Сhange MANTISBT_URL, MANTISBT_ADMIN_PASS, MANTISBT_DEVELOPER_PASS variables, if you happen to use completely different ones to your MantisBT set up and refactored check code file.

Our purpose is to refactor the earlier “test-add-new-developer.spec.ts” file in order that we might have the ability to run the check a number of instances with atmosphere variables from the .env file. Within the demo for  this text, we don’t plan to make use of advanced object-oriented programming (OOP) construction within the refactoring, however normally utilizing OOP structure is very advisable for automation with Playwright. It typically occurs in actual testing tasks. Let’s describe the principle sections of code within the new file “test-add-new-developer-refactored.spec.ts”.

1. Import of exterior modules for Playwright assessments
   import check, Web page, count on from ‘@playwright/check’;
2. Import of atmosphere variables from the .env file into Typescript constants:
   // Learn atmosphere variables from .env file
   const
     MANTISBT_URL: URL = ”,
     MANTISBT_LOGIN_PAGE: LOGIN_PAGE = ”,
     MANTISBT_ADMIN_LOGIN: ADMIN_LOGIN = ”,
     MANTISBT_ADMIN_PASS: ADMIN_PASS = ”,
     MANTISBT_DEVELOPER_PASS: DEVELOPER_PASS = ”,
   = course of.env
3. Configuration of the enclosing scope of the check run. The check will likely be run in ‘serial’ mode, in a serial sequence. By default, Playwright runs the check in ‘parallel’ mode.
   check.describe.configure(mode: ‘serial’)
4. Declaration of a variable for the Web page object and definition of two constants  to retailer “developerName” and “developerFullName” as completely new values for each check run utilizing Unix time timestamps in each constants.
   let web page: Web page;
   const developerName = ‘developer-‘ + Date.now();
   const developerFullName = developerName + ‘-Identify’
5. Commonplace check.beforeAll check hook. This code will likely be run earlier than all assessments as soon as solely. Creates  browser object and opens web page (tab) within the browser with login web page on the desired host URL:
   check.beforeAll(async ( browser ) =>   
     web page = await browser.newPage();
     await web page.goto(URL + LOGIN_PAGE);
   );
6. Foremost check code. On this code we now have eliminated some pointless blocks, which have been acquired throughout check recording, added “console.log” methodology, changed authorization values to atmosphere variables from the .env file, and added the “count on” methodology to examine the ultimate step situation within the check. It’s “very comfortable” refactoring, we now have left the same code which may be refactored to remove it. Moreover, examine, that your default encoding for the “test-add-new-developer-refactored.spec.ts” file is ready to UTF-8, trigger MantisBT builders use some Unicode particular characters, that are displayed incorrectly in VS Code as □ image, however recorded with none downside in Check Recorder (Generator).
   check(‘Check Add a brand new Developer Refactored’, async () =>
     await web page.getByPlaceholder(‘Username’).fill(ADMIN_LOGIN);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     await web page.getByText(‘Solely enable your session for use from this IP handle.’).click on();
     await web page.getByPlaceholder(‘Password’).fill(ADMIN_PASS);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘Handle Customers’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘Create New Account’ ).click on();
     console.log(‘Developer title:’ + developerName);
     await web page.locator(‘#user-username’).fill(developerName);
     await web page.locator(‘#user-realname’).fill(developerFullName);
     await web page.locator(‘#user-access-level’).selectOption(’55’);
     await web page.getByRole(‘button’, title: ‘Create Consumer’ ).click on();
     await web page.getByRole(‘button’, title: ‘Use Empty Password’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ administrator ’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Logout’ ).click on();
     // Login with developerName
     await web page.getByPlaceholder(‘Username’).fill(developerName);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     // Empty password right here
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     const developerTopLink = developerName + ‘ ( ‘ + developerFullName + ‘ )’
     await web page.getByRole(‘hyperlink’, title: developerTopLink ).click on();
     await web page.locator(‘#password’).fill(DEVELOPER_PASS); 
     await web page.locator(‘#password-confirm’).fill(DEVELOPER_PASS);
     await web page.getByRole(‘button’, title: ‘Replace Consumer’ ).click on();
     // Login with developerName and Password 
     await web page.getByPlaceholder(‘Username’).fill(developerName);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     await web page.getByPlaceholder(‘Password’).click on();
     await web page.getByPlaceholder(‘Password’).fill(DEVELOPER_PASS);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     await web page.getByRole(‘hyperlink’, title: developerTopLink ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ ‘ + developerName + ‘ ’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Logout’ ).click on();
       // Show message with show-report command in console
     console.log(‘Copy and paste to point out check report: npx playwright show-report’)
     // Lastly, count on for Login button is seen
     count on(web page.getByRole(‘button’, title: ‘Login’ )).toBeVisible;
   )
7. Commonplace check.afterAll check hook. This code will likely be run as soon as solely in spite of everything assessments. It closes web page object, so browser object may also be closed, if we now have single web page object solely:
   check.afterAll(async () =>
     await web page.shut();
   );

After you end modifying the “test-add-new-developer-refactored.spec.ts” file, don’t overlook to save lots of all modifications. Now we are able to run this check a number of instances and each time the check will go, as a result of a brand new developer with a novel title will likely be created for every check run. Press the “Run” button for ‘Check Add a brand new Developer Refactored’ check. Run this check twice, then within the “Testing” menu in VS Code click on on the “Reveal check output” sub-menu to view all “stdout” output messages that we despatched in our check utilizing “console.log” methodology. These values are much like:
Developer title:developer-1677239757968
Copy and paste to point out check report: npx playwright show-report

Final message will assist us copy and paste the Playwright command to point out a check run report. Paste this command to the “bash” part of Terminal home windows in VS Code to view the check report.

Playwright opens the report with a recorded hint of check steps, the place we are able to see all of them.

To examine that every one new “builders” have been created with ‘Check Add a brand new Developer Refactored’, authorize with “administrator” username and open the “Handle Customers” tab to view all customers of MantisBT.

All particulars for ‘Check Add a brand new Developer Refactored’ run can be found on this video.

Creation of the check for including a brand new challenge and assigning it
to a consumer

As we are able to see “Check Add a brand new Developer Refactored” code might be executed a number of instances. Because of this many builders  will likely be added with distinctive “developerName” and “developerFullName” values. It isn’t an excellent apply to go away some working information after a check finishes. So, on this half let’s create one other check for Playwright by which“administrator” provides a brand new Venture to MantisBT and assigns it to the predefined “developer2” consumer, then “developer2” checks that the brand new challenge is assigned and, lastly, “administrator” deletes the challenge from MantisBT.  Because of this, after this check  finishes, the MantisBT database received’t have any information created throughout check execution.

Let’s report this check once more utilizing the Playwright Check Generator in VS Code. These are the principle steps for the recording: authentication in software beneath the administrator account, creation of a brand new challenge, task “developer2” consumer to the brand new challenge, authentication beneath “developer2” account and verification that the challenge has been assigned, authentication beneath administrator account and elimination of created challenge from the system. After these check steps have been recorded, rename “test-1.spec.ts” file to “test-add-project-assign-to-developer-record.spec.ts”, after which save all modifications.

All of the steps of this check are introduced on this video.

To run this check, press the “Play” button for “test-add-project-assign-to-developer-record.spec.ts” – it might be run a number of instances with out points. Video with this check execution is offered here.

Refactoring of “test-add-project-assign-to-developer-record.spec.ts” code

Let’s refactor “test-add-project-assign-to-developer-record.spec.ts” code. We will use the identical method within the refactoring to cut back repeated operations within the code. On this half we add solely crucial feedback. Right here is the consequence, which is saved within the repository on the GitHub.Within the .env file we now have added these two strings:

MANTISBT_EXISTING_DEVELOPER=’developer2′
MANTISBT_EXISTING_DEVELOPER_REAL_NAME=’developer2 Identify’

Code in “test-add-project-assign-to-developer-refactored.spec.ts” is introduced under. Import of the required modules and atmosphere variables:

import check, Web page, count on from ‘@playwright/check’;
// Learn atmosphere variables from .env file
const
  MANTISBT_URL: URL = ”,
  MANTISBT_LOGIN_PAGE: LOGIN_PAGE = ”, 
  MANTISBT_ADMIN_LOGIN: ADMIN_LOGIN = ”,
  MANTISBT_ADMIN_PASS: ADMIN_PASS = ”,
  MANTISBT_DEVELOPER_PASS: DEVELOPER_PASS = ”,
  MANTISBT_EXISTING_DEVELOPER: EXISTING_DEVELOPER = ”,
  MANTISBT_EXISTING_DEVELOPER_REAL_NAME: EXISTING_DEVELOPER_REAL_NAME = ”,
= course of.env

Check will likely be run within the ‘serial’ mode
check.describe.configure(mode: ‘serial’)

Let’s generate distinctive “projectName” and “projectDesc ” values. it might be helpful, if the check fails. Later, this challenge must be eliminated manually by “administrator”, however the subsequent check run is not going to fail on the challenge creation step.

let web page: Web page;
const projectName = ‘UI Automation Testing Venture ‘ + Date.now();
const projectDesc = projectName + ‘ Desc’;

In our recorded check we execute the login operation 3 instances, so let’s create an async login operate.

// Consumer login operate for all assessments
async operate userLogin(userName: string, userPass: string)
  await web page.getByPlaceholder(‘Username’).fill(userName);
  await web page.getByRole(‘button’, title: ‘Login’ ).click on(); 
  await web page.getByPlaceholder(‘Password’).fill(userPass);
  await web page.getByRole(‘button’, title: ‘Login’ ).click on(); 

The identical applies to logout. Async logout operate was added.

// Consumer logout operate for all assessments
async operate userLogout(userName: string)
  await web page.getByRole(‘hyperlink’, title: ‘ ‘ + userName + ‘ ’ ).click on();
  await web page.getByRole(‘hyperlink’, title: ‘ Logout’ ).click on();

Add check hooks – “beforeAll”, “beforeEach”, “afterEach”

check.beforeAll(async ( browser ) =>
  web page = await browser.newPage();
);

check.beforeEach(async ()=>
  await web page.goto(URL + LOGIN_PAGE);
)

check.afterEach(async ()=>
  // Lastly, count on for Login button is seen
  count on(web page.getByRole(‘button’, title: ‘Login’ )).toBeVisible;
)

We divided recorded check into 3 assessments – the primary is ‘Check Add Venture’ by which we now have modified choice of a developer within the listbox from fastened place within the checklist to the label which is the same as  EXISTING_DEVELOPER

check(‘Check Add Venture’, async () =>  
  userLogin(ADMIN_LOGIN, ADMIN_PASS);
  await web page.getByRole(‘hyperlink’, title: ‘ Handle’ ).click on();
  await web page.getByRole(‘hyperlink’, title: ‘Handle Tasks’ ).click on();
  await web page.getByRole(‘button’, title: ‘Create New Venture’ ).click on();
  await web page.locator(‘#project-name’).fill(projectName);
  await web page.locator(‘#project-description’).fill(projectDesc);
  await web page.getByRole(‘button’, title: ‘Add Venture’ ).click on();
  await web page.getByRole(‘hyperlink’, title: projectName ).click on();
  // Choose EXISTING_DEVELOPER place within the listbox by label
  await web page.getByRole(‘listbox’, title: ‘* Username’ ).selectOption(label: EXISTING_DEVELOPER);
  await web page.getByRole(‘combobox’, title: ‘Entry Degree’ ).selectOption(’55’);
  await web page.getByRole(‘button’, title: ‘Add Consumer’ ).click on();
  await web page.getByRole(‘hyperlink’, title: EXISTING_DEVELOPER ).click on();
  await web page.getByRole(‘cell’, title: projectName + ‘ [developer] (public)’ ).click on();
  userLogout(ADMIN_LOGIN);
);

 Second check is the ‘Check Verify Venture by Developer’. We simplified the check on the recording step – a developer must discover a desk cell, the place the “projectName” is displayed. In a extra strict coding model, we have to examine that “projectName” is positioned within the acceptable HTML desk.

check(‘Check Verify Venture by Developer’, async () =>
  userLogin(EXISTING_DEVELOPER, DEVELOPER_PASS);
  await web page.getByRole(‘hyperlink’, title: EXISTING_DEVELOPER + ‘ ( ‘ +
EXISTING_DEVELOPER_REAL_NAME + ‘ )’ ).click on();
  await web page.getByRole(‘heading’, title: ‘ Assigned Tasks’ ).click on();
  await web page.getByRole(‘cell’, title: projectName, actual: true ).click on();
  await web page.getByRole(‘cell’, title: projectDesc ).click on();
  userLogout(EXISTING_DEVELOPER); 
);

And the ultimate check ‘Delete Venture by Admin’ – merely deletes the “projectName” challenge by “administrator”.

check(‘Delete Venture by Admin’, async () =>
  userLogin(ADMIN_LOGIN, ADMIN_PASS); 
  await web page.getByRole(‘hyperlink’, title: ‘ Handle’ ).click on();
  await web page.getByRole(‘hyperlink’, title: ‘Handle Tasks’ ).click on();
  await web page.getByRole(‘hyperlink’, title: projectName ).click on();
  await web page.getByRole(‘button’, title: ‘Delete Venture’ ).click on();
  await web page.getByRole(‘button’, title: ‘Delete Venture’ ).click on();
  userLogout(ADMIN_LOGIN); 
);

Remaining check hook closes the “Web page” object and the browser, then outputs to the console “show-report” command.

check.afterAll(async () =>
  await web page.shut();
  console.log(‘Copy and paste to point out check report: npx playwright show-report’)
);

Now, we may begin the check a number of instances with none concern. Full course of is introduced within the video.

Creation of the check for the comparability of the entry rights.

On this check we examine which pages can be found for customers with the developer position. On condition that the administrator has entry to all pages of the demo software, we examine if a consumer with the developer position is ready to open all of those pages. URL of the pages out there for the administrator we place into the file “admin_all_menu_links.txt”. As traditional we report all of the steps utilizing the Playwright Check Generator in VS Code. The steps of the check embody opening all pages of the applying beneath administrator after which beneath a consumer with the developer position. Then that consumer will open administrator pages URL, selecting the hyperlinks from the file and following them. For these pages we’ll assert the “Entry Denied” message if the pages should not accessible.

After the check is recorded, rename this file into “test-compare-admin-developer-access-record.spec.ts”. Then save all modifications.

f we attempt to run assessments in Playwright, some bugs will happen associated to present check configuration:
tracing.stopChunk: Should begin tracing earlier than stopping

This bug is added to the Playwright repository. To keep away from it we have to uncheck “Present browser” after which use the “Debug Check” button within the VS Code “Testing” menu. In debug run mode Playwright  all the time reveals the browser window.

est from “test-compare-admin-developer-access-record.spec.ts” file could be run, all steps are proven within the video.

Refactoring “test-compare-admin-developer-access-record.spec.ts”

As for different assessments on this article, let’s do some code refactoring. Earlier than studying of feedback in refactored code, please add these 2 strings to .env file:

MANTISBT_SUMMARY_PAGE=’summary_page.php’
MANTISBT_MANAGE_PAGE=’manage_overview_page.php’

Ensuing code for the check is saved in “test-compare-admin-developer-access-refactored.spec.ts” file:

1. Import modules and atmosphere variables, then set configuration for ‘serial’ check run:
   import check, Web page, count on from ‘@playwright/check’;

   // Learn atmosphere variables from .env file
   const
     MANTISBT_URL: URL = ”,
     MANTISBT_LOGIN_PAGE: LOGIN_PAGE = ”, 
     MANTISBT_ADMIN_LOGIN: ADMIN_LOGIN = ”,
     MANTISBT_ADMIN_PASS: ADMIN_PASS = ”,
     MANTISBT_DEVELOPER_PASS: DEVELOPER_PASS = ”,
     MANTISBT_EXISTING_DEVELOPER: EXISTING_DEVELOPER = ”,
     MANTISBT_EXISTING_DEVELOPER_REAL_NAME: EXISTING_DEVELOPER_REAL_NAME = ”,
     MANTISBT_SUMMARY_PAGE: SUMMARY_PAGE = ”,
     MANTISBT_MANAGE_PAGE: MANAGE_PAGE = ”,
   = course of.env

   check.describe.configure(mode: ‘serial’)

2. Create “Web page” object and add async “userLogin” and “userLogout” features:

   let web page: Web page;
   // Consumer login operate for all assessments
   async operate userLogin(userName: string, userPass: string)
     await web page.getByPlaceholder(‘Username’).fill(userName);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on();
     await web page.getByPlaceholder(‘Password’).fill(userPass);
     await web page.getByRole(‘button’, title: ‘Login’ ).click on(); 
   

   // Consumer logout operate for all assessments
   async operate userLogout(userName: string)
     await web page.getByRole(‘hyperlink’, title: ‘ ‘ + userName + ‘ ’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Logout’ ).click on();
   

3. Check hook strategies – “beforeAll”, “beforeEach”, “afterEach”:

   check.beforeAll(async ( browser ) =>
      web page = await browser.newPage();
   );

   check.beforeEach(async ()=>
     await web page.goto(URL + LOGIN_PAGE);
   )

   check.afterEach(async ()=>
     // Lastly, count on for Login button is seen
     count on(web page.getByRole(‘button’, title: ‘Login’ )).toBeVisible;
   )

4. Code for ‘Check Verify Admin Entry’ check:

   check(‘Check Verify Admin Entry’, async () =>
     userLogin(ADMIN_LOGIN, ADMIN_PASS);
     await web page.locator(‘#breadcrumbs’).getByRole(‘hyperlink’, title: ADMIN_LOGIN ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ My View’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ View Points’ ).click on();
     await web page.getByRole(‘heading’, title: ‘ Filters’ ).click on();
     await web page.locator(‘#sidebar’).getByRole(‘hyperlink’, title: ‘ Report Concern’ ).click on();
     await web page.getByRole(‘heading’, title: ‘ Enter Concern Particulars’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Change Log’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Roadmap’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Abstract’ ).click on();
     await web page.getByRole(‘heading’, title: ‘ Abstract’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Handle’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘Handle Customers’ ).click on();
     userLogout(ADMIN_LOGIN);
   );

5. Code for ‘Check Verify Developer Entry‘ check:

   check(‘Check Verify Developer Entry’, async () =>
     userLogin(EXISTING_DEVELOPER, DEVELOPER_PASS);
     await web page.getByRole(‘hyperlink’, title: ‘ My View’ ).click on();
     await web page.getByRole(‘hyperlink’, title: EXISTING_DEVELOPER + ‘ ( ‘ + EXISTING_DEVELOPER_REAL_NAME + ‘ )’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ My View’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ View Points’ ).click on();
     await web page.getByRole(‘heading’, title: ‘ Filters’ ).click on();
     await web page.locator(‘#sidebar’).getByRole(‘hyperlink’, title: ‘ Report Concern’ ).click on();
     await web page.getByRole(‘heading’, title: ‘ Enter Concern Particulars’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Change Log’ ).click on();
     await web page.getByRole(‘hyperlink’, title: ‘ Roadmap’ ).click on();
     await web page.goto(URL + SUMMARY_PAGE);
     await web page.getByRole(‘hyperlink’, title: ‘Proceed’ ).click on();
     await web page.goto(URL + MANAGE_PAGE);
     await web page.getByRole(‘hyperlink’, title: ‘Proceed’ ).click on();
     userLogout(EXISTING_DEVELOPER);
   );

6. Remaining check hook closes the “Web page” object and the browser, then outputs to the console “show-report” command.

   check.afterAll(async () =>
     await web page.shut();
     console.log(‘Copy and paste to point out check report: npx playwright show-report’)
   );

The recorded check run from “test-compare-admin-developer-access-refactored.spec.ts” file is within the following video.

To be continued…

Now, we gave you a chance to make first steps in UI testing automation, utilizing the Playwright device. This device is growing, augmenting new and highly effective options for end-to-end UI testing. We’re trying ahead to your suggestions on the article. Subscribe to our weblog newsletters too.