Playwright vs. Cypress - an automation grudge match!!

Yesterday, I decided to investigate the "New Kid on The Block", Playwright. I have heard a lot about it, and seen a lot more role descriptions asking for it, so I thought it was time to roll up the sleeves and dig in.

As Playwright runs in JavaScript/TypeScript, I was immediately comfortable, as this has been the main language combo I have been using for the past 2 1/2 years.

The setup is pretty straightforward (yarn create playwright is your friend here!) and I was up and running in no time.

Looking at the provided example, it decided to do a bit of navigation and use the Search function.

The navigation tests went swimmingly. I decided the test would be to use the side navigation page to navigate to "Writing tests", ensuring the page is correct and the side menu is highlighted correctly.

The only slight gotcha, which was down to me learning the matching, was the .toHaveClass() method. If an element has more than one class, then this doesn't work:

await expect(page.getByRole('link',{ name: 'Writing tests', exact: true })).toHaveClass('menu__link--active');

The correct syntax in Playwright is:

await expect(page.getByRole('link',{ name: 'Writing tests', exact: true })).toHaveClass(/menu__link--active/);

So, lesson learned and on we go!!

This is where our tale hits a few snags...

The aim of the test is to:

• Navigate to https://playwright.dev

• Click on the search box
  

• Search for toHaveClass (as it is what tripped me up before)

• Navigate to the page

• Check it is displayed correctly

The first issue I encountered was not using .getByRole() for all of the selectors. I still haven't got an intuitive grasp of the relationship between the defined roles and the page elements, so I did use the "Pick Locator" function of the Playwright UI a few times to help get them right, and it was very useful.

However, no matter what I did, I got this result:

It looks like Playwright isn't able to drive its own website's search.

Fun!!

So, to make sure it wasn't a "you can't automate it at all" thing, with some kind of reCaptcha type mechanism detecting automation, I decided to try the same thing in Cypress.

I did find writing the test a lot easier in Cypress, but will be due to:

1. Familiarity

2. A lot of the locators had been found

However, that being said, the chainable selectors in Cypress made checking the search had worked a lot easier!

And...

So, it looks like it is a foible of Playwright. I will post the code from both below, so anyone with better knowledge can point out what could be done better, but I think I will be sticking with Cypress as my tool of choice for now. I will, however, keep cracking on to find the hidden magic that makes this the flavour of the month!

Here is the Playwright code:

import { test, expect } from '@playwright/test'; test('search', async ({ page }) => { await page.goto('https://playwright.dev/'); // Type into search. await page.getByRole('button', {name: 'Search'}).click(); await page.getByPlaceholder('Search docs').pressSequentially('toHaveClass'); await page.keyboard.press('Enter'); await page.click('.DocSearch-Hit-Container:has-text("toHaveClass")'); await expect(page.getByRole('heading', { name: 'toHaveClass' })).toBeVisible(); });

And this is the Cypress version:

describe('Playwright navigation', () => { it ('should show search results, () => { cy.visit('https://playwright.dev/'); cy.contains('Search').click(); cy.get('#docsearch-input') .type('toHaveClass'); cy.get('.DocSearch-Hit-Container') .contains('toHaveClass') .should('be.visible') .click(); cy.get('#locator-assertions-to-have-class') .should('be.visible'); }); });