Architecture Breakdown: Selenium, Cypress, and Playwright

Let’s understand the Architecture of the top three popular tools used for the automation testing of web applications

1. Selenium WebDriver
2. Playwright
3. Cypress

Starting with the OG – “Selenium WebDriver” is the most widely used open-source automation tool, significantly reducing the workload for Manual testers.

A.  Selenium 4 WebDriver Architecture includes four major components

1. Selenium Client library / Language Bindings – These are the client libraries provided by Selenium for several programming languages like Java: ‘selenium-java’ etc.
2. W3C Protocol – The World Wide Web Consortium sets a global standard that all browsers follow, and browser drivers follow, so to make a standardized communication between the client and server JSON protocol was replaced by W3C from WebDriver version 3.8 onward.
3. Brower Drivers – These are the standalone executable files (.exe) like chromedriver.exe, geckodriver.exe and msedgedriver.exe which help with the browser interactions.

4. Browsers – These are the real browsers like Chrome, Edge, Firefox, etc.

   

The above image gives us a brief understanding of how Selenium 4 WebDriver operates internally, Firstly the high-level code written in any programming language is converted into an HTTP request format, this request is sent to the Brower drivers, which then execute the request/commands in the actual browsers and sends back the responses that are then processed and returned to the test script.

Projects that require multiple programming languages, broad browser support, and complex integration needs can opt for Selenium some of the real-time projects are: - Google search, LinkedIn platform, etc.

B.  Playwright Architecture

Playwright is one of the leading tools used for end-to-end automation testing. it's known for its fast executions, cross-browser testing, browser context, automatic waits, cross-platform support, etc.

Let’s understand the key components of Playwright Architecture

1. Client or language binding – Playwright supports multiple programming languages and environments like Java, JavaScript, typescript, python, etc.
2. Web Socket - Playwright uses a web socket protocol to interact with the client and server, in web socket protocol you can send back-to-back requests without terminating the connection which helps Playwright to perform test execution at a much faster pace than other automation tools.

3. Browser Context – It's an isolated instance of a browser that manages its storage, session IDs, cookies, caches, etc. This feature sets apart playwright from other automation tools by enabling the parallel execution of test scripts which speeds up the testing process.

   

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.