🎭 Playwright Angular component testing

The API has been designed to closely resemble Playwright's API wherever applicable. This library is (without guarantee) aimed at facilitating a smooth transition once Playwright offers official support for Angular component testing.

Capabilities

• Run tests fast, in parallel and optionally over multiple machines with sharding or Azure's Testing Service.
• Run the test headless or headed accross multiple real desktop and/or mobile browser engines.
• Full support for shadow DOM, multiple origins, (i)frames, browser tabs and contexts.
• Minimizes flakyness, due to auto waiting, web first assertions and ensures that every test runs in full isolation.
• Advanced emulation capabilities such as modifying screen size, geolocation, color scheme and the network.
• Interactions with the components are indistinguishable from real user behavior.
• Visual regression / screenshot testing.
• Zero-configuration TypeScript support.

Along with all these ✨ awesome capabilities ✨ that come with Playwright, you will also get:

• Watch mode (BETA).
• Visual Studio Code intergration.
• UI mode for debuging tests with a time travel experience complete with watch mode.
• Playwright Tracing for post-mortem debugging in CI.
• Playwright Test Code generation to record and generate tests suites.

Usage

Initialize Playwright Angular component testing with PNPM, NPM or Yarn and follow the installation steps:

pnpm create playwright-sand4rt --ct

npm init playwright-sand4rt@latest -- --ct

yarn create playwright-sand4rt --ct

Now you can start creating your tests:

// button.component.ts
import { Component, Input } from '@angular/core';

@Component({
  standalone: true,
  selector: 'button-component',
  template: `<button>{{title}}</button>`,
})
export class ButtonComponent {
  @Input() title!: string;
}

// button.component.test.ts
import { test, expect } from '@sand4rt/experimental-ct-angular';
import { ButtonComponent } from './components/button.component';

test('render props', async ({ mount }) => {
  const component = await mount(ButtonComponent, {
    props: {
      title: 'Submit',
    },
  });
  await expect(component).toContainText('Submit');
});

See the official playwright component testing documentation and the tests for more information on how to use it.