React.js vs Selenium — Comparison for Beginners

// React — a login component.
// React's job: build the UI and handle the login flow.

import { useState } from "react";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const res = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });

      if (!res.ok) {
        setError("Incorrect email or password.");
        return;
      }

      const data = await res.json();
      localStorage.setItem("token", data.token);
      window.location.href = "/dashboard";
    } catch (err) {
      setError("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="login-form">
      <h2>Sign In</h2>

      {error && <p className="error-message">{error}</p>}

      <label>
        Email
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </label>

      <label>
        Password
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </label>

      <button type="submit" disabled={loading}>
        {loading ? "Signing in…" : "Sign In"}
      </button>
    </form>
  );
}

// What React does here:
// - Renders the form fields
// - Manages the input state
// - Handles the submit event
// - Shows error and loading states
// - Redirects on success

// What React does NOT do:
// - Verify that the form actually works end to end
// - Check that "Invalid password" appears for a bad login
// - Confirm the redirect to /dashboard actually happened

// Those are the tests. That's Selenium's job.

// Selenium — test that the React login actually works.
// Selenium's job: drive the browser like a real user.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

import java.time.Duration;

public class LoginTest {

    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeMethod
    public void setUp() {
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless=new");  // for CI
        options.addArguments("--no-sandbox");

        driver = new ChromeDriver(options);
        driver.manage().window().maximize();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void loginWithValidCredentials_redirectsToDashboard() {
        driver.get("http://localhost:3000/login");

        // React renders the inputs — Selenium fills them
        driver.findElement(By.id("email")).sendKeys("priya@example.com");
        driver.findElement(By.id("password")).sendKeys("Test@1234");
        driver.findElement(By.cssSelector("button[type='submit']")).click();

        // Wait for React to redirect after successful login
        wait.until(ExpectedConditions.urlContains("/dashboard"));

        String heading = driver.findElement(By.tagName("h1")).getText();
        Assert.assertTrue(heading.contains("Welcome"));
    }

    @Test
    public void loginWithWrongPassword_showsError() {
        driver.get("http://localhost:3000/login");

        driver.findElement(By.id("email")).sendKeys("priya@example.com");
        driver.findElement(By.id("password")).sendKeys("wrongPassword");
        driver.findElement(By.cssSelector("button[type='submit']")).click();

        // React renders the error element — Selenium checks it
        WebElement error = wait.until(
            ExpectedConditions.visibilityOfElementLocated(
                By.cssSelector(".error-message"))
        );

        Assert.assertEquals(error.getText(), "Incorrect email or password.");
        Assert.assertTrue(driver.getCurrentUrl().contains("/login"));
    }

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

// What Selenium does here:
// - Drives a real browser against the React app
// - Fills the inputs, clicks submit
// - Waits for React's re-render
// - Asserts the resulting UI

// What Selenium does NOT do:
// - Build the form
// - Manage React state
// - Render anything

// That's React's job.

# .github/workflows/ci.yml
# The clearest proof that React and Selenium are not alternatives.
# Both run in the same pipeline, on every pull request.

name: build-and-test

on:
  push:
    branches: [main]
  pull_request:

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      # 1. REACT: install, build, run unit tests
      - name: Install React dependencies
        working-directory: ./frontend
        run: npm ci

      - name: Run React unit tests (Jest)
        working-directory: ./frontend
        run: npm test -- --watchAll=false

      - name: Build React app
        working-directory: ./frontend
        run: npm run build

      # 2. Start the app in the background for E2E tests
      - name: Start React dev server
        working-directory: ./frontend
        run: npm start &

      - name: Wait for app to be ready
        run: npx wait-on http://localhost:3000

      # 3. SELENIUM: run end-to-end tests against the live app
      - name: Setup Java
        uses: actions/setup-java@v4
        with:
          distribution: "temurin"
          java-version: "17"

      - name: Setup Chrome
        uses: browser-actions/setup-chrome@v1

      - name: Run Selenium E2E tests
        working-directory: ./e2e
        run: mvn test -DbaseUrl=http://localhost:3000

      # React builds the app.
      # Jest tests React's internals.
      # Selenium tests the real browser flow.
      # All three run in the same pipeline — that's the whole point.

# Run it:
#   git push
#
# Every PR: React builds. If it fails, no Selenium run.
# Every PR: Selenium runs. If a flow is broken, the merge is blocked.