Testing with Bolt

Bolt is built using the native web component API, so it work with different web frameworks such as Angular or Vue. This is also true of testing suites like Cypress, PlayWright etc.

Many testing frameworks suggest using an HTML custom data attribute ( such as 'data-test') for selecting elements in your tests. Bolt provides a passthrough property on many form control components that sets a 'data-test' attribute on the underlying element.

These are:

datatestbutton:

• Button
• Input chip

datatestcheckbox:

• Checkbox

datatestinput:

• Autocomplete
• Toggle chip
• Date picker
• Password
• Switch
• Textfield

datatestradio:

• Radio

datatestselect:

• Select

datatesttextarea:

• Textarea

Cypress and Tosca are the most used testing frameworks here at NW. Both of these can work well with Bolt. As Bolt is built on native web components, both of these frameworks need to utilize methods for traversing the shadow DOM whenever a selector needs to harness an element within a component.

For Cypress this can mean either using the built in .shadow() selector function, or enabling includeShadowDom in the Cypress config file. Cypress:

1. The shadow() function can select an element within the shadow DOM. Example: cy.get(‘bolt-textfield’).shadow().find(‘input’)
2. Setting the configuration includeShadowDom to true also allows shadow DOM traversal. With this configured you don't need the .shadow().

Tosca will scan the shadow DOM by default, but creating the actual tests is more involved than working with Cypress. If you are using Tosca, then we recommend checking the documentation for details on working with native web components and the shadow DOM. There may be cases where you won’t need to traverse the shadow DOM to interact with Bolt components. Tosca, can automate tests on web components that contain a shadow DOM, but it takes several steps.

1. Use XScan to navigate to the component and locate the shadow Host.
2. Model the element in the shadow DOM
3. Create a test case.

Besides Cypress and Tosca there are some other testing frameworks that you can use when working with Bolt. These are some of the most popular testing frameworks, but there are others.

• Playwright can be used with Bolt without any added configuration. In addition it is generally considered to be faster than Cypress.
• WebdriverIO can work with shadow DOM but does require added plugins.
• TestCafe works out of the box with shadow DOM and thus simplifies setup.
• Puppeteer is a Node.js library by Google mostly used for automation but can be used for E2E testing. It can work with shadow DOM.
• Web Test Runner was designed for use with shadow DOM