tests: improve playwright test readability (#5149)

test/e2e/specs/monitor-form.spec.js

@@ -1,8 +1,22 @@
 import { expect, test } from "@playwright/test";
 import { login, restoreSqliteSnapshot, screenshot } from "../util-test";
 
-test.describe("Monitor Form", () => {
+/**
+ * Selects the monitor type from the dropdown.
+ * @param {import('@playwright/test').Page} page - The Playwright page instance.
+ * @param {string} monitorType - The monitor type to select (default is "dns").
+ * @returns {Promise<void>} - A promise that resolves when the monitor type is selected.
+ */
+async function selectMonitorType(page, monitorType = "dns") {
+    const monitorTypeSelect = page.getByTestId("monitor-type-select");
+    await expect(monitorTypeSelect).toBeVisible();
+    await monitorTypeSelect.selectOption(monitorType);
+
+    const selectedValue = await monitorTypeSelect.evaluate((select) => select.value);
+    expect(selectedValue).toBe(monitorType);
+}
 
+test.describe("Monitor Form", () => {
     test.beforeEach(async ({ page }) => {
         await restoreSqliteSnapshot(page);
     });
@@ -11,30 +25,20 @@ test.describe("Monitor Form", () => {
         await page.goto("./add");
         await login(page);
         await screenshot(testInfo, page);
+        await selectMonitorType(page);
 
-        const monitorTypeSelect = page.getByTestId("monitor-type-select");
-        await expect(monitorTypeSelect).toBeVisible();
-
-        await monitorTypeSelect.selectOption("dns");
-        const selectedValue = await monitorTypeSelect.evaluate(select => select.value);
-        expect(selectedValue).toBe("dns");
-
-        // Add Conditions & verify:
         await page.getByTestId("add-condition-button").click();
         expect(await page.getByTestId("condition").count()).toEqual(2); // 1 added by default + 1 explicitly added
 
-        // Add a Condition Group & verify:
         await page.getByTestId("add-group-button").click();
         expect(await page.getByTestId("condition-group").count()).toEqual(1);
         expect(await page.getByTestId("condition").count()).toEqual(3); // 2 solo conditions + 1 condition in group
 
         await screenshot(testInfo, page);
 
-        // Remove a condition & verify:
         await page.getByTestId("remove-condition").first().click();
         expect(await page.getByTestId("condition").count()).toEqual(2); // 1 solo condition + 1 condition in group
 
-        // Remove a condition group & verify:
         await page.getByTestId("remove-condition-group").first().click();
         expect(await page.getByTestId("condition-group").count()).toEqual(0);
 
@@ -45,33 +49,29 @@ test.describe("Monitor Form", () => {
         await page.goto("./add");
         await login(page);
         await screenshot(testInfo, page);
-
+        await selectMonitorType(page);
-        const monitorTypeSelect = page.getByTestId("monitor-type-select");
-        await expect(monitorTypeSelect).toBeVisible();
-
-        await monitorTypeSelect.selectOption("dns");
-        const selectedValue = await monitorTypeSelect.evaluate(select => select.value);
-        expect(selectedValue).toBe("dns");
 
         const friendlyName = "Example DNS NS";
         await page.getByTestId("friendly-name-input").fill(friendlyName);
         await page.getByTestId("hostname-input").fill("example.com");
 
-        // Vue-Multiselect component
         const resolveTypeSelect = page.getByTestId("resolve-type-select");
         await resolveTypeSelect.click();
         await resolveTypeSelect.getByRole("option", { name: "NS" }).click();
 
         await page.getByTestId("add-condition-button").click();
         expect(await page.getByTestId("condition").count()).toEqual(2); // 1 added by default + 1 explicitly added
+
         await page.getByTestId("condition-value").nth(0).fill("a.iana-servers.net");
         await page.getByTestId("condition-and-or").nth(0).selectOption("or");
         await page.getByTestId("condition-value").nth(1).fill("b.iana-servers.net");
-        await screenshot(testInfo, page);
 
+        await screenshot(testInfo, page);
         await page.getByTestId("save-button").click();
-        await page.waitForURL("/dashboard/*"); // wait for the monitor to be created
+        await page.waitForURL("/dashboard/*");
-        await expect(page.getByTestId("monitor-status")).toHaveText("up", { ignoreCase: true });
+
+        expect(page.getByTestId("monitor-status")).toHaveText("up", { ignoreCase: true });
+
         await screenshot(testInfo, page);
     });
 
@@ -79,31 +79,26 @@ test.describe("Monitor Form", () => {
         await page.goto("./add");
         await login(page);
         await screenshot(testInfo, page);
-
+        await selectMonitorType(page);
-        const monitorTypeSelect = page.getByTestId("monitor-type-select");
-        await expect(monitorTypeSelect).toBeVisible();
-
-        await monitorTypeSelect.selectOption("dns");
-        const selectedValue = await monitorTypeSelect.evaluate(select => select.value);
-        expect(selectedValue).toBe("dns");
 
         const friendlyName = "Example DNS NS";
         await page.getByTestId("friendly-name-input").fill(friendlyName);
         await page.getByTestId("hostname-input").fill("example.com");
 
-        // Vue-Multiselect component
         const resolveTypeSelect = page.getByTestId("resolve-type-select");
         await resolveTypeSelect.click();
         await resolveTypeSelect.getByRole("option", { name: "NS" }).click();
 
         expect(await page.getByTestId("condition").count()).toEqual(1); // 1 added by default
+
         await page.getByTestId("condition-value").nth(0).fill("definitely-not.net");
-        await screenshot(testInfo, page);
 
+        await screenshot(testInfo, page);
         await page.getByTestId("save-button").click();
-        await page.waitForURL("/dashboard/*"); // wait for the monitor to be created
+        await page.waitForURL("/dashboard/*");
-        await expect(page.getByTestId("monitor-status")).toHaveText("down", { ignoreCase: true });
+
+        expect(page.getByTestId("monitor-status")).toHaveText("down", { ignoreCase: true });
+
         await screenshot(testInfo, page);
     });
-
 });

test/e2e/specs/setup-process.once.js

@@ -5,6 +5,10 @@ test.describe("Uptime Kuma Setup", () => {
 
     test.skip(() => getSqliteDatabaseExists(), "Must only run once per session");
 
+    test.afterEach(async ({ page }, testInfo) => {
+        await screenshot(testInfo, page);
+    });
+
     /*
      * Setup
      */
@@ -15,10 +19,9 @@ test.describe("Uptime Kuma Setup", () => {
         await page.getByRole("button", { name: "Next" }).click();
         await screenshot(testInfo, page);
         await page.waitForURL("/setup"); // ensures the server is ready to continue to the next test
-        await screenshot(testInfo, page);
     });
 
-    test("setup admin", async ({ page }, testInfo) => {
+    test("setup admin", async ({ page }) => {
         await page.goto("./");
         await page.getByPlaceholder("Username").click();
         await page.getByPlaceholder("Username").fill("admin");
@@ -27,30 +30,26 @@ test.describe("Uptime Kuma Setup", () => {
         await page.getByPlaceholder("Password", { exact: true }).press("Tab");
         await page.getByPlaceholder("Repeat Password").fill("admin123");
         await page.getByRole("button", { name: "Create" }).click();
-        await screenshot(testInfo, page);
     });
 
     /*
      * All other tests should be run after setup
      */
 
-    test("login", async ({ page }, testInfo) => {
+    test("login", async ({ page }) => {
         await page.goto("./dashboard");
         await login(page);
-        await screenshot(testInfo, page);
     });
 
-    test("logout", async ({ page }, testInfo) => {
+    test("logout", async ({ page }) => {
         await page.goto("./dashboard");
         await login(page);
         await page.getByText("A", { exact: true }).click();
         await page.getByRole("button", { name: "Log out" }).click();
-        await screenshot(testInfo, page);
     });
 
-    test("take sqlite snapshot", async ({ page }, testInfo) => {
+    test("take sqlite snapshot", async ({ page }) => {
         await takeSqliteSnapshot(page);
-        await screenshot(testInfo, page);
     });
 
 });

test/e2e/specs/status-page.spec.js

@@ -95,7 +95,7 @@ test.describe("Status Page", () => {
         await expect(page.getByTestId("powered-by")).toHaveCount(0);
 
         await expect(page.getByTestId("update-countdown-text")).toContainText("00:");
-        const updateCountdown = Number((await page.getByTestId("update-countdown-text").textContent()).match(/(\d+):(\d+)/)[2]) ;
+        const updateCountdown = Number((await page.getByTestId("update-countdown-text").textContent()).match(/(\d+):(\d+)/)[2]);
         expect(updateCountdown).toBeGreaterThanOrEqual(refreshInterval); // cant be certain when the timer will start, so ensure it's within expected range
         expect(updateCountdown).toBeLessThanOrEqual(refreshInterval + 10);