Teschte

Test Easy, Sleep Calmly, Have Time to Enjoy (Teschte) is a testing runtime for web components built on Playwright. Use a Testing-Library-like syntax to test your web components seamlessly. The library offers full support for JSX and vanilla HTML and is battle-tested with Stencil and Lit components.

Features

• Testing-Library-style render syntax - Write test setups using render() with out-of-the-box JSX support.
• Automatic Visual Regression Testing (VRT) - No more manual VRT setup. When VRT mode is enabled, the runtime captures screenshots after every assertion, generating multiple VRTs for each test case.
• Built-in helpers - Interact with web components using built-in helpers to set/get properties, call methods, spy on events, and more.
• Framework agnostic - Works with any web component library. Simply configure the artifacts in your Playwright config to test Stencil, Lit, or other components.
• Automatic visibility detection - Automatically waits until components (e.g., Stencil) are fully rendered.
• Amazing pipeline reporting - View playwright test reports for the component with Tracer UI and VRT Viewer directly in your pipeline
• Coverage Reports - Will soon be ported

Setup

Install the library:

pnpm install @postfinance/teschte -D

Note: This library requires Playwright to be installed

Configure Playwright

import { defineConfig } from '@playwright/test';
import { DefaultDemoPort, withComponentTesting } from '@postfinance/teschte';

export const baseURL = `http://localhost:${DefaultDemoPort}`;

export default defineConfig(
  withComponentTesting({
    testDir: './src/components',
    testMatch: '**/*.@(ct|test).?(c|m)[jt]s?(x)',
    fullyParallel: true,
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 1 : 0,
    workers: process.env.CI ? 3 : undefined,
    reporter: [
      ['html'],
      ['junit', { outputFile: 'playwright-report/results.xml' }],
    ],
    use: {
      baseURL,
      trace: 'on-first-retry',
      screenshot: process.env.CI ? 'only-on-failure' : undefined,
      headless: true,
      libraryPath: './dist/my-component-library',
      pageImportMap: {
        '@postfinance/util-library': `${baseURL}/imports/my-utils.min.js`,
      },
      esmModuleScriptUrls: [`${baseURL}/my-component-library.esm.js`],
      linkStyleUrls: [`${baseURL}/my-component-library.css`],
    },
  }),
);