How do I organize Playwright tests in separate packages and include them in my test suite?

Answer

Yes, you can organize Playwright tests in separate packages and include them in your test suite. To achieve this, use the test.extend function provided by the @playwright/test API to define custom fixtures and hooks for each package.

For example, let's say you have two packages: package1 and package2. In package1, you want to add a custom fixture that logs in to your application before each test runs. You can define this fixture using test.extend:

// In package1/index.ts
import { Page } from 'playwright';
import { test } from '@playwright/test';

const loginFixture = test.extend<{ page: Page }>({
  // Define options for this fixture
  // ...

  // Define setup function that logs in before each test
  async setup({ page }, use) {
    await page.goto('https://ray.run/login');
    await page.fill('#username', 'myusername');
    await page.fill('#password', 'mypassword');
    await Promise.all([
      page.waitForNavigation(),
      page.click('#login-button'),
    ]);
    
    // Pass control back to the caller with access to "page"
    await use({ page });
  },
});

export default loginFixture;

Then, in your actual tests file (tests/example.spec.ts), you can import this fixture and use it like so:

// In tests/example.spec.ts

import loginFixture from '../package1';

const { beforeEach } = loginFixture;

beforeEach(async ({page}) => {
  // The "page" object has already been logged into our app!
});

Similarly, if you want to add custom hooks or fixtures for package2, simply define them there instead.

By organizing your Playwright tests in separate packages using custom fixtures and hooks defined with test.extend, you can maintain a modular and organized test suite.