Repository files navigation

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.

• Run tests fast, in parallel and optionally over multiple machines withsharding orAzure's Testing Service.
• Run the test headless or headed accross multiplereal 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 infull isolation.
• Advancedemulation capabilities such as modifying screen size, geolocation, color scheme andthe 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.

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.tsimport{Component,Input}from'@angular/core';@Component({standalone:true,selector:'button-component',template:`<button>{{title}}</button>`,})exportclassButtonComponent{  @Input()title!:string;}

// button.component.test.tsimport{test,expect}from'@sand4rt/experimental-ct-angular';import{ButtonComponent}from'./components/button.component';test('render props',async({ mount})=>{constcomponent=awaitmount(ButtonComponent,{props:{title:'Submit',},});awaitexpect(component).toContainText('Submit');});

See the officialplaywright component testing documentation and thetests for more information on how to use it.