A UX test of client-side validation: open Sign up, click Submit with no name, and expect “Name is required”. Playwright and Cypress express the same user path.
Playwright launches a real browser (Chromium here), gives you a page object, and uses locators plus expect() to assert what the user sees. Traces and auto-waiting make flaky clicks easier to debug than raw WebDriver.
webServer starts samples/js-ui. Each test opens a page, interacts through roles and CSS, and asserts URL or visible text. The SUT is HTML/CSS/JS in the browser — not an imported function.
UX / E2E tests drive a real browser against samples/js-ui. The test is a user path: click a link or submit a form, then assert what appears on screen or in the URL. Failures point at markup, CSS, or client JS — not at a unit-tested helper alone.
The browser loads signup.html. Submit is clicked with an empty Name field. The page’s own JavaScript (not the HTML5 tooltip) reveals #name-error. The test asserts visibility and exact copy — that is the UX contract.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sign up · js-ui</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<a href="./index.html">Home</a>
<a href="./about.html">About</a>
<a href="./signup.html">Sign up</a>
</header>
<main>
<h1>Sign up</h1>
<!-- novalidate: the UX test asserts our custom message, not the browser tooltip -->
<form id="signup-form" novalidate>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name" />
<p id="name-error" class="error" hidden>Name is required</p>
<button type="submit">Submit</button>
</form>
<p id="success" class="success" hidden>Thanks, <span id="thanks-name"></span></p>
</main>
<script src="./app.js"></script>
</body>
</html>
// Playwright browser test — empty submit must show our custom error, not a native tooltip
import { test, expect } from "@playwright/test";
test("empty submit shows Name is required", async ({ page }) => {
await page.goto("./signup.html");
// Click Submit without typing a name
await page.getByRole("button", { name: "Submit" }).click();
const error = page.locator("#name-error");
await expect(error).toBeVisible();
await expect(error).toHaveText("Name is required");
});
Cypress runs tests in (or beside) the browser with a chainable API: cy.visit, cy.click, cy.should. The open-source runner is enough for these demos; we do not use Cypress Cloud.
start-server-and-test boots js-ui, then cypress run visits the page, clicks, and asserts. Commands retry until the assertion passes or times out — that retry is Cypress’s default stability model.
UX / E2E tests drive a real browser against samples/js-ui. The test is a user path: click a link or submit a form, then assert what appears on screen or in the URL. Failures point at markup, CSS, or client JS — not at a unit-tested helper alone.
The browser loads signup.html. Submit is clicked with an empty Name field. The page’s own JavaScript (not the HTML5 tooltip) reveals #name-error. The test asserts visibility and exact copy — that is the UX contract.
// Increment the on-page counter (used by the navigate smoke path as a live control)
const increment = document.getElementById("increment");
const countOut = document.getElementById("count");
if (increment && countOut) {
increment.addEventListener("click", () => {
countOut.textContent = String(Number(countOut.textContent ?? "0") + 1);
});
}
// Client-side required-name check — the form-validation UX scenario asserts this message
const form = document.getElementById("signup-form");
const nameInput = document.getElementById("name");
const nameError = document.getElementById("name-error");
const success = document.getElementById("success");
const thanksName = document.getElementById("thanks-name");
if (form && nameInput && nameError && success && thanksName) {
form.addEventListener("submit", (event) => {
event.preventDefault();
const empty = nameInput.value.trim() === "";
nameError.hidden = !empty;
success.hidden = empty;
if (!empty) {
// textContent, never innerHTML — markup in the name must not run
thanksName.textContent = nameInput.value.trim();
}
});
}
// Cypress browser test — same empty-submit contract as Playwright
describe("signup form", () => {
it("empty submit shows Name is required", () => {
cy.visit("/signup.html");
// Click Submit without typing a name
cy.contains("button", "Submit").click();
cy.get("#name-error").should("be.visible").and("have.text", "Name is required");
});
});