qa-playwright-lib

A wrapper around the playwright framework for Web Testing and Automation

Structure

• example: describes how we can use this lib
• libs: describes common part of the framework
  • fixtures: a place for fixtures (Test fixtures are used to establish the environment for each test)
  • page-elements: a place for describing methods for interactions with page elements
  • pages: describes common pages, components, forms
  • steps: describes common user steps by tests
  • services: describes common services for working with cookies, screenshot
  • actions.ts: describes a base method for interactions with locator based on the playwright framework

Installation

To get started install package

# Run from your project's root directory
npm i -D @macpaw/qa-playwright-lib

Run tests on the CI

The CI tests run in the Moon service. To connect to it, use a browser WebSocket endpoint (wsEndpoint). To work correctly, you need to set up the configuration in your project.

export default defineConfig({
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    connectOptions: {
      wsEndpoint: moonUrl,
    },
  },
})

Example

For information on how to use this library, see the /example.

To run example tests run use the script:

npm run test:example

Initialize project local

1. Clone repository

git clone [email protected]:MacPaw/qa-playwright-lib.git

2. Init local env variables from the template

cp .env.example .env

3. Install dependency

# Run from your project's root directory
npm i

Test lib changes in project

1. Run scripts to create lib package

npm run prepublishOnly
npm pack

2. Copy path of .tgz lib package

3. Install package in your project

npm i -D \${path_to_package}

Library Release Process

Our library release process is designed to ensure quality, consistency, and proper versioning. The process is broken down into multiple stages to ensure every change is tracked, reviewed, and integrated appropriately. We use changesets for version and release management.

1. Adding Changes

Whenever you introduce a new change, run the command:

You have to do this at least once per branch with some changes.

npm run changes:add

• The CLI will prompt you with questions regarding your changes. You'll need to specify the nature and level of the changes (options: patch, minor, major).
• After completing the CLI prompts, commit the changes with a commit message similar to chore: update changesets.

2. Releasing and Publishing

Steps to make a release:

• To initiate a release, create a pull request from develop to main with the title Release.
• Ensure all CI checks pass successfully.
• Once CI checks are green and you have at least one approval, merge the pull request.
• Post-merge, the release GitHub Actions will trigger and create an "update versions" pull request to the main branch.
• Wait for the CI to turn green on the "update versions" pull request.
• Once CI is green, merge the "update versions" pull request.
• After this merge, the actions will trigger again. This time, they'll generate a new tag, create a new release, and publish packages to both GitHub and npm registries.

3. Post-Release Activities

After a successful release, ensure you create a backmerge pull request from main to develop. This ensures that the develop branch stays up-to-date with the latest versions and changes.