Avichay Eyal edited this page Nov 6, 2018 · 2 revisions


The Next-Generation Visual Development & Test Environment for Web Components

showroom enables developers to isolate web components for development purposes and provides puppeteer integration for easy unit-testing.


  • npm i -D showroom or npm i -g showroom for running from command line
  • Add a script definition in your package.json with the command showroom
  • Create a .showroom folder in your project
  • Add descriptor files in .showroom folder
  • Optionally add global config file .showroom/config.js

Use examples as provided here

Puppeteer integration

Example integration in your test file

const ShowroomUtils = require('showroom/test-utils');

// assuming puppeteer launch and page exists
describe('My awesome Test Suite', async () => {
   let showroom;
   before(async () => {
      // instantiate showroom helper linked to page instance
      showroom = await ShowroomUtils(page);
      // load showroom page and wait until all resources are loaded
      await page.goto('http://localhost:3000', {"waitUntil" : "networkidle0"});

   it('Awesome component test', async () => {
      // assuming "awesome-component" is your custom element's tag name
      const componentHandle = await showroom.setTestSubject('awesome-component');
      // use showroom to set properties, attributes, and take events from the component.
      // ... the rest of the test

Available commands

  • showroom.setTestSubject(componentName:string):Promise<JSHandle>
  • showroom.setProperty(propertyName:string, value: any):Promise
  • showroom.getProperty(propertyName:string):Promise<any>
  • showroom.setAttribute(attributeName:string, value: string):Promise
  • showroom.getAttribute(attributeName:string):Promise<string>
  • showroom.hasAttribute(attributeName:string):Promise<boolean>
  • showroom.removeAttribute(attributeName:string):Promise
  • showroom.find(path:string):Promise<JSHandle> - search DOM within the component, use double slash // for shadow-DOM penetration
  • showroom.getEventList():Promise<SerializedEventObject[]>
  • showroom.getLastEvent():Promise<SerializedEventObject>

Using puppeteer you can work with your component as JSHandle object like any other browser based test.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.