diff --git a/availability/condition/completion/tests/behat/conditional_bug.feature b/availability/condition/completion/tests/behat/conditional_bug.feature
index 1bc44584e78..419ebd01810 100644
--- a/availability/condition/completion/tests/behat/conditional_bug.feature
+++ b/availability/condition/completion/tests/behat/conditional_bug.feature
@@ -44,7 +44,7 @@ Feature: Confirm that conditions on completion no longer cause a bug
     And I click on "Activity completion" "button" in the "Add restriction..." "dialogue"
     And I set the field with xpath "//div[contains(concat(' ', normalize-space(@class), ' '), ' availability-item ')][preceding-sibling::div]//select[@name='cm']" to "Page2"
     And I press "Save and return to course"
-    And I click on "Show more" "button" in the "#section-1 .availabilityinfo" "css_element"
+    And I click on "Show more" "button" in the "TestGlossary" "core_availability > Activity availability"
     Then I should see "Not available unless:" in the ".activity.glossary" "css_element"
     And I should see "The activity Page1 is marked complete" in the ".activity.glossary" "css_element"
     And I should see "The activity Page2 is marked complete" in the ".activity.glossary" "css_element"
diff --git a/availability/tests/behat/behat_availability.php b/availability/tests/behat/behat_availability.php
new file mode 100644
index 00000000000..0a86c4e2d0c
--- /dev/null
+++ b/availability/tests/behat/behat_availability.php
@@ -0,0 +1,51 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+require_once(__DIR__ . '/../../../lib/behat/behat_base.php');
+
+/**
+ * Availability related behat steps and selectors definitions.
+ *
+ * @package    core_availability
+ * @category   test
+ * @copyright  2023 Amaia Anabitarte <amaia@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class behat_availability extends \behat_base {
+
+    /**
+     * Return the list of partial named selectors.
+     *
+     * @return array
+     */
+    public static function get_partial_named_selectors(): array {
+        return [
+            new \behat_component_named_selector(
+                'Activity availability', [<<<XPATH
+.//li[contains(concat(' ', normalize-space(@class), ' '), ' activity ')][descendant::*[contains(normalize-space(.), %locator%)]]
+//div[@data-region='availabilityinfo']
+XPATH
+                ]
+            ),
+            new \behat_component_named_selector(
+                'Section availability', [<<<XPATH
+.//li[@id = %locator%]//div[@data-region='availabilityinfo']
+XPATH
+                ]
+            ),
+        ];
+    }
+}
diff --git a/availability/tests/behat/display_availability.feature b/availability/tests/behat/display_availability.feature
index b2a5d3ed045..3ea2a02f49b 100644
--- a/availability/tests/behat/display_availability.feature
+++ b/availability/tests/behat/display_availability.feature
@@ -69,24 +69,24 @@ Feature: display_availability
     And I press "Save and return to course"
 
     # Page 1 should show in single-line format, showing the date
-    Then I should see "Available until" in the "#section-1 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-1 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-1 .availabilityinfo" "css_element"
-    And "li" "css_element" should not exist in the "#section-1 .availabilityinfo" "css_element"
-    And "Show more" "button" should not exist in the "#section-1 .availabilityinfo" "css_element"
+    Then I should see "Available until" in the "Page 1" "core_availability > Activity availability"
+    And I should see "2013" in the "Page 1" "core_availability > Activity availability"
+    And I should see "2013" in the "Page 1" "core_availability > Activity availability"
+    And "li" "css_element" should not exist in the "Page 1" "core_availability > Activity availability"
+    And "Show more" "button" should not exist in the "Page 1" "core_availability > Activity availability"
 
     # Page 2 should show in list format.
-    And "li" "css_element" should exist in the "#section-2 .availabilityinfo" "css_element"
-    And I should see "Not available unless:" in the "#section-2 .availabilityinfo" "css_element"
-    And I should see "It is before" in the "#section-2 .availabilityinfo" "css_element"
-    And I should see "hidden otherwise" in the "#section-2 .availabilityinfo" "css_element"
+    And "li" "css_element" should exist in the "Page 2" "core_availability > Activity availability"
+    And I should see "Not available unless:" in the "Page 2" "core_availability > Activity availability"
+    And I should see "It is before" in the "Page 2" "core_availability > Activity availability"
+    And I should see "hidden otherwise" in the "Page 2" "core_availability > Activity availability"
     And I click on "Show more" "button" in the "Page 2" "activity"
-    And I should see "Email address" in the "#section-2 .availabilityinfo" "css_element"
-    And I click on "Show less" "button" in the "#section-2 .availabilityinfo" "css_element"
-    And I should not see "Email address" in the "#section-2 .availabilityinfo" "css_element"
+    And I should see "Email address" in the "Page 2" "core_availability > Activity availability"
+    And I click on "Show less" "button" in the "Page 2" "core_availability > Activity availability"
+    And I should not see "Email address" in the "Page 2" "core_availability > Activity availability"
 
     # Page 3 should not have available info.
-    And "#section-3 .availabilityinfo" "css_element" should not exist
+    And "Page 3" "core_availability > Activity availability" should not exist
 
     # Change to student view.
     Given I am on the "C1" "Course" page logged in as "student1"
@@ -139,9 +139,9 @@ Feature: display_availability
     And I am on "Course 1" course homepage
 
     # Check display
-    Then I should see "Not available unless" in the "#section-1 .availabilityinfo" "css_element"
-    And I should see "Available until" in the "#section-2 .availabilityinfo" "css_element"
-    And I should see "hidden otherwise" in the "#section-2 .availabilityinfo" "css_element"
+    Then I should see "Not available unless" in the "section-1" "core_availability > Section availability"
+    And I should see "Available until" in the "section-2" "core_availability > Section availability"
+    And I should see "hidden otherwise" in the "section-2" "core_availability > Section availability"
 
     # Change to student view.
     Given I am on the "Course 1" "Course" page logged in as "student1"
@@ -153,11 +153,11 @@ Feature: display_availability
 
     # Section 1 should be visible and show info.
     And I should see "Topic 1" in the "region-main" "region"
-    And I should see "Not available unless" in the "#section-1 .availabilityinfo" "css_element"
-    And I click on "Show more" "button" in the "#section-1 .availabilityinfo" "css_element"
-    And I should see "Email address" in the "#section-1 .availabilityinfo" "css_element"
-    And I click on "Show less" "button" in the "#section-1 .availabilityinfo" "css_element"
-    And I should not see "Email address" in the "#section-1 .availabilityinfo" "css_element"
+    And I should see "Not available unless" in the "section-1" "core_availability > Section availability"
+    And I click on "Show more" "button" in the "section-1" "core_availability > Section availability"
+    And I should see "Email address" in the "section-1" "core_availability > Section availability"
+    And I click on "Show less" "button" in the "section-1" "core_availability > Section availability"
+    And I should not see "Email address" in the "section-1" "core_availability > Section availability"
 
     # Section 2 should not be available at all
     And I should not see "Topic 2" in the "region-main" "region"
diff --git a/course/format/templates/local/content/cm/availability.mustache b/course/format/templates/local/content/cm/availability.mustache
index e473f3a0b3e..633dd907c3b 100644
--- a/course/format/templates/local/content/cm/availability.mustache
+++ b/course/format/templates/local/content/cm/availability.mustache
@@ -36,7 +36,7 @@
 }}
 {{#hasmodavailability}}
     {{#info}}
-        <div class="activity-availability availabilityinfo small {{classes}}">
+        <div class="activity-availability availabilityinfo small {{classes}}" data-region="availabilityinfo">
         {{^isrestricted}}
             <span class="badge badge-pill badge-warning">{{{text}}}</span>
         {{/isrestricted}}
diff --git a/course/format/templates/local/content/section/availability.mustache b/course/format/templates/local/content/section/availability.mustache
index 6b7008fe619..8779073f179 100644
--- a/course/format/templates/local/content/section/availability.mustache
+++ b/course/format/templates/local/content/section/availability.mustache
@@ -36,7 +36,7 @@
 <div class="section_availability">
 {{#hasavailability}}
     {{#info}}
-        <div class="availabilityinfo {{classes}}">
+        <div class="availabilityinfo {{classes}}" data-region="availabilityinfo">
         {{^isrestricted}}
             <span class="badge badge-pill badge-warning">{{{text}}}</span>
         {{/isrestricted}}
diff --git a/course/tests/behat/course_collapse_sections.feature b/course/tests/behat/course_collapse_sections.feature
index 52d4df30868..d8516568237 100644
--- a/course/tests/behat/course_collapse_sections.feature
+++ b/course/tests/behat/course_collapse_sections.feature
@@ -65,8 +65,8 @@ Feature: Collapse course sections
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should see "Book 3" in the "region-main" "region"
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
+    And I should see "2013" in the "section-4" "core_availability > Section availability"
     And I should not see "Forum 4"
     And I should see "Not available" in the "#section-5" "css_element"
     And I should not see "Forum 5"
@@ -83,7 +83,7 @@ Feature: Collapse course sections
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Available until" in the "section-4" "core_availability > Section availability"
     And I click on "#collapssesection1" "css_element"
     And I click on "#collapssesection2" "css_element"
     And I click on "#collapssesection3" "css_element"
@@ -93,7 +93,7 @@ Feature: Collapse course sections
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should see "Book 3" in the "region-main" "region"
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
 
   @javascript
   Scenario: Expand/collapse sections for Weeks format.
@@ -107,8 +107,8 @@ Feature: Collapse course sections
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should see "Book 3" in the "region-main" "region"
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
+    And I should see "2013" in the "section-4" "core_availability > Section availability"
     And I should see "Forum 4"
     And I should see "Hidden from students" in the "#section-5" "css_element"
     And I should see "Forum 5"
@@ -125,7 +125,7 @@ Feature: Collapse course sections
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Available until" in the "section-4" "core_availability > Section availability"
     And I should not see "Not available" in the "#section-5" "css_element"
     And I click on "#collapssesection1" "css_element"
     And I click on "#collapssesection2" "css_element"
@@ -136,8 +136,8 @@ Feature: Collapse course sections
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should see "Book 3" in the "region-main" "region"
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
+    And I should see "2013" in the "section-4" "core_availability > Section availability"
     And I should see "Forum 4"
     And I should see "Hidden from students" in the "#section-5" "css_element"
     And I should see "Forum 5"
@@ -157,8 +157,8 @@ Feature: Collapse course sections
     Then "Topic 1" "section" should not exist
     And "Topic 3" "section" should not exist
     And I am on "Course 1" course homepage with editing mode on
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
+    And I should see "2013" in the "section-4" "core_availability > Section availability"
     And I should see "Forum 4"
     And I should see "Hidden from students" in the "#section-5" "css_element"
     And I should see "Forum 5"
@@ -179,8 +179,8 @@ Feature: Collapse course sections
     Then "1 May - 7 May" "section" should not exist
     And "15 May - 21 May" "section" should not exist
     And I am on the "Course 1" course page logged in as student1
-    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
-    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Available until" in the "section-4" "core_availability > Section availability"
+    And I should see "2013" in the "section-4" "core_availability > Section availability"
     And I should not see "Forum 4"
     And I should see "Not available" in the "#section-5" "css_element"
     And I should not see "Forum 5"
diff --git a/lib/templates/availability_info.mustache b/lib/templates/availability_info.mustache
index b1c15231724..a56f309c42a 100644
--- a/lib/templates/availability_info.mustache
+++ b/lib/templates/availability_info.mustache
@@ -52,7 +52,7 @@
     }
 }}
 {{#text}}
-<div class="availabilityinfo {{classes}}">
+<div class="availabilityinfo {{classes}}" data-region="availabilityinfo">
     {{^isrestricted}}
     <span class="badge badge-info">{{{text}}}</span>
     {{/isrestricted}}