This example directory showcases shortcomings when testing components with different component testing frameworks. The goal is to identify the quality of tests being run. We are looking into the following set-ups:

• Vitest using JSDOM
• WebdriverIO using Chromedriver
• Cypress using proprietary automation
• Playwright using proprietary automation

We are testing a simple React component that introduces side effects that can represent arbitrary bugs.

In this scenario, we attempt to click on a button with different side effects.

In this scenario, we set a value to an input text element.

We are testing React components that require certain user interaction, e.g. through gestures.

In this scenario, we attempt to use user gestures to zoom in and out of a component.

We inspect features of frameworks that are useful for testing web components.

In this scenario, we are going through various mocking scenarios.

* The framework is still able to determine the element's text, which would be impossible for a user because the element is not visible
** See *. Theoretically, elements can be transparent, which would allow users to see the elements that are behind them. In this case, however, the overlaying element has a red background color, so should not allow reading the text.
*** Some frameworks have magic hooks that ensure that elements are within the viewport. While this stabilizes tests, it can make them less reliable, as the attempt to move them into the viewport is not what users would do in reality.
**** No general support for this interaction
***** Issues are filled in respective repositories, see cypress-io/cypress#16741 or microsoft/playwright#14572