npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

adactin-playwright-framework

v1.1.21

Published

Playwright Typescript Automation framework

Downloads

152

Readme

Adactin framework library

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 " } }

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