Skip to content

2.0.4

Choose a tag to compare

View all tags
@Natshah Natshah released this 07 Sep 10:48
· 5 commits to 2.0.x since this release
2.0.4
b20bcf5

What's changed

17 new built-in steps and one behaviour fix. 512 built-in steps across 45 step files; the bundled suite is 299 scenarios / 1,456 step executions, green on chromium.

Drimage Improved step pack (#43, #44)

A new drupal-* pack, tests/step-definitions/drupal-drimage-improved.steps.js, for the dynamic responsive images the Drimage Improved module renders — the module Varbase's default theme uses for every image. Ported out of the module's own local step file so every QA suite gets it from the package instead of copying it per project.

The steps carry no CSS selectors. The pack knows the module's formatter markup (a wrapper carrying data-drimage_improved, a <picture> with an optional WebP <source>, the <img> on an SVG placeholder, a <noscript> fallback) and its swap to a derivative under /styles/drimage_improved_*, so a tester writes the sentence and nothing else:

Then the drimage images should be rendered
And the drimage images should offer webp
And the drimage images should have a noscript fallback
And the drimage images should use lazy loading
And the drimage images should be loaded
And no drimage image should be broken
And the drimage images should be sized for the viewport

The default budget is 2 seconds, because the module exists to make images fast — a step that waits 15 or 20 seconds is hiding a problem, not tolerating one. Every step first settles the page with the harness's own BBR smart wait (networkidle plus the AJAX, pending-timer and DOM-quiet counters), so the module's setTimeout swap has fired before the assertion looks. No static sleeps anywhere.

One image is named the way a person would — by alt text, title, caption, order or number, never a class or an id:

Then the drimage image "Hero banner" should be loaded
Then the drimage image captioned "Our team in 2026" should be in a figure
Then the first drimage image should have the alt text "Hero banner"
Then the last drimage image should still be a placeholder

The qualifier is interchangeable: drimage, drimage improved, dynamic, dynamic responsive, responsive, or none.

Two things the pack learnt from running against the live demos, and now handles:

  • The SVG placeholder itself decodes, so a naturalWidth check alone cannot tell a placeholder from a loaded image. "Loaded" requires a real derivative URL and a decoded bitmap.
  • The module sets loading="lazy" only on images it has already rendered near the viewport; deferred images and hidden slider slides carry no attribute at all. That deferral is the lazy loading, so it is not counted against the page.

Ships examples/drimage.html (the vartheme_bs5 markup, with IntersectionObserver deferral and width rounding), its derivative fixtures, a feature file, and docs/steps/drupal-drimage-improved.md.

Access assertions (#47, #48)

Three steps in navigation.steps.js replacing the five different phrasings five consuming projects had each invented for themselves:

Then I am denied access to "/admin/config"      # = I should be refused "/admin/config"
Then I should be allowed "/admin/content"       # = I am granted access to "/admin/content"
Then I should be denied access                  # = the page should be access restricted

One notion of a refusal, four shapes — HTTP 403, HTTP 404 (used to keep a route unguessable), HTTP 200 with an access-denied page, or a redirect to the log-in form — with a failure message naming which one it saw. A scenario now asserts who the user is rather than how the site happens to be configured. The allowed half earns its place: a role that can reach nothing passes every refusal assertion on its own.

Page title assertions (#45, #46)

Then the page title should be "About Us"
Then the page title should not contain "Access denied"

The <title> is the browser tab text, the bookmark name, the search-result heading and the first thing a screen reader announces — and on a Drupal site it is the head title pattern. should contain is the form for a real site, where the title carries a site name and separator a test has no business hardcoding.

HTTP status: new phrasing, and a fix (#49, #50)

Then the page should return HTTP status 404

The same assertion as the response status code should be N, in the phrasing that reads as a sentence about a page. The existing step was also wrong in two ways and is fixed here: it re-requested the URL with axios outside the browser, so it carried no session cookies (an admin page the browser rendered fine answered 403, making every status assertion after a log-in unreliable) and it followed redirects (should be 301 could never pass). Both phrasings now share one handler using the browser's own context with maxRedirects: 0.

Documentation

  • The Varbase E2E logo on README.md and the docs index (#39, #40).
  • The stale "DDEV Varbase E2E" subsection pointer removed from docs/install-varbase-e2e.md, which linked outside the repository (#41, #42).
  • New docs/steps/drupal-drimage-improved.md; docs/steps/navigation.md and docs/steps/assertion.md extended; step counts and the bundled-suite figures refreshed across docs/, AGENTS.md and CLAUDE.md.

Verified

  • CI green on the released tree.
  • Full suite: 299 scenarios / 1,456 steps passed, 9m41s, chromium, against the bundled fixture server.
  • npx cucumber-js --dry-run clean — nothing undefined, nothing ambiguous. A separate audit matched all 2,716 JSDoc examples against all 517 registered patterns: zero examples match more than one step.
  • The Drimage pack run live as an anonymous visitor: demo.varbase.vardot.com 14 steps green in 5.0s; the Educare sandbox 18 steps green in 8.3s; the Horizon Aid client demo 14 of 18, where the last drimage image should be loaded fails correctly because four images sit in hidden tab panes and the last two are carousel slides the module never renders — documented, with the advice to name images by alt text on pages with tabs or sliders.

Upgrading

npm install --save-dev @vardot/varbase-e2e@2.0.4

Nothing to change in a consumer project. One thing to check: if your project defines its own the image "<selector>" should be loaded step (the drimage_improved module did), delete it — it is now ambiguous with the pack, and the pack's version takes an alt text rather than a selector.

Full changelog: 2.0.3...2.0.4

Assets 2
Loading