test: stabilize Design tutorial interaction coverage

[steve8708]

Summary

• prefer authored layer roots over generated text spans in tutorial selection helpers so physical clicks land in selectable content
• model the in-place Interact preview correctly: editor rails and screen shells remain mounted, with a usable preview iframe
• cover the full 15-step Tutorial 5 flow without stale chrome assumptions

Validation

• E2E_PORT=9464 E2E_RUN_ID=tutorial5-step9-fix2-20260922 corepack pnpm exec playwright test e2e/parity-tutorial-5.spec.ts --config=playwright.config.ts --project=chromium --workers=1 --reporter=line -g 'step 9:' (1 passed)
• E2E_PORT=9463 E2E_RUN_ID=tutorial5-helper-fix2-20260922 corepack pnpm exec playwright test e2e/parity-tutorial-5.spec.ts --config=playwright.config.ts --project=chromium --workers=1 --reporter=line (15 passed)
• git diff --check

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[builder-io-integration]

Builder reviewed your changes — looks good ✅

Review Details

Code Review Summary

This incremental update addresses the prior false-positive concern by adding data-screen-interact-mode, derived from the actual per-screen interactMode state, and making enterInteractView assert a scoped false → true transition on the shell containing the clicked Interact control. The iframe size poll is also scoped to that same shell. The authored-layer selection priority remains appropriately limited to exact text matches, and the existing Tutorial 5 assertions now sit behind a meaningful transition check.

No confirmed bugs or regressions were found by either independent review agent. The change is low risk: the application addition is a test-observability attribute and the remaining changes are E2E helper/spec updates.

🧪 Browser testing: Skipped — browser automation was unavailable in the verification session. The dev server was healthy, but all planner executors lacked Chrome tooling; 14 grounded test cases were prepared and could not execute.