Playwright vs Cypress: The King Is Dead, Long Live the King?

Share This Post

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, 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

And the test will look like this:

Test of PageObject Model

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

BDD patterns

And the test will look like this:

Test of BDD patterns

Using Custom Command in Cypress

Custom Command in Cypress

And the test will look like this:

Test of Custom Command in Cypress

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

Page Object in Playwright

And the test will look like this:

Test of Page Object in Playwright

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

  • 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:

  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Subscribe To Our Newsletter

Get updates from our latest tech findings

About Apiumhub

Apiumhub brings together a community of software developers & architects to help you transform your idea into a powerful and scalable product. Our Tech Hub specialises in Software ArchitectureWeb Development & Mobile App Development. Here we share with you industry tips & best practices, based on our experience.

Have a challenging project?

We Can Work On It Together

Get our latest insights

Secured By miniOrange