From 632fd6c6cfadf6cfee3546fa246fb44c389e287e Mon Sep 17 00:00:00 2001
From: Rajab Natshah <rajabn@gmail.com>
Date: Tue, 7 May 2024 18:34:48 +0300
Subject: [PATCH] Issue #3442343: Changed the Automated Functional Acceptance
 Testing for Varbase profile to work with an enabled Varbase Demo content and
 media assets

---
 tests/features/bootstrap/VarbaseContext.php   |  92 ++++++++-----
 .../01-00-varbase-welcome-tour.feature        |  10 +-
 ...d-their-usage-list-page-for-admins.feature |   3 +-
 ...cks-for-the-interface-and-services.feature |   2 +-
 .../03-06-responsive-preview-devices.feature  | 125 +++++++++---------
 ...add-any-paragraph-type-to-the-page.feature |   2 +-
 ...ragraphs_text-and-image-paragraphs.feature |   2 +-
 .../04-09-homepage-permissions.feature        |  28 ++--
 ...ueue-using-entityqueue-form-widget.feature |   2 +-
 ...embed-existing-media-image-library.feature |   2 +-
 10 files changed, 148 insertions(+), 120 deletions(-)

diff --git a/tests/features/bootstrap/VarbaseContext.php b/tests/features/bootstrap/VarbaseContext.php
index dae0078a..aa1373e2 100644
--- a/tests/features/bootstrap/VarbaseContext.php
+++ b/tests/features/bootstrap/VarbaseContext.php
@@ -4,7 +4,6 @@
 use Drupal\DrupalExtension\Context\RawDrupalContext;
 use Behat\Behat\Context\SnippetAcceptingContext;
 use Behat\Mink\Element\Element;
-use Symfony\Component\CssSelector\CssSelectorConverter;
 
 /**
  * Defines application features from the specific context.
@@ -332,7 +331,7 @@ public function iClickButtonUnderTheEditorMediaBrowser($text) {
     $this->getSession()->switchToIFrame('entity_browser_iframe_editor_media_browser');
 
     // Find the Tab by txt.
-    $element = $this->getSession()->getPage()->find('xpath', "//*[contains(@class, 'button') and text() = '{$text}']");
+    $element = $this->getSession()->getPage()->find('xpath', "//*[contains(@class, 'button') and text() = '" . $text ."']");
 
     if (empty($element)) {
       throw new \Exception('The editor media browser dose not have [ ' . $text . ' ] button.');
@@ -359,7 +358,7 @@ public function iClickOnTheTabUnderTheMediaBrowser($text) {
     $this->getSession()->switchToIFrame('entity_browser_iframe_editor_media_browser');
 
     // Find the Tab by txt.
-    $element = $this->getSession()->getPage()->find('xpath', "//*[contains(@class, 'ui-tabs-anchor') and text() = '{$text}']");
+    $element = $this->getSession()->getPage()->find('xpath', "//*[contains(@class, 'ui-tabs-anchor') and text() = '" . $text . "']");
 
     if (empty($element)) {
       throw new \Exception('The editor media browser dose not have [ ' . $text . ' ] tab.');
@@ -385,7 +384,7 @@ public function iSelectTheFileUnderTheEditorMediaBrowser($text) {
     $this->getSession()->switchToIFrame('entity_browser_iframe_editor_media_browser');
 
     // Find the file by text.
-    $element = $this->getSession()->getPage()->find('xpath', "//div[contains(@class, 'media-item') and contains(@title, '{$text}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//div[contains(@class, 'media-item') and contains(@title, '" . $text ."')]");
 
     if (empty($element)) {
       throw new \Exception('The editor media browser dose not have [ ' . $text . ' ] file.');
@@ -398,6 +397,10 @@ public function iSelectTheFileUnderTheEditorMediaBrowser($text) {
   }
 
   /**
+   * Click on the first delete button.
+   *
+   * Varbase Context #varbase.
+   *
    * @When I click the delete button
    */
   public function iClickTheDeleteButton() {
@@ -411,15 +414,34 @@ public function iClickTheDeleteButton() {
     $element->click();
   }
 
+  /**
+   * Click on the first Next button in the tour.
+   *
+   * Varbase Context #varbase.
+   *
+   * @When I click next button in tour
+   */
+  public function iClickNextInTour() {
+    // Find the next button in tour by text.
+    $element = $this->getSession()->getPage()->find('xpath', "//footer[contains(@class, 'shepherd-footer')]//button[text()='Next']");
+
+    if (empty($element)) {
+      throw new \Exception('The Next action button in the tour is not found.');
+    }
+
+    $this->getSession()->executeScript('document.querySelector("body > div.drupal-tour.shepherd-enabled > div.shepherd-content > footer > button").click();');
+
+  }
+
   /**
    * @Then :text should be in the breadcrumb
    */
   public function shouldBeInTheBreadcrumb($text) {
     // Find a text in the breadcrumb.
-    $element = $this->getSession()->getPage()->find('xpath', "//ol[contains(@class, 'breadcrumb')]//*[text()='{$text}']");
+    $element = $this->getSession()->getPage()->find('xpath', "//ol[contains(@class, 'breadcrumb')]//*[text()='" . $text ."']");
 
     if (empty($element)) {
-      throw new \Exception('The {$text} not found in the breadcrumb');
+      throw new \Exception('The ' . $text . ' not found in the breadcrumb');
     }
   }
 
@@ -454,7 +476,7 @@ public function iFillInFieldUnderTheEditorMediaBrowser($field, $value) {
    * Varbase Context #varbase.
    *
    * Example 1: Then I should see "this text" under editor media browser
-   * Example 2: Then I should see "this text" under the editormedia browser modal window.
+   * Example 2: Then I should see "this text" under the editor media browser modal window.
    *
    * @Then /^I should see "([^"]*)" under (?:|the )editor media browser(?:| modal window)$/
    */
@@ -488,7 +510,7 @@ public function iShouldSeeImageWithTheTitleTextUnderTheEditorMediaBrowser($title
     $this->getSession()->switchToIFrame('entity_browser_iframe_editor_media_browser');
 
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '{$titleText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '" . $titleText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The editor media browser dose not have an image with the [ ' . $titleText . ' ] title text.');
@@ -643,7 +665,7 @@ public function moveFocusToTheRichTextEditorField($selectedField) {
     if (empty($fieldId)) {
       throw new \Exception('Could not find an id for the rich text editor field : ' . $selectedField);
     }
-    $this->getSession()->getDriver()->evaluateScript("Drupal.CKEditor5Instances.get(document.getElementById(\"$fieldId\").dataset[\"ckeditor5Id\"]).editing.view.focus()");
+    $this->getSession()->getDriver()->evaluateScript("Drupal.CKEditor5Instances.get(document.getElementById(\"" . $fieldId ."\").dataset[\"ckeditor5Id\"]).editing.view.focus()");
   }
 
   /**
@@ -689,7 +711,7 @@ public function iClickOnTheSaveButtonInTheEditor($selectedField) {
     $element = $this->getSession()->getPage()->find('css', "button.ck.ck-button.ck-off.ck-button-save");
 
     if (empty($element)) {
-      throw new \Exception("No save button for the {$selectedField} rich text editor field.");
+      throw new \Exception("No save button for the " . $selectedField . " rich text editor field.");
     }
 
     // Click the save button.
@@ -733,7 +755,7 @@ public function iAddABasicSectionAtTheEndOfLayout($cols = "1 Col") {
    * @When I save the section
    */
   public function iSaveTheSection() {
-    $save = $this->getSession()->getPage()->find('xpath', "//input[contains(@value, 'Add section')]");
+    $save = $this->getSession()->getPage()->find('xpath', "//*[contains(@value, 'Add section')]");
     if (is_null($save)) {
       throw new \Exception('The "Add section" button was not found or not visible');
     }
@@ -1356,7 +1378,7 @@ public function iAddABlock($block) {
    */
   public function iShouldSeeImageWithTheTitleText($titleText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '{$titleText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '" . $titleText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $titleText . ' ] title text.');
@@ -1374,7 +1396,7 @@ public function iShouldSeeImageWithTheTitleText($titleText) {
    */
   public function iShouldSeeImageWithTheAltText($altText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '{$altText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '" . $altText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $altText . ' ] Alt Text.');
@@ -1392,7 +1414,7 @@ public function iShouldSeeImageWithTheAltText($altText) {
    */
   public function iDoubleClickOnTheImageWithTheTitleText($titleText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '{$titleText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '" . $titleText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $titleText . ' ] title text.');
@@ -1413,7 +1435,7 @@ public function iDoubleClickOnTheImageWithTheTitleText($titleText) {
    */
   public function iClickOnTheImageWithTheTitleText($titleText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '{$titleText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '" . $titleText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $titleText . ' ] title text.');
@@ -1434,7 +1456,7 @@ public function iClickOnTheImageWithTheTitleText($titleText) {
    */
   public function iDoubleClickOnTheImageWithTheAltText($altText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '{$altText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '" . $altText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $altText . ' ] alt text.');
@@ -1455,7 +1477,7 @@ public function iDoubleClickOnTheImageWithTheAltText($altText) {
    */
   public function iClickOnTheImageWithTheAltText($altText) {
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '{$altText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@title, '" . $altText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $altText . ' ] title text.');
@@ -1486,7 +1508,7 @@ public function iShouldSeeImageWithTheTitleTextInTheRichTextEditorField($titleTe
     $this->getSession()->executeScript("return Drupal.CKEditor5Instances.get(document.getElementById(\"$fieldId\").dataset[\"ckeditor5Id\"]).getData();");
 
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->findAll('xpath', "//img[contains(@title, '{$titleText}')]");
+    $element = $this->getSession()->getPage()->findAll('xpath', "//img[contains(@title, '" . $titleText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $titleText . ' ] title text under [ ' . $locator . ' ].');
@@ -1509,7 +1531,7 @@ public function iShouldSeeImageWithTheAltTextUnder($altText, $filedName) {
     $this->getSession()->switchToIFrame($iFreamID);
 
     // Find an image with the title.
-    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '{$altText}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//img[contains(@alt, '" . $altText . "')]");
 
     if (empty($element)) {
       throw new \Exception('The page dose not have an image with the [ ' . $altText . ' ] Alt Text under [ ' . $filedName . ' ].');
@@ -1595,7 +1617,7 @@ public function iRightClick($selector) {
    *
    * @Then /^I should see "(?P<text>[^"]*)" in the "(?P<htmlTagName>[^"]*)" element with the "(?P<attribute>[^"]*)" attribute set to "(?P<value>[^"]*)"$/
    */
-  public function ishouldSeeTextInTheHtmlTagElement($text, $htmlTagName, $attribute, $value) {
+  public function iShouldSeeTextInTheHtmlTagElement($text, $htmlTagName, $attribute, $value) {
 
     $elements = $this->getSession()->getPage()->findAll('css', $htmlTagName);
     if (empty($elements)) {
@@ -1712,7 +1734,7 @@ public function iClickTextInTheHtmlTagElement($text, $htmlTagName, $attribute, $
       if (empty($attr)) {
         throw new \Exception(sprintf('The "%s" attribute is not present on the element "%s"', $attribute, $htmlTagName));
       }
-      if (strpos($attr, "$value") === FALSE) {
+      if (strpos($attr, (string) $value) === FALSE) {
         throw new \Exception(sprintf('The "%s" attribute does not equal "%s" on the element "%s"', $attribute, $value, $htmlTagName));
       }
     }
@@ -1733,7 +1755,7 @@ public function iClickTextInTheHtmlTagElement($text, $htmlTagName, $attribute, $
    */
   public function iShouldSeeValueInTheInputElement($text, $selector) {
 
-    $elements = $this->getSession()->getPage()->findAll('xpath', "//*[@data-drupal-selector='{$selector}']");
+    $elements = $this->getSession()->getPage()->findAll('xpath', "//*[@data-drupal-selector='" . $selector . "']");
     if (empty($elements)) {
       throw new \Exception(sprintf('The input element "%s" was not found in the page', $selector));
     }
@@ -1764,7 +1786,7 @@ public function iShouldSeeValueInTheInputElement($text, $selector) {
    */
   public function iClickValueInTheInputElement($text, $selector) {
 
-    $elements = $this->getSession()->getPage()->findAll('xpath', "//*[@data-drupal-selector='{$selector}']");
+    $elements = $this->getSession()->getPage()->findAll('xpath', "//*[@data-drupal-selector='" . $selector . "']");
     if (empty($elements)) {
       throw new \Exception(sprintf('The input element "%s" was not found in the page', $selector));
     }
@@ -1954,7 +1976,7 @@ public function iPressModifierAndKeys($modifier, $key, $field) {
 
     $elementField = $this->getSession()->getPage()->findField($field);
     if (!$elementField) {
-      throw new \Exception("Field '{$field}' not found");
+      throw new \Exception("Field '" . $field . "' not found");
     }
 
     $fieldId = $elementField->getAttribute('id');
@@ -2041,7 +2063,7 @@ public function iPressKeyboardKeyInField($key, $field) {
 
     $elementField = $this->getSession()->getPage()->findField($field);
     if (!$elementField) {
-      throw new \Exception("Field '{$field}' not found");
+      throw new \Exception("Field '" . $field . "' not found");
     }
 
     $fieldId = $elementField->getAttribute('id');
@@ -2151,7 +2173,7 @@ public function iSelectTheRadioButton($labelText) {
    * @Given /^I click on the radio label for "([^"]*)" value$/
    */
   public function iClickOnTheRadioLabelForValue($value) {
-    $radio_label = $this->getSession()->getPage()->find('xpath', "//label[contains(@for, '{$value}')]");
+    $radio_label = $this->getSession()->getPage()->find('xpath', "//label[contains(@for, '" . $value . "')]");
     if ($radio_label) {
       $radio_label->click();
     }
@@ -2325,7 +2347,7 @@ public function iScrollToBottomOf($selector) {
    * @Then I should see the :label checkbox unchecked
    */
   public function iShouldSeeTheCheckboxUnchecked($label) {
-    $isChecked = (bool) $this->getSession()->getDriver()->isChecked("//label[contains(text(), '${label}')]/preceding-sibling::input");
+    $isChecked = (bool) $this->getSession()->getDriver()->isChecked("//label[contains(text(), '" . $label . "')]/preceding-sibling::input");
     if ($isChecked) {
       throw new \Exception("The '" . $label . "' checkbox is checked");
     } 
@@ -2342,7 +2364,7 @@ public function iShouldSeeTheCheckboxUnchecked($label) {
    * @Then I should see the :label checkbox checked
    */
   public function iShouldSeeTheCheckboxChecked($label) {
-    $isChecked = (bool) $this->getSession()->getDriver()->isChecked("//label[contains(text(), '${label}')]/preceding-sibling::input");
+    $isChecked = (bool) $this->getSession()->getDriver()->isChecked("//label[contains(text(), '" . $label . "')]/preceding-sibling::input");
     if (!$isChecked) {
       throw new \Exception("The '" . $label . "' checkbox is unchecked");
     } 
@@ -2418,7 +2440,7 @@ public function resizeTheCurrentWindowToWidthAndHeight($width, $height) {
   }
 
   /**
-   * Switch to an ifram by its id.
+   * Switch to an iframe by its id.
    *
    * Varbase Context #varbase.
    *
@@ -2432,11 +2454,11 @@ public function iSwitchToIframe($iFrameLocator) {
   }
 
   /**
-   * Switch to the main frame or the parent ifram.
+   * Switch to the main frame or the parent frame.
    *
    * Varbase Context #varbase.
    *
-   * Example #1: When I switch to main fram
+   * Example #1: When I switch to main frame
    * Example #2: When I switch to parent
    *
    * @When /^(?:|I )switch to main frame$/
@@ -2464,7 +2486,7 @@ public function iSwitchToParent() {
    *   Attribute value for the first matching element.
    */
   private function getAttributeByOtherAttributeValue($attributeName, $otherAttributeName, $otherAttributeValue, $htmlTagName = "*") {
-    $element = $this->getSession()->getPage()->find('xpath', "//{$htmlTagName}[contains(@{$otherAttributeName}, '{$otherAttributeValue}')]");
+    $element = $this->getSession()->getPage()->find('xpath', "//" . $htmlTagName . "[contains(@" . $otherAttributeName . ", '" . $otherAttributeValue . "')]");
     return $element->getAttribute($attributeName);
   }
 
@@ -2523,7 +2545,7 @@ public function getEntityRow(Element $element, $search) {
    */
   public function iShouldSeetheOperationForTheEntity($operation, $entity) {
     $row = $this->getEntityRow($this->getSession()->getPage(), $entity);
-    $operation_element = $row->find('xpath', "//*[contains(@headers, 'view-operations-table-column')]//*[text()='{$operation}']");
+    $operation_element = $row->find('xpath', "//*[contains(@headers, 'view-operations-table-column')]//*[text()='" . $operation . "']");
     if (empty($operation_element)) {
       throw new \Exception(sprintf('Found an entity containing "%s", but it did not have the operation "%s".', $entity, $operation));
     }
@@ -2544,7 +2566,7 @@ public function iShouldSeetheOperationForTheEntity($operation, $entity) {
    */
   public function iShouldNotSeetheOperationForTheEntity($operation, $entity) {
     $row = $this->getEntityRow($this->getSession()->getPage(), $entity);
-    $operation_element = $row->find('xpath', "//*[contains(@headers, 'view-operations-table-column')]//*[text()='{$operation}']");
+    $operation_element = $row->find('xpath', "//*[contains(@headers, 'view-operations-table-column')]//*[text()='" . $operation . "']");
     if (!empty($operation_element)) {
       throw new \Exception(sprintf('Found an entity containing "%s", but it have the operation "%s".', $entity, $operation));
     }
@@ -2633,7 +2655,7 @@ public function iCloseTheAccessibilityChecker() {
       throw new \Exception('The Accessibility Checker was not found in the page');
     }
 
-    $this->getSession()->executeScript('document.querySelector("body > ed11y-element-panel").shadowRoot.querySelector("#toggle").click();');
+    $this->getSession()->executeScript('document.querySelector("body > ed11y-element-panel").shadowRoot.querySelector("#ed11y-toggle").click();');
   }
 
   /**
diff --git a/tests/features/varbase/01-website-base-requirements/01-00-varbase-welcome-tour.feature b/tests/features/varbase/01-website-base-requirements/01-00-varbase-welcome-tour.feature
index 7d1536a9..2a0c9d20 100644
--- a/tests/features/varbase/01-website-base-requirements/01-00-varbase-welcome-tour.feature
+++ b/tests/features/varbase/01-website-base-requirements/01-00-varbase-welcome-tour.feature
@@ -22,15 +22,15 @@ The welcome message is made possible by having Varbase Tour module
      Then I should see "Welcome to "
       And I should see "Get started"
      When I click "Get started"
-      And I wait 2 seconds
+      And I wait 6s
      Then I should see "Tour Switch"
-     When I click "Next" in the "button" element with the "class" attribute set to "button button--primary shepherd-button "
+     When I click next button in tour
      Then I should see "Editing Your Homepage Layout"
-     When I click "Next" in the "button" element with the "class" attribute set to "button button--primary shepherd-button "
+     When I click next button in tour
      Then I should see "Start Configuring Your Site Structure"
-     When I click "Next" in the "button" element with the "class" attribute set to "button button--primary shepherd-button "
+     When I click next button in tour
      Then I should see "Define Your Site Settings"
-     When I click "Next" in the "button" element with the "class" attribute set to "button button--primary shepherd-button "
+     When I click next button in tour
      Then I should see "Site Content"
 
   @javascript @local @development @staging @production
diff --git a/tests/features/varbase/03-admin-management/03-04-image-media-and-their-usage-list-page-for-admins.feature b/tests/features/varbase/03-admin-management/03-04-image-media-and-their-usage-list-page-for-admins.feature
index 7d1a4805..50191558 100644
--- a/tests/features/varbase/03-admin-management/03-04-image-media-and-their-usage-list-page-for-admins.feature
+++ b/tests/features/varbase/03-admin-management/03-04-image-media-and-their-usage-list-page-for-admins.feature
@@ -17,7 +17,7 @@ So that I will be able to manage files, see where they have been used in content
   Scenario: Check if we do have a file named Flag Earth, if not then upload the file dependently
       When I go to "/media/add/image"
        And wait
-      Then I should see "Allowed types: png gif jpg jpeg."
+      Then I should see "Allowed types: png gif jpg jpeg webp."
       When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
        And wait
        And I press the "Save" button
@@ -60,6 +60,7 @@ So that I will be able to manage files, see where they have been used in content
      When I fill in "Flag Earth after edit" for "edit-name"
       And I press the "Apply" button
       And wait
+      And I scroll to top
      Then I should see "Flag Earth after edit"
      When I click "Edit" in the "Flag Earth after edit" row
       And wait
diff --git a/tests/features/varbase/03-admin-management/03-05-json-api-admin-checks-for-the-interface-and-services.feature b/tests/features/varbase/03-admin-management/03-05-json-api-admin-checks-for-the-interface-and-services.feature
index 8d9f8aed..5073834a 100644
--- a/tests/features/varbase/03-admin-management/03-05-json-api-admin-checks-for-the-interface-and-services.feature
+++ b/tests/features/varbase/03-admin-management/03-05-json-api-admin-checks-for-the-interface-and-services.feature
@@ -58,7 +58,7 @@ So that I can use them to enable or disable API service for Varbase APIs.
      Given I am a logged in user with the "Site admin" user
       When I go to "/media/add/image"
        And wait
-      Then I should see "Allowed types: png gif jpg jpeg."
+      Then I should see "Allowed types: png gif jpg jpeg webp."
       When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
        And wait
        And I press the "Save" button
diff --git a/tests/features/varbase/03-admin-management/03-06-responsive-preview-devices.feature b/tests/features/varbase/03-admin-management/03-06-responsive-preview-devices.feature
index 0d42417b..6a77726b 100644
--- a/tests/features/varbase/03-admin-management/03-06-responsive-preview-devices.feature
+++ b/tests/features/varbase/03-admin-management/03-06-responsive-preview-devices.feature
@@ -27,22 +27,23 @@ So that I can make sure that the site looks good in small and medium devices too
      Then I should see "Build Your Site Using Varbase!"
       And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
      When I press "Preview page layout"
-     Then I should see "iPhone XS"
-      And I should see "iPhone XS Max"
-      And I should see "Galaxy S9"
+     Then I should see "iPhone 15"
+      And I should see "iPhone 15 Pro Max"
+      And I should see "Galaxy Tab S9 Ultra"
       And I should see "iPad Pro"
-      And I should see "Galaxy Tab S4"
+      And I should see "Samsung Galaxy S23 Ultra"
+      And I should see "Pixel 7"
       And I should not see "Configure devices"
-     When I press "iPhone XS"
-     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "iPhone XS Max"
-     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy S9"
-     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15"
+     Then I should see "iPhone 15" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15 Pro Max"
+     Then I should see "iPhone 15 Pro Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
      When I press "iPad Pro"
      Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy Tab S4"
-     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Samsung Galaxy S23 Ultra"
+     Then I should see "Samsung Galaxy S23 Ultra" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Pixel 7"
+     Then I should see "Pixel 7" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
 
   @javascript @check @local @development @staging @production
   Scenario: Check that Content Admin users can access the responsive preview devices
@@ -52,22 +53,23 @@ So that I can make sure that the site looks good in small and medium devices too
      Then I should see "Build Your Site Using Varbase!"
       And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
      When I press "Preview page layout"
-     Then I should see "iPhone XS"
-      And I should see "iPhone XS Max"
-      And I should see "Galaxy S9"
+     Then I should see "iPhone 15"
+      And I should see "iPhone 15 Pro Max"
+      And I should see "Galaxy Tab S9 Ultra"
       And I should see "iPad Pro"
-      And I should see "Galaxy Tab S4"
+      And I should see "Samsung Galaxy S23 Ultra"
+      And I should see "Pixel 7"
       And I should not see "Configure devices"
-     When I press "iPhone XS"
-     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "iPhone XS Max"
-     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy S9"
-     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15"
+     Then I should see "iPhone 15" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15 Pro Max"
+     Then I should see "iPhone 15 Pro Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
      When I press "iPad Pro"
      Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy Tab S4"
-     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Samsung Galaxy S23 Ultra"
+     Then I should see "Samsung Galaxy S23 Ultra" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Pixel 7"
+     Then I should see "Pixel 7" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
 
   @javascript @check @local @development @staging @production
   Scenario: Check that SEO Admin users can access the responsive preview devices
@@ -77,22 +79,23 @@ So that I can make sure that the site looks good in small and medium devices too
      Then I should see "Build Your Site Using Varbase!"
       And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
      When I press "Preview page layout"
-     Then I should see "iPhone XS"
-      And I should see "iPhone XS Max"
-      And I should see "Galaxy S9"
+     Then I should see "iPhone 15"
+      And I should see "iPhone 15 Pro Max"
+      And I should see "Galaxy Tab S9 Ultra"
       And I should see "iPad Pro"
-      And I should see "Galaxy Tab S4"
+      And I should see "Samsung Galaxy S23 Ultra"
+      And I should see "Pixel 7"
       And I should not see "Configure devices"
-     When I press "iPhone XS"
-     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "iPhone XS Max"
-     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy S9"
-     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15"
+     Then I should see "iPhone 15" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15 Pro Max"
+     Then I should see "iPhone 15 Pro Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
      When I press "iPad Pro"
      Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy Tab S4"
-     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Samsung Galaxy S23 Ultra"
+     Then I should see "Samsung Galaxy S23 Ultra" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Pixel 7"
+     Then I should see "Pixel 7" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
 
   @javascript @check @local @development @staging @production
   Scenario: Check that Site Admin users can access the responsive preview devices
@@ -102,22 +105,23 @@ So that I can make sure that the site looks good in small and medium devices too
      Then I should see "Build Your Site Using Varbase!"
       And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
      When I press "Preview page layout"
-     Then I should see "iPhone XS"
-      And I should see "iPhone XS Max"
-      And I should see "Galaxy S9"
+     Then I should see "iPhone 15"
+      And I should see "iPhone 15 Pro Max"
+      And I should see "Galaxy Tab S9 Ultra"
       And I should see "iPad Pro"
-      And I should see "Galaxy Tab S4"
+      And I should see "Samsung Galaxy S23 Ultra"
+      And I should see "Pixel 7"
       And I should not see "Configure devices"
-     When I press "iPhone XS"
-     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "iPhone XS Max"
-     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy S9"
-     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15"
+     Then I should see "iPhone 15" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15 Pro Max"
+     Then I should see "iPhone 15 Pro Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
      When I press "iPad Pro"
      Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy Tab S4"
-     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Samsung Galaxy S23 Ultra"
+     Then I should see "Samsung Galaxy S23 Ultra" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Pixel 7"
+     Then I should see "Pixel 7" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
 
   @javascript @check @local @development @staging @production
   Scenario: Check that user Number 1 can access the responsive preview devices and configure devices
@@ -127,19 +131,20 @@ So that I can make sure that the site looks good in small and medium devices too
      Then I should see "Build Your Site Using Varbase!"
       And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
      When I press "Preview page layout"
-     Then I should see "iPhone XS"
-      And I should see "iPhone XS Max"
-      And I should see "Galaxy S9"
+     Then I should see "iPhone 15"
+      And I should see "iPhone 15 Pro Max"
+      And I should see "Galaxy Tab S9 Ultra"
       And I should see "iPad Pro"
-      And I should see "Galaxy Tab S4"
+      And I should see "Samsung Galaxy S23 Ultra"
+      And I should see "Pixel 7"
       And I should see "Configure devices"
-     When I press "iPhone XS"
-     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "iPhone XS Max"
-     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy S9"
-     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15"
+     Then I should see "iPhone 15" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "iPhone 15 Pro Max"
+     Then I should see "iPhone 15 Pro Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
      When I press "iPad Pro"
      Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
-     When I press "Galaxy Tab S4"
-     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Samsung Galaxy S23 Ultra"
+     Then I should see "Samsung Galaxy S23 Ultra" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
+     When I press "Pixel 7"
+     Then I should see "Pixel 7" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
diff --git a/tests/features/varbase/04-content-structure/04-03-landing-page-paragraphs_add-any-paragraph-type-to-the-page.feature b/tests/features/varbase/04-content-structure/04-03-landing-page-paragraphs_add-any-paragraph-type-to-the-page.feature
index 197fd057..f18e0ebc 100644
--- a/tests/features/varbase/04-content-structure/04-03-landing-page-paragraphs_add-any-paragraph-type-to-the-page.feature
+++ b/tests/features/varbase/04-content-structure/04-03-landing-page-paragraphs_add-any-paragraph-type-to-the-page.feature
@@ -8,7 +8,7 @@ So that the Landing page (Paragraphs) will show up having paragrpahs of differen
      Given I am a logged in user with the "Site admin" user
       When I go to "/media/add/image"
        And wait
-      Then I should see "Allowed types: png gif jpg jpeg."
+      Then I should see "Allowed types: png gif jpg jpeg webp."
       When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
        And wait
        And I press the "Save" button
diff --git a/tests/features/varbase/04-content-structure/04-04-landing-page-paragraphs_text-and-image-paragraphs.feature b/tests/features/varbase/04-content-structure/04-04-landing-page-paragraphs_text-and-image-paragraphs.feature
index 50ec65dd..019bea1e 100644
--- a/tests/features/varbase/04-content-structure/04-04-landing-page-paragraphs_text-and-image-paragraphs.feature
+++ b/tests/features/varbase/04-content-structure/04-04-landing-page-paragraphs_text-and-image-paragraphs.feature
@@ -8,7 +8,7 @@
   #    Given I am a logged in user with the "Site admin" user
   #     When I go to "/media/add/image"
   #      And wait
-  #     Then I should see "Allowed types: png gif jpg jpeg."
+  #     Then I should see "Allowed types: png gif jpg jpeg webp."
   #     When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
   #      And wait
   #      And I press the "Save" button
diff --git a/tests/features/varbase/04-content-structure/04-09-homepage-permissions.feature b/tests/features/varbase/04-content-structure/04-09-homepage-permissions.feature
index dfd35d71..9e0952d0 100644
--- a/tests/features/varbase/04-content-structure/04-09-homepage-permissions.feature
+++ b/tests/features/varbase/04-content-structure/04-09-homepage-permissions.feature
@@ -9,7 +9,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
      When I open the moderation sidebar
       And I wait for AJAX to finish
       And I should see "Edit content"
@@ -17,7 +17,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
       And I should see "Manage display"
       And I should see "Layout"
       And I should see "Revisions"
-      And I should see "Devel"
+      And I should see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should see "Clone"
       And I should see "Translate"
 
@@ -27,13 +27,13 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
       And I should not see "Tasks"
       And I should not see "Edit content"
       And I should not see "Delete"
       And I should not see "Manage display"
       And I should not see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should not see "Clone"
       And I should not see "Translate"
 
@@ -43,13 +43,13 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
       And I should not see "Tasks"
       And I should not see "Edit content"
       And I should not see "Delete"
       And I should not see "Manage display"
       And I should not see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should not see "Clone"
       And I should not see "Translate"
 
@@ -59,7 +59,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
      When I open the moderation sidebar
       And I wait for AJAX to finish
       And I should see "Edit content"
@@ -67,7 +67,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
       And I should not see "Manage display"
       And I should see "Layout"
       And I should see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should see "Clone"
       And I should see "Translate"
 
@@ -77,7 +77,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
      When I open the moderation sidebar
       And I wait for AJAX to finish
       And I should see "Edit content"
@@ -85,7 +85,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
       And I should not see "Manage display"
       And I should see "Layout"
       And I should see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should see "Clone"
       And I should see "Translate"
 
@@ -95,14 +95,14 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
      When I open the moderation sidebar
       And I wait for AJAX to finish
       And I should see "Edit content"
       And I should not see "Delete"
       And I should not see "Manage display"
       And I should see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should not see "Clone"
       And I should see "Translate"
 
@@ -112,7 +112,7 @@ So that the homepage can be changed with permission in an easy way and be sure i
      When I go to the homepage
       And wait
      Then I should see "Build Your Site Using Varbase!"
-      And I should see "Hero Slider"
+      And I should see "Varbase; Better Than Ever"
      When I open the moderation sidebar
       And I wait for AJAX to finish
       And I should see "Edit content"
@@ -120,6 +120,6 @@ So that the homepage can be changed with permission in an easy way and be sure i
       And I should not see "Manage display"
       And I should see "Layout"
       And I should see "Revisions"
-      And I should not see "Devel"
+      And I should not see "Devel" in the "a" element with the "id" attribute set to "toolbar-item-devel"
       And I should see "Clone"
       And I should see "Translate"
diff --git a/tests/features/varbase/05-content-management/05-03-add-hero-slider-to-entityqueue-using-entityqueue-form-widget.feature b/tests/features/varbase/05-content-management/05-03-add-hero-slider-to-entityqueue-using-entityqueue-form-widget.feature
index 78b00278..96dfaf32 100644
--- a/tests/features/varbase/05-content-management/05-03-add-hero-slider-to-entityqueue-using-entityqueue-form-widget.feature
+++ b/tests/features/varbase/05-content-management/05-03-add-hero-slider-to-entityqueue-using-entityqueue-form-widget.feature
@@ -7,7 +7,7 @@ I want to be able to add and remove entities to any allowed entity queue.
     Given I am a logged in user with the "Site admin" user
      When I go to "/media/add/image"
       And wait
-     Then I should see "Allowed types: png gif jpg jpeg."
+     Then I should see "Allowed types: png gif jpg jpeg webp."
      When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
       And wait
       And I press the "Save" button
diff --git a/tests/features/varbase/05-content-management/05-05-embed-existing-media-image-library.feature b/tests/features/varbase/05-content-management/05-05-embed-existing-media-image-library.feature
index c6ab0a9b..d3d4f7d2 100644
--- a/tests/features/varbase/05-content-management/05-05-embed-existing-media-image-library.feature
+++ b/tests/features/varbase/05-content-management/05-05-embed-existing-media-image-library.feature
@@ -23,7 +23,7 @@ So that it will show up under that rich text field without having to upload the
    Scenario: Upload the  Embed Flag Earth file
       When I go to "/media/add/image"
        And wait
-      Then I should see "Allowed types: png gif jpg jpeg."
+      Then I should see "Allowed types: png gif jpg jpeg webp."
       When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
        And wait
        And I press the "Save" button