MicroSim Iframe Height Tester

Purpose

MicroSims are embedded in MkDocs pages via <iframe> tags with fixed heights and scrolling="no". If the iframe height is too short, controls at the bottom (sliders, buttons, dropdowns) get clipped and students can't interact with them. This skill automates checking that every MicroSim's controls are fully visible at the declared iframe height.

How It Works

Always use the Python script (scripts/test-iframe-heights.py) — it only requires pip install playwright and avoids any Node.js/npm dependency. A legacy Node.js version (scripts/test-iframe-heights.js) exists but should not be used. The script uses Playwright to:

1. Find all MicroSim directories under docs/sims/
2. Read each index.md to extract the declared iframe height
3. Load main.html in a browser viewport constrained to that height
4. Wait for p5.js (or other libraries) to finish rendering controls
5. Find all interactive elements (buttons, sliders, selects, inputs, checkboxes)
6. Check whether each element's bounding box fits within the iframe height
7. Measure the actual content height needed
8. Report pass/fail with recommended height for failures