React JS vs Old Tools: What Changed for Automation Testers

// ProductCard.jsx - a React component written to be testable
import { useState } from "react";

export default function ProductCard({ name, price }) {
  const [inCart, setInCart] = useState(false);

  return (
    <div data-testid="product-card">
      <h3>{name}</h3>
      <p>Rs. {price}</p>
      <button
        data-testid="add-to-cart"
        onClick={() => setInCart(true)}
        disabled={inCart}
      >
        {inCart ? "Added" : "Add to cart"}
      </button>
    </div>
  );
}

What changed for automation testers

1. Waiting for "page loaded" is no longer enough
   -> wait for the specific element or text

2. Auto-generated CSS classes change between builds
   -> use data-testid, roles or visible text

3. Elements are re-created when state changes
   -> find elements again, do not keep old references

4. Data arrives from APIs after the first render
   -> wait for content, or mock the API in tests

5. Developers can add test IDs easily
   -> agree a test ID convention with the team

# Selenium (Python) with explicit waits instead of time.sleep()
# pip install selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("http://localhost:3000")
wait = WebDriverWait(driver, 10)

add_button = wait.until(EC.element_to_be_clickable(
    (By.CSS_SELECTOR, "[data-testid='add-to-cart']")))
add_button.click()

wait.until(EC.text_to_be_present_in_element(
    (By.CSS_SELECTOR, "[data-testid='add-to-cart']"), "Added"))
print("Button changed to Added")
driver.quit()

Locator rules for React apps

DO
- Prefer role + accessible name (button "Add to cart")
- Use data-testid for elements without stable text
- Use form labels for inputs
- Agree a naming convention: feature-element-action

DON'T
- Copy long absolute XPaths from dev tools
- Use auto-generated class names
- Use index-based selectors like nth-child(7)
- Keep element references across re-renders

# Playwright (Python) - auto-waits before clicking and asserting
# pip install pytest-playwright ; playwright install
from playwright.sync_api import Page, expect

def test_add_to_cart(page: Page):
    page.goto("http://localhost:3000")

    first_card = page.get_by_test_id("product-card").first
    first_card.get_by_role("button", name="Add to cart").click()

    # expect() retries until the text appears or the timeout passes
    expect(first_card.get_by_test_id("add-to-cart")).to_have_text("Added")
    expect(first_card.get_by_test_id("add-to-cart")).to_be_disabled()

# Run with:  pytest test_cart.py

Choose end-to-end tests carefully

Automate first (high value, stable):
[ ] Login and logout
[ ] Search and filter
[ ] Add to cart and checkout (test mode)
[ ] Form submission with validation errors

Leave to component or API tests:
[ ] Every small UI state of every component
[ ] Pure calculation rules (test at API level)

Keep the UI suite small, fast and trusted.

Test ID Convention (agree with developers)

Format: <feature>-<element>[-<action>]

Examples:
  login-email-input
  login-submit
  cart-count
  product-card
  checkout-place-order

Rules:
- lower case, hyphen separated
- unique on a page where possible
- never removed without telling QA

Flaky Test Log

Test name           Fails   Cause found               Fix
cart_add            3/20    clicked before enabled    wait for enabled
search_results      2/20    API slow on CI            mock API / longer wait
login_redirect      1/20    stale element ref         re-locate after render

Rule: fix or quarantine a flaky test within one sprint.

React App Automation Plan

App: _______________
Critical journeys:
1. _______________
2. _______________
3. _______________

Tool: Playwright / Selenium / Cypress
Locator strategy: roles + data-testid
Test data: seeded / mocked APIs
Run on: every pull request / nightly
Owner: _______________