Description:

This npm package aims to create wrapper methods to use playwright interactions in a more convenient way. While creating a test automation framework, we often face the issue of creating reusable functions for common test automation interactions like clicking, typing, etc on the page. This package aims to provide such reusable functions using playwright in a standardized format so that we use them directly in our framework. This will help automation testers to break the dependency between the test code and the framework methods. As a result, these methods can be used in various test runners like playwright test runner, jest, etc without issues. Also, this allows the reusable methods to be used in both BDD and TDD test methodologies. Additionally, a html report is generated for each run without any extra code based on the reusable functions used from this package.

Table of contents:

• Pre-requisites
• Installation
• Usage
  • Before and after each test
  • Locate elements
  • Launching the browser instance
  • Interacting with elements
    • CLick
    • Double click
    • Hover
    • Hover and click
    • Type text
    • Select from dropdown
  • Interacting with elements in frame
    • CLick
    • Double click
    • Hover
    • Hover and click
    • Type text
    • Select from dropdown
  • Other useful methods
    • Go to a url
    • Scroll to view
    • Abort google ads
• Best practices for using this package
• Feedback
• Contact me

Pre-requisites:

No prerequisites are required for the playwright reusable methods. However, npx playwright install is required to install playwright browsers. The root of the project should contain the folder reports/ where the html reports would be generated.

Installation:

npm i playwrightwrapperpackage installs this package.

Usage:

Before and after each test:

The first step before each testcase run is to initialize the report with the testcase name and then launch the browser instance. As of now, the launched browser is the playwright chromium browser. The last step after each testcase run is to close the browser and close the report.

Following is an example of beforeEach and afterEach in jest:

beforeEach(async() => {
        await playwrightmethods.InitializaeReport(expect.getState().currentTestName as string)
        Obj = await playwrightmethods.LaunchBrowserInstance()
    })
    afterEach(async() => {
        await playwrightmethods.CloseBrowser(Obj)
        await playwrightmethods.CloseReport()
    })

Use of locators:

The locators to be used for locating an element on the page and interacting with it is in form of a string used as a parameter in all reusable interaction methods. For example, for locating a div element with id 'search', the locator string would be either "//div[@id="search"]" or "div#search". The locator string can be used in all the reusable methods. The use of string to locate elements on the page helps automation testers from selenium background habituated with working with xpaths.

Launching the browser instance:

const obj=await playwrightMethods.LaunchBrowserInstance()

This obj contains the page, context and browser created. This obj (particularly obj.page) can be used in all the reusable methods. Also, this gives the flexibility to the automation tester to use the same page object across multiple testcases and for use in any other custom defined methods as per the tester's needs.

Interacting with elements:

Each of these methods waits for the element to be visible before proceeding with the interaction. Also, on interactions involving a click or selecting an element in dropdown, the method waits for the dom content to be loaded and all network requests to die down after the interaction before proceeding to the next method in queue. This helps reduce flakiness and loading issues for unstable applications.

Click:

The ClickItem method takes the page, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.ClickItem(Obj.page,'(//a[text()="Click Here"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.ClickItem(Obj.page,'(//a[text()="Click Here"])[1]',3000)

Double click:

The DoubleClick method takes the page, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.DoubleClick(Obj.page,'(//a[text()="Click Here"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.DoubleClick(Obj.page,'(//a[text()="Click Here"])[1]',3000)

Hover:

The HoverItem method takes the page, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.HoverItem(Obj.page,'(//a[text()="Hello"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.HoverItem(Obj.page,'(//a[text()="Hello"])[1]',3000)

Hover and click:

The HoverAndClick method takes the page, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.HoverAndClick(Obj.page,'(//a[text()="Hello"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.HoverAndClick(Obj.page,'(//a[text()="Hello"])[1]',3000)

Type text:

The TypeText method takes the page, locator string, text to be typed and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.TypeText(Obj.page,'(//input[@id="search"])[1]','Hello')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.TypeText(Obj.page,'(//input[@id="search"])[1]','Hello',3000)

Select in dropdown:

The SelectOption method takes the page, locator string, text of the option to be selected and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.SelectOption(Obj.page,'(//select[@id="dropdown"])[1]','Hello')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.SelectOption(Obj.page,'(//select[@id="dropdown"])[1]','Hello',3000)

Interacting with elements in frame:

For interacting with elements in frame, the framelocator of the frame where the element is present needs to be identified. This can be done by using the SwitchToFrame method. This method takes the page, frame locator string and (optionally) the timeout for waiting for the frame to be present. If not provided, by default it waits for 10 seconds.

Therefore, for all interaction with elements in frames, the following implementation is necessary:

const frame1=await playwrightmethods.SwitchToFrame(Obj.page,'//frame[@src="frame_1.html"]')

or

//This will wait for 3 seconds for the frame to be present
const frame1=await playwrightmethods.SwitchToFrame(Obj.page,'//frame[@src="frame_1.html"]',3000)

Click:

The ClickInFrame takes the framelocator, locator string of the element to be clicked and (optionally) the timeout for waiting for the element to be visible. If not provided, by default it waits for 10 seconds.

await playwrightmethods.ClickInFrame(frame1,'(//a[text()="Click Here"])[1]')

or

//This will wait for 3 seconds for the element to be present
await playwrightmethods.ClickInFrame(frame1,'(//a[text()="Click Here"])[1]',3000)

Double click:

The DoubleClickInFrame takes the framelocator, locator string of the element to be double-clicked and (optionally) the timeout for waiting for the element to be visible. If not provided, by default it waits for 10 seconds.

await playwrightmethods.DoubleClickInFrame(frame1,'(//a[text()="Click Here"])[1]')

or

//This will wait for 3 seconds for the element to be present
await playwrightmethods.DoubleClickInFrame(frame1,'(//a[text()="Click Here"])[1]',3000)

Hover:

The HoverInFrame method takes the framelocator, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.HoverInFrame(frame1,'(//a[text()="Hello"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.HoverInFrame(frame1,'(//a[text()="Hello"])[1]',3000)

Hover and click:

The HoverAndClickInFrame method takes the framelocator, locator string and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.HoverAndClickInFrame(frame1,'(//a[text()="Hello"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.HoverAndClickInFrame(frame1,'(//a[text()="Hello"])[1]',3000)

Type text:

The TypeInFrame method takes the framelocator, locator string, text to be typed and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.TypeInFrame(frame1,'(//input[@id="search"])[1]','Hello')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.TypeInFrame(frame1,'(//input[@id="search"])[1]','Hello',3000)

Select in dropdown:

The SelectOptionInFrameByText method takes the framelocator, locator string, text of the option to be selected and (optionally) the timeout (in miliseconds) for waiting for the element to be visible as parameters. If the third optional parameter timeout is not provided, the default timeout is 10 seconds.

await playwrightmethods.SelectOptionInFrameByText(frame1,'(//select[@id="dropdown"])[1]','Hello')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.SelectOptionInFrameByText(frame1,'(//select[@id="dropdown"])[1]','Hello',3000)

Other useful methods:

Go to a url:

The GoToUrl method takes the page and the url as parameters.

await playwrightmethods.GoToUrl(Obj.page,'https://www.google.com')

Scroll to view:

The ScrollToView method takes the page,the locator string and (optionally) the timeout(in ms) for the element to be visible as parameters.

await playwrightmethods.ScrollToView(Obj.page,'(//a[text()="Hello"])[1]')

or

//This waits for the element to be visible before the interaction with a timeout of three seconds
await playwrightmethods.ScrollToView(Obj.page,'(//a[text()="Hello"])[1]',3000)

Abort Google Ads:

This is a context level method. It aborts all ads from the googleads domain, which is often necessary for smooth automation testing of the UI of any website on the public network

await playwrightmethods.AbortAds(Obj.context)

Best practices for using this package:

The methods mentioned here should be run only before and after each test and should not be included in the testcase script itself to prevent creating unfinished reports and leaving unclosed browsers. If the tester intends to use the {page, context, browser} object (obj) outside of this package for use in test scripts or reusable methods, playwright needs to be installed on the machine. While installing playwright for this purpose, please make sure to install the version of playwright mentioned in the package.json of this package to avoid version conflicts. Also please npm i this package from time to time to incorporate the latest developments.

Feedback:

Much more remains to be done, and I am looking forward to feedback/issues from the community to develop this further in a way that is useful to others. Please do provide feedback and inform me of any issues/features you would like to be added by mailing me at [email protected]

Contact me:

Please feel free to let me know of any issues, concerns or feedback at [email protected] or connect with me on my Linkedin profile