playwright-helpers

Playwright-helpers

Background

This project is intended to be used with the latest release of Playwright test.

Playwright is great for test automation this package is to make it even better with support for advanced request handling, mocking and some element helper functions.

Installation

$ npm install playwright-helpers --save-dev

Package contents

Currently this package consists of the following helpers:

MockHelper: for easy mocking of endpoints
RequestHelper: methods for waiting network requests
ElementHelper: methods for element interactions

Usage of the helpers in your playwright tests

Extend test with the helpers

import { test as base, expect } from '@playwright/test';
import { MockHelper, RequestHelper } from 'playwright-helpers';

export type TestOptions = {
  mockHelper: MockHelper;
  requestHelper: RequestHelper;
};

export const test = base.extend<TestOptions>({
  mockHelper: async ({ page }, use) => {
    use(new MockHelper(page, 'test/mocks'));
  },
  requestHelper: async ({ page }, use) => {
    use(new RequestHelper(page));
  }
});

Usage in your tests

test('my test', async ({ page, requestHelper }) => {
  await page.goto('https://playwright.dev/');

MockHelper

Function for easy mock setup it is currently supporting json and xml reponses. You initiate it with a page and a baseFolder for the scenarios. The default dataType is JSON this can be changed to xml.

new MockHelper(page, <baseFolder>, <dataType?>)

use it in your tests

await mockHelper.mockEndpoint(<MockEndpoint>
)

MockEndpoint {
  url: string, regex of the url you want to mock
  mockDir?: string, if scenario from file you can provide the folder scenarios are located 
  scenario?: string, the name of the scenario without the extension
  statusCode?: number, of the response default is always 200
}

See json example and xml example

RequestHelper

Functionality like in Cypress where you can wait for intercept. First paramater is the regex url of the endpoint and second paramater is the action you want to perform.

  const result = await requestHelper.actionAndwaitForResponse(
    "indexes/.*/queries",
    page.type('.DocSearch-Input', 'network'));

All available methods can be found in the documentation