test(cdp-browser): move click and visibility fixtures into test app pages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: DavertMik

test/data/app/view/form/inline_wrapper.php

@@ -0,0 +1,11 @@
+<html>
+<body>
+<a id="card-link" href="#">
+    <div style="height:20px">card</div>
+</a>
+<a id="empty-link" href="#"></a>
+<span id="hidden-card" style="display:contents">
+    <div style="display:none">hidden</div>
+</span>
+</body>
+</html>

test/data/app/view/form/mousedown_trigger.php

@@ -0,0 +1,20 @@
+<html>
+<body>
+<div id="mousedown-trigger" tabindex="0" style="height:20px">open</div>
+<div id="mousedown-menu" style="display:none">menu</div>
+<button id="disabled-btn" disabled>off</button>
+<script>
+  window.__clickEvents = []
+  var trigger = document.getElementById('mousedown-trigger')
+  ;['pointerdown', 'mousedown', 'focus', 'pointerup', 'mouseup', 'click'].forEach(function (type) {
+    trigger.addEventListener(type, function () { window.__clickEvents.push(type) })
+  })
+  trigger.addEventListener('mousedown', function () {
+    document.getElementById('mousedown-menu').style.display = 'block'
+  })
+  document.getElementById('disabled-btn').addEventListener('mousedown', function () {
+    window.__clickEvents.push('disabled-mousedown')
+  })
+</script>
+</body>
+</html>

test/data/app/view/form/wrapped_button.php

@@ -0,0 +1,15 @@
+<html>
+<body>
+<ul>
+    <li id="menu-item">
+        <button type="button" id="menu-button" style="display:block;width:100%;height:30px"><span>New suite</span></button>
+    </li>
+</ul>
+<div id="opened" style="display:none">opened</div>
+<script>
+  document.getElementById('menu-button').addEventListener('click', function () {
+    document.getElementById('opened').style.display = 'block'
+  })
+</script>
+</body>
+</html>

test/helper/CDPBrowser_obscura_test.js

@@ -81,35 +81,16 @@ describe('Obscura helper (self-managed obscura serve)', function () {
   })
 
   it('sees an inline link that wraps only block children', async function () {
-    await I.amOnPage('/')
+    await I.amOnPage('/form/inline_wrapper')
     if (I.capabilities.layout !== 'real') this.skip()
-    await I.executeScript(() => {
-      const wrapper = document.createElement('div')
-      wrapper.innerHTML = '<a id="card-link" href="#"><div style="height:20px">card</div></a><a id="empty-link" href="#"></a><span id="hidden-card" style="display:contents"><div style="display:none">x</div></span>'
-      document.body.appendChild(wrapper)
-    })
     await I.seeElement('#card-link')
     await I.waitForVisible('#card-link', 1)
     await I.dontSeeElement('#empty-link')
     await I.dontSeeElement('#hidden-card')
   })
 
   it('clicks with the pointer and mouse events a real click fires', async () => {
-    await I.amOnPage('/')
-    await I.executeScript(() => {
-      const wrapper = document.createElement('div')
-      wrapper.innerHTML = '<div id="mousedown-trigger" tabindex="0" style="height:20px">open</div><div id="mousedown-menu" style="display:none">menu</div><button id="disabled-btn" disabled>off</button>'
-      document.body.appendChild(wrapper)
-      window.__clickEvents = []
-      const trigger = document.getElementById('mousedown-trigger')
-      for (const type of ['pointerdown', 'mousedown', 'focus', 'pointerup', 'mouseup', 'click']) {
-        trigger.addEventListener(type, () => window.__clickEvents.push(type))
-      }
-      trigger.addEventListener('mousedown', () => {
-        document.getElementById('mousedown-menu').style.display = 'block'
-      })
-      document.getElementById('disabled-btn').addEventListener('mousedown', () => window.__clickEvents.push('disabled-mousedown'))
-    })
+    await I.amOnPage('/form/mousedown_trigger')
     await I.click('#mousedown-trigger')
     await I.forceClick('#disabled-btn')
     const events = await I.executeScript(() => window.__clickEvents)
@@ -118,17 +99,8 @@ describe('Obscura helper (self-managed obscura serve)', function () {
   })
 
   it('clicks the control a wrapper element covers, like a real click lands', async function () {
-    await I.amOnPage('/')
+    await I.amOnPage('/form/wrapped_button')
     if (I.capabilities.layout !== 'real') this.skip()
-    await I.executeScript(() => {
-      const wrapper = document.createElement('div')
-      wrapper.innerHTML =
-        '<ul><li id="menu-item"><button type="button" id="menu-button" style="display:block;width:100%;height:30px"><span>New suite</span></button></li></ul><div id="opened" style="display:none">opened</div>'
-      document.body.prepend(wrapper)
-      document.getElementById('menu-button').addEventListener('click', e => {
-        if (e.target.closest('#menu-button')) document.getElementById('opened').style.display = 'block'
-      })
-    })
     await I.click('#menu-item')
     await I.seeElement('#opened')
   })