Package Exports

@qavajs/steps-playwright
@qavajs/steps-playwright/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@qavajs/steps-playwright) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@qavajs/steps-playwright

@qavajs/steps-playwright provides a comprehensive set of pre-built step definitions for qavajs, powered by Playwright. It enables easy and efficient browser automation in a behavior-driven development (BDD) style using Cucumber syntax.

Features

Predefined steps for web automation using Playwright
Seamless integration with @qavajs/core
Support for dynamic locators and parameters
Built-in assertions and synchronization steps
Easily extendable for custom needs

Installation

npm install @qavajs/steps-playwright

Configuration

import App from './page_object'
export default {
    require: [
        'node_modules/@qavajs/steps-playwright/index.js'
    ],
    browser: {
        timeout: {
            action: 10000, // playwright action timeout
            present: 10000,
            visible: 20000,
            page: 10000,
            value: 5000, // expect value timeout
            valueInterval: 500, // expect value interval
            pageRefreshInterval: 2000 // refresh page for 'I refresh page...' steps
        },
        capabilities: {
            browserName: 'chromium',
            headless: true
        }
    },
    pageObject: new App()
}

Context variables

@qavajs/steps-playwright exposes following to step context

variable	type	description
`this.playwright.browser`	`Browser \| ElectronApplication`	browser instance
`this.playwright.driver`	`Browser \| ElectronApplication`	browser instance (alias for browser)
`this.playwright.context`	`BrowserContext`	current browser context
`this.playwright.page`	`Page`	current context page

Connect to playwright server

In order to connect to playwright server pass wsEndpoint property in capabilities object

export default {
    browser: {
        capabilities: {
            browserName: 'chromium',
            wsEndpoint: 'ws://127.0.0.1:60291/2bd48ce272de2b543e4c8c533f664b83'
        }
    },
}

Connect to cdp endpoint

In order to connect to CDP endpoint pass cdpEndpoint property in capabilities object

export default {
    browser: {
        capabilities: {
            browserName: 'chromium',
            cdpEndpoint: 'http://localhost:9222/'
        }
    },
}

Screenshot strategy

@qavajs/steps-playwright has build-in capability to take screenshot on particular event. If you need to add screenshot to your report add screenshot.event property to profile config. Supported events:

onFail
beforeStep
afterStep

export default {
    browser: {
        screenshot: {
            event: ['onFail'], //event to take screenshot
            fullPage: true // option to take full page screenshot (default false)
        }
    }
}

Playwright traces

@qavajs support capturing playwright traces. https://playwright.dev/docs/next/trace-viewer-intro

Trace Viewer - https://trace.playwright.dev/

export default {
    //...
    browser: {
        trace: {
            event: ['onFail'], // Events to save trace. Possible value onFail or afterScenario 
            dir: 'dirToStoreTraces', // Dir to store traces. Default - traces/
            attach: true, // Whether trace need to be attached to cucumber report. Default - false
            screenshots: true, // Whether to capture screenshots during tracing. Screenshots are used to build a timeline preview. Default - true
            snapshots: true, // Whether to capture DOM and network activity
        }
    }
}

Video

export default {
    //...
    browser: {
        video: {
            event: ['onFail'], // Events to save video. Possible value onFail or afterScenario 
            dir: 'dirToStoreVideo', // Dir to store video. Default is video/
            size: { width: 640, height: 480 }, // Video resolution
            attach: true // Define if trace need to be attached to cucumber report. Default false
        }
    }
}

reuseSession

reuseSession flag allows to share session between tests in frames of process. But setting of this flag transfers session control to user.

export default {
    browser: {
        reuseSession: true
    }
}

restartBrowser

restartBrowser flag allows to restart browser between tests instead of default restarting context

export default {
    browser: {
        restartBrowser: true
    }
}

Development and testing

Install dependencies

npm install

Install playwright browsers

npm install:browsers`

Build lib

npm run build

Execute unit test (with vitest)

npm run test`

Execute e2e browser tests

npm run test:e2e`

Execute e2e electron tests

npm run test:e2e:electron`