Search code examples
javascriptfrontendautomated-testsplaywrightend-to-end

Automate DOM interactions within browser w/o development server


I want to send automated interactions to my React app using an API similar to the Cypress or Playwright E2E testing APIs, which allow, for example, clicking on an element, waiting for an element to exist, checking various conditions.

Typically a tool like Cypress would run a browser as a subprocesses, run the tests within, and then close the browser.

I want to instead use the API as a library and run both the testing code (calling Cypress) and the target application to test within the same webpage (browser context).

Is it possible to use the Cypress API (or something similar to it) to accomplish this?


Solution

  • testing-library provides a common API for sending interactions to the DOM and checking the results.

    The core library, DOM Testing Library, is a light-weight solution for testing web pages by querying and interacting with DOM nodes (whether simulated with JSDOM/Jest or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence that your application will work when a real user uses it.

    react-testing-library adds additional support for querying the state of React components.

    These libraries support running within the browser without an attached e2e test runtime (like Playwright).