@webship-js/odoo-steps 2.0.1 → 2.1.0

package/tests/step-definitions/odoo.steps.js

@@ -1,133 +1,32 @@
 'use strict';
 
-// Odoo-specific Cucumber step definitions for webship-js. These steps
-// understand the markup the Odoo Website builder (and the eCommerce, Blog,
-// Events, Jobs and core web-login modules bundled with it) renders on every
-// Odoo site: the #wrapwrap/#top_menu layout, o_wblog_* blog templates,
-// o_wsale_* eCommerce templates, o_wevent_* events templates, o_jobs
-// recruitment templates, s_website_form snippet forms, and the core
-// /web/login screen. Scenarios assert against the main pages of an Odoo site
-// without hand-rolling CSS selectors in every feature file.
+// Website steps for Odoo: the pages the Website app and its companions (Blog,
+// eCommerce, Events, Jobs) serve to visitors. The steps know the markup these
+// apps render: the `#wrapwrap` layout with its top menu and footer, the blog
+// and shop templates, the events and jobs lists, the contact form and the 404
+// page.
 //
-// The Gherkin phrasing stays product-agnostic: the word "Odoo" is optional in
-// every sentence ("I should see the top menu" and "I should see the Odoo top
-// menu" are the same step), so a feature written for another step pack reads
-// the same here. Only these comments and the error messages name the product,
-// to document which convention each step targets.
+// The session steps are in odoo-session.steps.js, the web client steps in
+// odoo-webclient.steps.js and the record steps in odoo-record.steps.js;
+// odoo-helpers.js holds what they share.
 //
-// Composes with webship-js's built-in steps (navigation.steps.js,
-// assertion.steps.js, form.steps.js, response.steps.js, ...) rather than
-// duplicating them: use those directly in feature files wherever they already
-// cover the need ("the response status code should be 200", "the path should
-// be "/web"").
+// The steps work next to webship-js's built-in steps and do not repeat them:
+// use those in a feature wherever they cover the need ("the response status
+// code should be 200", "the path should be "/shop"").
 
 const { Given, When, Then } = require('@cucumber/cucumber');
-const { gotoUrl, waitForPageLoad, fillField, friendly } = require('webship-js/tests/step-definitions/webship');
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// Kept well under webship-js's 45s step timeout so a locator that never
-// settles fails through the authored message (with its hint), not as
-// "function timed out".
-const WAIT_TIMEOUT = 30000;
-
-// The per-page wait budget from `worldParameters.minWaitTime.page`.
-function budget(world) {
-  return (world && world.minWaitTime && world.minWaitTime.page) || 3000;
-}
-
-// Join the launch URL and a path with exactly one slash.
-function siteUrl(world, path) {
-  return String(world.launchUrl).replace(/\/+$/, '') + '/' + String(path).replace(/^\/+/, '');
-}
-
-// Open a path on the site under test and wait for the page to settle.
-async function navigate(world, path) {
-  await gotoUrl(world.page, siteUrl(world, path));
-  await world.page.waitForSelector('body', { state: 'attached', timeout: WAIT_TIMEOUT });
-  await waitForPageLoad(world.page, budget(world));
-}
-
-// Assert an element is present or, when the step said "not", absent. The
-// assertion is the wait: Playwright polls the locator for the wanted state and
-// a miss fails through a friendly message with a hint. `attached` picks
-// presence-in-DOM over visibility for template markers a theme may render
-// off-screen.
-async function assertPresence(locator, notCase, label, { attached = false, hint, timeout = WAIT_TIMEOUT } = {}) {
-  const state = attached ? (notCase ? 'detached' : 'attached') : (notCase ? 'hidden' : 'visible');
-  try {
-    await locator.waitFor({ state, timeout });
-  } catch (error) {
-    throw friendly({
-      message: notCase ? `Expected ${label} to be absent.` : `Expected ${label} to be present.`,
-      cause: error,
-      hint,
-    });
-  }
-}
-
-// Whitespace-tolerant, case-sensitive regex for "contains this text", so a
-// Playwright `hasText` filter can be the wait.
-function textPattern(text, { exact = false } = {}) {
-  const body = text.trim().split(/\s+/).map((part) => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('\\s+');
-  return new RegExp(exact ? `^\\s*${body}\\s*$` : body);
-}
-
-// Assert a locator's text contains (or, with `notCase`, does not contain) the
-// expected text: the locator is narrowed to "has this text" and Playwright
-// polls for that narrowed set to exist or to be gone.
-async function assertText(locator, expectedText, notCase, label, { exact = false, hint, timeout = WAIT_TIMEOUT } = {}) {
-  const withText = locator.filter({ hasText: textPattern(expectedText, { exact }) });
-  try {
-    await withText.waitFor({ state: notCase ? 'detached' : 'attached', timeout });
-  } catch (error) {
-    const text = ((await locator.textContent({ timeout: 1000 }).catch(() => '')) || '').replace(/\s+/g, ' ').trim();
-    throw friendly({
-      message: notCase
-        ? `Expected ${label} not to ${exact ? 'read' : 'contain'} "${expectedText}".`
-        : `Expected ${label} to ${exact ? 'read' : 'contain'} "${expectedText}".`,
-      cause: `it reads "${text}"`,
-      hint,
-    });
-  }
-}
-
-// Fill and submit Odoo's login form. The submit is dispatched from inside the
-// page rather than with a pointer click: a fixed overlay (a cookie bar, a chat
-// widget) can cover the button and make a real click wait out its
-// actionability timeout, while the form's own submit cannot be covered.
-// A successful login redirects to the backend webclient (/web), which keeps a
-// permanent longpoll connection open (Discuss/bus), so networkidle never
-// fires there and the shared settle helpers would not settle: wait for the
-// navigation and DOM content only. An invalid login stays on /web/login
-// without a full navigation, so this resolves quickly either way.
-async function submitLogin(world, username, password) {
-  const page = world.page;
-  try {
-    await page.locator('#login').waitFor({ state: 'visible', timeout: budget(world) });
-  } catch (error) {
-    throw friendly({
-      action: 'find the login form',
-      target: 'form[action="/web/login"]',
-      cause: error,
-      hint: 'Open the login page first ("Given I am on the login page"); a site that replaces /web/login needs its own step.',
-    });
-  }
-  await fillField(page, 'login', username);
-  await fillField(page, 'password', password);
-  await Promise.all([
-    page.waitForNavigation({ waitUntil: 'domcontentloaded', timeout: 15000 }).catch(() => {}),
-    page.evaluate(() => {
-      const form = document.querySelector('form[action="/web/login"]');
-      const submit = form && form.querySelector('button[type="submit"]');
-      if (submit) { submit.click(); return; }
-      if (form) form.submit();
-    }),
-  ]);
-  await page.waitForLoadState('domcontentloaded', { timeout: 15000 }).catch(() => {});
-}
+const { waitForPageLoad, friendly } = require('webship-js/tests/step-definitions/webship');
+const {
+  WAIT_TIMEOUT,
+  SHORT_TIMEOUT,
+  budget,
+  settle,
+  navigate,
+  assertPresence,
+  assertText,
+  listTexts,
+  textPattern,
+} = require('./odoo-helpers');
 
 // ---------------------------------------------------------------------------
 // Core layout: #wrapwrap, top menu, footer
@@ -139,14 +38,14 @@ async function submitLogin(world, username, password) {
  * header, main and footer in, regardless of which front-end app (Website,
  * eCommerce, Blog, Events, Jobs, ...) rendered the page.
  *
- * Example #1: Then I should be on an Odoo website page
- * Example #2: And I should be on a website page
- * Example #3: Then we should be on an Odoo website page
+ * Example #1: Then I should be on a website page
+ * Example #2: And we should not be on a website page
+ * Example #3: Then we should be on a website page
  * Example #4: And should not be on a website page
- * Example #5: Then I should not be on an Odoo website page
+ * Example #5: Then I should not be on a website page
  *
  */
-Then(/^(I |we )*should( not)* be on an? (?:Odoo )?website page$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on a website page$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('#wrapwrap'), notCase, 'the Website wrapper ("#wrapwrap")', {
     attached: true,
     hint: 'Every page the Odoo Website builder renders carries #wrapwrap; the backend webclient (/web) and the login screen do not.',
@@ -158,14 +57,14 @@ Then(/^(I |we )*should( not)* be on an? (?:Odoo )?website page$/, async function
  * Matches `#top_menu`, the `<ul>` every Odoo Website header renders its menu
  * items into.
  *
- * Example #1: Then I should see the Odoo top menu
+ * Example #1: Then I should see the top menu
  * Example #2: And I should see the main menu
- * Example #3: Then we should see the Odoo menu
+ * Example #3: Then we should see the menu
  * Example #4: And should not see the top menu
  * Example #5: Then I should see the main navigation menu
  *
  */
-Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:top |main )?(?:menu|navigation menu)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* see the (?:top |main )?(?:menu|navigation menu)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('#top_menu').first(), notCase, 'the Website top menu ("#top_menu")', {
     hint: 'The header renders #top_menu on every Website page; a header template without a menu, or a hidden header, leaves it out.',
   });
@@ -175,14 +74,14 @@ Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:top |main )?(?:menu|navigatio
  * Assert the Website footer is, or is not, visible. Matches `footer#bottom`,
  * the element every Odoo Website footer snippet renders into.
  *
- * Example #1: Then I should see the Odoo footer
+ * Example #1: Then I should see the footer
  * Example #2: And I should see the site footer
- * Example #3: Then we should see the Odoo page footer
+ * Example #3: Then we should see the page footer
  * Example #4: And should not see the footer
- * Example #5: Then I should not see the Odoo site footer
+ * Example #5: Then I should not see the site footer
  *
  */
-Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:site |page )?footer$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* see the (?:site |page )?footer$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('footer#bottom, #footer').first(), notCase, 'the Website footer ("footer#bottom")', {
     hint: 'The footer can be hidden per page in the Website builder (page properties); check the page, not the theme.',
   });
@@ -196,14 +95,14 @@ Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:site |page )?footer$/, async
  * Assert the current page is, or is not, the Blog index/listing template.
  * Matches `#o_wblog_index_content`, rendered by the Blog app's post-list view.
  *
- * Example #1: Then I should be on the Odoo blog page
+ * Example #1: Then I should be on the blog page
  * Example #2: And I should be on the blog index
- * Example #3: Then we should be on the Odoo blog page
+ * Example #3: Then we should be on the blog page
  * Example #4: And should not be on the blog index
  * Example #5: Then I should be on the blog listing page
  *
  */
-Then(/^(I |we )*should( not)* be on the (?:Odoo )?blog (?:index|page|listing page)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on the blog (?:index|page|listing page)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('#o_wblog_index_content'), notCase, 'the Blog index template ("#o_wblog_index_content")', {
     attached: true,
     hint: 'The Blog index lives at /blog once the website_blog app is installed and at least one blog exists.',
@@ -215,14 +114,14 @@ Then(/^(I |we )*should( not)* be on the (?:Odoo )?blog (?:index|page|listing pag
  * Matches `.o_wblog_post_title`, an element only the single-post view renders
  * (the index view's post teaser cards do not include it).
  *
- * Example #1: Then I should be on an Odoo blog post page
+ * Example #1: Then I should be on an blog post page
  * Example #2: And I should be on a blog post page
- * Example #3: Then we should be on the Odoo single blog post page
+ * Example #3: Then we should be on the single blog post page
  * Example #4: And should not be on a blog post page
  * Example #5: Then I should not be on the single blog post page
  *
  */
-Then(/^(I |we )*should( not)* be on (?:an?|the) (?:Odoo )?(?:single )?blog post page$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on (?:an?|the) (?:single )?blog post page$/, async function (pronounCase, notCase) {
   // .first(): the single-post template can also render a "related posts"
   // teaser section further down the page reusing the same title class.
   await assertPresence(this.page.locator('.o_wblog_post_title').first(), notCase, 'the single blog post template (".o_wblog_post_title")', {
@@ -233,19 +132,20 @@ Then(/^(I |we )*should( not)* be on (?:an?|the) (?:Odoo )?(?:single )?blog post
 
 /**
  * Assert the blog post on screen has, or does not have, the given title.
- * Reads `.o_wblog_post_title`, the single-post view's title element, and
- * waits for the text to be there.
+ * Reads `#o_wblog_post_name`, the heading of the single-post view (the
+ * subtitle under it is not part of the title), and waits for the text to be
+ * there.
  *
- * Example #1: Then I should see the Odoo blog post titled "Customer Reviews"
+ * Example #1: Then I should see the blog post titled "Customer Reviews"
  * Example #2: And I should see the blog post titled "Employee Testimonials"
- * Example #3: Then we should see the Odoo blog post titled "Release Notes"
+ * Example #3: Then we should see the blog post titled "Release Notes"
  * Example #4: And should not see the blog post titled "Product Update"
  * Example #5: Then I should see the blog post titled "Company News"
  *
  */
-Then(/^(I |we )*should( not)* see the (?:Odoo )?blog post titled "([^"]*)?"$/, async function (pronounCase, notCase, expectedTitle) {
-  const title = this.page.locator('.o_wblog_post_title').first();
-  await assertPresence(title, undefined, 'the blog post title (".o_wblog_post_title")', {
+Then(/^(I |we )*should( not)* see the blog post titled "([^"]*)?"$/, async function (pronounCase, notCase, expectedTitle) {
+  const title = this.page.locator('#o_wblog_post_name, .o_wblog_post_title h1').first();
+  await assertPresence(title, undefined, 'the blog post title ("#o_wblog_post_name")', {
     attached: true,
     hint: 'Open a single blog post first.',
   });
@@ -263,14 +163,14 @@ Then(/^(I |we )*should( not)* see the (?:Odoo )?blog post titled "([^"]*)?"$/, a
  * Matches `#products_grid`, the container the "website_sale" module renders
  * the product listing into.
  *
- * Example #1: Then I should be on the Odoo shop page
+ * Example #1: Then I should be on the shop page
  * Example #2: And I should be on the shop index
- * Example #3: Then we should be on the Odoo shop page
+ * Example #3: Then we should be on the shop page
  * Example #4: And should not be on the shop index
  * Example #5: Then I should be on the shop catalog page
  *
  */
-Then(/^(I |we )*should( not)* be on the (?:Odoo )?shop (?:page|index|catalog page)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on the shop (?:page|index|catalog page)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('#products_grid'), notCase, 'the shop product grid ("#products_grid")', {
     attached: true,
     hint: 'The shop lives at /shop once the website_sale app is installed and at least one product is published.',
@@ -282,14 +182,14 @@ Then(/^(I |we )*should( not)* be on the (?:Odoo )?shop (?:page|index|catalog pag
  * `.o_wsale_product_page`, rendered by "website_sale" for every product
  * detail page.
  *
- * Example #1: Then I should be on an Odoo product page
+ * Example #1: Then I should be on an product page
  * Example #2: And I should be on a shop product page
- * Example #3: Then we should be on the Odoo product detail page
+ * Example #3: Then we should be on the product detail page
  * Example #4: And should not be on a product page
  * Example #5: Then I should not be on the product detail page
  *
  */
-Then(/^(I |we )*should( not)* be on (?:an?|the) (?:Odoo )?(?:shop )?product(?: detail)? page$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on (?:an?|the) (?:shop )?product(?: detail)? page$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('.o_wsale_product_page'), notCase, 'the product page (".o_wsale_product_page")', {
     attached: true,
     hint: 'Open a product from the shop grid first ("When I open the first product in the shop").',
@@ -301,14 +201,14 @@ Then(/^(I |we )*should( not)* be on (?:an?|the) (?:Odoo )?(?:shop )?product(?: d
  * the n-th. Reads the product link from `#products_grid` and navigates to it,
  * so no product slug appears in the feature file.
  *
- * Example #1: When I open the first product in the Odoo shop
- * Example #2: And I open the first product in the shop
+ * Example #1: When I open the first product in the shop
+ * Example #2: And I open the 4th item in the shop
  * Example #3: When we open the 2nd product in the shop
- * Example #4: And open the first item in the Odoo shop
+ * Example #4: And open the first item in the shop
  * Example #5: When I open the 3rd product in the shop
  *
  */
-When(/^(I |we )*open the (first|\d+(?:st|nd|rd|th)) (?:product|item) in the (?:Odoo )?shop$/, async function (pronounCase, position) {
+When(/^(I |we )*open the (first|\d+(?:st|nd|rd|th)) (?:product|item) in the shop$/, async function (pronounCase, position) {
   const index = position === 'first' ? 0 : parseInt(position, 10) - 1;
   const links = this.page.locator('#products_grid .oe_product a[href*="/shop/"]');
   const link = links.nth(index);
@@ -339,14 +239,14 @@ When(/^(I |we )*open the (first|\d+(?:st|nd|rd|th)) (?:product|item) in the (?:O
  * search field "website_sale" also renders in the page header, and presses
  * Enter.
  *
- * Example #1: When I search the Odoo shop for "mug"
+ * Example #1: When I search the shop for "mug"
  * Example #2: When we search the shop for "polo shirt"
- * Example #3: And search the Odoo shop for "t-shirt"
+ * Example #3: And search the shop for "t-shirt"
  * Example #4: When we search the shop for "backpack"
  * Example #5: And I search the shop for "notebook"
  *
  */
-When(/^(I |we )*search the (?:Odoo )?shop for "([^"]*)?"$/, async function (pronounCase, term) {
+When(/^(I |we )*search the shop for "([^"]*)?"$/, async function (pronounCase, term) {
   const searchField = this.page.locator('.o_wsale_products_searchbar_form input[name="search"]').first();
   try {
     await searchField.waitFor({ state: 'visible', timeout: WAIT_TIMEOUT });
@@ -364,27 +264,29 @@ When(/^(I |we )*search the (?:Odoo )?shop for "([^"]*)?"$/, async function (pron
 });
 
 /**
- * Assert the shop search returned results for the given term: the product
- * grid is present and the URL's `search` query parameter carries the term.
+ * Assert the shop search returned, or did not return, products for the given
+ * term: the URL's `search` parameter carries the term and the product grid
+ * lists at least one product (`#products_grid .oe_product`). With "not" the
+ * grid must list none.
  *
- * Example #1: Then I should see Odoo shop search results for "mug"
- * Example #2: And I should see shop search results for "polo shirt"
- * Example #3: Then we should see Odoo shop search results for "t-shirt"
- * Example #4: And should see shop search results for "backpack"
- * Example #5: Then I should see the shop search results for "notebook"
+ * Example #1: Then I should see shop search results for "desk"
+ * Example #2: And I should see shop search results for "office chair"
+ * Example #3: Then we should see shop search results for "cabinet"
+ * Example #4: And I should not see shop search results for "no-such-product"
+ * Example #5: Then I should see the shop search results for "lamp"
  *
  */
-Then(/^(I |we )*should see (?:the )?(?:Odoo )?shop search results for "([^"]*)?"$/, async function (pronounCase, term) {
+Then(/^(I |we )*should( not)* see (?:the )?shop search results for "([^"]*)?"$/, async function (pronounCase, notCase, term) {
   await assertPresence(this.page.locator('#products_grid'), undefined, 'the shop product grid ("#products_grid")', {
     attached: true,
-    hint: 'A search that matches nothing still renders the grid with an empty-state message; a missing grid means the search left the shop.',
+    hint: 'A search that matches nothing still renders the grid, with a message in place of the products; a missing grid means the search left the shop.',
   });
   // A space reaches the URL as `+` or `%20` depending on whether the form or
   // a direct navigation submitted it.
   const encoded = encodeURIComponent(term);
   const carriesTerm = (url) => url.includes(`search=${encoded.replace(/%20/g, '+')}`) || url.includes(`search=${encoded}`);
   try {
-    await this.page.waitForURL((url) => carriesTerm(String(url)), { timeout: budget(this) });
+    await this.page.waitForURL((url) => carriesTerm(String(url)), { timeout: SHORT_TIMEOUT });
   } catch (error) {
     throw friendly({
       message: `Expected the shop URL to carry the search term "${term}".`,
@@ -392,6 +294,37 @@ Then(/^(I |we )*should see (?:the )?(?:Odoo )?shop search results for "([^"]*)?"
       hint: 'Run "When I search the shop for ..." first, with the same term.',
     });
   }
+  const products = this.page.locator('#products_grid .oe_product');
+  await assertPresence(products.first(), notCase, `a product in the shop grid for the search "${term}"`, {
+    attached: true,
+    timeout: SHORT_TIMEOUT,
+    hint: notCase
+      ? `The grid lists ${await listTexts(this.page.locator('#products_grid .o_wsale_products_item_title'))}.`
+      : 'The search looks in the name and the description of the published products; a product that is not published is not listed.',
+  });
+});
+
+/**
+ * Assert the shop grid lists, or does not list, a product by its name
+ * (`#products_grid .o_wsale_products_item_title`).
+ *
+ * Example #1: Then I should see the "Customizable Desk" product in the shop
+ * Example #2: And I should see the "Office Chair" product in the shop
+ * Example #3: Then we should see the "Large Cabinet" product in the shop
+ * Example #4: And I should not see the "Office Lamp" product in the shop
+ * Example #5: Then we should not see the "Warranty" product in the shop
+ *
+ */
+Then(/^(I |we )*should( not)* see the "([^"]*)" product in the shop$/, async function (pronounCase, notCase, name) {
+  await assertPresence(this.page.locator('#products_grid'), undefined, 'the shop product grid ("#products_grid")', {
+    attached: true,
+    hint: 'Open the shop page first.',
+  });
+  const titles = this.page.locator('#products_grid .o_wsale_products_item_title');
+  await assertPresence(titles.filter({ hasText: textPattern(name, { exact: true }) }).first(), notCase, `the "${name}" product in the shop grid`, {
+    timeout: SHORT_TIMEOUT,
+    hint: `The grid lists ${await listTexts(titles)}. The shop shows its products by pages and only the published ones.`,
+  });
 });
 
 /**
@@ -403,14 +336,14 @@ Then(/^(I |we )*should see (?:the )?(?:Odoo )?shop search results for "([^"]*)?"
  * "Continue Shopping" action, which keeps the item in the cart without
  * leaving the product page.
  *
- * Example #1: When I add the product to the Odoo cart
+ * Example #1: When I add the product to the cart
  * Example #2: When we add this product to the cart
- * Example #3: And add the current product to the Odoo cart
+ * Example #3: And add the current product to the cart
  * Example #4: When we add the product to the cart
  * Example #5: And I add this product to the cart
  *
  */
-When(/^(I |we )*add (?:the |this )?(?:current )?product to the (?:Odoo )?cart$/, async function (pronounCase) {
+When(/^(I |we )*add (?:the |this )?(?:current )?product to the cart$/, async function (pronounCase) {
   const addToCart = this.page.locator('#add_to_cart').first();
   try {
     await addToCart.waitFor({ state: 'visible', timeout: WAIT_TIMEOUT });
@@ -435,14 +368,14 @@ When(/^(I |we )*add (?:the |this )?(?:current )?product to the (?:Odoo )?cart$/,
  * `.my_cart_quantity`, the header cart-icon badge "website_sale" updates
  * whenever the session cart changes, and waits for it to read that number.
  *
- * Example #1: Then I should see "1" item in the Odoo cart
+ * Example #1: Then I should see "1" item in the cart
  * Example #2: And I should see "2" items in the cart
- * Example #3: Then we should see "1" item in the Odoo cart
+ * Example #3: Then we should see "1" item in the cart
  * Example #4: And should not see "3" items in the cart
  * Example #5: Then I should see "0" items in the cart
  *
  */
-Then(/^(I |we )*should( not)* see "([^"]*)?" items? in the (?:Odoo )?cart$/, async function (pronounCase, notCase, expectedCount) {
+Then(/^(I |we )*should( not)* see "([^"]*)?" items? in the cart$/, async function (pronounCase, notCase, expectedCount) {
   const badge = this.page.locator('.my_cart_quantity').first();
   await assertPresence(badge, undefined, 'the cart quantity badge (".my_cart_quantity")', {
     hint: 'The badge sits on the header cart icon; a header without the cart link (an eCommerce option) has no badge.',
@@ -461,14 +394,14 @@ Then(/^(I |we )*should( not)* see "([^"]*)?" items? in the (?:Odoo )?cart$/, asy
  * Assert the current page is, or is not, the Events index/listing template.
  * Matches `.o_wevent_index`, rendered by the Events app's event-list view.
  *
- * Example #1: Then I should be on the Odoo events page
+ * Example #1: Then I should be on the events page
  * Example #2: And I should be on the event page
- * Example #3: Then we should be on the Odoo events page
+ * Example #3: Then we should be on the events page
  * Example #4: And should not be on the events index
  * Example #5: Then I should be on the events listing page
  *
  */
-Then(/^(I |we )*should( not)* be on the (?:Odoo )?events? (?:page|index|listing page)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on the events? (?:page|index|listing page)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('.o_wevent_index, .o_wevent_events_list').first(), notCase, 'the Events index template (".o_wevent_index")', {
     attached: true,
     hint: 'The events list lives at /event once the website_event app is installed.',
@@ -484,14 +417,14 @@ Then(/^(I |we )*should( not)* be on the (?:Odoo )?events? (?:page|index|listing
  * template. Matches `#jobs_grid`, rendered by the Recruitment app's public job
  * board.
  *
- * Example #1: Then I should be on the Odoo jobs page
+ * Example #1: Then I should be on the jobs page
  * Example #2: And I should be on the careers page
- * Example #3: Then we should be on the Odoo jobs page
+ * Example #3: Then we should be on the jobs page
  * Example #4: And should not be on the jobs listing page
  * Example #5: Then I should be on the recruitment page
  *
  */
-Then(/^(I |we )*should( not)* be on the (?:Odoo )?(?:jobs|careers|recruitment) (?:page|listing page)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* be on the (?:jobs|careers|recruitment) (?:page|listing page)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('#jobs_grid'), notCase, 'the Jobs listing template ("#jobs_grid")', {
     attached: true,
     hint: 'The job board lives at /jobs once the hr_recruitment app is installed with its website module.',
@@ -503,14 +436,14 @@ Then(/^(I |we )*should( not)* be on the (?:Odoo )?(?:jobs|careers|recruitment) (
  * page. Matches links whose `href` contains `/jobs/`, the URL pattern every
  * job posting page uses.
  *
- * Example #1: Then I should see Odoo job openings
+ * Example #1: Then I should see job openings
  * Example #2: And I should see job listings
- * Example #3: Then we should see Odoo job openings
+ * Example #3: Then we should see job openings
  * Example #4: And should not see job listings
  * Example #5: Then I should see job postings
  *
  */
-Then(/^(I |we )*should( not)* see (?:Odoo )?job (?:openings|listings|postings)$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* see job (?:openings|listings|postings)$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('a[href*="/jobs/"]').first(), notCase, 'a job opening link ("a[href*=\\"/jobs/\\"]")', {
     hint: 'Only published job positions are listed; publish one from the Recruitment app or drop the scenario.',
   });
@@ -520,184 +453,378 @@ Then(/^(I |we )*should( not)* see (?:Odoo )?job (?:openings|listings|postings)$/
 // Contact form
 // ---------------------------------------------------------------------------
 
+const CONTACT_FORM = '#contactus_form, #wrap form.s_website_form, #wrap .s_website_form form';
+
 /**
- * Navigate to the core "Contact us" page at `/contactus`.
+ * The contact form of the page, required and visible.
  *
- * Example #1: Given I am on the Odoo contact us page
+ * @param {object} world
+ * @returns {Promise<import('playwright').Locator>}
+ */
+async function requireContactForm(world) {
+  const form = world.page.locator(CONTACT_FORM).first();
+  try {
+    await form.waitFor({ state: 'visible', timeout: SHORT_TIMEOUT });
+  } catch (error) {
+    throw friendly({
+      message: 'Expected the contact form on the page.',
+      cause: `the page is ${world.page.url()}`,
+      hint: 'Open the contact page first ("Given I am on the contact us page"). The form is the "Form" building block of the Website builder.',
+    });
+  }
+  return form;
+}
+
+/**
+ * Navigate to the "Contact us" page at `/contactus` and check that the site
+ * serves it: the Website layout is there and the page is not the 404 page.
+ *
+ * Example #1: Given I am on the contact us page
  * Example #2: Given we are on the contact page
- * Example #3: Given I am on the Odoo "contact us" page
+ * Example #3: Given we are on the contact us page
  * Example #4: And on the contact-us page
  * Example #5: Given I am on the contact page
  *
  */
-Given(/^(I am |we are )*on the (?:Odoo )?(?:"contact us"|contact[ -]?us|contact) page$/, async function (pronounCase) {
+Given(/^(I am |we are )*on the (?:contact[ -]?us|contact) page$/, async function (pronounCase) {
   await navigate(this, '/contactus');
+  const page = this.page;
+  const notFound = await page.locator('main h1', { hasText: '404' }).count();
+  if (notFound || !(await page.locator('#wrapwrap').count())) {
+    throw friendly({
+      message: 'Expected the contact page at /contactus.',
+      cause: notFound ? 'the site answers with its 404 page' : `the page at ${page.url()} is not a Website page`,
+      hint: 'The page ships with the Website app; a site that unpublished or moved it needs "Given I am on "<its path>"" instead.',
+    });
+  }
 });
 
 /**
  * Assert the "Contact us" form is, or is not, visible. Matches
- * `#contactus_form`, the `s_website_form` snippet instance the Website app
- * renders on the default contact-us page.
+ * `#contactus_form`, the form the Website app renders on the contact page,
+ * or another "Form" building block in the content of the page.
  *
- * Example #1: Then I should see the Odoo contact us form
+ * Example #1: Then I should see the contact us form
  * Example #2: And I should see the contact form
- * Example #3: Then we should see the Odoo contact us form
+ * Example #3: Then we should see the contact us form
  * Example #4: And should not see the contact form
  * Example #5: Then I should see the "contact us" form
  *
  */
-Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:"contact us"|contact[ -]?us|contact) form$/, async function (pronounCase, notCase) {
-  await assertPresence(this.page.locator('#contactus_form'), notCase, 'the contact-us form ("#contactus_form")', {
-    hint: 'The default /contactus page renders the form snippet with this id; a redesigned page may have dropped or renamed it.',
+Then(/^(I |we )*should( not)* see the (?:"contact us"|contact[ -]?us|contact) form$/, async function (pronounCase, notCase) {
+  await assertPresence(this.page.locator(CONTACT_FORM).first(), notCase, 'the contact form ("#contactus_form")', {
+    hint: 'The contact page renders the form with this id; a redesigned page may have dropped or renamed it.',
+  });
+  if (notCase) return;
+  await assertPresence(this.page.locator(CONTACT_FORM).first().locator('.s_website_form_send').first(), undefined, 'the submit button of the contact form (".s_website_form_send")', {
+    timeout: SHORT_TIMEOUT,
+    hint: 'The button is part of the "Form" building block.',
   });
 });
 
-// ---------------------------------------------------------------------------
-// /web/login: authentication
-// ---------------------------------------------------------------------------
+/**
+ * Fill the contact form from a table: the first column names a field by its
+ * label ("Name", "Email", "Question"), the second gives the value.
+ *
+ * Example #1: When I fill in the contact form with:
+ * Example #2: When we fill in the contact form with:
+ * Example #3: And fill in the contact form with:
+ * Example #4: When I fill in the contact us form with:
+ * Example #5: And we fill in the contact us form with:
+ *
+ */
+When(/^(I |we )*fill in the contact(?: us)? form with:$/, async function (pronounCase, dataTable) {
+  const form = await requireContactForm(this);
+  const labels = form.locator('label.s_website_form_label:visible');
+  for (const [name, value] of dataTable.raw()) {
+    // The label reads "Name *": the mark of a required field is not part of
+    // the name.
+    const label = labels.filter({ has: this.page.locator('.s_website_form_label_content', { hasText: textPattern(name, { exact: true }) }) }).first();
+    if (!(await label.isVisible().catch(() => false))) {
+      throw friendly({
+        message: `Expected a "${name}" field in the contact form.`,
+        cause: `the form shows the fields ${await listTexts(labels.locator('.s_website_form_label_content'))}`,
+        hint: 'The name is matched by the whole text of the label, case-sensitive.',
+      });
+    }
+    const target = await label.getAttribute('for');
+    const input = form.locator(`[id="${target}"]`).first();
+    const tag = await input.evaluate((element) => element.tagName.toLowerCase());
+    if (tag === 'select') await input.selectOption({ label: value });
+    else await input.fill(value);
+  }
+});
 
 /**
- * Navigate to the core login screen at `/web/login`. This template is shared
- * by every Odoo installation (Community and Enterprise alike): it ships in
- * the base "web" module, not the Website builder.
+ * Submit the contact form with its button (`.s_website_form_send`) and wait
+ * for the answer of the site: the confirmation, or the errors the form
+ * shows. Assert the outcome in the step that follows.
  *
- * Example #1: Given I am on the Odoo login page
- * Example #2: Given we are on the login page
- * Example #3: Given I am on the sign in page
- * Example #4: And on the Odoo sign-in page
- * Example #5: Given I am on the web/login page
+ * Example #1: When I submit the contact form
+ * Example #2: When we submit the contact form
+ * Example #3: And submit the contact us form
+ * Example #4: When I send the contact form
+ * Example #5: And we send the contact us form
  *
  */
-Given(/^(I am |we are )*on the (?:Odoo )?(?:sign[- ]?in|web\/login|login) page$/, async function (pronounCase) {
-  await navigate(this, '/web/login');
+When(/^(I |we )*(?:submit|send) the contact(?: us)? form$/, async function (pronounCase) {
+  const page = this.page;
+  const form = await requireContactForm(this);
+  const startUrl = page.url();
+  await form.locator('.s_website_form_send').first().click();
+  // The form answers in one of three ways: it redirects to its confirmation
+  // page, it shows its confirmation message in place, or it marks the fields
+  // it refuses.
+  await page.waitForFunction((url) => window.location.href !== url
+    || document.querySelector('.s_website_form_end_message:not(.d-none)')
+    || document.querySelector('.s_website_form_field.o_has_error, #s_website_form_result .text-danger, #s_website_form_result.text-danger'),
+  startUrl, { timeout: WAIT_TIMEOUT }).catch(() => {});
+  await waitForPageLoad(page, budget(this));
 });
 
 /**
- * Assert the core login form is, or is not, visible: the form posting to
- * `/web/login`, with its `#login` and `#password` fields (`addons/web`'s
- * `webclient_templates.xml`, unchanged across Odoo versions). Each part is
- * checked separately so a failure names which one is missing.
+ * Assert the site confirmed, or did not confirm, the contact form: the
+ * visitor is on the confirmation page (`/contactus-thank-you`) or the form
+ * shows its confirmation message in place (`.s_website_form_end_message`).
  *
- * Example #1: Then I should see the Odoo login form
- * Example #2: And I should see the sign in form
- * Example #3: Then we should see the login form
- * Example #4: And should not see the login form
- * Example #5: Then I should see the Odoo sign-in form
+ * Example #1: Then I should see the contact form confirmation
+ * Example #2: And we should see the contact form confirmation
+ * Example #3: Then we should see the contact us form confirmation
+ * Example #4: And I should not see the contact form confirmation
+ * Example #5: Then we should not see the contact us form confirmation
  *
  */
-Then(/^(I |we )*should( not)* see the (?:Odoo )?(?:sign[- ]?in|login) form$/, async function (pronounCase, notCase) {
-  const hint = 'The core login screen is /web/login; an authenticated session is redirected away from it to /web.';
-  await assertPresence(this.page.locator('form[action="/web/login"]'), notCase, 'the login form ("form[action=\\"/web/login\\"]")', { hint });
-  if (notCase) return;
-  await assertPresence(this.page.locator('#login'), undefined, 'the login/email field ("#login")', { hint, timeout: 5000 });
-  await assertPresence(this.page.locator('#password'), undefined, 'the password field ("#password")', { hint, timeout: 5000 });
+Then(/^(I |we )*should( not)* see the contact(?: us)? form confirmation$/, async function (pronounCase, notCase) {
+  const page = this.page;
+  const confirmed = async () => /\/contactus-thank-you(\b|$)/.test(page.url())
+    || (await page.locator('.s_website_form_end_message:visible').count()) > 0;
+  const deadline = Date.now() + SHORT_TIMEOUT;
+  let state = await confirmed();
+  while (state === Boolean(notCase) && !notCase && Date.now() < deadline) {
+    await waitForPageLoad(page, 500);
+    state = await confirmed();
+  }
+  if (state === Boolean(notCase)) {
+    const errors = await listTexts(page.locator('.s_website_form_field.o_has_error .s_website_form_label_content'));
+    throw friendly({
+      message: notCase ? 'Expected no confirmation of the contact form.' : 'Expected the confirmation of the contact form.',
+      cause: notCase ? `the page is ${page.url()}` : `the page is ${page.url()} and the form marks these fields as invalid: ${errors}`,
+      hint: 'The form confirms by redirecting to its "thank you" page or by showing a message in place; required fields are marked with "*".',
+    });
+  }
+});
+
+/**
+ * Assert the contact form shows, or does not show, an error after it was
+ * submitted: the fields it refuses are marked (`.o_has_error`) and a message
+ * appears next to the button. An optional field name checks that this field
+ * is one of the refused ones.
+ *
+ * Example #1: Then I should see a contact form error
+ * Example #2: And I should not see a contact form error
+ * Example #3: Then we should see an contact form error
+ * Example #4: And I should see a contact form error on "Email"
+ * Example #5: Then we should see a contact us form error on "Question"
+ *
+ */
+Then(/^(I |we )*should( not)* see an? contact(?: us)? form error(?: on "([^"]*)")?$/, async function (pronounCase, notCase, field) {
+  const form = await requireContactForm(this);
+  const refused = form.locator('.s_website_form_field.o_has_error');
+  const target = field
+    ? refused.filter({ has: this.page.locator('.s_website_form_label_content', { hasText: textPattern(field, { exact: true }) }) }).first()
+    : refused.first();
+  await assertPresence(target, notCase, field ? `an error on the "${field}" field of the contact form` : 'an error on the contact form (".o_has_error")', {
+    timeout: SHORT_TIMEOUT,
+    hint: `The form marks these fields as invalid: ${await listTexts(refused.locator('.s_website_form_label_content'))}. Submit the form first ("When I submit the contact form").`,
+  });
 });
 
+// ---------------------------------------------------------------------------
+// Website editor
+// ---------------------------------------------------------------------------
+
+const EDITOR_PANEL = '#oe_snippets.o_loaded';
+
 /**
- * Fill and submit the core login form with the given username/email and
- * password (`#login`, `#password`, the form's submit button), for scenarios
- * where the credentials are the subject. Requires the login screen to be
- * open already.
+ * Open a page in the website preview of the web client (`/@/<path>`), where
+ * a website editor finds the "Edit" button.
  *
- * Example #1: When I log in to Odoo as "admin" with password "secret"
- * Example #2: When we log in as "demo@example.com" with password "p@ssw0rd"
- * Example #3: And I sign in to Odoo as "admin" with password "secret"
- * Example #4: When we sign-in as "reviewer" with password "hunter2"
- * Example #5: And log in as "portal_user" with password "letmein"
+ * @param {object} world
+ * @param {string} path
+ * @returns {Promise<void>}
+ */
+async function openWebsitePreview(world, path) {
+  const page = world.page;
+  const target = `/@/${String(path || '/').replace(/^\/+/, '')}`;
+  await navigate(world, target);
+  try {
+    await page.locator('.o_website_preview iframe.o_iframe').first().waitFor({ state: 'visible', timeout: WAIT_TIMEOUT });
+  } catch (error) {
+    throw friendly({
+      message: 'Expected the website preview of the web client.',
+      cause: `the page is ${page.url()}`,
+      hint: 'The preview is shown to an internal user; log in first ("Given I am a logged in user with the "admin" user").',
+    });
+  }
+  await settle(world);
+}
+
+/**
+ * Assert the current user can, or cannot, edit the website: the website
+ * preview of the web client shows the "Edit" button
+ * (`.o_edit_website_container`) to the users of the "Restricted Editor" and
+ * "Editor and Designer" groups. With `on "<path>"` the check runs on that
+ * page; the front page otherwise.
+ *
+ * Example #1: Then I should be able to edit the website
+ * Example #2: And I should not be able to edit the website
+ * Example #3: Then we should be able to edit the website
+ * Example #4: And I should be able to edit the website on "/contactus"
+ * Example #5: Then we should not be able to edit the website on "/shop"
  *
  */
-When(/^(I |we )*(?:log in|sign[- ]?in)(?: to Odoo)? as "([^"]*)?" with password "([^"]*)?"$/, async function (pronounCase, username, password) {
-  await submitLogin(this, username, password);
+Then(/^(I |we )*should( not)* be able to edit the website(?: on "([^"]*)")?$/, async function (pronounCase, notCase, path) {
+  await openWebsitePreview(this, path || '/');
+  await assertPresence(this.page.locator('.o_menu_systray .o_edit_website_container a').first(), notCase, 'the "Edit" button of the website preview (".o_edit_website_container")', {
+    timeout: SHORT_TIMEOUT,
+    hint: 'The button is shown to the users of the website editor groups (Website: Restricted Editor, Editor and Designer).',
+  });
 });
 
 /**
- * Log in as a user configured in cucumber.js `worldParameters.users`, so no
- * password appears in a feature file. Each key names one account:
- * `{ admin: { username: 'admin', password: process.env.ODOO_ADMIN_PASSWORD } }`.
- * The login screen is opened first, so this step works from any page.
+ * Open the website editor on a page: the page is shown in the website
+ * preview of the web client, the "Edit" button is clicked and the step waits
+ * for the editor panel with its building blocks (`#oe_snippets`). With `on
+ * "<path>"` the editor opens on that page; on the front page otherwise.
  *
- * Example #1: Given I am a logged in user with the "admin" user
- * Example #2: Given I am a logged in user with the username "admin"
- * Example #3: Given we are a logged in user with "portal"
- * Example #4: And a logged in user with the "admin" user
- * Example #5: Given I am a logged in user with the username "demo" user
+ * Example #1: When I open the website editor
+ * Example #2: When we open the website editor
+ * Example #3: And open the website editor
+ * Example #4: When I open the website editor on "/contactus"
+ * Example #5: And we open the website editor on "/shop"
  *
  */
-Given(/^(I am |we are )*a logged in user with( the)*( username)* "([^"]*)?"( user)*$/, async function (pronounCase, theCase, usernameCase, userKey, userCase) {
-  const users = (this.parameters && this.parameters.users) || {};
-  const entry = users[userKey];
-  if (!entry) {
+When(/^(I |we )*open the website editor(?: on "([^"]*)")?$/, async function (pronounCase, path) {
+  const page = this.page;
+  await openWebsitePreview(this, path || '/');
+  const edit = page.locator('.o_menu_systray .o_edit_website_container a').first();
+  try {
+    await edit.click({ timeout: SHORT_TIMEOUT });
+  } catch (error) {
     throw friendly({
-      message: `User "${userKey}" is not configured.`,
-      hint: `Add it to worldParameters.users in cucumber.js. Known users: ${Object.keys(users).join(', ') || '(none)'}.`,
+      action: 'click the "Edit" button of the website preview',
+      target: '.o_edit_website_container',
+      cause: error,
+      hint: 'The button is shown to the users of the website editor groups (Website: Restricted Editor, Editor and Designer).',
     });
   }
-  const username = entry.username || userKey;
-  const password = typeof entry === 'string' ? entry : entry.password;
-  if (!password) {
+  try {
+    await page.locator(EDITOR_PANEL).first().waitFor({ state: 'visible', timeout: WAIT_TIMEOUT });
+  } catch (error) {
     throw friendly({
-      message: `User "${userKey}" has no password configured.`,
-      hint: `Set worldParameters.users.${userKey}.password in cucumber.js, ideally from an environment variable.`,
+      message: 'Expected the website editor to open.',
+      cause: error,
+      hint: 'The editor loads its building blocks before it is ready; an error dialog on screen names what went wrong.',
     });
   }
-  // Start from a fresh session: an authenticated visitor is redirected away
-  // from /web/login and would never see the form.
-  await this.context.clearCookies();
-  await navigate(this, '/web/login');
-  await submitLogin(this, username, password);
+  await settle(this);
 });
 
 /**
- * End any authenticated session and land on the login screen as a visitor:
- * cookies and web storage are cleared, `/web/login` is opened and the core
- * login form is confirmed. Use it at the start of a scenario that must run
- * anonymously after an earlier one logged in.
+ * Assert the website editor is, or is not, open: its panel with the
+ * building blocks and the "Save" and "Discard" buttons (`#oe_snippets`).
  *
- * Example #1: Given I am not logged in
- * Example #2: Given we are not logged in
- * Example #3: And I am not logged in
- * Example #4: Given not logged in
- * Example #5: But I am not logged in
+ * Example #1: Then I should see the website editor
+ * Example #2: And I should not see the website editor
+ * Example #3: Then we should see the website editor
+ * Example #4: And I should see the editor of the website
+ * Example #5: Then we should not see the editor of the website
  *
  */
-Given(/^(I am |we are )*not logged in$/, async function (pronounCase) {
-  await this.context.clearCookies();
-  try {
-    await this.page.evaluate(() => {
-      try { localStorage.clear(); } catch { /* storage may be unavailable */ }
-      try { sessionStorage.clear(); } catch { /* storage may be unavailable */ }
-    });
-  } catch { /* the page may not be on a real URL yet */ }
-  await navigate(this, '/web/login');
-  await assertPresence(this.page.locator('form[action="/web/login"]'), undefined, 'the login form (the session should be anonymous)', {
-    timeout: 10000,
-    hint: 'An authenticated session is redirected from /web/login to /web; clearing the cookies should have ended it.',
+Then(/^(I |we )*should( not)* see the (?:website editor|editor of the website)$/, async function (pronounCase, notCase) {
+  await assertPresence(this.page.locator(EDITOR_PANEL).first(), notCase, 'the website editor ("#oe_snippets")', {
+    timeout: SHORT_TIMEOUT,
+    hint: 'Open the editor first ("When I open the website editor"); saving or discarding closes it.',
+  });
+  if (notCase) return;
+  await assertPresence(this.page.locator('.o_we_website_top_actions button[data-action="save"]').first(), undefined, 'the "Save" button of the website editor', {
+    timeout: SHORT_TIMEOUT,
+    hint: 'The button sits at the top of the editor panel.',
+  });
+});
+
+/**
+ * Assert the website editor offers, or does not offer, a building block, by
+ * its name in the "Blocks" tab of the editor panel (`#oe_snippets
+ * .oe_snippet`).
+ *
+ * Example #1: Then I should see the "Text" building block
+ * Example #2: And I should see the "Banner" building block
+ * Example #3: Then we should see the "Text - Image" building block
+ * Example #4: And I should not see the "No Such Block" building block
+ * Example #5: Then we should not see the "Countdown" website building block
+ *
+ */
+Then(/^(I |we )*should( not)* see the "([^"]*)" (?:website )?building block$/, async function (pronounCase, notCase, name) {
+  const page = this.page;
+  await assertPresence(page.locator(EDITOR_PANEL).first(), undefined, 'the website editor ("#oe_snippets")', {
+    timeout: SHORT_TIMEOUT,
+    hint: 'Open the editor first ("When I open the website editor").',
   });
+  const blocks = page.locator('#oe_snippets .oe_snippet[name]');
+  const names = await blocks.evaluateAll((elements) => [...new Set(elements.map((element) => element.getAttribute('name')).filter(Boolean))]);
+  const offered = names.includes(name);
+  if (offered === Boolean(notCase)) {
+    throw friendly({
+      message: notCase ? `Expected no "${name}" building block in the website editor.` : `Expected a "${name}" building block in the website editor.`,
+      cause: `the editor offers ${names.slice(0, 40).map((block) => `"${block}"`).join(', ') || '(none)'}`,
+      hint: 'A building block is named as in the "Blocks" tab of the editor; the installed apps and the theme add their own.',
+    });
+  }
 });
 
 /**
- * Assert the login screen is, or is not, showing an authentication error,
- * optionally containing a text. Matches the `.alert-danger` message the login
- * controller renders on invalid credentials.
+ * Leave the website editor with its "Save" or its "Discard" button and wait
+ * for the editor to close. Discarding changes asks for a confirmation, which
+ * the step gives.
  *
- * Example #1: Then I should see an Odoo login error
- * Example #2: And I should see a sign in error
- * Example #3: Then we should see a login error "Wrong login/password"
- * Example #4: And should not see a login error
- * Example #5: Then I should see an authentication error message
+ * Example #1: When I save the website editor
+ * Example #2: When we discard the website editor
+ * Example #3: And save the website editor
+ * Example #4: When I discard the website editor
+ * Example #5: And discard the website editor
  *
  */
-Then(/^(I |we )*should( not)* see an? (?:Odoo )?(?:login|sign[- ]?in|authentication) error(?: message)?(?: "([^"]*)")?$/, async function (pronounCase, notCase, expectedText) {
-  const error = this.page.locator('form[action="/web/login"] .alert-danger, .alert-danger').first();
-  const hint = 'The core login screen renders the notice inside the form after a wrong login or password.';
-  if (notCase && !expectedText) {
-    await assertPresence(error, notCase, 'a login error message (".alert-danger")', { hint });
-    return;
+When(/^(I |we )*(save|discard) the website editor$/, async function (pronounCase, action) {
+  const page = this.page;
+  const button = page.locator(`.o_we_website_top_actions button[data-action="${action === 'save' ? 'save' : 'cancel'}"]`).first();
+  try {
+    await button.click({ timeout: SHORT_TIMEOUT });
+  } catch (error) {
+    throw friendly({
+      action: `click the "${action === 'save' ? 'Save' : 'Discard'}" button of the website editor`,
+      target: '.o_we_website_top_actions',
+      cause: error,
+      hint: 'Open the editor first ("When I open the website editor").',
+    });
   }
-  await assertPresence(error, undefined, 'a login error message (".alert-danger")', { hint });
-  if (expectedText) {
-    await assertText(error, expectedText, notCase, 'the login error message', { hint });
+  // Discarding real changes opens a confirmation.
+  const confirm = page.locator('.modal[role="dialog"]:visible .modal-footer .btn-primary').first();
+  await Promise.race([
+    page.locator(EDITOR_PANEL).first().waitFor({ state: 'hidden', timeout: WAIT_TIMEOUT }),
+    confirm.waitFor({ state: 'visible', timeout: WAIT_TIMEOUT }),
+  ]).catch(() => {});
+  if (await confirm.isVisible().catch(() => false)) await confirm.click();
+  try {
+    await page.locator(EDITOR_PANEL).first().waitFor({ state: 'hidden', timeout: WAIT_TIMEOUT });
+  } catch (error) {
+    throw friendly({
+      message: 'Expected the website editor to close.',
+      cause: error,
+      hint: 'A dialog on screen names what kept the editor open.',
+    });
   }
+  await settle(this);
 });
 
 // ---------------------------------------------------------------------------
@@ -709,14 +836,14 @@ Then(/^(I |we )*should( not)* see an? (?:Odoo )?(?:login|sign[- ]?in|authenticat
  * the page heading for "404" (rendered by `addons/http_routing`'s
  * `http_routing.404` template on every Odoo site).
  *
- * Example #1: Then I should be on the Odoo 404 page
+ * Example #1: Then I should be on the 404 page
  * Example #2: And I should be on the not found page
- * Example #3: Then we should be on the Odoo 404 page
+ * Example #3: Then we should be on the 404 page
  * Example #4: And should not be on the 404 page
- * Example #5: Then I should land on the Odoo 404 page
+ * Example #5: Then I should land on the 404 page
  *
  */
-Then(/^(I |we )*should( not)* (?:be on|land on) the (?:Odoo )?(?:404|not found|page not found) page$/, async function (pronounCase, notCase) {
+Then(/^(I |we )*should( not)* (?:be on|land on) the (?:404|not found|page not found) page$/, async function (pronounCase, notCase) {
   await assertPresence(this.page.locator('h1', { hasText: '404' }).first(), notCase, 'the 404 template (an <h1> containing "404")', {
     attached: true,
     hint: 'A site with a custom 404 page keeps the status code but may drop the "404" heading; assert the status code with the response step instead.',