End-to-End Testing with Puppeteer: Automating User Interactions Across Frontend and Backend

End‑to‑end testing refers to treating the whole system as a black box and simulating normal user behavior across the entire software stack, from the front end to the back end, to perform a global, holistic test.

The example in this article demonstrates how all operations shown in the video are performed automatically by a program, just like a real user, thereby greatly improving testing efficiency and ensuring delivery quality.

All of these actions can be achieved simply with Puppeteer , a Node.js library that provides a high‑level API to control Chromium or Chrome. In other words, most manual operations performed in a browser can be reproduced by calling Puppeteer APIs from a Node script.

Getting page elements

Keyboard input

Mouse operations

File upload

Executing native JavaScript

1. Open the browser and navigate to a page: Use puppeteer.launch() and page.goto(url) to start Chromium and load the target URL.

2. Locate an input field and type: Wait for the element with page.waitForSelector(selector) to obtain an elementHandle , then call elementHandle.type('text') to simulate keyboard input.

3. Handle slide verification: First disable the navigator by executing native JavaScript via page.evaluate(() => { /* ... */ }) . Then obtain the slide element’s bounding box with elementHandle.boundingBox() to get X and Y coordinates. Use page.mouse.move , page.mouse.down , and page.mouse.up (optionally randomizing steps) to perform the drag‑and‑drop action.

4. Upload a file: After acquiring the file‑input elementHandle , call elementHandle.uploadFile(...filePaths) , where filePaths are paths relative to the current working directory.

5. Other notes: Almost every user action follows the pattern of locating the relevant element and then performing keyboard or mouse operations; chaining these steps creates a complete workflow. The process is fully automated—no manual intervention is required—and it effectively validates the entire user journey from front‑end interaction to back‑end request, making any anomalies visible during testing.

In summary, Puppeteer provides a simple yet powerful way to script end‑to‑end tests that mimic real user behavior across the whole application stack.