🌍 Browser Testing

We will use the TodoMVC React Example for the following automation examples.

---

Selenium (Java)

Selenium WebDriver is a tool for automating web application testing.

1. Dependency (pom.xml)

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>4.38.0</version>
</dependency>

2. Example: Add a Todo Item

Scenario: Open the TodoMVC app, add a new task, and verify it appears in the list.

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

public class TodoTest {
    WebDriver driver;

    @BeforeMethod
    public void setup() {
        driver = new ChromeDriver();
    }

    @Test
    public void testAddTodo() {
        // 1. Open the TodoMVC React app
        driver.get("https://todomvc.com/examples/react/dist/");

        // 2. Find the input field
        WebElement inputField = driver.findElement(By.className("new-todo"));

        // 3. Type a new task and hit Enter
        String taskName = "Buy Milk";
        inputField.sendKeys(taskName);
        inputField.sendKeys(Keys.ENTER);

        // 4. Verify the task is added to the list
        WebElement todoItem = driver.findElement(By.xpath("//label[text()='" + taskName + "']"));
        Assert.assertTrue(todoItem.isDisplayed(), "Todo item should be displayed");
    }

    @AfterMethod
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

---

Playwright (JavaScript/Node.js)

Playwright is a framework for Web Testing and Automation. It is faster and more reliable than Selenium for modern web apps.

1. Installation

npm init -y
npm install @playwright/test
npx playwright install

2. Example: Add a Todo Item

Scenario: Open the TodoMVC app, add a new task, and verify it appears in the list.

Create a file tests/todo.spec.js:

// tests/todo.spec.js
const { test, expect } = require('@playwright/test');

test('should add a new todo item', async ({ page }) => {
  // 1. Open the TodoMVC React app
  await page.goto('https://todomvc.com/examples/react/dist/');

  // 2. Find the input field and type a new task
  const inputField = page.locator('.new-todo');
  await inputField.fill('Buy Milk');
  await inputField.press('Enter');

  // 3. Verify the task is added to the list
  const todoItem = page.locator('label', { hasText: 'Buy Milk' });
  await expect(todoItem).toBeVisible();
  
  // Optional: Verify the count is 1
  const todoCount = page.locator('.todo-count');
  await expect(todoCount).toContainText('1 item left');
});

3. Run the Test

npx playwright test