diff --git a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--content.html.twig b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--content.html.twig
index 5097d00030..da36cc3bb9 100644
--- a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--content.html.twig
+++ b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--content.html.twig
@@ -5,46 +5,57 @@
  */
 #}
 {# A source area with a complex selector, including encoded characters. #}
-<div id="inpage-navigation-test-container" data-inpage-navigation-source-area="h3.heading,[data-test-attribute=&quot;heading&quot;]">
-
-  {# A nested source area, with a selector that overlaps partially the one above. #}
-  <div data-inpage-navigation-source-area="h3">
-    {# An element that will be picked by both selectors. First occurrence of an heading with "Details" as text. #}
+<div class="inpage-navigation-container" data-inpage-navigation-source-area="h3.heading,[data-test-attribute=&quot;heading&quot;]">
+
+  {% set build = {
+    '#theme': 'oe_theme_helper_inpage_navigation_block',
+    '#title': title|default('Page contents'),
+    '#attached': {
+      'library': [
+        'oe_theme/inpage_navigation'
+      ]
+    }
+  } %}
+  {{ build }}
+  <div id="inpage-navigation-test-container">
+    {# A nested source area, with a selector that overlaps partially the one above. #}
+    <div data-inpage-navigation-source-area="h3">
+      {# An element that will be picked by both selectors. First occurrence of an heading with "Details" as text. #}
+      <h3 class="heading">Details</h3>
+      <h3>Multiple words with spaces </h3>
+      <p>Lorem ipsum dolor sit.</p>
+      <h4>Small heading</h4>
+
+      {# Placed inside the nested source area to verify that outer selectors search inside nested areas. #}
+      <strong data-test-attribute="heading">Test on attribute selector.</strong>
+      <p data-test-attribute="content">Lorem ipsum dolor sit amet.</p>
+    </div>
+
+    {# Second occurrence of an heading with "Details" as text. #}
     <h3 class="heading">Details</h3>
-    <h3>Multiple words with spaces </h3>
-    <p>Lorem ipsum dolor sit.</p>
-    <h4>Small heading</h4>
-
-    {# Placed inside the nested source area to verify that outer selectors search inside nested areas. #}
-    <strong data-test-attribute="heading">Test on attribute selector.</strong>
-    <p data-test-attribute="content">Lorem ipsum dolor sit amet.</p>
-  </div>
-
-  {# Second occurrence of an heading with "Details" as text. #}
-  <h3 class="heading">Details</h3>
-
-  {# An element with an already specified ID. #}
-  <h3 class="heading" id="details">More details</h3>
 
-  <h3>Not targeted</h3>
+    {# An element with an already specified ID. #}
+    <h3 class="heading" id="details">More details</h3>
 
-  <h3 class="heading">Title with <strong>HTML tags</strong></h3>
+    <h3>Not targeted</h3>
 
-  <h3 class="heading" id="nothing"><a> </a></h3>
+    <h3 class="heading">Title with <strong>HTML tags</strong></h3>
 
-  <h3 class="heading">~</h3>
+    <h3 class="heading" id="nothing"><a> </a></h3>
 
-  <h4 class="heading">Not targeted</h4>
+    <h3 class="heading">~</h3>
 
-  <h3 class="heading strip">Strip &#8255;\'!"#$%&()*+,./:;<=>?@[]^`{|}~ unwanted characters</h3>
+    <h4 class="heading">Not targeted</h4>
 
-  {# Scenarios to test the correct handling of object properties with Object.hasOwnProperty(). #}
-  {# An element with an existing ID that can represent a property of the Object prototype. #}
-  <h3 class="heading" id="constructor">Reserved keyword</h3>
+    <h3 class="heading strip">Strip &#8255;\'!"#$%&()*+,./:;<=>?@[]^`{|}~ unwanted characters</h3>
 
-  {# An element that will generate an ID that can represent a property of the Object prototype. #}
-  <h3 class="heading">Length</h3>
+    {# Scenarios to test the correct handling of object properties with Object.hasOwnProperty(). #}
+    {# An element with an existing ID that can represent a property of the Object prototype. #}
+    <h3 class="heading" id="constructor">Reserved keyword</h3>
 
-  <h3 class="heading">2022, a new year</h3>
+    {# An element that will generate an ID that can represent a property of the Object prototype. #}
+    <h3 class="heading">Length</h3>
 
+    <h3 class="heading">2022, a new year</h3>
+  </div>>
 </div>
diff --git a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--no-elements.html.twig b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--no-elements.html.twig
index 3aeb1f3412..13dc5dae03 100644
--- a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--no-elements.html.twig
+++ b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test--no-elements.html.twig
@@ -5,6 +5,16 @@
  */
 #}
 {{ attach_library('oe_theme_inpage_navigation_test/inpage_navigation_test') }}
+{% set build = {
+  '#theme': 'oe_theme_helper_inpage_navigation_block',
+  '#title': title|default('Page contents'),
+  '#attached': {
+    'library': [
+      'oe_theme/inpage_navigation'
+    ]
+  }
+} %}
+{{ build }}
 <div id="inpage-navigation-test-container" data-inpage-navigation-source-area="h1">
 
   <h3>Lorem ipsum dolor sit.</h3>
diff --git a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
index 4924cfe363..cd4d6f477e 100644
--- a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
+++ b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
@@ -50,13 +50,6 @@ public function setUp(): void {
    * Test the inpage navigation JS library functionality.
    */
   public function testLibrary(): void {
-    // Place the block so there's an element that will host the generated items.
-    $this->drupalPlaceBlock('oe_theme_helper_inpage_navigation', [
-      'region' => 'content',
-      'weight' => -10,
-      'label_display' => FALSE,
-      'id' => 'inpage_navigation',
-    ]);
 
     $this->drupalGet('/oe-theme-inpage-navigation-test/content');
     $assert_session = $this->assertSession();
@@ -98,7 +91,8 @@ public function testLibrary(): void {
     // The heading starting with a non-alpha character gets a ref- prepended.
     $this->assertEquals('ref-2022-a-new-year', $container->find('xpath', '/h3[@class="heading"][text()="2022, a new year"]')->getAttribute('id'));
 
-    $navigation = $assert_session->elementExists('css', '#block-inpage-navigation nav[data-ecl-inpage-navigation]');
+    $navigation = $assert_session->elementExists('css', '.oe-theme-ecl-inpage-navigation');
+
     $assert = new InPageNavigationAssert();
     $expected = [
       'title' => 'Page contents',