Version: Next

Playwright Overview

note

The Stencil Playwright adapter is currently an experimental package. Breaking changes may be introduced at any time.

The Stencil Playwright adapter is designed to only work with version 4.13.0 and higher of Stencil!

Playwright is an automated end-to-end testing framework built to run on all modern browser engines and operating systems. Playwright leverages the DevTools protocol to provide reliable tests that run in actual browsers.

Set Up

To add Playwright to an existing Stencil project, leverage the Stencil Playwright testing adapter. This is a tool built by the Stencil team to help Stencil and Playwright work better together. The best part is you'll write your tests using the same APIs as defined and documented by Playwright. So, be sure to check out their documentation for help writing your first tests!

To install the Stencil Playwright adapter in an existing Stencil project, follow these steps:

Install the necessary dependencies:

npm
Yarn
pnpm

npm i @stencil/playwright @playwright/test --save-dev

yarn add @stencil/playwright @playwright/test --dev

pnpm add @stencil/playwright @playwright/test --save-dev

Install the Playwright browser binaries:
```
npx playwright install
```

Create a Playwright config at the root of your Stencil project:

playwright.config.ts
import { expect } from '@playwright/test';
import { matchers, createStencilPlaywrightConfig } from '@stencil/playwright';

// Add custom Stencil matchers to Playwright assertions
expect.extend(matchers);

export default createStencilPlaywrightConfig({
  // Overwrite Playwright config options here
});

The createStencilPlaywrightConfig() is a utility that will create a default Playwright configuration based on your project's Stencil config. Read more about how to use this utility in the API docs.

update your project's tsconfig.json to add the ESNext.Disposable option to the lib array:
tsconfig.json
```
{
  lib: [
    ...,
    "ESNext.Disposable"
  ],
  ...
}
```
note
This will resolve a build error related to Symbol.asyncDispose. If this is not added, tests may fail to run since the Stencil dev server will be unable to start due to the build error.
Ensure the Stencil project has a www output target. Playwright relies on pre-compiled output running in a dev server to run tests against. When using the createStencilPlaywrightConfig() helper, a configuration for the dev server will be automatically created based on the Stencil project's www output target config and dev server config. If no www output target is specified, tests will not be able to run.
Add the copy option to the www output target config:
stencil.config.ts
```
{
   type: 'www',
   serviceWorker: null,
   copy: [{ src: '**/*.html' }, { src: '**/*.css' }]
}
```
This will clone all HTML and CSS files to the www output directory so they can be served by the dev server. If you put all testing related files in specific directory(s), you can update the copy task glob patterns to only copy those files:
stencil.config.ts
```
{
   type: 'www',
   serviceWorker: null,
   copy: [{ src: '**/test/*.html' }, { src: '**/test/*.css' }]
}
```
note
If the copy property is not set, you will not be able to use the page.goto testing pattern!
Test away! Check out the e2e testing page for more help getting started writing tests.

Set Up​

Contents

Set Up