Rayrun

What are the steps to migrate from Cypress to Playwright?

Answer

Migrating from Cypress to Playwright

First, install the Playwright library in your Node.js project using npm or Yarn. Then, require Playwright in a Node.js script and launch any of the three browsers (Chromium, Firefox, and WebKit).

import { test, expect } from '@playwright/test';

test('Check ray.run homepage', async ({ page }) => {
  await page.goto('https://ray.run/');
  const title = await page.title();
  expect(title).toBe('Ray.run - Playwright Test Automation');
});

Playwright Test allows you to specify a matrix of configurations in one place, making it easier to run tests under different configurations.

When transitioning from Cypress to Playwright, you'll notice differences in syntax. For example:

  • Replace cy.get() with page.locator() or page.$()
  • Replace cy.contains() with page.innerText() or page.textContent()

Consult the official documentation for both frameworks and online resources to learn Playwright effectively.

For debugging, use the VSCode extension for live debugging by clicking on locators within your test code. This highlights them within an open browser window and shows other matching locators found on the page. You can also debug your tests with the built-in inspector by running them with the --debug flag, allowing you to step through tests while viewing actionability logs alongside highlighted elements within an open browser window.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.