Playwright vs Cypress: The King Is Dead, Long Live the King?
Tags: qa
Published: 2023-01-31 08:37:53

---
title: Playwright vs Cypress: The King Is Dead, Long Live the King?
published: true
date: 2023-01-24 14:07:16 UTC
tags: QA
canonical_url: https://apiumhub.com/tech-blog-barcelona/playwright-vs-cypress/
---

QA automation tools are an essential part of the software development process because they enable developers to test the functionality and performance of their apps before making them available to the public. There are many different QA automation tools available, among them Cypress and Playwright. The latter has been gaining a lot of popularity, so today I would like to compare these helpful tools.

In one of my previous articles, I already compared [Cypress vs Selenium](https://dev.to/apium_hub/cypress-framework-the-swiss-army-knife-for-your-tests-57hl), which at the time was a game-changer. When Cypress hit the market, it broke the rules that Selenium had been following for a long time. Cypress has a different architecture for working; it uses the Chrome Dev Protocol, doesn’t really use the JSON Wire Protocol (like Selenium), and also has a lot of flexibility. So far, Playwright seems to be coming up with the same idea to make life easier from the testing side for QA engineers and developers.

## Selectors

Let’s start talking about selectors.

In Playwright, it’s important to note a distinction. There’s a difference between selector, locator, and the interaction performed on the elements. A selector is basically a query that will be used to point to something on a page. For example, below, this displays a text selector, meaning it looks for something entirely based on the visible text. A locator is an object that uses a selector to fetch an element from a page.

```
await page.locator('text=Apium').click()
```

Selector = `'text=Apium'`  
Locator = `locator('text=Apium')`  
Interaction = `click()`

Outside the box, Playwright supports different types of selectors, and also combinations of them. Text, CSS, XPath, React, Vue supporting.

```
await page.locator ('text=Blog').click();
await page.locator ((#nav-bar .contact-us').click();
await page.locator ("_react-ListItem(text *= "bmw" i]').click();
```

Cypress has good documentation about using selectors and best practices. Good advice from the community is to add custom attributes that, as a result, make the application more testable.

Cypress has two main commands to find selectors:

cy.get() – where you can put any query selector (id, className, etc)  
cy.contains() – to find by text

```
cy.contains('Submit').click()	
cy.get('[data-cy="submit"]').click()
```

Also, this command comes with a lot of sub-commands to help interact with elements. Such as:  
_.eq()_ – Get A DOM element at a specific index in an array of elements.  
_.first()_ – Get the first DOM element within a set of DOM elements.  
_.filter()_ – Get the DOM elements that match a specific selector.  
_.children()_ – Get the children of each DOM element within a set of DOM elements.  
…etc

## Testing Patterns

Customizability and flexibility are key with Cypress.

### PageObject Model can be easily used with Cypress

![PageObject Model](https://apiumhub.com/wp-content/uploads/2023/01/cypress_PO.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 1")

And the test will look like this:

![Test of PageObject Model](https://apiumhub.com/wp-content/uploads/2023/01/cypress_PO2.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 2")

### BDD patterns can be used with Cypress just by importing node dependency

![BDD patterns](https://apiumhub.com/wp-content/uploads/2023/01/cypress_bdd.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 3")

And the test will look like this:

![Test of BDD patterns](https://apiumhub.com/wp-content/uploads/2023/01/cypress_bdd2.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 4")

### Using Custom Command in Cypress

![Custom Command in Cypress](https://apiumhub.com/wp-content/uploads/2023/01/cypress_custom.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 5")

And the test will look like this:

![Test of Custom Command in Cypress](https://apiumhub.com/wp-content/uploads/2023/01/cypress_custom2.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 6")

### Page Object in Playwright it’s a little bit of a different style than in Cypress

![Page Object in Playwright](https://apiumhub.com/wp-content/uploads/2023/01/play_PO.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 7")

And the test will look like this:

![Test of Page Object in Playwright](https://apiumhub.com/wp-content/uploads/2023/01/play_PO2-1.png "Playwright vs Cypress: The King Is Dead, Long Live the King? 8")

Playwright also supports the BDD approach. In the case of Playwright, as it supports different languages, feel free to use different BDD Frameworks to fit (e.x. cucumber.js for js). And any testing pattern can be applied as well with Playwright.

## Conclusion

Let me summarize these two tools according to my personal opinion:

Pros of [Playwright](https://playwright.dev/)

- Language support (JS, Python, Java, C#)
- Testing execution in parallel (also can test multiple browsers in parallel)
- Multi-tab support
- Cross-domain support
- Iframes support
- Safari WebKit

Pros of [Cypress](https://www.cypress.io/):

- Documentation
- Community support (also a lot of plugins)
- Static waits
- Network control and API testing
- Supports real device cloud and remote servers
- Syntax is more consistently fluent

Ultimately, the best tool for your organization will depend on your specific testing needs and requirements. Both Cypress and Playwright are worth considering if you need to automate browser testing for your web applications.