Architecture Breakdown: Selenium, Cypress, and Playwright

The above image gives us a brief understanding of how Playwright operates internally, firstly client or language bindings are the programming language that we use to develop the test scripts. As we all know HTTP uses a request-response model with stateless single interactions which means that after each request & response, the connection gets terminated and with each new request a new connection is established between the client and server so it's much slower. Playwrights make use of web sockets instead of HTTP to interact with clients and servers. So once a connection is established between the client and server via web socket protocol, we can send back-to-back requests without terminating the connection which makes it much faster. Once the connection is established test execution starts, and all test cases can use the same connection for their execution, once execution is completed the connection is disabled.

Projects with modern applications that require multiple browser contexts, network controls, and fast and reliable cross-browser testing can opt for the Playwright tool. some of the real- time projects are Live trading applications, Gaming, Slack & GitHub.

C.  Cypress Architecture.

Cypress is one of the widely growing next-generation front-end automation testing tools, it is a JavaScript-based end-to-end testing framework known for its user-friendly design & faster test execution capabilities. Cypress sets itself apart from other automation testing tools by running tests directly on the actual browsers, without the need of driver binaries.

Let’s understand the key components of Cypress Architecture

1. Node.js – As we all know Cypress uses a JavaScript-based testing framework, so node.js plays a vital role as it is the runtime environment that helps us to execute JavaScript code. It comes with npm (Node Package Manager) bundled with it, which is the default package manager for node.js which is ideally used to manage and install cypress and its dependencies ex: - to install cypress we use a command as- ”npm install cypress --save-dev.”
2. Proxy Server – Cypress has a built-in proxy server that can capture and modify the network requests and responses. Cypress can inspect, modify, or delay these requests before they reach the server, it can mock API endpoints, stubs responses, etc.
3. Cypress Test Runner – It gives real-time live execution results like test statuses (pass/fail) are immediately displayed. It allows us to see the test execution within the browser and captures screenshots at every step of the test, this feature is incredibly useful in debugging purposes.

4. Browser – Cypress operates within the actual browser, so it can access DOM and network requests allowing it to interact with the application directly, providing faster execution.

   

The above image gives us a brief understanding of how Cypress operates internally, firstly open the test runner using the “npx cypress open” command and node.js will initialize the test environment and the runner will load the test scripts, Node.js launches the browser with proxy. The browser is set up with two iframes one for Cypress and one for the application being tested. So, the first iframe is handled by Cypress to execute test commands and control the test lifecycle and the second Iframe is where the application is loaded. Since Cypress runs inside the browser it has direct access to the DOM and network requests. Cypress offers automatic waits, Real-time debugging, Live reloads, etc. which makes it a unique and efficient approach to end-to-end testing.

Projects with modern applications that require real-time feedback, a developer-friendly environment, and are easy to work with, particularly for front-end testing and rapid development cycles can opt for Cypress some of the real-time projects are- Pactflow, Gatsby, etc.

Hope this article helps you understand the architecture of the top three automation tools.