94 lines
4.3 KiB
JavaScript
94 lines
4.3 KiB
JavaScript
// 二期第7段验收抓图:5.1 存为模板入口 + 弹窗;5.2 新建项目选模板;5.3 同套路重出预期文案
|
|
import { chromium } from "playwright";
|
|
import { mkdirSync } from "node:fs";
|
|
|
|
const BASE = process.env.BASE || "http://127.0.0.1:5174";
|
|
const API = process.env.API || "http://127.0.0.1:8011";
|
|
const OUT = process.argv[2] || "shots-seg7";
|
|
mkdirSync(OUT, { recursive: true });
|
|
|
|
const login = await (await fetch(`${API}/api/auth/login/`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username: "seg7", password: "Restraint2026" })
|
|
})).json();
|
|
const tok = login.token;
|
|
const auth = { Authorization: `Token ${tok}`, "Content-Type": "application/json" };
|
|
|
|
const projects = (await (await fetch(`${API}/api/projects/`, { headers: auth })).json()).results || [];
|
|
const project = projects.find((p) => p.name.includes("夜光面膜"));
|
|
console.log("project:", project.id, project.name);
|
|
|
|
const browser = await chromium.launch();
|
|
const ctx = await browser.newContext({ viewport: { width: 1440, height: 960 }, deviceScaleFactor: 2 });
|
|
await ctx.addInitScript((t) => localStorage.setItem("airshelf_token", t), tok);
|
|
const page = await ctx.newPage();
|
|
page.on("pageerror", (e) => console.error(" pageerror:", e.message));
|
|
|
|
async function shot(name, locator) {
|
|
const clip = locator ? await locator.boundingBox() : undefined;
|
|
await page.screenshot({ path: `${OUT}/${name}.png`, ...(clip ? { clip } : { fullPage: false }) });
|
|
console.log("shot", name);
|
|
}
|
|
|
|
// ── 1 · 脚本页底栏「存为模板」入口 ──
|
|
await page.goto(`${BASE}/pipeline/${project.id}?st=1#stage-1`, { waitUntil: "networkidle", timeout: 40000 });
|
|
await page.waitForTimeout(2500);
|
|
const foot = page.locator(".stage-foot").first();
|
|
await foot.scrollIntoViewIfNeeded();
|
|
await page.waitForTimeout(400);
|
|
await shot("1-save-template-entry", foot);
|
|
|
|
// ── 2 · 存为模板弹窗:摊开「会存进模板的内容」 ──
|
|
await page.getByRole("button", { name: /存为模板/ }).click();
|
|
await page.waitForTimeout(700);
|
|
await shot("2-save-template-modal", page.locator(".modal").first());
|
|
|
|
const nameInput = page.locator(".modal .input").first();
|
|
await nameInput.fill(`口播 · 痛点前置 · 4 镜 #${Date.now() % 1000}`);
|
|
await page.waitForTimeout(200);
|
|
await page.getByRole("button", { name: /保存模板/ }).click();
|
|
await page.waitForTimeout(1500);
|
|
await shot("3-saved-toast");
|
|
|
|
const templates = (await (await fetch(`${API}/api/script-templates/`, { headers: auth })).json()).results || [];
|
|
console.log("templates:", templates.map((t) => `${t.name} / ${t.shot_count}镜 / ${t.total_duration}s`));
|
|
console.log("outline_text:\n" + (templates[0]?.outline_text || "(空)"));
|
|
|
|
// ── 4 · 新建项目 · 第 2 步选模板 + 预期说明 ──
|
|
await page.goto(`${BASE}/projects/new`, { waitUntil: "networkidle", timeout: 40000 });
|
|
await page.waitForTimeout(1800);
|
|
const cards = page.locator(".product-card");
|
|
const count = await cards.count();
|
|
for (let i = 0; i < count; i += 1) {
|
|
if ((await cards.nth(i).innerText()).includes("鎏金精华水")) { await cards.nth(i).click(); break; }
|
|
}
|
|
await page.waitForTimeout(500);
|
|
const select = page.locator(".wiz-pane select.input").first();
|
|
await select.selectOption({ index: 1 });
|
|
await page.waitForTimeout(600);
|
|
const pane = page.locator(".step-pane-wrap").last();
|
|
await pane.scrollIntoViewIfNeeded();
|
|
await page.waitForTimeout(400);
|
|
await shot("4-wizard-template-picked", pane);
|
|
|
|
// ── 5 · 用模板开新项目 → 脚本页设定卡已带模板参数 + 预期文案 ──
|
|
const created = await (await fetch(`${API}/api/projects/`, {
|
|
method: "POST", headers: auth,
|
|
body: JSON.stringify({
|
|
name: `鎏金精华水 · 同套路 · ${Date.now() % 10000}`,
|
|
product: (await (await fetch(`${API}/api/products/`, { headers: auth })).json()).results.find((p) => p.title === "鎏金精华水").id,
|
|
metadata: { wizard: { template_id: templates[0].id, selling_point_ids: [] } }
|
|
})
|
|
})).json();
|
|
console.log("new project wizard:", JSON.stringify(created.metadata.wizard, null, 2));
|
|
|
|
await page.goto(`${BASE}/pipeline/${created.id}?st=1#stage-1`, { waitUntil: "networkidle", timeout: 40000 });
|
|
await page.waitForTimeout(2500);
|
|
await page.locator('.chat-mode[data-mode="ai"]').click();
|
|
await page.waitForTimeout(900);
|
|
await shot("5-setup-card-with-template", page.locator(".chat-pane").first());
|
|
|
|
await browser.close();
|
|
console.log("done ->", OUT);
|