Installation

Let's discover Stencil Playwright in less than 5 minutes.

Why Playwright vs. Puppeteer?

Playwright can test components across different browsers (chromium, firefox and webkit). Puppeteer can only test components on Chrome.

Playwright has improved support for ShadowDOM, selectors automatically pierce the ShadowDOM. Puppeteer requires using selectors such as my-component >>> .shadow-element.

Playwright is decoupled from Stencil allowing you to update to the latest version of Playwright without a Stencil dependency change. Puppeteer is directly coupled to Stencil, meaning you can only use the dependency version specified by Stencil.

Getting Started

Get started by installing Stencil Playwright to your Stencil project.

npm install stencil-playwright @playwright/test serve --save-dev

After successfully installing your project's dependencies, run the following command:

npx playwright install

Create Playwright Config

In your Stencil component library, create a playwright.config.ts for your project configurations. This config file can be located next to your existing stencil.config.ts. It is recommended to apply the following configurations:

import { expect, PlaywrightTestConfig } from '@playwright/test';
import { matchers } from 'stencil-playwright';

expect.extend(matchers);

const config: PlaywrightTestConfig = {
  testMatch: '*.e2e.ts',
  use: {
    baseURL: 'http://localhost:3333'
  },
  webServer: {
    command: 'serve -p 3333',
    port: 3333,
    reuseExistingServer: !process.env.CI
  }
};

info

Playwright will only target end-to-end tests with files that end in .e2e.ts with the above configuration. You can change this to another pattern, if you are migrating away from Stencil Puppeteer.

To learn more about the available options, visit Playwright's documentation.

Update .gitignore

Playwright will generate test output for the previous run. This includes a list of passing and failing tests as well as traces to review the exact execution of the test. These files should not be committed to source control.

In your Stencil component library's .gitignore add the following:

playwright-report/
test-results/

Next Steps

Your project is now configured with Playwright. You can learn more about writing tests and running tests from Playwright's official documentation.

When writing tests import test from stencil-playwright instead of @playwright/test.

import { test } from "stencil-playwright";

test.describe("", () => {
  test("", async ({ page }) => {
    // Test contents
  });
});

The custom fixture will continue to use all the available matchers and typings available from @playwright/test.