# Bloom Canvas Tool Manual Testing

> explore, reproduce, and verify Canvas Element behaviors manually via chrome-devtools-mcp, not in a playwright test. Use when this capability is needed.

- Skill: `tomevault-io/bloom-canvas-tool-manual-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/bloom-canvas-tool-manual-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/bloom-canvas-tool-manual-testing/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/bloom-canvas-tool-manual-testing

---


## Scope
Use this skill when the user reports a regression involving Canvas Tool interactions (especially drag/drop from the toolbox onto the page) and asks you to reproduce and verify fixes using a browser.

This skill assumes:
- Bloom is running locally and serving the Edit Tab
- The current page has an element with class `.bloom-canvas`
- The current page has the Canvas Tool tab available in the toolbox
- The user has started the vite dev server for the frontend code

## Primary test URL
  - `http://localhost:8089/bloom/CURRENTPAGE`

## Reproduction approach (required)
When testing or verifying a UI regression:
- Do not rely only on synthetic JS event dispatch.
- Use browser automation/tools to perform an actual drag/drop gesture.

## Finding things
1. If your task involves the toolbox, identify that the toolbox iframe (often `.../toolboxContent`) and confirm the Canvas Tool tab is selected.
2. The page we are editing is in an iframe (a `page-memsim-...htm`)
3. On the page, you can locate the canvas we are editing as an element with the `.bloom-canvas` class.


## If you are performing drag/drop
1. Perform a drag from the toolbox item onto a distinct point on the page (test with multiple drop points).
2. Verify outcome by measuring:
   - The intended drop point (clientX/clientY over the page frame)
   - The created element’s bounding rect and/or `style.left/top`
   - The delta between drop point and element location
   - Test with multiple zoom levels and page scaling to confirm consistent behavior

## Notes
- Bloom’s edit UI uses multiple iframes; coordinate systems (screen/client/page) often differ between frames.
- Page scaling (`transform: scale(...)`) can affect `getBoundingClientRect()` values; prefer consistent coordinate spaces when comparing.

---
> Source: [BloomBooks/BloomDesktop](https://github.com/BloomBooks/BloomDesktop) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-18 -->