Skip to content
Learn with RV – Tech Blog
Learn with RV – Tech Blog

#testautomation #qa #programming #linux #devops

  • Home
  • Who am I?
  • 1-on-1 Mentoring
  • 18 Testimonials
  • YouTube
  • LinkedIn
  • Contact
Learn with RV – Tech Blog

#testautomation #qa #programming #linux #devops

July 7, 2023October 2, 2024

Architecture explained: Cypress vs Playwright vs Selenium 3/4

In the world of test automation, choosing the right tools and frameworks can greatly impact the success and efficiency of your testing efforts. Selenium has been the most popular choice for web application testing, but with the introduction of Selenium 4 (October 2021), as well as the emergence of other frameworks (non-selenium) like Cypress and Playwright, testers now have multiple options to consider. In this article, we will analyze the architecture diagrams of Selenium 3, Selenium 4, Cypress, and Playwright.

Selenium 3

selenium3-architecture

A Selenium request is sent from the Selenium Client component. Next, the request is received by JSON Wire Protocol Over HTTP, then secured by the Browser Driver.

Afterward, the request command is delivered to a Real Browser, where the automation is performed. When the automation is complete, a response travels back to the Browser Driver, JSON Wire Protocol, and Selenium Client.

Selenium 4

selenium4-architecture

Unlike Selenium 3, Selenium 4 has direct communication between the client and server, because of the W3C protocol.

W3C (World Wide Web Consortium) protocol was introduced because all the web browsers followed the W3C standards and also all the browser drivers followed the W3C standards. To standardize the communication, the JSON wire protocol was replaced by W3C. This approach provides better communication with the browsers, stability, and common code (e.g. no browser-specific code required). 

Cypress

cy-architecture

Cypress engine directly operates inside the browser. Therefore, it is the browser that is executing your test code.
Cypress can access both the frontend and backend applications, which enables it to act on real-time incidents on the applications and, at the exact time, execute tasks outside the browser that requires additional special privilege.

The Node server and browser communication are through the Web Socket, which starts execution after the proxy is created. Cypress sends HTTP requests and responses from the node server to the browser. 

Cypress has control over all the commands that run on and off the browsers. It directly talks with the Operating System to capture screenshots, record videos, access the network layer, and perform file system operations.

Playwright

pw-architecture

Playwright communicates all requests between client and server through a single WebSocket connection, which stays in place until test execution is completed. 

WebSocket VS HTTP Connection Diagram

websocket-vs-http

In HTTP connection architectures, tools like Selenium sends each command as a separate HTTP request and receives JSON responses. So, every action (e.g. opening the browser, clicking an element, etc.) is sent as a separate HTTP request. When every request is completed, the connection between the server and client will be terminated and implies being re-established for the next request. Because of ending and recreating a connection for each request , the overall test execution may be slower and flaky.

On the other hand, in WebSocket architectures (e.g. used by Playwright), all requests between client and server through a single websocket connection, which stays in place until test execution is completed. This reduces the points of failure and allows commands to be sent quickly on a single connection.

Enjoyed this article? Make sure to subscribe to my YouTube Channel for more Test Automation tutorials, and follow me on LinkedIn and Twitter for regular insights.
Looking to improve your test automation skills?
I’ve created a personalized 1-on-1 Mentoring program refined to boost YOUR skills. Reach out at iamrv@razvanvancea.ro for more details and together will create a learning path adapted to your current skills and goals that you are aiming for, in a timely-efficient manner🚀

Post Views: 268

Related

Share this article:
QA

Post navigation

Previous post
Next post

Recent Posts

  • Using cross-env in Your Node.js Projects: A Practical Guide
  • How to copy-paste text from clipboard using TestCafe
  • How to copy-paste text from clipboard using Cypress
  • How to repeat any CLI Command for X times using NPM repeat-cli-command
  • k9s: A Guide to Master Kubernetes Clusters from your Terminal

Recent Comments

  1. Paul on Web Accessibility: A step-by-step guide to Testing with pa11y
  2. Automated Tests for website Accessibility with Axe and TestCafe - Learn with RV - Tech Blog on How to generate E2E TestCafe Framework in seconds
  3. RV on Exploring Faker.js: A Powerful Tool for Generating Realistic Random Test Data
  4. Adrian Maciuc on Exploring Faker.js: A Powerful Tool for Generating Realistic Random Test Data
  5. Nick on Cypress vs Playwright vs Testcafe – which framework is faster?

Archives

  • June 2025
  • March 2025
  • February 2025
  • January 2025
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023

Categories

  • Linux
  • Programming
  • QA
  • Tools
  • Uncategorized
©2025 Learn with RV – Tech Blog | WordPress Theme by SuperbThemes