Add automated functional acceptance testing for Web Assets with webship-js (Playwright + Cucumber-js)
### Problem/Motivation
This change introduces a complete functional acceptance test suite for Web Assets based on
webship-js
(Playwright + Cucumber-js BDD), together with the GitLab CI pipeline that executes it
against a freshly built Drupal site on every pipeline run.
Until now Web Assets had no automated way to verify that enabling the module:
- brings in every required dependency (Media, Media Library, Responsive Image, Layout Builder, Crop, Focal Point, Media Remote
Audio),
- provisions all six media types (Image, Document, Audio, Video, Remote audio, Remote video) with their Add forms,
- installs the bundled responsive image styles (origenal, square, standard,
traditional, ultrawide) and image style derivatives,
- registers the Web Assets breakpoints so responsive image styles can use them,
- keeps the media admin and configuration pages behind the right permissions for every default Standard-profile role.
### Proposed resolution
- BDD test suite under tests/features/ — 15 feature files, 40 scenarios, 164
steps.
- Webassets-specific step definitions under tests/step-definitions/webassets.steps.js:
- Given I am a logged in user with the "<X>" user — log in as a named user from
worldParameters.users (Webmaster / Content editor / Authenticated user). Same phrasing as
varbase_project so suites move between projects without re-learning step names.
- Given I add testing users — idempotent provisioning of every non-admin user via
/admin/people/create, replacing the prior add-testing-users.php drush script.
- Then I should see a/an "<Label>" field — assert a labelled form field is visible (handles CKEditor /
file widgets that hide the underlying input).
- Then I should see the button "<Text>" — assert a button with the given text is visible.
- Drupal core / CMS selectors under tests/selectors/ (Claro + Gin) so the same step phrases
target both admin themes.
- Runtime configuration:
- cucumber.js — Varbase-style users registry (Webmaster + per-role users, all with password
dD.123123ddd), screenshot/video/JS-error capture wired up, selector files declared.
- playwright.config.ts — Chromium launch options, headless toggle via HEADLESS, slow-mo via
SLOW_MO.
- package.json — pins webship-js ~2.0, adds yarn test /
yarn test:headed scripts.
- GitLab CI integration:
- .gitlab-ci.yml — drupalci-based pipeline that installs Drupal with
--account-name=webmaster --account-pass=dD.123123ddd, enables webassets, installs Node 20 + yarn deps + Playwright Chromium, and runs
the suite. Per-role test users are provisioned by the first scenario.
- .gitlab-ci-local.yml — per-developer sidecar (gitignored) that mirrors the canonical job in a single
Playwright container joined to the running DDEV network. One command to reproduce the CI run locally:
gitlab-ci-local --file .gitlab-ci-local.yml --network ddev-drupal11webassets_default webship-js-test.
- Test artefacts — JUnit + JSON + HTML reports under tests/reports/, on-failure PNG screenshots
under tests/screenshots/, on-failure Playwright .webm recordings under tests/videos/. All
generated contents are gitignored; folders + READMEs are tracked so the layout is reproducible after a fresh clone.
Coverage
Area
Feature file
Multi-role login + user provisioning
01-01-01-users-login.feature
Web Assets module + every dependency module
enabled
02-01-01-webassets-module-enabled.feature
All six media types installed + edit forms
reachable
02-02-01-media-types-installed.feature
Bundled responsive image styles + edit forms
02-03-01-responsive-image-styles.feature
Bundled image style derivatives
02-04-01-image-styles.feature
Web Assets breakpoints exposed to responsive image style add
form
02-05-01-breakpoints.feature
Add Image — form + /media/add chooser lists all six
bundles
03-01-01-media-add-image.feature
Add Document
03-02-01-media-add-document.feature
Add Remote video — oEmbed Video URL field
03-03-01-media-add-remote-video.feature
Add Audio
03-04-01-media-add-audio.feature
Add Video
03-05-01-media-add-video.feature
Add Remote audio
03-06-01-media-add-remote-audio.feature
Media library admin listing + media-grid view
reachable
04-01-01-media-library-admin.feature
Anonymous-user access denial on media admin / media types / image styles / responsive image
styles
05-01-01-access-control.feature
Full access matrix across Webmaster, Content editor, Authenticated user,
Anonymous
05-02-01-role-access-matrix.feature
### Checkpoints
- [x] File an issue
- [x] Addition for a new supported feature
- [x] Testing to ensure no regression
- [x] Automated unit testing coverage
- [x] Automated functional testing coverage
- [ ] UX/UI designer responsibilities
- [ ] Readability
- [ ] Accessibility
- [ ] Performance
- [ ] Security
- [ ] Documentation
- [x] Reviewed by human
- [x] Code review by maintainers
- [x] Full testing and approval
- [x] Credit contributors
- [x] Review with the product owner
- [x] Release Notes
- [x] Release
### API changes
N/A
### Data model changes
N/A
### Release notes snippet
addition: [#3592108](https://git.drupalcode.org/project/webassets/-/work_items/3592108) Add automated functional acceptance testing for Web Assets with webship-js (Playwright + Cucumber-js)
issue