Back to Repositories

Validating Monitor Creation and Dashboard Functionality in Uptime Kuma

This test suite demonstrates end-to-end testing for the Uptime Kuma monitoring application using Playwright. It validates core functionality including dashboard access, monitor creation, and database state management between tests.

Test Coverage Overview

The test suite provides comprehensive coverage of critical user workflows in Uptime Kuma:

Dashboard authentication and access verification
HTTP monitor creation and configuration
Database state verification and reset functionality
Screenshot capture for visual regression testing

Implementation Analysis

The implementation utilizes Playwright’s modern testing patterns with async/await syntax and page object model. It leverages custom utility functions for common operations like login and database snapshot restoration, while making extensive use of test data attributes for reliable element selection.

Technical Details

Testing Framework: Playwright with @playwright/test
Custom Utilities: login(), restoreSqliteSnapshot(), screenshot()
Element Selection: Data-testid attributes
State Management: SQLite snapshot restoration
Assertions: Playwright’s expect API

Best Practices Demonstrated

The test suite exemplifies several testing best practices including isolation through database reset between tests, explicit waiting for state changes, and consistent element selection strategies. It maintains clear test organization with beforeEach hooks and demonstrates proper error handling with URL navigation verification.

louislam/uptime-kuma

test/e2e/specs/example.spec.js

            
import { expect, test } from "@playwright/test";
import { login, restoreSqliteSnapshot, screenshot } from "../util-test";

test.describe("Example Spec", () => {

    test.beforeEach(async ({ page }) => {
        await restoreSqliteSnapshot(page);
    });

    test("dashboard", async ({ page }, testInfo) => {
        await page.goto("./dashboard");
        await login(page);
        await screenshot(testInfo, page);
    });

    test("set up monitor", async ({ page }, testInfo) => {
        await page.goto("./add");
        await login(page);

        await expect(page.getByTestId("monitor-type-select")).toBeVisible();
        await page.getByTestId("monitor-type-select").selectOption("http");
        await page.getByTestId("friendly-name-input").fill("example.com");
        await page.getByTestId("url-input").fill("https://www.example.com/");
        await page.getByTestId("save-button").click();
        await page.waitForURL("/dashboard/*"); // wait for the monitor to be created

        await expect(page.getByTestId("monitor-list")).toContainText("example.com");
        await screenshot(testInfo, page);
    });

    test("database is reset after previous test", async ({ page }, testInfo) => {
        await page.goto("./dashboard");
        await login(page);

        await expect(page.getByTestId("monitor-list")).not.toContainText("example.com");
        await screenshot(testInfo, page);
    });

});