SuperAPI AI 工具集

microsim-iframe-tester

测试与质量

查看项目

更新于 10-15 21:10

技能介绍

用途:MicroSim 通常以固定高度、scrolling="no" 的 iframe 嵌入 MkDocs 页面。若高度不足,底部控件会被裁剪,学生无法操作。本技能自动检查每个 MicroSim 的控件在声明高度下是否完整可见。

主要能力:脚本会遍历 docs/sims/ 下的 MicroSim 目录,读取各 index.md 中声明的 iframe 高度,在限定为该高度的浏览器视口中加载 main.html,等待 p5.js 等库渲染完成,找出按钮、滑块、select、input、checkbox 等交互元素,检查其边界框是否超出 iframe 高度,并测量实际所需内容高度,输出 PASS/FAIL 及失败时的建议高度。PASS 表示所有控件在 5px 容差内适配;建议高度为实测内容高度向上取整到 10px 再加 10px 安全边距。若 JS 文件含 // CANVAS_HEIGHT = N 注释,则以该值为准。

使用方式:需先安装依赖 pip install playwright 与 playwright install chromium。始终使用 Python 脚本 scripts/test-iframe-heights.py,避免 Node.js/npm 依赖;旧版 Node 脚本不应使用。常用命令:python scripts/test-iframe-heights.py --sims-dir docs/sims;加 --sim energy-pyramid 测单个;加 --height 530 覆盖高度;加 --report report.md 生成报告。修复失败时,按报告建议高度更新 index.md 中的 iframe height,并同步更新 JS 中的 CANVAS_HEIGHT 注释及嵌入同一模拟的章节 markdown。

适用场景:MkDocs 中嵌入 p5.js 等 MicroSim 的文档项目,用于发布前检查控件可见性。

限制:测试视口宽度为 700px,可能与 MkDocs 实际内容列宽不同,响应式模拟的测量高度可能偏大,建议对响应式模拟人工复核,必要时添加 CANVAS_HEIGHT 声明而非盲目增高。资料未提供其他平台、收费或效果信息。