班级小管家作业截图

自动化班级小管家 (banjixiaoguanjia.com) 作业截图工具，支持批量获取学生作业图片。

功能特性

• - 🔌 连接 Chrome 调试端口 (CDP)
• 📖 自动进入指定课程
• 👨‍🎓 滚动查看所有学生
• 📸 批量截取学生作业图片
• 🤖 支持 AI 图像分析 (GLM/MiniMax)

编码规范

重要: 所有文件、路径、目录统一使用 UTF-8 编码

• - 脚本文件保存为 UTF-8 with BOM
• 文件路径处理使用 UTF-8 编码
• 输出报告使用 UTF-8 编码
• 避免使用 GBK/GB2312 编码

前置要求

1. 1. Chrome 浏览器 已安装
2. 已登录 班级小管家（首次使用需要手动登录）

💡 提示: 使用 capture-new-browser.js 脚本时，无需手动启动 Chrome 调试模式，脚本会自动处理浏览器启动和复用。

📖 脚本使用手册

⚠️ 重要:

• - 详细的脚本使用流程请查看 SCRIPT-GUIDE.md
• 必须严格按照 SCRIPT-GUIDE.md 使用脚本，不要随意尝试目录下其他脚本
• 本目录下脚本众多，部分脚本有bug或已过时

快速开始

🆕 推荐使用脚本: capture-new-browser.js (v1.9.0+)

最新版功能:

• - ✅ 自动复用浏览器: 检测已打开的班级小管家页面，有则复用，无则启动新浏览器（开启调试端口 9222）
• ✅ 动态学生列表: 自动获取学生列表，不固定学生名字，支持任意班级
• ✅ 智能截图: 采用固定步长滚动（400像素），确保截图顺序正确
• ✅ 改正作业处理: 自动检测改正如下标签，单独截图改正部分
• ✅ 浏览器保持打开: 脚本结束时无限等待，防止浏览器被意外关闭
• ✅ 窗口大小: 1280x1000（高度 1000）
• ✅ 使用本地 Chrome: 不是 Chrome for Testing

使用方法:
bash
node capture-new-browser.js 课程名称

示例:
bash
node capture-new-browser.js 二下(第38节)

输出位置: 桌面/课程名称/

浏览器复用逻辑:

1. 1. 第一次运行：启动新浏览器，自动开启调试端口 9222
2. 后续运行：检测并复用已打开的浏览器，无需重新扫码登录
3. 脚本完成：浏览器保持打开，可继续手动查看和批改

旧版脚本（不推荐）

截图 + AI分析作业数量:
bash
node capture-36-fixed.js 二下(第36节)

⚠️ 注意: 旧版脚本需要手动启动 Chrome 调试模式，且不会自动复用浏览器

核心 API

连接到 Chrome

javascript
const { chromium } = require(playwright);
const browser = await chromium.connectOverCDP(http://localhost:9222);

进入课程

javascript
// 启用辅助功能
await page.evaluate(() => {
const el = document.querySelector(flt-semantics-placeholder);
if (el) el.click();
});

// 查找并点击课程
await page.evaluate((courseName) => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && label.includes(courseName)) {
el.dispatchEvent(new MouseEvent(click, { bubbles: true }));
break;
}
}
}, 三上(第11节));

滚动查找课程（课程列表页面）

⚠️ 关键发现: Flutter 页面需要使用 scrollIntoView 滚动到已知课程来触发动态加载更多课程！

正确方法:
javascript
// 滚动到最后一个已知课程，触发 Flutter 加载更多
await page.evaluate(() => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
let lastCourseEl = null;

for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && (label.includes(第) || label.includes(年级))) {
lastCourseEl = el;
}
}

if (lastCourseEl) {
lastCourseEl.scrollIntoView({ block: start });
}
});

await page.waitForTimeout(1500); // 等待加载完成

完整查找流程:
javascript
async function findCourseWithScroll(courseName, maxScrolls = 20) {
for (let i = 0; i < maxScrolls; i++) {
// 1. 在当前视图查找目标课程
const found = await page.evaluate((name) => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && label.includes(name)) {
return { found: true, label };
}
}
return { found: false };
}, courseName);

if (found.found) return found;

// 2. 滚动到最后一个课程，触发加载更多
await page.evaluate(() => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
let lastCourseEl = null;
for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && (label.includes(第) || label.includes(年级))) {
lastCourseEl = el;
}
}
if (lastCourseEl) lastCourseEl.scrollIntoView({ block: start });
});

await page.waitForTimeout(1500);
}
}

滚动查看学生

javascript
// 获取滚动容器
const scrollContainer = await page.evaluate(() => {
return document.querySelector([style*=overflow-y: scroll]);
});

// 滚动到指定位置
await page.evaluate((scrollTop) => {
const el = document.querySelector([style*=overflow-y: scroll]);
if (el) el.scrollTop = scrollTop;
}, 100);

截图学生作业

javascript
await page.screenshot({
path: screenshots/${studentName}.png,
fullPage: true
});

完整示例

javascript
const { chromium } = require(playwright);

async function captureHomework(courseName, outputDir = ./screenshots) {
const browser = await chromium.connectOverCDP(http://localhost:9222);
const context = browser.contexts()[0] || await browser.newContext();
const pages = context.pages();
let page = pages.find(p => p.url().includes(banjixiaoguanjia));

if (!page) {
page = await context.newPage();
await page.goto(https://service.banjixiaoguanjia.com/appweb/);
}

// 启用辅助功能
await page.evaluate(() => {
const el = document.querySelector(flt-semantics-placeholder);
if (el) el.click();
});
await page.waitForTimeout(2000);

// 进入课程
await page.evaluate((name) => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && label.includes(name)) {
el.dispatchEvent(new MouseEvent(click, { bubbles: true }));
break;
}
}
}, courseName);

await page.waitForTimeout(4000);

// 获取学生列表
const students = await page.evaluate(() => {
const elements = document.querySelectorAll(flt-semantics[aria-label]);
const list = [];
for (const el of elements) {
const label = el.getAttribute(aria-label);
if (label && label.length > 20) {
const lines = label.split(\n);
const name = lines[0].trim();
if (name && name.length < 15 && !name.includes(详情) && !name.includes(查看)) {
list.push(name);
}
}
}
return list;
});

// 截图每个学生
for (const student of students) {
await page.screenshot({
path: ${outputDir}/${student}.png,
fullPage: true
});
console.log(✓ 已截图: ${student});
}

await browser.close();
}

技术要点

课程详情页 vs 批改页面的区别

| 页面 | 学生信息格式 | 查找条件 |
|------|-------------