playwright-cucumber-wrapper

About

This package is a testing framework built with Playwright, a powerful tool for automating browser testing and API testing, along with CucumberTypeScript, a tool for running automated tests written in plain language.

Pre-requisites

• Node v16.20.2 (node 16+)
• npm v8.19.4 (npm 8+)
• Prettier setup in VSCode (for help, follow this) - make sure the code is formatted on file save.

Steps to Create Package -

• Clone this project and install the all package by running the command - npm install
• npm i typescript -D
• npx tsc --init --rootDir src --outDir lib --sourceMap --declaration --declarationMap
• npm run build
• npm link

In another project

use -

• npm link playwright-cucumber-wrapper

Then commit the code into repo -

Use this package in other project as a dependency

• npm install playwright-cucumber-wrapper

Way to use in your project -

import { Page } from '@playwright/test';
import { invokeBrowser } from 'playwright-cucumber-wrapper';
import { getEnv } from 'playwright-cucumber-wrapper';
import { createLogger } from 'winston';
import { options } from 'playwright-cucumber-wrapper';
import {PlaywrightWrapper} from 'playwright-cucumber-wrapper';

// If we want to use into page class then use like - 

export default class AssessmentSplitPage{
    private static instance: AssessmentSplitPage;
    base : PlaywrightWrapper;

    private constructor(page: Page){
        this.base = PlaywrightWrapper.getInstance(page);
         
    }

    public static getInstance(page: Page): AssessmentSplitPage{
       if( !AssessmentSplitPage.instance){
         AssessmentSplitPage.instance = new AssessmentSplitPage(page);
       }

       return AssessmentSplitPage.instance;
    }

    assessmentDob = "//input[@data-test='DesignSystem-Input' and @placeholder='mm/dd/yyyy']";

}

Rest all the change would be as it is.

Use of package in test.spec.ts

import { test, expect } from '@playwright/test';
import { Browser, BrowserContext } from '@playwright/test';
import { invokeBrowser } from 'playwright-cucumber-wrapper';
import { Assert } from 'playwright-cucumber-wrapper';
import {PlaywrightWrapper} from 'playwright-cucumber-wrapper';

let browser: Browser;
let context: BrowserContext;

test('has title', async ({ }) => {
  browser = await invokeBrowser();
    context = await browser.newContext();
    const page = await context.newPage();
    const base:PlaywrightWrapper = new PlaywrightWrapper(page);
    const assert: Assert = new Assert(page);
    await base.goto('https://playwright.dev/');

    // Expect a title "to contain" a substring.
    await assert.assertTitleContains("Playwright");
});

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

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});