Playwright is a library used to automate the browser. It is a powerful tool to test web applications and can be used to automate tasks that require a browser.

In OrbitKit, Playwright is used to provide a way to write and run end-to-end tests for the web and marketing applications.

​
How it’s setup

In short terms:

  • The @playwright/test dependency is installed at the root of the monorepo to provide a way of running playwright install-deps --with-deps to install the necessary browser binaries without having to change directories.
  • The @playwright/test dependency is also installed in each of the applications.
  • Tests are written in an e2e directory in each application.
  • The playwright.config.ts inside each of the applications is used to configure the tests.
  • To run the tests, you use turborepo and the turbo test:e2e command. Filtering to a single application is done using the --filter flag followed by the application name such as turbo test:e2e --filter=@orbitkit/web.
  • To provide more flags to playwright while running it, you can do so by adding -- -- followed by the flags. For example, turbo test:e2e --filter=@orbitkit/web -- --headed will run the tests in the web application in headed mode.
  • There is also a playwright specific eslint configuration in packages/config/eslint/playwright.js that is used to lint the tests and is added onto the eslint configuration of each app that uses playwright using orbitkit/playwright in the extends array.

​
Writing tests

To write tests, you can create a new file in the e2e directory of the application you want to write the test for. The file should have a .spec.ts extension.

Here is an example of a test file:

import { expect, test } from '@playwright/test'

test('has title', async ({ page }) => {
  await page.goto('/')

  await expect(page.getByText(/astro website/i)).toBeVisible()
})

​
CI setup

In CI, the tests are run per application in a separate job. Refer to the .github/workflows/pr-ci.yml file to see how the tests are run in CI.

Built packages