mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 17:12:16 +03:00
Improve frontend e2e tests (#22958)
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions
* add mock data * add helpers * page objects * updated specs * remove PENDING_REWARITE * formatting
This commit is contained in:
Josh Hawkins
+209
-62
@@ -1,75 +1,222 @@
|
||||
/**
|
||||
* Logs page tests -- MEDIUM tier.
|
||||
*
|
||||
* Tests service tab switching by name, copy/download buttons,
|
||||
* and websocket message feed tab.
|
||||
* Service tabs (with real /logs/<service> JSON contract),
|
||||
* log content render, Copy (clipboard), Download (assert
|
||||
* ?download=true request fired), mobile tab selector.
|
||||
*/
|
||||
|
||||
import { test, expect } from "../fixtures/frigate-test";
|
||||
import { grantClipboardPermissions, readClipboard } from "../helpers/clipboard";
|
||||
|
||||
test.describe("Logs Page - Service Tabs @medium", () => {
|
||||
test("logs page renders with named service tabs", async ({ frigateApp }) => {
|
||||
function logsJsonBody(lines: string[]) {
|
||||
return { lines, totalLines: lines.length };
|
||||
}
|
||||
|
||||
test.describe("Logs — service tabs @medium", () => {
|
||||
test("frigate tab renders by default with mocked log lines", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) =>
|
||||
route.fulfill({
|
||||
json: logsJsonBody([
|
||||
"[2026-04-06 10:00:00] INFO: Frigate started",
|
||||
"[2026-04-06 10:00:01] INFO: Cameras loaded",
|
||||
]),
|
||||
}),
|
||||
);
|
||||
// Silence the streaming fetch so it doesn't hang the test.
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
await frigateApp.goto("/logs");
|
||||
await expect(frigateApp.page.getByLabel("Select frigate")).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
await expect(frigateApp.page.getByText(/Frigate started/)).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
});
|
||||
|
||||
test("switching to go2rtc fires a GET to /logs/go2rtc", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
let go2rtcCalled = false;
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) =>
|
||||
route.fulfill({ json: logsJsonBody(["frigate line"]) }),
|
||||
);
|
||||
await frigateApp.page.route(/\/api\/logs\/go2rtc(\?|$)/, (route) => {
|
||||
if (!route.request().url().includes("stream=true")) {
|
||||
go2rtcCalled = true;
|
||||
}
|
||||
return route.fulfill({ json: logsJsonBody(["go2rtc line"]) });
|
||||
});
|
||||
await frigateApp.page.route(/\/api\/logs\/.*\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
|
||||
await frigateApp.goto("/logs");
|
||||
await expect(frigateApp.page.getByLabel("Select frigate")).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
const go2rtcTab = frigateApp.page.getByLabel("Select go2rtc");
|
||||
await expect(go2rtcTab).toBeVisible();
|
||||
await go2rtcTab.click();
|
||||
await expect.poll(() => go2rtcCalled, { timeout: 5_000 }).toBe(true);
|
||||
await expect(go2rtcTab).toHaveAttribute("data-state", "on");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logs — actions @medium", () => {
|
||||
test("Copy button writes current logs to clipboard", async ({
|
||||
frigateApp,
|
||||
context,
|
||||
}) => {
|
||||
await grantClipboardPermissions(context);
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) =>
|
||||
route.fulfill({
|
||||
json: logsJsonBody([
|
||||
"[2026-04-06 10:00:00] INFO: Frigate started",
|
||||
"[2026-04-06 10:00:01] INFO: Cameras loaded",
|
||||
]),
|
||||
}),
|
||||
);
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
await frigateApp.goto("/logs");
|
||||
await expect(frigateApp.page.getByText(/Frigate started/)).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
|
||||
const copyBtn = frigateApp.page.getByLabel("Copy to Clipboard");
|
||||
await expect(copyBtn).toBeVisible({ timeout: 5_000 });
|
||||
await copyBtn.click();
|
||||
await expect
|
||||
.poll(() => readClipboard(frigateApp.page), { timeout: 5_000 })
|
||||
.toContain("Frigate started");
|
||||
});
|
||||
|
||||
test("Download button fires GET /logs/<service>?download=true", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
let downloadCalled = false;
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) => {
|
||||
if (route.request().url().includes("download=true")) {
|
||||
downloadCalled = true;
|
||||
}
|
||||
return route.fulfill({ json: logsJsonBody(["frigate line"]) });
|
||||
});
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
|
||||
await frigateApp.goto("/logs");
|
||||
const downloadBtn = frigateApp.page.getByLabel("Download Logs");
|
||||
await expect(downloadBtn).toBeVisible({ timeout: 5_000 });
|
||||
await downloadBtn.click();
|
||||
await expect.poll(() => downloadCalled, { timeout: 5_000 }).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logs — websocket tab @medium", () => {
|
||||
test("switching to websocket tab renders WsMessageFeed container", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) =>
|
||||
route.fulfill({ json: logsJsonBody(["frigate line"]) }),
|
||||
);
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
await frigateApp.goto("/logs");
|
||||
const wsTab = frigateApp.page.getByLabel("Select websocket");
|
||||
await expect(wsTab).toBeVisible({ timeout: 5_000 });
|
||||
await wsTab.click();
|
||||
await expect(wsTab).toHaveAttribute("data-state", "on", { timeout: 5_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logs — streaming @medium", () => {
|
||||
test("streamed log lines appear in the viewport", async ({ frigateApp }) => {
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) => {
|
||||
if (route.request().url().includes("stream=true")) {
|
||||
// Intercepted below via addInitScript fetch override.
|
||||
return route.fallback();
|
||||
}
|
||||
return route.fulfill({
|
||||
json: logsJsonBody(["[2026-04-06 10:00:00] INFO: initial batch line"]),
|
||||
});
|
||||
});
|
||||
|
||||
// Override window.fetch so the /api/logs/frigate?stream=true request
|
||||
// resolves with a real ReadableStream that emits chunks over time.
|
||||
// This is the only way to validate streaming-append behavior through
|
||||
// Playwright — route.fulfill() cannot return a stream.
|
||||
// NOTE: The app calls fetch('api/logs/...') with a relative URL (no
|
||||
// leading slash), so we match both relative and absolute forms.
|
||||
await frigateApp.page.addInitScript(() => {
|
||||
const origFetch = window.fetch;
|
||||
window.fetch = async (input, init) => {
|
||||
const url =
|
||||
typeof input === "string"
|
||||
? input
|
||||
: input instanceof URL
|
||||
? input.toString()
|
||||
: (input as Request).url;
|
||||
if (url.includes("api/logs/frigate") && url.includes("stream=true")) {
|
||||
const encoder = new TextEncoder();
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
await new Promise((r) => setTimeout(r, 30));
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
"[2026-04-06 10:00:02] INFO: streamed line one\n",
|
||||
),
|
||||
);
|
||||
await new Promise((r) => setTimeout(r, 30));
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
"[2026-04-06 10:00:03] INFO: streamed line two\n",
|
||||
),
|
||||
);
|
||||
controller.close();
|
||||
},
|
||||
});
|
||||
return new Response(stream, { status: 200 });
|
||||
}
|
||||
return origFetch.call(window, input as RequestInfo, init);
|
||||
};
|
||||
});
|
||||
|
||||
await frigateApp.goto("/logs");
|
||||
// The initial batch line is parsed by LogLineData and its content is
|
||||
// rendered in a .log-content cell — assert against that element.
|
||||
await expect(frigateApp.page.getByText("initial batch line")).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
await expect(frigateApp.page.getByText(/streamed line one/)).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
await expect(frigateApp.page.getByText(/streamed line two/)).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logs — mobile @medium @mobile", () => {
|
||||
test.skip(({ frigateApp }) => !frigateApp.isMobile, "Mobile-only");
|
||||
|
||||
test("service tabs render at mobile viewport", async ({ frigateApp }) => {
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate(\?|$)/, (route) =>
|
||||
route.fulfill({ json: logsJsonBody(["frigate line"]) }),
|
||||
);
|
||||
await frigateApp.page.route(/\/api\/logs\/frigate\?stream=true/, (route) =>
|
||||
route.fulfill({ status: 200, body: "" }),
|
||||
);
|
||||
await frigateApp.goto("/logs");
|
||||
await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
|
||||
// Service tabs have aria-label="Select {service}"
|
||||
await expect(frigateApp.page.getByLabel("Select frigate")).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
});
|
||||
|
||||
test("switching to go2rtc tab changes active tab", async ({ frigateApp }) => {
|
||||
await frigateApp.goto("/logs");
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
const go2rtcTab = frigateApp.page.getByLabel("Select go2rtc");
|
||||
if (await go2rtcTab.isVisible().catch(() => false)) {
|
||||
await go2rtcTab.click();
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
await expect(go2rtcTab).toHaveAttribute("data-state", "on");
|
||||
}
|
||||
});
|
||||
|
||||
test("switching to websocket tab shows message feed", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.goto("/logs");
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
const wsTab = frigateApp.page.getByLabel("Select websocket");
|
||||
if (await wsTab.isVisible().catch(() => false)) {
|
||||
await wsTab.click();
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
await expect(wsTab).toHaveAttribute("data-state", "on");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logs Page - Actions @medium", () => {
|
||||
test("copy to clipboard button is present and clickable", async ({
|
||||
frigateApp,
|
||||
}) => {
|
||||
await frigateApp.goto("/logs");
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
const copyBtn = frigateApp.page.getByLabel("Copy to Clipboard");
|
||||
if (await copyBtn.isVisible().catch(() => false)) {
|
||||
await copyBtn.click();
|
||||
await frigateApp.page.waitForTimeout(500);
|
||||
// Should trigger clipboard copy (toast may appear)
|
||||
}
|
||||
await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
|
||||
});
|
||||
|
||||
test("download logs button is present", async ({ frigateApp }) => {
|
||||
await frigateApp.goto("/logs");
|
||||
await frigateApp.page.waitForTimeout(1000);
|
||||
const downloadBtn = frigateApp.page.getByLabel("Download Logs");
|
||||
if (await downloadBtn.isVisible().catch(() => false)) {
|
||||
await expect(downloadBtn).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("logs page displays log content text", async ({ frigateApp }) => {
|
||||
await frigateApp.goto("/logs");
|
||||
await frigateApp.page.waitForTimeout(2000);
|
||||
const text = await frigateApp.page.textContent("#pageRoot");
|
||||
expect(text?.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user