Playwright Typescript Automation framework library

Sample Project: https://github.com/ketanp88/PlaywrightFrameworkDemoProject

Playwright Typescript Automation framework

This is a test automation framework around Playwright - for end-to-end testing. This is Playwright Automation framework has all wrapper actions methods and assertions method along with logger. This is plug and play Playwright Test Automation framework in Typescript. Overview I have created playwright automation framework using typescript. In this framework user can use the Playwright automation framework with very less knowledge about playwright and typescript and start automation. This Framework has inbuild wrapper Actions methods, Logger, Assertions and Configuration. Locator writing style for this framework different. We write the framework locator in the form of Locator and control description. It is written in form of Object of ‘WebControl’ Object. Project Setup:

1. Create a project folder at C drive and open the same folder using visual studio code.

2. Open Terminal >> New Terminal

3. Type Command ‘npm init playwright’ and hit enter.

4. Enter all information in terminal asked in terminal and press enter such as language as Typescript going to use in this project, Test case folder folder.

5. Again Open terminal. In terminal type below command and hit enter button. ‘npm install playwright-ts-automationframework’. It will download the playwright typescript framework library and save in node modules folder. Also you will see entry is added in package.json file.

6. Install other necessary libraries using below commands in same way. a. npm install typescript

7. After installation all the libraries name with version will get added in package.json file.

Page folder:

1. Create a folder with name ‘pages’ in the project level.

2. Create a file with name MethodBase.pom.ts and class name as MethodBase in page folder which extends the Assertion class from framework library.

3. Add constructor with parameter as page and pass this page instance to the parent class.

4. Now you can create each page class which extends MethodBase Class. This means methodBase class will be parent of each page class.

5. Create LoginPage.pom.ts class which extends methodBase class. Add constructor to it with page object.

6. Let us add some controls for login page and method to it. In this framework we write in the format of Object of WebControl which accepts first parameter as playwright locator and second parameter as control description. Let us try to automate one basic test case for OrangeHRM and try to create objects and method for it.

7. URL: https://opensource-demo.orangehrmlive.com/web/index.php/auth/login

   usernameTxtbx = new WebControl(this.page.locator("xpath=//input[@name='username']"), "Username textbox");

   passwordTxtbx = new WebControl(this.page.locator("xpath=//input[@name='password']"), "Password textbox");

   loginBtn = new WebControl(this.page.locator("xpath=//button[@type='submit']"), "Login button");

   dashboardBtn = new WebControl(this.page.locator("xpath=//span[text()='Dashboard']"), "Dashboard tab button");

8. Now Let us try to add two methods which does doLogin and verifyLoginSuccessful page. As Assertion and Actions method extends method base you get access of all wrapper action mthods and assertion methods which are present in framework. All framework methods accept WebControl object as parameter.

   async doLogin(username: string, password: string) { await this.type(this.usernameTxtbx, username); await this.type(this.passwordTxtbx, password); await this.click(this.loginBtn); }

   async verifyLoginSuccessful() { await this.verifyIsDisplayed(this.dashboardBtn); }

9. Code will look like below.

10. Let us create test file with name ‘login.spec.ts’ test cases in tests folder. We will create beforeEach and afterEach in which we will initialize browser, SetTCID and Execution Completed logging method.

11. We will Add Test cases and call the method from page objects and will send parameters from test cases.

12. import { test } from '@playwright/test'; import { LoginPage } from '../pages/loginPage.pom'; import { BasePage } from 'playwright-ts-automationframework';

    let loginPage: LoginPage;

    test.beforeEach( async ({ page, baseURL }, testinfo) => { loginPage = new LoginPage(page); BasePage.setTestCaseID(testinfo); await loginPage.initializeBrowser(baseURL); })

    test('Verify login with valid credentials', async ({ page }) => { await loginPage.doLogin("Admin", "admin123"); await loginPage.verifyLoginSuccessful(); });

    test.afterEach( async ({ page, baseURL }, testinfo) => { BasePage.executionCompleted(testinfo); })

13. Last Step we need to perform, we need to add two json files at project level a. ExecutionSettings.json Execution Settings will contain all the information related to the execution of application such as environment, emailRecivers, senderEmail, senderPassword.

{ "environment": "#{environment}#", "emailRecievers": "#{emailRecievers}#", "senderEmail": "#{senderEmail}#", "senderPassword": "#{senderPassword}#" }

b. AppConfigurations.json AppConfigurations.json file will contain all the configurations related to the QA, PROD or Staging. JSON file will look like below.

{ "QA": { "URL": "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login", "DB_Name": "QA_Database_Name", "DB_URL": "QA_Database_URL", "Username": "QA_Database_Username", "Password": "QA_Database_Password", "API_BaseURL": "https://gorest.co.in/public/v2", "Authorization": "Bearer " },

"STAGE": { "URL": "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login", "DB_Name": "STAGE_Database_Name", "DB_URL": "STAGE_Database_URL", "DB_Username": "STAGE_Database_Username", "DB_Password": "STAGE_Database_Password", "API_BaseURL": "https://gorest.co.in/public/v2", "API_Authorization": "Bearer " },

"PROD": { "URL": "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login", "DB_Name": "PROD_Database_Name", "DB_URL": "PROD_Database_URL", "DB_Username": "PROD_Database_Username", "DB_Password": "PROD_Database_Password", "API_BaseURL": "https://gorest.co.in/public/v2", "API_Authorization": "Bearer " } }

13. Open to playwright.config.ts and navigate to use section. Set BaseURL and add headless flag as false in file.
14. Make sure you have installed below extension in your visual Studio code. https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
15. Navigate to Testing Tab in Left side tree. Expand login.spec.ts, select run button in front of test case.
16. This will execute the test case and result will be appeared there.