Add automated browser tests (webship-js BDD + Playwright) and GitLab CI jobs
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3591427. -->
Reported by: [rajab natshah](https://www.drupal.org/user/1414312)
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>The <strong>Web Releases</strong> module currently has no automated functional test coverage and no browser tests wired into its GitLab CI pipeline. Regressions in the product / release content types, in the releases-listing page per product, in pathauto aliases, in the default <code>webreleases/default</code> recipe install, and in access control can only be caught by manual clicking.</p>
<p>While bringing the recipe to a clean install state, two real bugs surfaced that no test would have caught:</p>
<ul>
<li><code>recipes/default/recipe.yml</code> listed <code>webpage:webpage</code> in <code>install:</code> (invalid) and missed several modules referenced by the shipped config (<code>views</code>, <code>link</code>, <code>image</code>, <code>pathauto</code>, <code>media</code>), so the recipe failed validation.</li>
<li><code>node.type.product</code> and <code>node.type.release</code> shipped with a blank <code>help:</code> value, which Drupal 11's recipe config installer rejects with <em>"This value should not be blank."</em>.</li>
<li>Recipes must explicitly <code>config.import</code> a module's <code>config/install</code> — <code>RecipeRunner::installModule()</code> puts the config installer into syncing mode, so adding <code>webpage</code> to <code>install:</code> alone did not create the Webpage content type.</li>
</ul>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>The <strong>Web Releases</strong> module currently has no automated functional test coverage and no browser tests wired into its GitLab CI pipeline. Regressions in the product / release content types, in the releases-listing page per product, in pathauto aliases, in the default <code>webreleases/default</code> recipe install, and in access control can only be caught by manual clicking.</p>
<p>While bringing the recipe to a clean install state, two real bugs surfaced that no test would have caught:</p>
<ul>
<li><code>recipes/default/recipe.yml</code> listed <code>webpage:webpage</code> in <code>install:</code> (invalid) and missed several modules referenced by the shipped config (<code>views</code>, <code>link</code>, <code>image</code>, <code>pathauto</code>, <code>media</code>), so the recipe failed validation.</li>
<li><code>node.type.product</code> and <code>node.type.release</code> shipped with a blank <code>help:</code> value, which Drupal 11's recipe config installer rejects with <em>"This value should not be blank."</em>.</li>
<li>Recipes must explicitly <code>config.import</code> a module's <code>config/install</code> — <code>RecipeRunner::installModule()</code> puts the config installer into syncing mode, so adding <code>webpage</code> to <code>install:</code> alone did not create the Webpage content type.</li>
</ul>
<h2>Proposed Resolution</h2>
<p>Add a complete browser-test setup integrated into CI:</p>
<ul>
<li>
<strong>webship-js BDD suite</strong> (<code>tests/features/</code>) — 19 scenarios covering:
<ul>
<li>Admin login</li>
<li>Product content type (add form fields, create, alias)</li>
<li>Release content type (add form fields, required-product validation, create with autocomplete)</li>
<li>Releases view page per product</li>
<li>Releases listing with 4 products × 10–20 seeded releases each, plus pagination</li>
<li>Access control (anonymous vs. admin)</li>
</ul>
</li>
<li>
<strong>Custom step definitions</strong> (<code>tests/step-definitions/webreleases.steps.js</code>):<br>
<code>I am logged in as admin</code>, <code>I should see a/an "X" field</code>,<br>
<code>I should see the button "X"</code>, <code>select "X" from the "Y" autocomplete</code><br>
(Drupal entity-reference autocomplete via keyboard), and<br>
<code>the product "X" has N releases</code> (bulk seeding via<br>
<code>drush php:eval</code> for the listing/pagination tests).
</li>
<li>
<strong>Playwright + Cucumber-js scaffolding</strong> — <code>cucumber.js</code>,<br>
<code>playwright.config.ts</code>, <code>.yarnrc.yml</code>, selector files<br>
for Claro / Gin, and a <code>tests/{reports,screenshots,videos}/</code><br>
artifact layout.
</li>
<li>
<strong>GitLab CI</strong> (<code>.gitlab-ci.yml</code>) — <code>cspell</code>,<br>
<code>eslint</code>, <code>stylelint</code> validate jobs plus<br>
<code>webship-js-test</code>, which extends <code>.testing-job-base</code>,<br>
needs the drupalci <code>composer</code> job, installs Drupal +<br>
<code>webreleases</code>, installs Node 20 + yarn deps + Playwright Chromium,<br>
and runs <code>cucumber-js --tags "not @wip"</code> against the live site.<br>
Artifacts (reports / screenshots / videos / JUnit) are kept for 7 days.
</li>
<li>
<strong>Recipe fixes</strong> — cleaned <code>install:</code> module list,<br>
added <code>config.import: webpage: '*'</code>, and gave<br>
<code>node.type.product</code> / <code>node.type.release</code> non-blank<br>
<code>help:</code> so the recipe installs cleanly on Drupal 11.
</li>
<li>
<strong>Default demo content</strong> (<code>recipes/default/content/node/</code>)<br>
— two placeholder products, several releases, and a "Products" landing page<br>
built on the <code>webpage</code> content type with a Layout-Builder block<br>
embedding the products view. Exported with core<br>
<code>drush content:export</code> (no <code>default_content</code> module<br>
needed); imported by core's recipe content runner on install.
</li>
</ul>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<ul>
<li>✅ File an issue</li>
<li>✅ Addition/Change/Update/Fix</li>
<li>✅ Merge request, Patch, or Commit</li>
<li>✅ Testing to ensure no regression</li>
<li>✅ Automated unit testing coverage</li>
<li>✅ Automated functional testing coverage</li>
<li>➖ UX/UI designer responsibilities</li>
<li>➖ Readability</li>
<li>➖ Accessibility</li>
<li>➖ Performance</li>
<li>➖ Security</li>
<li>➖ Documentation</li>
<li>✅ Code review by maintainers</li>
<li>✅ Full testing and approval</li>
<li>✅ Credit contributors</li>
<li>✅ Review with the product owner</li>
<li>✅ Release notes snippet</li>
<li>✅ Release <a href="https://www.drupal.org/project/webreleases/releases/11.0.0">webreleases-11.0.0</a></li>
</ul>
<h3 id="summary-ui-changes">User interface changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-api-changes">API changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-data-model-changes">Data model changes</h3>
<ul>
<li>N/A</li>
</ul>
<h3 id="summary-release-notes">Release notes snippet</h3>
<ul>
<li>ci: <a href="https://www.drupal.org/i/3591427">#3591427</a> Add automated browser tests (webship-js BDD + Playwright) and GitLab CI jobs</li>
</ul>
issue