Following up on our tool comparison, here’s a practical look at how Selenium, Cypress, and Playwright differ when automating the same test:

✅ Test Case: Log in with username + password and check for a welcome message.

---

🧪 Selenium (JavaScript + WebDriver)

const { Builder, By, until } = require('selenium-webdriver');

(async function loginTest() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://example.com/login');
    await driver.findElement(By.name('username')).sendKeys('user');
    await driver.findElement(By.name('password')).sendKeys('pass');
    await driver.findElement(By.css('button[type="submit"]')).click();
    await driver.wait(until.elementLocated(By.id('welcome')), 5000);
  } finally {
    await driver.quit();
  }
})();

⚡ Cypress

describe('Login test', () => {
  it('logs in successfully', () => {
    cy.visit('https://example.com/login');
    cy.get('input[name="username"]').type('user');
    cy.get('input[name="password"]').type('pass');
    cy.get('button[type="submit"]').click();
    cy.get('#welcome').should('be.visible');
  });
});

🎭 Playwright (JavaScript)

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  await page.fill('input[name="username"]', 'user');
  await page.fill('input[name="password"]', 'pass');
  await page.click('button[type="submit"]');
  await page.waitForSelector('#welcome');
  await browser.close();
})();