From 63843068870e95b7c52aea0b7eb3259fb76c29bc Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Thu, 23 Apr 2026 04:16:47 +0300
Subject: [PATCH] fix(locator): prevent click(text, container) from matching
 the container itself
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`I.click("Description", 'ul[role="tablist"]')` was clicking the <ul> itself
instead of the intended <li role="tab">. The fallback xpath
`./self::*[contains(normalize-space(string(.)), literal)]` matched the scope
element whenever its concatenated string-value contained the literal — and a
container with text-bearing children (tab labels, menu items) always will.
Playwright then clicked the container's geometric center, landing on whatever
child sat there.

Fix: narrow `Locator.clickable.self` to prefer the deepest descendant whose
string-value contains the literal, and only match self when self *is* that
deepest element (or its @value matches, preserving the input case).

Also extend `Locator.clickable.wide` with ARIA widget roles so clicks hit
the semantic element directly rather than relying on bubble-up:
tab, link, menuitem (+ checkbox/radio variants), option, treeitem.

Tests:
- test/data/app/view/form/tablist.php — ember-like 5-tab fixture with
  a #selected-tab marker driven by click handlers.
- test/helper/Playwright_test.js — regression scenario clicks History →
  Description → Runs → Code template against ul[role="tablist"] and
  asserts the correct tab fired. Plus an explicit <a>+span case scoped
  by tag 'a' to document that behavior.
- test/unit/locator_test.js — three xpath-level tests for clickable.self
  (tablist narrowest-match, <div>Submit</div> self-match, <input value>
  self-match) and two for clickable.wide (role="tab", role="menuitem").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/locator.js                      | 13 ++++-
 test/data/app/view/form/tablist.php | 33 ++++++++++++
 test/helper/Playwright_test.js      | 30 +++++++++++
 test/unit/locator_test.js           | 81 +++++++++++++++++++++++++++++
 4 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 test/data/app/view/form/tablist.php
diff --git a/lib/locator.js b/lib/locator.js
index a2f0ea0a3..b1acb016e 100644
--- a/lib/locator.js
+++ b/lib/locator.js
@@ -591,13 +591,24 @@ Locator.clickable = {
       `.//*[@title = ${literal}]`,
       `.//*[@aria-labelledby = //*[@id][normalize-space(string(.)) = ${literal}]/@id ]`,
       `.//*[@role='button'][normalize-space(.)=${literal}]`,
+      `.//*[@role='tab' or @role='link' or @role='menuitem' or @role='menuitemcheckbox' or @role='menuitemradio' or @role='option' or @role='treeitem'][contains(normalize-space(string(.)), ${literal})]`,
     ]),
 
   /**
    * @param {string} literal
    * @returns {string}
    */
-  self: literal => `./self::*[contains(normalize-space(string(.)), ${literal}) or contains(normalize-space(@value), ${literal})]`,
+  self: literal => {
+    // Narrowest-match: prefer the deepest descendant whose string-value contains the literal.
+    // Falling back to `self` without the `not(descendant...)` guard would match a container
+    // whose concatenated text happens to include the literal (e.g. a <ul role="tablist"> whose
+    // tab labels all sit in its string-value) and click the container itself.
+    const narrowest = `contains(normalize-space(string(.)), ${literal}) and not(.//*[contains(normalize-space(string(.)), ${literal})])`
+    return xpathLocator.combine([
+      `.//*[${narrowest}]`,
+      `./self::*[${narrowest} or contains(normalize-space(@value), ${literal})]`,
+    ])
+  },
 }
 
 Locator.field = {
diff --git a/test/data/app/view/form/tablist.php b/test/data/app/view/form/tablist.php
new file mode 100644
index 000000000..ae669c2c7
--- /dev/null
+++ b/test/data/app/view/form/tablist.php
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Tablist click regression (#5530)</title>
+    <style>
+      ul[role="tablist"] { display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #ccc; }
+      ul[role="tablist"] li[role="tab"] { padding: 8px 16px; cursor: pointer; }
+      ul[role="tablist"] li[aria-selected="true"] { background: #eef; font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <h1>Tablist</h1>
+    <ul role="tablist" id="tabs" class="tab-list">
+      <li role="tab" data-tab="description" aria-selected="true"><span class="tab-text">Description</span></li>
+      <li role="tab" data-tab="code" aria-selected="false"><span class="tab-text">Code template</span></li>
+      <li role="tab" data-tab="attachments" aria-selected="false"><span class="tab-text">Attachments</span></li>
+      <li role="tab" data-tab="runs" aria-selected="false"><span class="tab-text">Runs</span></li>
+      <li role="tab" data-tab="history" aria-selected="false"><span class="tab-text">History</span></li>
+    </ul>
+    <div id="selected-tab">description</div>
+    <script>
+      document.querySelectorAll('[role="tab"]').forEach(function (li) {
+        li.addEventListener('click', function () {
+          document.querySelectorAll('[role="tab"]').forEach(function (x) {
+            x.setAttribute('aria-selected', 'false');
+          });
+          li.setAttribute('aria-selected', 'true');
+          document.getElementById('selected-tab').textContent = li.dataset.tab;
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
index e5edb5eb3..b1a20bb25 100644
--- a/test/helper/Playwright_test.js
+++ b/test/helper/Playwright_test.js
@@ -1192,6 +1192,36 @@ describe('Playwright', function () {
       I.see('Information')
     })
   })
+
+  describe('#click - with tag selector as context', () => {
+    it('clicks <a><span>text</span></a> when context is the tag "a"', async () => {
+      await I.amOnPage('/form/example7')
+      await I.click('Buy Chocolate Bar', 'a')
+      await I.seeCurrentUrlEquals('/')
+    })
+  })
+
+  describe('#click - tablist regression', () => {
+    // https://github.com/codeceptjs/CodeceptJS — click(text, container) was matching
+    // the container itself when its concatenated string-value contained the text,
+    // clicking the <ul role="tablist"> center instead of the intended <li role="tab">.
+    it('clicks the correct tab by text when container has many text-bearing children', async () => {
+      await I.amOnPage('/form/tablist')
+      await I.seeTextEquals('description', '#selected-tab')
+
+      await I.click('History', 'ul[role="tablist"]')
+      await I.seeTextEquals('history', '#selected-tab')
+
+      await I.click('Description', 'ul[role="tablist"]')
+      await I.seeTextEquals('description', '#selected-tab')
+
+      await I.click('Runs', 'ul[role="tablist"]')
+      await I.seeTextEquals('runs', '#selected-tab')
+
+      await I.click('Code template', 'ul[role="tablist"]')
+      await I.seeTextEquals('code', '#selected-tab')
+    })
+  })
 })
 
 let remoteBrowser
diff --git a/test/unit/locator_test.js b/test/unit/locator_test.js
index 3cad18b20..3a3b85eec 100644
--- a/test/unit/locator_test.js
+++ b/test/unit/locator_test.js
@@ -714,4 +714,85 @@ describe('Locator', () => {
     const nodes = xpath.select(l.toXPath(), doc)
     expect(nodes).to.have.length(1, l.toXPath())
   })
+
+  describe('Locator.clickable.self', () => {
+    it('picks deepest descendant, not a container whose string-value merely concatenates the literal (tablist regression)', () => {
+      const tabsXml = `<root>
+        <ul role="tablist" id="tabs">
+          <li role="tab" data-tab="description"><span class="tab-text">Description</span></li>
+          <li role="tab" data-tab="code"><span class="tab-text">Code template</span></li>
+          <li role="tab" data-tab="attachments"><span class="tab-text">Attachments</span></li>
+          <li role="tab" data-tab="runs"><span class="tab-text">Runs</span></li>
+          <li role="tab" data-tab="history"><span class="tab-text">History</span></li>
+        </ul>
+      </root>`
+      const tabsDoc = new DOMParser().parseFromString(tabsXml, 'text/xml')
+      const ul = xpath.select1('//ul', tabsDoc)
+      const xp = Locator.clickable.self("'Description'")
+      const nodes = xpath.select(xp, ul)
+
+      expect(nodes).to.have.length(1, xp)
+      expect(nodes[0].tagName).to.eql('span')
+      expect(nodes[0].textContent.trim()).to.eql('Description')
+    })
+
+    it('matches self when context element has the literal in direct text and no descendants contain it', () => {
+      const leafXml = '<root><div id="btn">Submit</div></root>'
+      const leafDoc = new DOMParser().parseFromString(leafXml, 'text/xml')
+      const div = xpath.select1('//div', leafDoc)
+      const xp = Locator.clickable.self("'Submit'")
+      const nodes = xpath.select(xp, div)
+
+      expect(nodes).to.have.length(1, xp)
+      expect(nodes[0].getAttribute('id')).to.eql('btn')
+    })
+
+    it('matches self when @value attribute contains the literal', () => {
+      const inputXml = '<root><input type="submit" value="Submit" id="inp"/></root>'
+      const inputDoc = new DOMParser().parseFromString(inputXml, 'text/xml')
+      const input = xpath.select1('//input', inputDoc)
+      const xp = Locator.clickable.self("'Submit'")
+      const nodes = xpath.select(xp, input)
+
+      expect(nodes).to.have.length(1, xp)
+      expect(nodes[0].getAttribute('id')).to.eql('inp')
+    })
+  })
+
+  describe('Locator.clickable.wide', () => {
+    it('matches an ARIA widget role (tab) by text within a container', () => {
+      const tabsXml = `<root>
+        <ul role="tablist" id="tabs">
+          <li role="tab" data-tab="description"><span class="tab-text">Description</span></li>
+          <li role="tab" data-tab="code"><span class="tab-text">Code template</span></li>
+          <li role="tab" data-tab="attachments"><span class="tab-text">Attachments</span></li>
+          <li role="tab" data-tab="runs"><span class="tab-text">Runs</span></li>
+          <li role="tab" data-tab="history"><span class="tab-text">History</span></li>
+        </ul>
+      </root>`
+      const tabsDoc = new DOMParser().parseFromString(tabsXml, 'text/xml')
+      const ul = xpath.select1('//ul', tabsDoc)
+      const xp = Locator.clickable.wide("'Description'")
+      const nodes = xpath.select(xp, ul)
+
+      const tabMatches = nodes.filter(n => n.getAttribute && n.getAttribute('role') === 'tab')
+      expect(tabMatches).to.have.length(1, xp)
+      expect(tabMatches[0].getAttribute('data-tab')).to.eql('description')
+    })
+
+    it('matches role="menuitem" by text', () => {
+      const menuXml = `<root>
+        <ul role="menu">
+          <li role="menuitem" id="save">Save</li>
+          <li role="menuitem" id="rename">Rename</li>
+        </ul>
+      </root>`
+      const menuDoc = new DOMParser().parseFromString(menuXml, 'text/xml')
+      const menu = xpath.select1('//ul', menuDoc)
+      const nodes = xpath.select(Locator.clickable.wide("'Rename'"), menu)
+      const items = nodes.filter(n => n.getAttribute && n.getAttribute('role') === 'menuitem')
+      expect(items).to.have.length(1)
+      expect(items[0].getAttribute('id')).to.eql('rename')
+    })
+  })
 })
