Issue #3592934: Add Hero Card Canvas functional coverage and fix the editor viewport

Rajab Natshahrequested to merge
issue/varbase_project-3592934:3592934-hero-cards-canvas-functional-testing into 11.0.x

Functional coverage for the Hero Card (sdc.vartheme_bs5.card-hero) component for Drupal Canvas, plus a viewport fix that benefits the whole suite.

What

  • 09-04 Hero Card options matrix (16 scenarios, CI): each scenario builds a dedicated Canvas page carrying one Hero Card and verifies the rendered result across heading tag, background colour, horizontal alignment, button style, card border and container width. Pages are built through Canvas's own content API.
  • 09-05 editor drag-and-drop (@wip, headed): drives the real Canvas React editor the way a human site builder does - drags the Hero Card from the Library onto a new page, configures it in the Settings panel, then publishes. The drag-drop and Settings-panel option steps work; committing the editor auto-save to a published revision is currently unreliable in a headless browser, so it is tagged @wip (CI runs not @wip). Run headed locally for the full human flow.
  • Drupal Canvas steps moved into their own tests/step-definitions/drupal-canvas.steps.js.
  • Viewport fix: playwright.config.js used viewport: null with --start-maximized, giving a sub-1024px window headless; Drupal Canvas refuses to render its editor below 1024px. Set a fixed 1920x1080 viewport (matching video.size in cucumber.js) so the Canvas editor, the admin UI and the recorded video all use the correct size.

Validated on a fresh Varbase install: 09 suite 28/28 (CI, not @wip); 07 suite 17/17 (no viewport regression).

AI-Generated: Yes (Used Claude Code to draft the scenarios, custom steps and the viewport fix. All CI scenarios were executed and pass; the contributor reviewed the changes and remains responsible for their integrity.)

Checkpoints

  • File an issue about this project
  • Addition/Change/Update/Fix to this project
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support on feature change/addition
  • User Guide Documentation support on feature change/addition
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Code review from 1 Varbase core team member
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release
Edited by Rajab Natshah

Merge request reports