71 lines
4.5 KiB
JavaScript
71 lines
4.5 KiB
JavaScript
|
import { createRequire } from "node:module";
|
||
|
|
import { mkdir } from "node:fs/promises";
|
||
|
|
import { fileURLToPath } from "node:url";
|
||
|
|
|
||
|
|
const require = createRequire(process.env.PLAYWRIGHT_REQUIRE_FROM ?? import.meta.url);
|
||
|
|
const { chromium } = require("playwright");
|
||
|
|
const outputDirectory = new URL("./screenshots/", import.meta.url);
|
||
|
|
const webURL = process.env.VISUAL_WEB_URL ?? "http://localhost:3100";
|
||
|
|
const webHostPattern = new RegExp(new URL(webURL).host.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
|
||
|
|
const oidcURLPattern = new RegExp(process.env.VISUAL_OIDC_URL_PATTERN ?? "localhost:58180");
|
||
|
|
const username = process.env.VISUAL_USERNAME ?? "owner";
|
||
|
|
const password = process.env.VISUAL_PASSWORD ?? "LocalOnly123!";
|
||
|
|
await mkdir(outputDirectory, { recursive: true });
|
||
|
|
|
||
|
|
const browser = await chromium.launch({ headless: true, executablePath: process.env.CHROME_PATH ?? "C:/Program Files/Google/Chrome/Application/chrome.exe" });
|
||
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
|
||
|
|
const consoleErrors = [];
|
||
|
|
const failedRequests = [];
|
||
|
|
const twinMutations = [];
|
||
|
|
page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
|
||
|
|
page.on("request", (request) => {
|
||
|
|
if (request.method() === "PATCH" && /\/api\/v1\/devices\/[^/]+\/twin$/.test(request.url())) twinMutations.push(`${request.method()} ${request.url()}`);
|
||
|
|
});
|
||
|
|
page.on("requestfailed", (request) => {
|
||
|
|
const failure = request.failure()?.errorText ?? "failed";
|
||
|
|
const requestURL = new URL(request.url());
|
||
|
|
if (request.method() === "GET" && requestURL.pathname === "/api/v1/events" && failure.includes("ERR_ABORTED")) return;
|
||
|
|
failedRequests.push(`${request.method()} ${request.url()} ${failure}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
try {
|
||
|
|
await page.goto(webURL, { waitUntil: "networkidle" });
|
||
|
|
await page.getByRole("button", { name: "登录研发环境" }).click();
|
||
|
|
await page.waitForURL(oidcURLPattern);
|
||
|
|
await page.locator("#username").fill(username);
|
||
|
|
await page.locator("#password").fill(password);
|
||
|
|
await page.locator("#kc-login").click();
|
||
|
|
await page.waitForURL(webHostPattern, { timeout: 15000 });
|
||
|
|
await page.getByRole("heading", { name: "家庭业务工作台" }).waitFor();
|
||
|
|
await page.getByRole("button", { name: "设备管理", exact: true }).click();
|
||
|
|
|
||
|
|
const card = page.locator(".device-card").first();
|
||
|
|
await card.waitFor();
|
||
|
|
const slider = card.getByRole("slider", { name: /扬声器音量/ });
|
||
|
|
const saveButton = card.getByRole("button", { name: "保存音量配置" });
|
||
|
|
const initialVolume = Number(await slider.inputValue());
|
||
|
|
const initialSaveDisabled = await saveButton.isDisabled();
|
||
|
|
const desiredStateText = await card.getByText(/云端期望：/).textContent();
|
||
|
|
const desiredVolumeConfigured = !desiredStateText?.includes("未设置");
|
||
|
|
const initialActionCorrect = desiredVolumeConfigured ? initialSaveDisabled : !initialSaveDisabled;
|
||
|
|
const changedVolume = initialVolume === 100 ? 99 : initialVolume + 1;
|
||
|
|
await slider.fill(String(changedVolume));
|
||
|
|
const changedSaveEnabled = await saveButton.isEnabled();
|
||
|
|
const valueLabelVisible = await card.getByText(`${changedVolume}%`, { exact: true }).isVisible();
|
||
|
|
const desiredStateVisible = await card.getByText(/云端期望：/).isVisible();
|
||
|
|
const reportedStateVisible = await card.getByText(/设备上报：/).isVisible();
|
||
|
|
await page.screenshot({ path: fileURLToPath(new URL("device-volume-configuration.png", outputDirectory)), fullPage: true });
|
||
|
|
|
||
|
|
const overflow = await page.evaluate(() => [...document.querySelectorAll("body *")]
|
||
|
|
.filter((element) => element instanceof HTMLElement && element.scrollWidth > element.clientWidth + 2 && getComputedStyle(element).overflowX === "visible")
|
||
|
|
.slice(0, 20)
|
||
|
|
.map((element) => `${element.tagName}.${element.className}: ${element.clientWidth}/${element.scrollWidth}`));
|
||
|
|
const result = { initialVolume, changedVolume, desiredStateText, desiredVolumeConfigured, initialSaveDisabled, initialActionCorrect, changedSaveEnabled, valueLabelVisible, desiredStateVisible, reportedStateVisible, twinMutations, overflow, consoleErrors, failedRequests };
|
||
|
|
console.log(JSON.stringify(result, null, 2));
|
||
|
|
if (!Number.isInteger(initialVolume) || initialVolume < 0 || initialVolume > 100 || !initialActionCorrect || !changedSaveEnabled || !valueLabelVisible || !desiredStateVisible || !reportedStateVisible || twinMutations.length || overflow.length || consoleErrors.length || failedRequests.length) {
|
||
|
|
throw new Error("Device volume visual smoke failed");
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
await browser.close();
|
||
|
|
}
|