Add verified setup workflow screenshots

test/e2e-obsidian/runner/ui.ts

@@ -1,7 +1,7 @@
 import { mkdir } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { withObsidianPage } from "@vrtmrz/obsidian-test-session";
-import type { Page } from "playwright";
+import type { Locator, Page } from "playwright";
 
 export {
     obsidianRemoteDebuggingPort,
@@ -42,6 +42,35 @@ export async function captureObsidianDialogue(
     return await captureObsidianPage(port, filename, assertReady);
 }
 
+export async function captureObsidianElement(
+    port: number,
+    filename: string,
+    resolveElement: (page: Page) => Locator | Promise<Locator>
+): Promise<string> {
+    const outputDirectory = process.env.E2E_OBSIDIAN_DIAGNOSTICS_DIR ?? "/tmp/obsidian-livesync-e2e";
+    const screenshotPath = join(outputDirectory, filename);
+    await mkdir(dirname(screenshotPath), { recursive: true });
+
+    await withObsidianPage(port, async (page) => {
+        try {
+            const element = await resolveElement(page);
+            await element.waitFor({ state: "visible", timeout: 10000 });
+            await element.screenshot({
+                path: screenshotPath,
+                animations: "disabled",
+                style: ".notice-container { visibility: hidden !important; }",
+            });
+        } catch (error) {
+            const failurePath = screenshotPath.replace(/\.png$/u, ".failure.png");
+            await page.screenshot({ path: failurePath, fullPage: true });
+            console.error(`UI element failure screenshot: ${failurePath}`);
+            throw error;
+        }
+    });
+
+    return screenshotPath;
+}
+
 export async function captureJsonResolveDialogue(port: number): Promise<string> {
     return await captureObsidianDialogue(port, "hidden-file-json-resolve-dialogue.png", async (page) => {
         const optionAB = page.locator('label:has(input[name="disp"][value="AB"])');