Cypress vs Selenium vs Playwright comparison - Test Execution Compared

Test Overview

This test opens a sample web page, navigates via link, types into an input field, clicks a button, and verifies the input value persists. It demonstrates how Cypress interacts with page elements and checks expected output.

Test Code - Cypress

Cypress

describe('Input and button interaction', () => {
  it('should type email and verify value persists after button click', () => {
    cy.visit('https://example.cypress.io')
    cy.get('a[href="/commands/actions"]').click()
    cy.get('.action-email').type('[e-mail]')
    cy.get('.action-btn').click()
    cy.get('.action-email').should('have.value', '[e-mail]')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, Cypress ready	—	PASS
2	Browser opens and navigates to https://example.cypress.io	Example Cypress page loaded	Page URL is correct	PASS
3	Finds link with href '/commands/actions' and clicks it	Navigated to Actions commands page	Page content updated to Actions commands	PASS
4	Finds input with class '.action-email' and types '[e-mail]'	Input field contains typed email	Input value is '[e-mail]'	PASS
5	Finds button with class '.action-btn' and clicks it	Button clicked, any event triggered	—	PASS
6	Asserts input '.action-email' still has value '[e-mail]'	Input value verified	Input value equals '[e-mail]'	PASS

Failure Scenario

Failing Condition: Element not found or value does not match expected

Execution Trace Quiz - 3 Questions

What does the test verify after clicking the button?

A The page URL changes to a new domain

B The input field value remains '[e-mail]'

C A new button appears on the page

D The browser reloads the page

Key Result

Use clear and stable selectors for elements and verify expected values after user actions to ensure reliable tests.

Practice

1. Which testing tool is known for its fast setup and mainly supports Chrome-family browsers?

easy

A. Selenium

B. Cypress

C. Playwright

D. JUnit

Solution

1. Step 1: Understand tool browser support

   Cypress is designed for fast tests mainly in Chrome-family browsers.

2. Step 2: Compare with other tools

   Selenium supports many browsers but requires more setup; Playwright supports multiple browsers with modern features.

3. Final Answer:

   Cypress -> Option B

4. Quick Check:

   Fast Chrome tests = Cypress [OK]

Hint: Fast Chrome-only tests? Think Cypress [OK]

Common Mistakes:

• Confusing Selenium as fastest setup
• Thinking Playwright only supports Chrome
• Selecting unrelated tools like JUnit

2. Which of the following is a correct statement about Selenium?

easy

A. Selenium supports multiple programming languages and browsers.

B. Selenium is limited to Chrome browser only.

C. Selenium only supports JavaScript language.

D. Selenium requires no setup before running tests.

Solution

1. Step 1: Recall Selenium features

   Selenium supports many programming languages like Java, Python, JavaScript, and many browsers.

2. Step 2: Eliminate incorrect options

   It is not limited to JavaScript or Chrome, and it requires setup.

3. Final Answer:

   Selenium supports multiple programming languages and browsers. -> Option A

4. Quick Check:

   Multi-language, multi-browser = Selenium [OK]

Hint: Selenium = many languages + browsers [OK]

Common Mistakes:

• Thinking Selenium supports only JavaScript
• Believing Selenium works without setup
• Assuming Selenium is Chrome-only

3. Consider this statement: "Playwright supports running tests on Chromium, Firefox, and WebKit browsers." Which tool does this describe?

medium

A. Playwright

B. Selenium

C. TestCafe

D. Cypress

Solution

1. Step 1: Identify browser support

   Playwright supports Chromium, Firefox, and WebKit browsers natively.

2. Step 2: Match with tool features

   Cypress mainly supports Chromium-based browsers; Selenium supports many but not WebKit directly; TestCafe is different.

3. Final Answer:

   Playwright -> Option A

4. Quick Check:

   Multi-browser including WebKit = Playwright [OK]

Hint: WebKit support means Playwright [OK]

Common Mistakes:

• Assuming Cypress supports WebKit
• Confusing Selenium with Playwright browser support
• Selecting unrelated tools like TestCafe

4. You wrote a test script using Cypress but it fails to run on Firefox browser. What is the most likely reason?

medium

A. Your Firefox browser version is outdated.

B. You need to install Playwright to run Cypress tests on Firefox.

C. Cypress requires Selenium to run on Firefox.

D. Cypress does not support Firefox well yet.

Solution

1. Step 1: Understand Cypress browser support

   Cypress primarily supports Chromium browsers; Firefox support is experimental and limited.

2. Step 2: Evaluate other options

   Cypress does not depend on Selenium or Playwright; outdated browser or installing Playwright is unrelated.

3. Final Answer:

   Cypress does not support Firefox well yet. -> Option D

4. Quick Check:

   Limited Firefox support = Cypress issue [OK]

Hint: Cypress Firefox support is limited [OK]

Common Mistakes:

• Thinking Cypress needs Selenium for Firefox
• Blaming browser version without checking support
• Assuming Playwright is needed for Cypress tests

5. You want to write end-to-end tests that run fast, support multiple browsers including Safari, and allow writing tests in JavaScript or Python. Which tool should you choose?

hard

A. Cypress

B. Selenium

C. Playwright

D. Mocha

Solution

1. Step 1: Analyze browser support needs

   Safari support requires WebKit engine support, which Playwright provides.

2. Step 2: Consider language support and speed

   Playwright supports JavaScript and Python and offers fast test execution with modern features.

3. Step 3: Compare with other tools

   Cypress is fast but limited to Chromium browsers and JavaScript; Selenium supports many languages but is slower; Mocha is a test framework, not a browser automation tool.

4. Final Answer:

   Playwright -> Option C

5. Quick Check:

   Multi-browser + multi-language + speed = Playwright [OK]

Hint: Multi-browser and language support? Choose Playwright [OK]

Common Mistakes:

• Choosing Cypress for Safari support
• Picking Selenium for speed over Playwright
• Confusing Mocha as a browser automation tool