1. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer

2. #LetTheCodeSpeak

3. #LetTheCodeSpeak
Why compare
Cypress against Playwright?

4. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
The Matchup
🥊 7 rounds of code challenges
💻 Show how it’s done in Cypress and Playwright
🗣 Compare and discuss the solutions
🗳 You vote!

5. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Application in test

6. Round 1:
Developer experience

7. #LetTheCodeSpeak

8. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Cypress

9. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Cypress

10. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Cypress

11. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Playwright

12. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Playwright

13. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Playwright

14. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX in Playwright

15. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Basic DX Head-to-Head

16. Round 2:
Finding selectors

17. #LetTheCodeSpeak

18. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Playwright
await page.locator('text=Colors').click();
Selector
Locator Interaction

19. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Playwright
Text await page.locator('text=Log in').click();
CSS await page.locator('#nav-bar .contact-us-item').click();
CSS + Text await page.locator('#nav-bar >> text=Contact Us').click();
XPath await page.locator('xpath=//button').click();
React await page.locator('_react=ListItem[text *= "milk" i]').click();
Vue await page.locator('_vue=list-item[text *= "milk" i]').click();

20. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Playwright

21. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Playwright

22. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Cypress

23. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Cypress
cy.get()
cy.contains()
.eq()
.first()
.last()
.filter()
.not()
.find()
.parent()
.parents()
.children()
.focused()
.next()
.nextAll()
.prev()
.prevAll()
.siblings()

24. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors in Cypress
Selector playground Cypress Studio

25. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Finding selectors Head-to-Head
❏ CSS and text selectors
❏ filter commands
❏ XPath plugin
❏ Selector Playground and
Cypress Studio
❏ Text, CSS, XPath, React, Vue
❏ Separation of selector, locator,
and interaction
❏ Selector picker and Test
Generator

26. Round 3:
Testing patterns

27. #LetTheCodeSpeak
BDD?
POM?
???

28. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Testing patterns in Cypress
export const loginPage = {
username: '[data-cy=login-email]',
password: '[data-cy=login-password]',
log_in: '[data-cy=login-submit]',
load() {
cy.visit('/login')
return this
},
login(username: string, pass: string) {
cy.get(this.username).type(username)
cy.get(this.password).type(pass)
cy.get(this.log_in).click()
return this
}
}
# cypress/e2e/login.cy.ts
loginPage
.load()
.login('filip@example.com', 'i<3slovakia!')

29. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
# cypress/e2e/login.feature
Feature: Login
Scenario: visiting the login page
When I visit login
Then I submit my credentials
Testing patterns in Cypress
import { When, Then } from "@badeball/cypress-
cucumber-preprocessor";
When("I visit login", () => {
cy.visit("/login");
});
Then("I submit my credentials", () => {
cy.get("#userName").type("filip@example.com")
cy.get("password").type("i<3slovakia")
cy.get("#log_in").click()
});

30. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Testing patterns in Cypress
# cypress/e2e/login.cy.ts
cy.visit('/login')
cy.login('filip@example', 'i<3slovakia')
declare global {
namespace Cypress {
interface Chainable {
/**
* Logs in with a given user
* @param email email of the user you want to log in
* @param password user passwird
* @example
* cy.login('filip@example', 'i<3slovakia')
*
*/
login(email: string, password: string): Chainable<any>;
}
}
}
Cypress.Commands.add('login', (email: string, password: string) => {
cy.get('[data-cy=login-email]').type(email)
cy.get('[data-cy=login-password]').type(`${password}{enter}`)
});

31. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Testing patterns in Playwright
export class LoginPage {
page: Page;
usernameInput: Locator;
passwordInput: Locator;
loginButton: Locator;
constructor(page: Page) {
this.page = page;
this.usernameInput = page.locator("[data-cy=login-email]");
this.passwordInput = page.locator("[data-cy=login-password]");
this.loginButton = page.locator("[data-cy=login-submit]");
}
async load() {
await this.page.goto("/login");
}
async login(username: string, password: string) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();
}
}
const loginPage = new LoginPage(page);
loginPage.load();
loginPage.login('filip@example.com', 'i<3slovakia!');

32. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Testing patterns in Playwright
# Page object
import { Page, Locator } from '@playwright/test';
export class HomePage {
page: Page;
board: Locator;
constructor(page: Page) {
this.page = page;
this.board = page.locator("div.board h1");
}
async load() {
await this.page.goto('/');
}
async boardNames(): Promise<string[]> {
await this.board.nth(0).waitFor();
return await this.board.allTextContents();
}
}
# Fixture with test
import { test as base, expect } from '@playwright/test';
import { HomePage } from '../models/HomePage';
const test = base.extend<{ homePage: HomePage }>({
homePage: async ({ page }, use) => {
const homePage = new HomePage(page);
await use(homePage);
},
});
test('Trello home page shows boards', async ({ homePage }) => {
await homePage.load();
const boardNames = await homePage.boardNames();
expect(boardNames).toEqual(['Space program', 'Colors']);
});

33. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Testing patterns Head-to-Head
❏ Page Object Model
❏ Gherkin syntax with plugin
❏ Custom commands
❏ Supports any testing pattern
you give it
❏ No custom commands, though

34. Round 4:
Login

35. #LetTheCodeSpeak

36. #LetTheCodeSpeak

37. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Login in Playwright
# playwright/globalSetupUI.ts
import { chromium, FullConfig } from '@playwright/test';
import { LoginPage } from './models/LoginPage';
async function globalSetup(config: FullConfig) {
const browser = await chromium.launch();
const page = await browser.newPage(
{baseURL: "http://localhost:3000/"});
const loginPage = new LoginPage(page);
await loginPage.load();
await loginPage.login('filip@example.com', 'i<3slovakia!');
await page.context().storageState({ path: 'storageState.json' });
await browser.close();
}
export default globalSetup;
# playwright/playwright.config.ts
const config: PlaywrightTestConfig = {
globalSetup: require.resolve('./globalSetupUI'),
use: {
// Tell all tests to load signed-in state from 'storageState.json'.
storageState: 'storageState.json',
},
};

38. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Login in Playwright
# playwright/globalSetupAPI.ts
import { request } from '@playwright/test';
async function globalSetup() {
const requestContext = await request.newContext();
await requestContext.post('http://localhost:3000/api/login', {
form: {
email: 'filip@example.com',
password: 'i<3slovakia!'
}
});
await requestContext.storageState({ path: 'storageState.json' });
await requestContext.dispose();
}
export default globalSetup;
# playwright/playwright.config.ts
const config: PlaywrightTestConfig = {
globalSetup: require.resolve('./globalSetupAPI'),
use: {
// Tell all tests to load signed-in state from 'storageState.json'.
storageState: 'storageState.json',
},
};

39. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Login in Cypress
it('via UI', () => {
cy.visit('/login')
cy.get('[data-cy=login-email]').type('filip@example.com')
cy.get('[data-cy=login-password]').type('i<3slovakia!{enter}')
});
it('via API', () => {
cy.request('POST', '/api/login', {
email: 'filip@example.com',
password: 'i<3slovakia!'
}).then(({ body: { accessToken } }) => {
cy.setCookie('trello_token', accessToken)
})
});

40. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Login in Cypress
beforeEach('cache login session', () => {
cy.session('login', () => {
cy.visit('/login')
cy.get('[data-cy=login-email]').type('filip@example.com')
cy.get('[data-cy=login-password]').type('i<3slovakia!{enter}')
cy.document().its('cookie').should('contain', 'trello_token')
})
});
it('Use cached session first time', () => {
cy.visit('/')
});
it('Use cached session second time', () => {
cy.visit('/')
});

41. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Login Head-to-Head
❏ UI and API login
❏ inject cookies to the browser
❏ cache sessions and reuse
❏ Same thing

42. Round 5:
Pluggability

43. #LetTheCodeSpeak

44. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Cypress

45. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Cypress
// cypress.config.ts
import { defineConfig } from "cypress";
export default defineConfig({
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
}
})
// cypress/support/e2e.ts
import '@cypress/code-coverage/support'

46. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Playwright

47. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Playwright

48. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Playwright

49. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability in Playwright

50. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Pluggability Head-to-Head
❏ community plugins
❏ expand functionality or integrate
services
❏ installation through npm and
import
❏ Integrates with several tools
and frameworks in its 4
languages

51. Round 6:
Running tests

52. #LetTheCodeSpeak

53. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests in Playwright
npx playwright test
npx playwright test tests/trello.spec.ts
npx playwright test --project chromium
npx playwright test --project firefox
npx playwright test --project webkit
npx playwright test --headed
npx playwright test --retries=3

54. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests in Playwright

55. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests in Playwright
Source: https://blog.checklyhq.com/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/

56. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests in Cypress
npx cypress run
npx cypress run --browser firefox
npx cypress run --spec ./cypress/e2e/login.cy.ts
npx cypress run --env grepTags=@smoke

57. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests in Cypress
name: run cypress e2e-tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Cypress run
uses: cypress-io/github-action@v4
with:
start: npm start
record: true
parallel: true
project: ./cypress

58. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Running tests Head-to-Head
❏ run different browsers
❏ filter tests by tags (with plugin)
❏ run tests in parallel with
dashboard & load-balance
❏ Run against managed
Chromium, Firefox, and WebKit
❏ Run tests in parallel by default
❏ Filter tests by path or name
❏ Tests run SUPER fast

59. Round 7:
Reporting

60. #LetTheCodeSpeak

61. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Reporting in Cypress

62. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Reporting in Cypress

63. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Reporting in Playwright

64. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Reporting in Playwright

65. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer
Reporting Head-to-Head
❏ built-in & custom reporters
❏ Cypress dashboard + analytics
❏ send results to popular services
❏ built-in HTML reports
❏ trace viewer
❏ customizable reporters

66. #LetTheCodeSpeak
Which is the Winner?

67. #LetTheCodeSpeak
filiphric.com/workshop
● 4 module online workshop
● learn by doing
● core principles and best
practices
starting on 4th Oct

68. #LetTheCodeSpeak

69. #LetTheCodeSpeak
And the Winner is…

70. Playwright | @AutomationPanda Cypress | @filip_hric
Beth Marshall | @Beth_AskHer