@qavajs/steps-playwright

Step library to work with playwright in qavajs framework

Installation

npm install @qavajs/steps-playwright

Configuration

const App = require('./page_object');
module.exports = {
    default: {
        require: [
            'node_modules/@qavajs/steps-playwright/index.js'
        ],
        browser: {
            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'
            }
        },
        pageObject: new App()
    }
}

Global variables

@qavajs/steps-playwright exposes following global variables

Connect to playwright server

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

module.exports = {
    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

module.exports = {
    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

module.exports = {
    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
        }
    }
}

Typescript

To properly use globals exposed by @qavajs/steps-playwright add corresponding types to tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@qavajs/steps-playwright/globals"
    ]
  }
}

reuseSession

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

module.exports = {
    default: {
        browser: {
            reuseSession: true
        }
    }
}

restartBrowser

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

module.exports = {
    default: {
        browser: {
            restartBrowser: true
        }
    }
}

Development and testing

Install dependencies npm install

Install playwright browsers 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