Applitools, profile picture
Uploaded byApplitools
PDF, PPTX12,198 views

Cypress-vs-Playwright: Let the Code Speak

This document compares Cypress and Playwright over ten rounds of code challenges covering aspects like element interaction, inline frames, waiting, alerts, navigation, API requests, page objects, language support, browser compatibility, and execution speed. Each round details implementations in both frameworks and encourages discussion and voting on the outcomes. Ultimately, it invites readers to engage further through a workshop on best practices for both testing tools.

Technology◦
Related topics:
Test Automation Tools•

Embed presentation

Download as PDF, PPTX
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Why compare Cypress against Playwright?
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak The Matchup 🥊 10 rounds of code challenges 💻 Show implementations in Cypress and Playwright 🗣 Compare and discuss the code 🗳 You vote!
Round 1: Element Interaction
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Element Interaction in Cypress cy.visit('https://demo.applitools.com/') cy.get('#username').type('filip') cy.get('#password').type('i<3slovakia!') cy.get('#log-in').click() cy.contains('.element-header', 'Financial Overview')
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Element Interaction in Playwright await page.goto("https://demo.applitools.com/"); await page.locator("id=username").fill("andy"); await page.locator("id=password").fill("panda<3"); await page.locator("id=log-in").click(); await expect(page.locator(".element-header").first()) .toHaveText("Financial Overview");
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Element Interaction Head-to-Head cy.visit('https://demo.applitools.com/') cy.get('#username').type('filip') cy.get('#password').type('i<3slovakia!') cy.get('#log-in').click() cy.contains('.element-header', 'Financial Overview') await page.goto("https://demo.applitools.com/"); await page.locator("id=username").fill("andy"); await page.locator("id=password").fill("panda<3"); await page.locator("id=log-in").click(); await expect(page.locator(".element-header").first()) .toHaveText("Financial Overview"); Cypress Playwright
Round 2: Inline Frames
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Inline Frames in Playwright await page.goto("https://kitchen.applitools.com/ingredients/iframe"); const iframe = page.frameLocator("id=the-kitchen-table"); const table = iframe.locator("id=fruits-vegetables"); await expect(table).toBeVisible();
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Inline Frames in Cypress cy.visit('https://kitchen.applitools.com/ingredients/iframe') cy.iframe('#the-kitchen-table') .find('#fruits-vegetables') .should('be.visible')
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Inline Frames Head-to-Head cy.visit( 'https://kitchen.applitools.com/ingredients/iframe') cy.iframe('#the-kitchen-table') .find('#fruits-vegetables') .should('be.visible') await page.goto( "https://kitchen.applitools.com/ingredients/iframe"); const iframe = page.frameLocator("id=the-kitchen-table"); const table = iframe.locator("id=fruits-vegetables"); await expect(table).toBeVisible(); Cypress Playwright
Round 3: Waiting
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Waiting in Cypress cy.visit('https://automationbookstore.dev/') cy.get('#searchBar').type('testing') cy.get('li:visible').should('have.length', 1)
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Waiting in Playwright await page.goto("https://automationbookstore.dev/"); await page.locator("id=searchBar").fill("testing"); await expect(page.locator("li:visible")).toHaveCount(1);
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Waiting Head-to-Head cy.visit('https://automationbookstore.dev/') cy.get('#searchBar').type('testing') cy.get('li:visible').should('have.length', 1) await page.goto("https://automationbookstore.dev/"); await page.locator("id=searchBar").fill("testing"); await expect(page.locator("li:visible")).toHaveCount(1); Cypress Playwright
Round 4: Alerts
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Alerts in Playwright // Accept alert page.on('dialog', dialog => { expect(dialog.message()).toBe("Airfryers can make anything!"); dialog.accept(); }); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=alert-button").click(); // Dismiss alert page.on('dialog', dialog => dialog.dismiss()); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=confirm-button").click(); // Answer prompt page.on('dialog', dialog => dialog.accept("nachos")); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=prompt-button").click();
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Alerts in Cypress // Accept alert cy.visit('https://kitchen.applitools.com/ingredients/alert') cy.get('#alert-button').click() cy.on('window:alert', (alert) => { expect(alert).to.eq('Airfryers can make anything!') }) // Dismiss alert cy.visit('https://kitchen.applitools.com/ingredients/alert') const dismiss = () => false cy.get('#confirm-button').click() cy.on('window:confirm', dismiss) // Answer prompt cy.visit('https://kitchen.applitools.com/ingredients/alert', { onLoad(win: Window) { cy.stub(win, 'prompt').returns('Hi mom!'); } }) cy.get('#prompt-button').click()
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Alerts Head-to-Head // Accept alert cy.visit('https://kitchen.applitools.com/ingredients/alert') cy.get('#alert-button').click() cy.on('window:alert', (alert) => { expect(alert).to.eq('Airfryers can make anything!') }) // Dismiss alert cy.visit('https://kitchen.applitools.com/ingredients/alert') const dismiss = () => false cy.get('#confirm-button').click() cy.on('window:confirm', dismiss) // Answer prompt cy.visit('https://kitchen.applitools.com/ingredients/alert', { onLoad(win: Window) { cy.stub(win, 'prompt').returns('nachos'); } }) cy.get('#prompt-button').click() // Accept alert page.on('dialog', dialog => { expect(dialog.message()).toBe("Airfryers can make anything!"); dialog.accept(); }); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=alert-button").click(); // Dismiss alert page.on('dialog', dialog => dialog.dismiss()); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=confirm-button").click(); // Answer prompt page.on('dialog', dialog => dialog.accept("nachos")); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=prompt-button").click(); Cypress Playwright
Round 5: Navigation to New Windows
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows in Cypress cy.visit('https://kitchen.applitools.com/ingredients/links') cy.get('#button-the-kitchen-table') .invoke('removeAttr', 'target') .click() cy.location('pathname') .should('eq', '/ingredients/table') cy.get('#fruits-vegetables:visible') .should('have.length', 1)
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows in Playwright await page.goto("https://kitchen.applitools.com/ingredients/links"); let [newPage] = await Promise.all([ context.waitForEvent('page'), page.locator("id=button-the-kitchen-table").click() ]); await newPage.waitForLoadState(); expect(newPage.url()).toContain('/ingredients/table'); await expect(newPage.locator("id=fruits-vegetables")).toBeVisible();
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows Head-to-Head cy.visit( 'https://kitchen.applitools.com/ingredients/links') cy.get('#button-the-kitchen-table') .invoke('removeAttr', 'target') .click() cy.location('pathname') .should('eq', '/ingredients/table') cy.get('#fruits-vegetables:visible') .should('have.length', 1) await page.goto( "https://kitchen.applitools.com/ingredients/links"); let [newPage] = await Promise.all([ context.waitForEvent('page'), page.locator("id=button-the-kitchen-table").click() ]); await newPage.waitForLoadState(); expect(newPage.url()).toContain('/ingredients/table'); await expect(newPage.locator("id=fruits-vegetables")) .toBeVisible(); Cypress Playwright
Round 6: API Requests
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak https://kitchen.applitools.com/api/recipes
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak API Requests in Playwright const requestContext = await request.newContext( {baseURL: 'https://kitchen.applitools.com'}); const response = await requestContext.get('api/recipes'); await expect(response).toBeOK(); const body = await response.json(); expect(body.time).toBeGreaterThan(0); expect(body.data.length).toBeGreaterThan(0);
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak API Requests in Cypress cy.request('https://kitchen.applitools.com/api/recipes') .then(({ status, body, duration }) => { expect(status).to.eq(200) expect(body.data).to.have.length.greaterThan(0) expect(duration).to.be.greaterThan(0) })
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak API Requests Head-to-Head cy.request('https://kitchen.applitools.com/api/recipes') .then(({ status, body, duration }) => { expect(status).to.eq(200) expect(body.data).to.have.length.greaterThan(0) expect(duration).to.be.greaterThan(0) }) const requestContext = await request.newContext( {baseURL: 'https://kitchen.applitools.com'}); const response = await requestContext.get('api/recipes'); await expect(response).toBeOK(); const body = await response.json(); expect(body.time).toBeGreaterThan(0); expect(body.data.length).toBeGreaterThan(0); Cypress Playwright
Round 7: Page Objects
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Page Objects in Cypress export const loginPage = { username: '#username', password: '#password', log_in: '#log-in', load() { cy.visit('https://demo.applitools.com/') 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 } } loginPage .load() .login('filip', 'i<3slovakia!')
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Page Objects in Playwright export class LoginPage { page: Page; usernameInput: Locator; passwordInput: Locator; loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator("id=username"); this.passwordInput = page.locator("id=password"); this.loginButton = page.locator("id=log-in") } async load() { await this.page.goto("https://demo.applitools.com/"); } 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); await loginPage.load(); await loginPage.login("andy", "panda<3");
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Page Objects Head-to-Head export const loginPage = { username: '#username', password: '#password', log_in: '#log-in', load() { cy.visit('https://demo.applitools.com/') 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 } } export class LoginPage { page: Page; usernameInput: Locator; passwordInput: Locator; loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator("id=username"); this.passwordInput = page.locator("id=password"); this.loginButton = page.locator("id=log-in") } async load() { await this.page.goto("https://demo.applitools.com/"); } async login(username: string, password: string) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.loginButton.click(); } } Cypress Playwright
Round 8: Language Support
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Language Support Head-to-Head ● TypeScript/JavaScript ● TypeScript/JavaScript ● Python ● Java ● .NET (C#) Cypress Playwright
Round 9: Browsers
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Browsers Head-to-Head Supported browsers: ● Chrome ● Edge ● Electron ● Firefox Can only test one browser at a time. Supported browsers: ● Chromium ● Firefox ● WebKit ● Chrome & Edge (browser channels) Can test multiple browsers in parallel. Cypress Playwright
Round 10: Speed
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Speed Head-to-Head Command: npx cypress run --browser chrome Execution times (s): 23-24-24-24-24 Average time: 23.8s Command: npx playwright test –-project chromium Execution times (s): 5-4-5-5-5-4-4-7-7-6 Average time: 5.2s (4.6x faster than Cypress) Cypress Playwright
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak Which is the Winner?
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak filiphric.com/workshop ● 4 module online workshop ● learn by doing ● core principles and best practices starting on 31th May
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak And the Winner is…
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak
Continue the Conversation #LetTheCodeSpeak @filip_hric @AutomationPanda @applitools
Cypress | @filip_hric Playwright | @AutomationPanda #LetTheCodeSpeak

More Related Content

PDF
Playwright Begginers Presentation
byFranPerea6
 
PDF
Playwright: A New Test Automation Framework for the Modern Web
byApplitools
 
PDF
Why Should we use Microsoft's Playwright
byKnoldus Inc.
 
PDF
Playwright For Test Automation _ A Step by Step Guide.pdf
bySteve Wortham
 
PDF
Introducing Playwright's New Test Runner
byApplitools
 
PPTX
Browser Automation with Playwright – for integration, RPA, UI testing and mor...
byLucas Jellema
 
PPTX
Puppeteer
byAdrian Caetano
 
PDF
Cypress Automation Testing Tutorial (Part 1).pdf
bybacancytechnology
 
Playwright Begginers Presentation
byFranPerea6
 
Playwright: A New Test Automation Framework for the Modern Web
byApplitools
 
Why Should we use Microsoft's Playwright
byKnoldus Inc.
 
Playwright For Test Automation _ A Step by Step Guide.pdf
bySteve Wortham
 
Introducing Playwright's New Test Runner
byApplitools
 
Browser Automation with Playwright – for integration, RPA, UI testing and mor...
byLucas Jellema
 
Puppeteer
byAdrian Caetano
 
Cypress Automation Testing Tutorial (Part 1).pdf
bybacancytechnology
 

What's hot

PDF
Cypress-vs-Playwright-Rematch-Applitools.pdf
byApplitools
 
PDF
API_Testing_with_Postman
byMithilesh Singh
 
PDF
No drama here - E2E-testing django with playwright
byMastacheata1
 
PDF
An Introduction To Automated API Testing
bySauce Labs
 
PPTX
Progressive Web App Testing With Cypress.io
byKnoldus Inc.
 
PPSX
API Test Automation
bySQALab
 
PPTX
RESTful API Testing using Postman, Newman, and Jenkins
byQASymphony
 
PDF
Automated testing with Cypress
byYong Shean Chong
 
ODP
Accelerate Quality with Postman - Basics
byKnoldus Inc.
 
PDF
Cypress, Playwright, Selenium, or WebdriverIO? Let the Engineers Speak!
byApplitools
 
PDF
Real Life Clean Architecture
byMattia Battiston
 
PPTX
Api Testing
byVishwanath KC
 
PPT
QSpiders - Automation using Selenium
byQspiders - Software Testing Training Institute
 
PPTX
B4USolution_API-Testing
byb4usolution .
 
PPTX
Writing and using Hamcrest Matchers
byShai Yallin
 
PPTX
java 8 new features
byRohit Verma
 
PPTX
Spring Security 5
byJesus Perez Franco
 
PDF
12 Steps to API Load Testing with Apache JMeter
byWSO2
 
PDF
Cypress - Best Practices
byBrian Mann
 
PPTX
A Java Microservices Spring Boot and Docker case study.
bySubramanyam Vemala
 
Cypress-vs-Playwright-Rematch-Applitools.pdf
byApplitools
 
API_Testing_with_Postman
byMithilesh Singh
 
No drama here - E2E-testing django with playwright
byMastacheata1
 
An Introduction To Automated API Testing
bySauce Labs
 
Progressive Web App Testing With Cypress.io
byKnoldus Inc.
 
API Test Automation
bySQALab
 
RESTful API Testing using Postman, Newman, and Jenkins
byQASymphony
 
Automated testing with Cypress
byYong Shean Chong
 
Accelerate Quality with Postman - Basics
byKnoldus Inc.
 
Cypress, Playwright, Selenium, or WebdriverIO? Let the Engineers Speak!
byApplitools
 
Real Life Clean Architecture
byMattia Battiston
 
Api Testing
byVishwanath KC
 
QSpiders - Automation using Selenium
byQspiders - Software Testing Training Institute
 
B4USolution_API-Testing
byb4usolution .
 
Writing and using Hamcrest Matchers
byShai Yallin
 
java 8 new features
byRohit Verma
 
Spring Security 5
byJesus Perez Franco
 
12 Steps to API Load Testing with Apache JMeter
byWSO2
 
Cypress - Best Practices
byBrian Mann
 
A Java Microservices Spring Boot and Docker case study.
bySubramanyam Vemala
 

More from Applitools

PDF
Smarter Testing Safer Systems Balancing AI and Oversight in Regulated Environ...
byApplitools
 
PDF
Smarter Test Maintenance At Scale, presented by Applitools
byApplitools
 
PDF
Code and No-Code Journeys: The Speed Run Descent
byApplitools
 
PDF
Scaling Visual Testing with Playwright and AI
byApplitools
 
PDF
Code and No-Code Journeys: The Collaboration Campground.pdf
byApplitools
 
PDF
Applitools Platform Pulse: What's New and What's Coming - July 2025
byApplitools
 
PDF
Code and No-Code Journeys: The Maintenance Shortcut
byApplitools
 
PDF
Code and No-Code Journeys: The Coverage Overlook
byApplitools
 
PDF
Creating Automated Tests with AI - Cory House - Applitools.pdf
byApplitools
 
PDF
Navigating EAA Compliance in Testing.pdf
byApplitools
 
PDF
AI-Assisted, AI-Augmented & Autonomous Testing
byApplitools
 
PDF
Code or No-Code Tests: Why Top Teams Choose Both
byApplitools
 
PDF
The ROI of AI-Powered Testing, presented by Applitools
byApplitools
 
PDF
Building No-code Autonomous E2E Tests_Applitools.pdf
byApplitools
 
PDF
Conquer 6 Testing Challenges_Applitools.pdf
byApplitools
 
PDF
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
byApplitools
 
PDF
Playwright Visual Testing Best Practices, presented by Applitools
byApplitools
 
PDF
Cross-Browser and Cross-Device Testing | Applitools in Action
byApplitools
 
PDF
Advanced Debugging Techniques | Applitools in Action.pdf
byApplitools
 
PDF
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
byApplitools
 
Smarter Testing Safer Systems Balancing AI and Oversight in Regulated Environ...
byApplitools
 
Smarter Test Maintenance At Scale, presented by Applitools
byApplitools
 
Code and No-Code Journeys: The Speed Run Descent
byApplitools
 
Scaling Visual Testing with Playwright and AI
byApplitools
 
Code and No-Code Journeys: The Collaboration Campground.pdf
byApplitools
 
Applitools Platform Pulse: What's New and What's Coming - July 2025
byApplitools
 
Code and No-Code Journeys: The Maintenance Shortcut
byApplitools
 
Code and No-Code Journeys: The Coverage Overlook
byApplitools
 
Creating Automated Tests with AI - Cory House - Applitools.pdf
byApplitools
 
Navigating EAA Compliance in Testing.pdf
byApplitools
 
AI-Assisted, AI-Augmented & Autonomous Testing
byApplitools
 
Code or No-Code Tests: Why Top Teams Choose Both
byApplitools
 
The ROI of AI-Powered Testing, presented by Applitools
byApplitools
 
Building No-code Autonomous E2E Tests_Applitools.pdf
byApplitools
 
Conquer 6 Testing Challenges_Applitools.pdf
byApplitools
 
Autonomous End-to-End Testing for Online Banking Applications Presented with ...
byApplitools
 
Playwright Visual Testing Best Practices, presented by Applitools
byApplitools
 
Cross-Browser and Cross-Device Testing | Applitools in Action
byApplitools
 
Advanced Debugging Techniques | Applitools in Action.pdf
byApplitools
 
AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdf
byApplitools
 

Recently uploaded

PDF
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
PDF
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
PDF
[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...
byWintari Yasmin
 
PDF
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PDF
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
PDF
Cybersecurity Prevention and Detection: Unit 2
byVICTOR MAESTRE RAMIREZ
 
PDF
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 
PPTX
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
PDF
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
PPTX
Connecting the unconnectable: Exploring LoRaWAN for IoT
byasasiraarthur
 
PPTX
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
PDF
Accessibility & Inclusion: What Comes Next. Presentation of the Digital Acces...
byAssociazione Digital Days
 
PDF
"DISC as GPS for team leaders: how to lead a team from storming to performing...
byFwdays
 
PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
PDF
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
PDF
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
PDF
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
PDF
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
byJonathan Ralton
 
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...
byWintari Yasmin
 
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
Cybersecurity Prevention and Detection: Unit 2
byVICTOR MAESTRE RAMIREZ
 
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
Connecting the unconnectable: Exploring LoRaWAN for IoT
byasasiraarthur
 
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
Accessibility & Inclusion: What Comes Next. Presentation of the Digital Acces...
byAssociazione Digital Days
 
"DISC as GPS for team leaders: how to lead a team from storming to performing...
byFwdays
 
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
byJonathan Ralton
 
In this document
Powered by AI

An introductory slide featuring Cypress and Playwright, showcasing the presenters and the hashtag #LetTheCodeSpeak.

An overview of the comparison between Cypress and Playwright, which will include 10 rounds of coding challenges.

Comparison of element interaction in Cypress and Playwright through code snippets and head-to-head results.

Demonstrates how Cypress and Playwright handle inline frames, with examples showing functionality in both frameworks.

Shows how both frameworks deal with waiting using code examples for searching in an automation bookstore.

Comparison of alert handling in both frameworks with code demonstrating how to accept, dismiss, and answer prompts.

Demonstrates navigation to new windows with respective code examples in both Cypress and Playwright.

Comparative analysis of making API requests in both Playwright and Cypress with code examples showcasing responses.

Examination of the implementation of Page Object patterns in Cypress and Playwright with illustrative code examples.

Head-to-head comparison of language support between Cypress and Playwright, with a list of supported languages.

Overview of the supported browsers for both frameworks showing the differences in capabilities.

Speed comparison between Cypress and Playwright with execution times, demonstrating Playwright's efficiency.

Final thoughts on the comparison and announcement of a winner between Cypress and Playwright.Closing slides inviting further conversation and engagement with the presenters.

Cypress-vs-Playwright: Let the Code Speak

  • 1.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 2.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 3.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Why compare Cypress against Playwright?
  • 4.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak The Matchup 🥊 10 rounds of code challenges 💻 Show implementations in Cypress and Playwright 🗣 Compare and discuss the code 🗳 You vote!
  • 5.
  • 6.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 7.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Element Interaction in Cypress cy.visit('https://demo.applitools.com/') cy.get('#username').type('filip') cy.get('#password').type('i<3slovakia!') cy.get('#log-in').click() cy.contains('.element-header', 'Financial Overview')
  • 8.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Element Interaction in Playwright await page.goto("https://demo.applitools.com/"); await page.locator("id=username").fill("andy"); await page.locator("id=password").fill("panda<3"); await page.locator("id=log-in").click(); await expect(page.locator(".element-header").first()) .toHaveText("Financial Overview");
  • 9.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Element Interaction Head-to-Head cy.visit('https://demo.applitools.com/') cy.get('#username').type('filip') cy.get('#password').type('i<3slovakia!') cy.get('#log-in').click() cy.contains('.element-header', 'Financial Overview') await page.goto("https://demo.applitools.com/"); await page.locator("id=username").fill("andy"); await page.locator("id=password").fill("panda<3"); await page.locator("id=log-in").click(); await expect(page.locator(".element-header").first()) .toHaveText("Financial Overview"); Cypress Playwright
  • 10.
  • 11.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 12.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Inline Frames in Playwright await page.goto("https://kitchen.applitools.com/ingredients/iframe"); const iframe = page.frameLocator("id=the-kitchen-table"); const table = iframe.locator("id=fruits-vegetables"); await expect(table).toBeVisible();
  • 13.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Inline Frames in Cypress cy.visit('https://kitchen.applitools.com/ingredients/iframe') cy.iframe('#the-kitchen-table') .find('#fruits-vegetables') .should('be.visible')
  • 14.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Inline Frames Head-to-Head cy.visit( 'https://kitchen.applitools.com/ingredients/iframe') cy.iframe('#the-kitchen-table') .find('#fruits-vegetables') .should('be.visible') await page.goto( "https://kitchen.applitools.com/ingredients/iframe"); const iframe = page.frameLocator("id=the-kitchen-table"); const table = iframe.locator("id=fruits-vegetables"); await expect(table).toBeVisible(); Cypress Playwright
  • 15.
  • 16.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 17.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Waiting in Cypress cy.visit('https://automationbookstore.dev/') cy.get('#searchBar').type('testing') cy.get('li:visible').should('have.length', 1)
  • 18.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Waiting in Playwright await page.goto("https://automationbookstore.dev/"); await page.locator("id=searchBar").fill("testing"); await expect(page.locator("li:visible")).toHaveCount(1);
  • 19.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Waiting Head-to-Head cy.visit('https://automationbookstore.dev/') cy.get('#searchBar').type('testing') cy.get('li:visible').should('have.length', 1) await page.goto("https://automationbookstore.dev/"); await page.locator("id=searchBar").fill("testing"); await expect(page.locator("li:visible")).toHaveCount(1); Cypress Playwright
  • 20.
  • 21.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 22.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Alerts in Playwright // Accept alert page.on('dialog', dialog => { expect(dialog.message()).toBe("Airfryers can make anything!"); dialog.accept(); }); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=alert-button").click(); // Dismiss alert page.on('dialog', dialog => dialog.dismiss()); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=confirm-button").click(); // Answer prompt page.on('dialog', dialog => dialog.accept("nachos")); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=prompt-button").click();
  • 23.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Alerts in Cypress // Accept alert cy.visit('https://kitchen.applitools.com/ingredients/alert') cy.get('#alert-button').click() cy.on('window:alert', (alert) => { expect(alert).to.eq('Airfryers can make anything!') }) // Dismiss alert cy.visit('https://kitchen.applitools.com/ingredients/alert') const dismiss = () => false cy.get('#confirm-button').click() cy.on('window:confirm', dismiss) // Answer prompt cy.visit('https://kitchen.applitools.com/ingredients/alert', { onLoad(win: Window) { cy.stub(win, 'prompt').returns('Hi mom!'); } }) cy.get('#prompt-button').click()
  • 24.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Alerts Head-to-Head // Accept alert cy.visit('https://kitchen.applitools.com/ingredients/alert') cy.get('#alert-button').click() cy.on('window:alert', (alert) => { expect(alert).to.eq('Airfryers can make anything!') }) // Dismiss alert cy.visit('https://kitchen.applitools.com/ingredients/alert') const dismiss = () => false cy.get('#confirm-button').click() cy.on('window:confirm', dismiss) // Answer prompt cy.visit('https://kitchen.applitools.com/ingredients/alert', { onLoad(win: Window) { cy.stub(win, 'prompt').returns('nachos'); } }) cy.get('#prompt-button').click() // Accept alert page.on('dialog', dialog => { expect(dialog.message()).toBe("Airfryers can make anything!"); dialog.accept(); }); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=alert-button").click(); // Dismiss alert page.on('dialog', dialog => dialog.dismiss()); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=confirm-button").click(); // Answer prompt page.on('dialog', dialog => dialog.accept("nachos")); await page.goto("https://kitchen.applitools.com/ingredients/alert"); await page.locator("id=prompt-button").click(); Cypress Playwright
  • 25.
  • 26.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 27.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows in Cypress cy.visit('https://kitchen.applitools.com/ingredients/links') cy.get('#button-the-kitchen-table') .invoke('removeAttr', 'target') .click() cy.location('pathname') .should('eq', '/ingredients/table') cy.get('#fruits-vegetables:visible') .should('have.length', 1)
  • 28.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows in Playwright await page.goto("https://kitchen.applitools.com/ingredients/links"); let [newPage] = await Promise.all([ context.waitForEvent('page'), page.locator("id=button-the-kitchen-table").click() ]); await newPage.waitForLoadState(); expect(newPage.url()).toContain('/ingredients/table'); await expect(newPage.locator("id=fruits-vegetables")).toBeVisible();
  • 29.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Navigation to New Windows Head-to-Head cy.visit( 'https://kitchen.applitools.com/ingredients/links') cy.get('#button-the-kitchen-table') .invoke('removeAttr', 'target') .click() cy.location('pathname') .should('eq', '/ingredients/table') cy.get('#fruits-vegetables:visible') .should('have.length', 1) await page.goto( "https://kitchen.applitools.com/ingredients/links"); let [newPage] = await Promise.all([ context.waitForEvent('page'), page.locator("id=button-the-kitchen-table").click() ]); await newPage.waitForLoadState(); expect(newPage.url()).toContain('/ingredients/table'); await expect(newPage.locator("id=fruits-vegetables")) .toBeVisible(); Cypress Playwright
  • 30.
  • 31.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak https://kitchen.applitools.com/api/recipes
  • 32.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak API Requests in Playwright const requestContext = await request.newContext( {baseURL: 'https://kitchen.applitools.com'}); const response = await requestContext.get('api/recipes'); await expect(response).toBeOK(); const body = await response.json(); expect(body.time).toBeGreaterThan(0); expect(body.data.length).toBeGreaterThan(0);
  • 33.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak API Requests in Cypress cy.request('https://kitchen.applitools.com/api/recipes') .then(({ status, body, duration }) => { expect(status).to.eq(200) expect(body.data).to.have.length.greaterThan(0) expect(duration).to.be.greaterThan(0) })
  • 34.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak API Requests Head-to-Head cy.request('https://kitchen.applitools.com/api/recipes') .then(({ status, body, duration }) => { expect(status).to.eq(200) expect(body.data).to.have.length.greaterThan(0) expect(duration).to.be.greaterThan(0) }) const requestContext = await request.newContext( {baseURL: 'https://kitchen.applitools.com'}); const response = await requestContext.get('api/recipes'); await expect(response).toBeOK(); const body = await response.json(); expect(body.time).toBeGreaterThan(0); expect(body.data.length).toBeGreaterThan(0); Cypress Playwright
  • 35.
  • 36.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 37.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Page Objects in Cypress export const loginPage = { username: '#username', password: '#password', log_in: '#log-in', load() { cy.visit('https://demo.applitools.com/') 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 } } loginPage .load() .login('filip', 'i<3slovakia!')
  • 38.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Page Objects in Playwright export class LoginPage { page: Page; usernameInput: Locator; passwordInput: Locator; loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator("id=username"); this.passwordInput = page.locator("id=password"); this.loginButton = page.locator("id=log-in") } async load() { await this.page.goto("https://demo.applitools.com/"); } 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); await loginPage.load(); await loginPage.login("andy", "panda<3");
  • 39.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Page Objects Head-to-Head export const loginPage = { username: '#username', password: '#password', log_in: '#log-in', load() { cy.visit('https://demo.applitools.com/') 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 } } export class LoginPage { page: Page; usernameInput: Locator; passwordInput: Locator; loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator("id=username"); this.passwordInput = page.locator("id=password"); this.loginButton = page.locator("id=log-in") } async load() { await this.page.goto("https://demo.applitools.com/"); } async login(username: string, password: string) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.loginButton.click(); } } Cypress Playwright
  • 40.
  • 41.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Language Support Head-to-Head ● TypeScript/JavaScript ● TypeScript/JavaScript ● Python ● Java ● .NET (C#) Cypress Playwright
  • 42.
  • 43.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Browsers Head-to-Head Supported browsers: ● Chrome ● Edge ● Electron ● Firefox Can only test one browser at a time. Supported browsers: ● Chromium ● Firefox ● WebKit ● Chrome & Edge (browser channels) Can test multiple browsers in parallel. Cypress Playwright
  • 44.
  • 45.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Speed Head-to-Head Command: npx cypress run --browser chrome Execution times (s): 23-24-24-24-24 Average time: 23.8s Command: npx playwright test –-project chromium Execution times (s): 5-4-5-5-5-4-4-7-7-6 Average time: 5.2s (4.6x faster than Cypress) Cypress Playwright
  • 46.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak Which is the Winner?
  • 47.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak filiphric.com/workshop ● 4 module online workshop ● learn by doing ● core principles and best practices starting on 31th May
  • 48.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 49.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak And the Winner is…
  • 50.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak
  • 51.
  • 52.
    Cypress | @filip_hricPlaywright | @AutomationPanda #LetTheCodeSpeak