feat: add Playwright E2E testing setup with POM and testids
- Install @playwright/test and Chromium browser - Create playwright.config.ts with dev server integration - Add data-testid attributes to LoginPage, DashboardPage, ServerCard, Sidebar - Exclude tests-e2e from vitest config - Create Page Object Models: LoginPage, DashboardPage - Add 18 E2E tests: 6 login flow, 12 dashboard (happy, empty, error states) - Add test:e2e and test:e2e:ui scripts to package.json
This commit is contained in:
Tran G. (Revernomad) Khoa
95
frontend/tests-e2e/auth/login.spec.ts
Normal file
95
frontend/tests-e2e/auth/login.spec.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { LoginPage } from "../pages/LoginPage";
|
||||
|
||||
test.describe("Login Flow", () => {
|
||||
let loginPage: LoginPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
loginPage = new LoginPage(page);
|
||||
await loginPage.goto();
|
||||
});
|
||||
|
||||
test("should display login form", async () => {
|
||||
await expect(loginPage.card).toBeVisible();
|
||||
await expect(loginPage.usernameInput).toBeVisible();
|
||||
await expect(loginPage.passwordInput).toBeVisible();
|
||||
await expect(loginPage.submitButton).toBeVisible();
|
||||
await expect(loginPage.submitButton).toContainText("Sign In");
|
||||
});
|
||||
|
||||
test("should show Languard branding", async () => {
|
||||
await expect(loginPage.card.locator("h1")).toContainText("Languard");
|
||||
await expect(loginPage.card.locator("p")).toContainText("Server Manager");
|
||||
});
|
||||
|
||||
test("should show validation errors on empty submit", async ({ page }) => {
|
||||
await loginPage.submitButton.click();
|
||||
await expect(page.locator("text=Username is required")).toBeVisible();
|
||||
await expect(page.locator("text=Password is required")).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show error on invalid credentials", async ({ page }) => {
|
||||
await loginPage.login("invalid", "credentials");
|
||||
await page.waitForResponse(
|
||||
(resp) => resp.url().includes("/api/auth/login"),
|
||||
{ timeout: 10_000 },
|
||||
).catch(() => {});
|
||||
await expect(loginPage.errorMessage).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("should navigate to dashboard on successful login", async ({ page }) => {
|
||||
await page.route("**/api/auth/login", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
data: {
|
||||
access_token: "mock-jwt-token",
|
||||
user: { id: 1, username: "admin", role: "admin" },
|
||||
},
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
await page.route("**/api/servers*", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ success: true, data: [] }),
|
||||
}),
|
||||
);
|
||||
|
||||
await loginPage.login("admin", "password");
|
||||
await page.waitForURL("/", { timeout: 10_000 });
|
||||
await expect(page.locator("text=Dashboard")).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show loading state while submitting", async ({ page }) => {
|
||||
await page.route("**/api/auth/login", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
data: {
|
||||
access_token: "mock-jwt-token",
|
||||
user: { id: 1, username: "admin", role: "admin" },
|
||||
},
|
||||
}),
|
||||
delay: 500,
|
||||
}),
|
||||
);
|
||||
|
||||
await page.route("**/api/servers*", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ success: true, data: [] }),
|
||||
}),
|
||||
);
|
||||
|
||||
await loginPage.login("admin", "password");
|
||||
await expect(loginPage.submitButton).toContainText("Signing in...");
|
||||
});
|
||||
});
|
||||
148
frontend/tests-e2e/dashboard/dashboard.spec.ts
Normal file
148
frontend/tests-e2e/dashboard/dashboard.spec.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { DashboardPage } from "../pages/DashboardPage";
|
||||
|
||||
test.describe("Dashboard", () => {
|
||||
let dashboardPage: DashboardPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Set up auth token so we're logged in
|
||||
await page.addInitScript(() => {
|
||||
localStorage.setItem("languard_token", "mock-jwt-token");
|
||||
});
|
||||
|
||||
// Mock the servers API
|
||||
await page.route("**/api/servers*", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Arma3 Main Server",
|
||||
game_type: "arma3",
|
||||
status: "running",
|
||||
port: 2302,
|
||||
max_players: 64,
|
||||
current_players: 32,
|
||||
restart_count: 2,
|
||||
auto_restart: true,
|
||||
created_at: "2026-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Arma3 Test Server",
|
||||
game_type: "arma3",
|
||||
status: "stopped",
|
||||
port: 2303,
|
||||
max_players: 32,
|
||||
current_players: 0,
|
||||
restart_count: 0,
|
||||
auto_restart: false,
|
||||
created_at: "2026-01-02T00:00:00Z",
|
||||
},
|
||||
],
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.goto();
|
||||
});
|
||||
|
||||
test("should display dashboard header", async () => {
|
||||
await expect(dashboardPage.content).toBeVisible();
|
||||
await expect(dashboardPage.content.locator("h1")).toContainText("Dashboard");
|
||||
});
|
||||
|
||||
test("should show server count", async () => {
|
||||
await expect(dashboardPage.content.locator("text=2 servers configured")).toBeVisible();
|
||||
});
|
||||
|
||||
test("should render server cards", async () => {
|
||||
const count = await dashboardPage.getServerCount();
|
||||
expect(count).toBe(2);
|
||||
});
|
||||
|
||||
test("should display server names in cards", async () => {
|
||||
const name = await dashboardPage.getServerCardName(0);
|
||||
expect(name).toContain("Arma3 Main Server");
|
||||
});
|
||||
|
||||
test("should show Add Server button", async () => {
|
||||
await expect(dashboardPage.addServerButton).toBeVisible();
|
||||
await expect(dashboardPage.addServerButton).toContainText("Add Server");
|
||||
});
|
||||
|
||||
test("should show sidebar with server list", async () => {
|
||||
await expect(dashboardPage.sidebar).toBeVisible();
|
||||
await expect(dashboardPage.sidebar.locator("text=Servers")).toBeVisible();
|
||||
await expect(dashboardPage.sidebar.locator("text=Arma3 Main Server")).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show Stop button for running server", async () => {
|
||||
const firstCard = dashboardPage.serverCards.nth(0);
|
||||
await expect(firstCard.locator('button[aria-label^="Stop"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show Start button for stopped server", async () => {
|
||||
const secondCard = dashboardPage.serverCards.nth(1);
|
||||
await expect(secondCard.locator('button[aria-label^="Start"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should display player count in server card", async () => {
|
||||
const firstCard = dashboardPage.serverCards.nth(0);
|
||||
await expect(firstCard.locator("text=32/64")).toBeVisible();
|
||||
});
|
||||
|
||||
test("should navigate to server detail on card click", async ({ page }) => {
|
||||
const firstCard = dashboardPage.serverCards.nth(0);
|
||||
const link = firstCard.locator("xpath=ancestor::a");
|
||||
await link.click();
|
||||
await expect(page).toHaveURL(/\/servers\/1/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Dashboard - Empty State", () => {
|
||||
test("should show empty state when no servers", async ({ page }) => {
|
||||
await page.addInitScript(() => {
|
||||
localStorage.setItem("languard_token", "mock-jwt-token");
|
||||
});
|
||||
|
||||
await page.route("**/api/servers*", (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ success: true, data: [] }),
|
||||
}),
|
||||
);
|
||||
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.goto();
|
||||
|
||||
await expect(dashboardPage.emptyState).toBeVisible();
|
||||
await expect(dashboardPage.emptyState.locator("text=No servers configured yet")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Dashboard - Error State", () => {
|
||||
test("should show error state when API fails", async ({ page }) => {
|
||||
await page.addInitScript(() => {
|
||||
localStorage.setItem("languard_token", "mock-jwt-token");
|
||||
});
|
||||
|
||||
await page.route("**/api/servers*", (route) =>
|
||||
route.fulfill({
|
||||
status: 500,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ success: false, error: "Internal Server Error" }),
|
||||
}),
|
||||
);
|
||||
|
||||
const dashboardPage = new DashboardPage(page);
|
||||
await dashboardPage.goto();
|
||||
|
||||
await expect(dashboardPage.errorMessage).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
});
|
||||
73
frontend/tests-e2e/pages/DashboardPage.ts
Normal file
73
frontend/tests-e2e/pages/DashboardPage.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { Page, Locator } from "@playwright/test";
|
||||
|
||||
export class DashboardPage {
|
||||
readonly page: Page;
|
||||
readonly content: Locator;
|
||||
readonly loading: Locator;
|
||||
readonly errorMessage: Locator;
|
||||
readonly emptyState: Locator;
|
||||
readonly addServerButton: Locator;
|
||||
readonly serverCards: Locator;
|
||||
readonly sidebar: Locator;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
this.content = page.locator('[data-testid="dashboard-content"]');
|
||||
this.loading = page.locator('[data-testid="dashboard-loading"]');
|
||||
this.errorMessage = page.locator('[data-testid="dashboard-error"]');
|
||||
this.emptyState = page.locator('[data-testid="dashboard-empty"]');
|
||||
this.addServerButton = page.locator('[data-testid="add-server-btn"]');
|
||||
this.serverCards = page.locator("[data-testid^='server-card-']");
|
||||
this.sidebar = page.locator('[data-testid="sidebar"]');
|
||||
}
|
||||
|
||||
async goto() {
|
||||
await this.page.goto("/");
|
||||
await this.page.waitForLoadState("networkidle");
|
||||
}
|
||||
|
||||
async waitForLoad() {
|
||||
await this.loading.waitFor({ state: "hidden", timeout: 15_000 });
|
||||
}
|
||||
|
||||
async getServerCount() {
|
||||
return this.serverCards.count();
|
||||
}
|
||||
|
||||
async getServerCardName(index: number) {
|
||||
const card = this.serverCards.nth(index);
|
||||
return card.locator("h2").textContent();
|
||||
}
|
||||
|
||||
async getServerCardStatus(index: number) {
|
||||
const card = this.serverCards.nth(index);
|
||||
return card.locator("[data-testid^='server-card-']").getAttribute("data-testid");
|
||||
}
|
||||
|
||||
async clickStartServer(index: number) {
|
||||
const card = this.serverCards.nth(index);
|
||||
const startBtn = card.locator('button[aria-label^="Start"]');
|
||||
await startBtn.click();
|
||||
}
|
||||
|
||||
async clickStopServer(index: number) {
|
||||
const card = this.serverCards.nth(index);
|
||||
const stopBtn = card.locator('button[aria-label^="Stop"]');
|
||||
await stopBtn.click();
|
||||
}
|
||||
|
||||
async clickRestartServer(index: number) {
|
||||
const card = this.serverCards.nth(index);
|
||||
const restartBtn = card.locator('button[aria-label^="Restart"]');
|
||||
await restartBtn.click();
|
||||
}
|
||||
|
||||
async clickAddServer() {
|
||||
await this.addServerButton.click();
|
||||
}
|
||||
|
||||
async clickSidebarServer(name: string) {
|
||||
const link = this.sidebar.locator(`a:has-text("${name}")`);
|
||||
await link.click();
|
||||
}
|
||||
}
|
||||
40
frontend/tests-e2e/pages/LoginPage.ts
Normal file
40
frontend/tests-e2e/pages/LoginPage.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Page, Locator } from "@playwright/test";
|
||||
|
||||
export class LoginPage {
|
||||
readonly page: Page;
|
||||
readonly card: Locator;
|
||||
readonly form: Locator;
|
||||
readonly usernameInput: Locator;
|
||||
readonly passwordInput: Locator;
|
||||
readonly submitButton: Locator;
|
||||
readonly errorMessage: Locator;
|
||||
|
||||
constructor(page: Page) {
|
||||
this.page = page;
|
||||
this.card = page.locator('[data-testid="login-card"]');
|
||||
this.form = page.locator('[data-testid="login-form"]');
|
||||
this.usernameInput = page.locator('[data-testid="login-username"]');
|
||||
this.passwordInput = page.locator('[data-testid="login-password"]');
|
||||
this.submitButton = page.locator('[data-testid="login-submit"]');
|
||||
this.errorMessage = page.locator('[data-testid="login-error"]');
|
||||
}
|
||||
|
||||
async goto() {
|
||||
await this.page.goto("/login");
|
||||
await this.card.waitFor({ state: "visible" });
|
||||
}
|
||||
|
||||
async login(username: string, password: string) {
|
||||
await this.usernameInput.fill(username);
|
||||
await this.passwordInput.fill(password);
|
||||
await this.submitButton.click();
|
||||
}
|
||||
|
||||
async getErrorMessage() {
|
||||
return this.errorMessage.textContent();
|
||||
}
|
||||
|
||||
async hasErrorMessage() {
|
||||
return this.errorMessage.isVisible();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user