The best way to begin UI automated assessments with Playwright – ISS Artwork Weblog | AI | Machine Studying

Some great benefits of utilizing Playwright for UI testing?

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

1. Playwright helps 3 predominant browser engines: Chromium (Chrome, Opera, Edge browsers), WebKit (Safari browser) and Gecko (Firefox browser). Whether it is mandatory to check an online utility within the cellular model of those browser engines – no drawback, use gadget DescriptorsSource.json file which Playwright builders hold within the up to date state to emulate cellular, 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 standard 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 assist you to generate a number of assessments utilizing browser GUI, save the Typescript code for them and shortly get all locators in your assessments;
7. Playwright has an official extension for Visible Studio Code, so take a look at code growth, debugging and execution could be very straightforward 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 how you can work with Playwright from the very starting. Moreover, all of the Typescript code demonstrated within the article is obtainable 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 might be put in on Home windows and Mac working methods too, as now we 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 identify, “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 will see a command within the Terminal window to run Playwright take a look at instance:
npx playwright take a look at

Playwright will run this take a look at instance in headless mode for browser, so we will 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 take a look at run is positioned in “playwright.config.ts” file through which we will configure Playwright to specify browsers to run assessments. The report URL web page accommodates clickable hyperlinks for every of 6 assessments – handed or failed. We are able to click on on every hyperlink to view all steps of each take a look at with time spent for every take a look at operation within the Typescript code.

The “playwright.config.ts” file known as the International configuration file. It offers 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 take a look at 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 write down, report, debug and run new assessments Playwright device builders advocate  utilizing open-source Visible Studio Code IDE and set up official Playwright extension from the VS Code market. VS Code could possibly 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 take a look at examples on this article.

Home windows or Mac OS methods. Set up VS code to comply with take a look at 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 identify 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 are able to use two assessments that Playwright has generated throughout set up and which now we have positioned within the  “playwright” folder to point out how you can 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 can be displayed. Let’s open the “instance.spec.ts” file – we will see 2 assessments in it:‘has title’ and ‘get began hyperlink’. Playwright extension lets you 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 can be displayed within the “Check Explorer”. This “Testing” menu shows predominant “Playwright” options for take a look at execution: “Present browser” checkbox, “Decide locator”, “Document new”, “Document at cursor”, “Reveal take a look at output”. 

“Check Explorer” lets you run and debug assessments.

To start out debugging, press the “Debug” button within the “Testing” menu. VS Code will begin a debugging session for the take a look at.

Headful mode is at all times enabled for browsers for Debug Check launch, even if in case you have disabled “Present browser” checkbox within the Playwright choices sub-menu.

All handed assessments can 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 utility for demo UI assessments with Playwright

Let’s attempt to write a couple of assessments for an actual net utility. For this objective we’re going to use Mantis Bug Tracker (MantisBT) as a demo utility. This utility might 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 write down assessments. We’ll report them largely! Playwright consists of a wonderful take a look at recorder, which significantly reduces time for writing code of assessments, offering a very simple mechanism for looking for net parts 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 positioned within the folder the place you will have put in Mantis:
$g_enable_email_notification = ‘OFF’;

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

It would assist 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 could possibly be present in Mantis. Click on Handle – Web site info:

Creation of a UI take a look at with the Playwright take a look at recorder

As it’s declared above, Playwright provides us a chance to report interactions with an online utility underneath a take a look at utilizing an inside take a look at recorder after which to generate ready-to-run (or edit/refactor) code for assessments. Let’s create a primary recorded take a look at in Playwright for including a brand new consumer with a developer function within the MantisBT utility 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 ‘take a look at’ 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 you should execute every step of the take a look at situation manually. Happily, we have to cross all of the testing steps as soon as solely, after which, after recording is stopped, we are going to get a brand new recorded code for the take a look at.

Open the MantisBT utility within the browser tab and click on into the “Username” discipline, which is highlighted with a pink shade by the Playwright take a look at recorder. Clicks on the internet parts of the web page return locators for all net parts you might be working with and place them into the code of the take a look at being recorded.

Authenticate in Mantis underneath the identify 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 function, confirming the empty password.

After the brand new consumer is created, go away the appliance and authenticate in it once more, however underneath 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 utility with the identical consumer, utilizing the created password. That is the use case. For the brand new consumer we set the identify “developer1”.

Now, we will shut the browser window and cease the take a look at recording utilizing the “Cancel” button within the backside proper of codegen window.

And eventually, don’t neglect to pick and click on Save All in VS Code from the File menu. The recorded take a look at code will appear like on this screenshot:

All of the steps of this take a look at have been recorded on this video.

Working the recorded take a look at within the Playwright

Let’s attempt to run the recorded take a look at. First, choose “File Explorer” menu in VS Code, open “test-1.spec.ts” file, change ‘take a look at’ 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 lets you monitor all steps of the take a look at throughout recording into the particular archive which might be considered or investigated afterwards utilizing “show-report” command:
npx playwright show-report

Monitoring the take a look at code will assist you vastly in debugging and checking the execution of every take a look at code line. Don’t neglect to avoid wasting 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 now we have already created the “developer1” consumer, MantisBT returns an error throughout the take a look at run, that’s why the steps the place a brand new consumer has the empty password can’t be handed. Because of this take a look at execution is frozen on this line:
await web page.getByRole(‘hyperlink’, identify: ‘developer1 ( Developer1 Title )’ ).click on();

After the timeout passes, this take a look at fails. To see the take a look at 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 take a look at is the road the place “developer1” can not login with the empty password.

Let’s repair this recorded take a look at to create a consumer with a singular identify. We have to substitute “developer1” to “developer2” string within the “test-add-new-developer.spec.ts” file utilizing VS Code. Use “Edit” – “Substitute” – “Substitute All” operation to make the alternative and save the modified file. Run once more the ‘Check Add a brand new Developer’ take a look at and it’ll cross. Now, we have to refactor this take a look at code to get a chance to create a brand new “developer” consumer with none handbook “Substitute All” operations.

All steps to run recorded take a look at 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. Generally we have to parametrize assessments in code refactoring. For instance, on this article we begin our take a look at on the localhost URL, however in actuality there might be loads of testing environments, hosted on distant servers with actual IP addresses or domains. So, it’s higher to make use of surroundings 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 surroundings variables in a single place.

Playwright works with surroundings variables from .env file and we merely must 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 Recordsdata entry:
require(‘dotenv’).config();

Now, we’re able to proceed with the take a look at code refactoring.

Refactoring code of the ‘Add a brand new Developer’ take a look at

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

Second, let’s enhance timeout worth throughout which the take a look at ought to watch for the situation to be met:
  anticipate:
     * Most time anticipate() ought to watch for the situation to be met.
     * For instance in `await anticipate(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 take a look at. Сhange MANTISBT_URL, MANTISBT_ADMIN_PASS, MANTISBT_DEVELOPER_PASS variables, when you use completely different ones in your MantisBT set up and refactored take a look at 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 take a look at a number of occasions with surroundings variables from the .env file. Within the demo for  this text, we don’t plan to make use of complicated object-oriented programming (OOP) construction within the refactoring, however most often utilizing OOP structure is extremely really helpful for automation with Playwright. It usually occurs in actual testing tasks. Let’s describe the primary sections of code within the new file “test-add-new-developer-refactored.spec.ts”.

1. Import of exterior modules for Playwright assessments
   import take a look at, Web page, anticipate from ‘@playwright/take a look at’;
2. Import of surroundings variables from the .env file into Typescript constants:
   // Learn surroundings 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 take a look at run. The take a look at can be run in ‘serial’ mode, in a serial sequence. By default, Playwright runs the take a look at in ‘parallel’ mode.
   take a look at.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 take a look at run utilizing Unix time timestamps in each constants.
   let web page: Web page;
   const developerName = ‘developer-‘ + Date.now();
   const developerFullName = developerName + ‘-Title’
5. Commonplace take a look at.beforeAll take a look at hook. This code can 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:
   take a look at.beforeAll(async ( browser ) =>   
     web page = await browser.newPage();
     await web page.goto(URL + LOGIN_PAGE);
   );
6. Fundamental take a look at code. On this code now we have eliminated some pointless blocks, which had been obtained throughout take a look at recording, added “console.log” methodology, changed authorization values to surroundings variables from the .env file, and added the “anticipate” methodology to verify the ultimate step situation within the take a look at. It’s “very mushy” refactoring, now we have left the same code which may be refactored to remove it. Moreover, verify, that your default encoding for the “test-add-new-developer-refactored.spec.ts” file is about to UTF-8, trigger MantisBT builders use some Unicode particular characters, that are displayed incorrectly in VS Code as □ image, however recorded with none drawback in Check Recorder (Generator).
   take a look at(‘Check Add a brand new Developer Refactored’, async () =>
     await web page.getByPlaceholder(‘Username’).fill(ADMIN_LOGIN);
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     await web page.getByText(‘Solely enable your session for use from this IP tackle.’).click on();
     await web page.getByPlaceholder(‘Password’).fill(ADMIN_PASS);
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘Handle Customers’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘Create New Account’ ).click on();
     console.log(‘Developer identify:’ + 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’, identify: ‘Create Consumer’ ).click on();
     await web page.getByRole(‘button’, identify: ‘Use Empty Password’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘ administrator ’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘ Logout’ ).click on();
     // Login with developerName
     await web page.getByPlaceholder(‘Username’).fill(developerName);
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     // Empty password right here
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     const developerTopLink = developerName + ‘ ( ‘ + developerFullName + ‘ )’
     await web page.getByRole(‘hyperlink’, identify: 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’, identify: ‘Replace Consumer’ ).click on();
     // Login with developerName and Password 
     await web page.getByPlaceholder(‘Username’).fill(developerName);
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     await web page.getByPlaceholder(‘Password’).click on();
     await web page.getByPlaceholder(‘Password’).fill(DEVELOPER_PASS);
     await web page.getByRole(‘button’, identify: ‘Login’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: developerTopLink ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘ ‘ + developerName + ‘ ’ ).click on();
     await web page.getByRole(‘hyperlink’, identify: ‘ Logout’ ).click on();
       // Show message with show-report command in console
     console.log(‘Copy and paste to point out take a look at report: npx playwright show-report’)
     // Lastly, anticipate for Login button is seen
     anticipate(web page.getByRole(‘button’, identify: ‘Login’ )).toBeVisible;
   )
7. Commonplace take a look at.afterAll take a look at hook. This code can be run as soon as solely in spite of everything assessments. It closes web page object, so browser object may even be closed, if now we have single web page object solely:
   take a look at.afterAll(async () =>
     await web page.shut();
   );

After you end modifying the “test-add-new-developer-refactored.spec.ts” file, don’t neglect to avoid wasting all modifications. Now we will run this take a look at a number of occasions and each time the take a look at will cross, as a result of a brand new developer with a singular identify can be created for every take a look at run. Press the “Run” button for ‘Check Add a brand new Developer Refactored’ take a look at. Run this take a look at twice, then within the “Testing” menu in VS Code click on on the “Reveal take a look at output” sub-menu to view all “stdout” output messages that we despatched in our take a look at utilizing “console.log” methodology. These values are just like:
Developer identify:developer-1677239757968
Copy and paste to point out take a look at report: npx playwright show-report

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

Playwright opens the report with a recorded hint of take a look at steps, the place we will see all of them.

To verify 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 take a look at for including a brand new venture and assigning it
to a consumer

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

Let’s report this take a look at once more utilizing the Playwright Check Generator in VS Code. These are the primary steps for the recording: authentication in utility underneath the administrator account, creation of a brand new venture, task “developer2” consumer to the brand new venture, authentication underneath “developer2” account and verification that the venture has been assigned, authentication underneath administrator account and elimination of created venture from the system. After these take a look at 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 take a look at are introduced on this video.

To run this take a look at, press the “Play” button for “test-add-project-assign-to-developer-record.spec.ts” – it could possibly be run a number of occasions with out points. Video with this take a look at execution is obtainable 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 are able to use the identical method within the refactoring to cut back repeated operations within the code. On this half we add solely mandatory feedback. Right here is the end result, which is saved within the repository on the GitHub.Within the .env file now we have added these two strings:

MANTISBT_EXISTING_DEVELOPER=’developer2′
MANTISBT_EXISTING_DEVELOPER_REAL_NAME=’developer2 Title’

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

import take a look at, Web page, anticipate from ‘@playwright/take a look at’;
// Learn surroundings 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 can be run within the ‘serial’ mode
take a look at.describe.configure(mode: ‘serial’)

Let’s generate distinctive “projectName” and “projectDesc ” values. it could possibly be helpful, if the take a look at fails. Later, this venture must be eliminated manually by “administrator”, however the subsequent take a look at run won’t fail on the venture creation step.

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

In our recorded take a look at we execute the login operation 3 occasions, so let’s create an async login perform.

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

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

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

Add take a look at hooks – “beforeAll”, “beforeEach”, “afterEach”

take a look at.beforeAll(async ( browser ) =>
  web page = await browser.newPage();
);

take a look at.beforeEach(async ()=>
  await web page.goto(URL + LOGIN_PAGE);
)

take a look at.afterEach(async ()=>
  // Lastly, anticipate for Login button is seen
  anticipate(web page.getByRole(‘button’, identify: ‘Login’ )).toBeVisible;
)

We divided recorded take a look at into 3 assessments – the primary is ‘Check Add Venture’ through which now we have modified choice of a developer within the listbox from mounted place within the listing to the label which is the same as  EXISTING_DEVELOPER

take a look at(‘Check Add Venture’, async () =>  
  userLogin(ADMIN_LOGIN, ADMIN_PASS);
  await web page.getByRole(‘hyperlink’, identify: ‘ Handle’ ).click on();
  await web page.getByRole(‘hyperlink’, identify: ‘Handle Tasks’ ).click on();
  await web page.getByRole(‘button’, identify: ‘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’, identify: ‘Add Venture’ ).click on();
  await web page.getByRole(‘hyperlink’, identify: projectName ).click on();
  // Choose EXISTING_DEVELOPER place within the listbox by label
  await web page.getByRole(‘listbox’, identify: ‘* Username’ ).selectOption(label: EXISTING_DEVELOPER);
  await web page.getByRole(‘combobox’, identify: ‘Entry Degree’ ).selectOption(’55’);
  await web page.getByRole(‘button’, identify: ‘Add Consumer’ ).click on();
  await web page.getByRole(‘hyperlink’, identify: EXISTING_DEVELOPER ).click on();
  await web page.getByRole(‘cell’, identify: projectName + ‘ [developer] (public)’ ).click on();
  userLogout(ADMIN_LOGIN);
);

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

take a look at(‘Check Test Venture by Developer’, async () =>
  userLogin(EXISTING_DEVELOPER, DEVELOPER_PASS);
  await web page.getByRole(‘hyperlink’, identify: EXISTING_DEVELOPER + ‘ ( ‘ +
EXISTING_DEVELOPER_REAL_NAME + ‘ )’ ).click on();
  await web page.getByRole(‘heading’, identify: ‘ Assigned Tasks’ ).click on();
  await web page.getByRole(‘cell’, identify: projectName, precise: true ).click on();
  await web page.getByRole(‘cell’, identify: projectDesc ).click on();
  userLogout(EXISTING_DEVELOPER); 
);

And the ultimate take a look at ‘Delete Venture by Admin’ – merely deletes the “projectName” venture by “administrator”.

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

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

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

Now, we might begin the take a look at a number of occasions with none subject. Full course of is introduced within the video.

Creation of the take a look at for the comparability of the entry rights.

On this take a look at we examine which pages can be found for customers with the developer function. On condition that the administrator has entry to all pages of the demo utility, we verify if a consumer with the developer function is ready to open all of those pages. URL of the pages accessible 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 take a look at embrace opening all pages of the appliance underneath administrator after which underneath a consumer with the developer function. 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 aren’t accessible.

After the take a look at 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 take a look at 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  at all times exhibits the browser window.

est from “test-compare-admin-developer-access-record.spec.ts” file might 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 take a look at is saved in “test-compare-admin-developer-access-refactored.spec.ts” file:

1. Import modules and surroundings variables, then set configuration for ‘serial’ take a look at run:
   import take a look at, Web page, anticipate from ‘@playwright/take a look at’;

   // Learn surroundings 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

   take a look at.describe.configure(mode: ‘serial’)

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

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

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

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

   take a look at.beforeAll(async ( browser ) =>
      web page = await browser.newPage();
   );

   take a look at.beforeEach(async ()=>
     await web page.goto(URL + LOGIN_PAGE);
   )

   take a look at.afterEach(async ()=>
     // Lastly, anticipate for Login button is seen
     anticipate(web page.getByRole(‘button’, identify: ‘Login’ )).toBeVisible;
   )

4. Code for ‘Check Test Admin Entry’ take a look at:

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

5. Code for ‘Check Test Developer Entry‘ take a look at:

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

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

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

The recorded take a look at 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 creating, 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.