Skip to content

How to Add a New UI Test Case

How to Add a New UI Test Case

🗂 Step 1: Identify or Create the Target Page

If your test involves a new screen, create a Page Object Model (POM) under pages/.

📄 pages/examplePage.ts

import { Page, Locator } from "@playwright/test";

export class ExamplePage {
  readonly page: Page;
  readonly actionButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.actionButton = page.getByRole("button", { name: "Submit" });
  }

  async clickAction() {
    await this.actionButton.click();
  }
}

🧪 Step 2: Create the Test Spec

Place your test file under tests/ui/.

📄 tests/ui/example.spec.ts

import { test, expect } from "@playwright/test";
import { ExamplePage } from "../../pages/examplePage";
import { LoginPage } from "../../pages/loginPage";
import { ObtainUrl } from "../../utils/functions/obtainUrl";

test.describe("Example UI Test Suite", () => {
  test.beforeEach(async ({ page }) => {
    if (!ObtainUrl.baseUrl) throw new Error("baseUrl is undefined");
    await page.goto(ObtainUrl.baseUrl);
    await new LoginPage(page).login();
  });

  test("Click submit button @ui", async ({ page }) => {
    const examplePage = new ExamplePage(page);
    await examplePage.clickAction();

    // Assertion example
    await expect(page.getByText("Submitted successfully")).toBeVisible();
  });
});

📦 Step 3: Use Utility Functions if Needed

Use utils/ helpers like:

  • getFilePath(filename) – resolves file paths

  • validateRequiredSheets(filepath, sheets[]) – validates Excel content

  • parseJsonResponse(), etc.

📂 Step 4: Organize File Uploads or Downloads

If your test deals with file upload/download:

For Upload:

await page.setInputFiles('input[type="file"]', filePath);

For Download:

const download = await page.waitForEvent("download");
await downloadTrigger.click();
const filePath = path.resolve("downloads", await download.suggestedFilename());
await download.saveAs(filePath);

🧪 Step 5: Add Assertions

Use robust assertions:

await expect(page.locator("h1")).toHaveText("Upload Complete");
await expect(page.locator(".error")).toBeHidden();

✅ Step 6: Tag and Run the Test

Use @ui tag for grouping: test("Validate button behavior @ui", async ({ page }) => { ... });

📌 Best Practices

  • Use meaningful names for tests and POM classes

  • Group tests by functionality

  • Add tags like @ui, @regression, @smoke

  • Validate file outputs (Excel/JSON) using utilities

  • Avoid static waits (waitForTimeout), prefer expect(...).toBeVisible()

Back to top