如何在WebdriverIO中获取元素的祖父节点，解决BrowserStack iPhone Safari点击失效问题

方法1：连续调用parentElement属性 #

WebdriverIO的元素实例自带parentElement属性，可直接获取当前元素的直接父节点，连续调用两次即可拿到祖父节点，代码示例如下：

// 先定位到目标元素
const targetEl = await $('#your-target-selector');
// 连续两次调用parentElement获取祖父节点
const grandParentEl = await (await targetEl.parentElement()).parentElement();
// 对祖父节点执行点击操作
await grandParentEl.click();

这种方法写法简单直观，适合DOM层级固定的场景。

方法2：使用XPath祖先轴选择器直接定位 #

如果需要更灵活的层级控制，或者要避免多次异步调用，可以直接通过XPath的ancestor轴定位祖父节点：

// 定位目标元素后直接通过xpath找祖父节点
const grandParentEl = await $('#your-target-selector').$('./ancestor::*[2]');
// 也可以直接写完整xpath一次性定位，效率更高
const grandParentEl = await $("//*[@id='target-id']/ancestor::*[2]");
await grandParentEl.click();

其中ancestor::*[2]表示往上数第2级祖先节点，就是祖父节点，你也可以替换成指定标签名比如ancestor::div[2]做更精准的匹配。

针对iPhone Safari点击异常的额外适配建议 #

如果用上述方法点击祖父节点仍然偶现无响应的情况，可以补充用原生JS执行点击操作，规避Safari的点击事件兼容问题：

const grandParentEl = await (await targetEl.parentElement()).parentElement();
await browser.execute((el) => el.click(), grandParentEl);

内容的提问来源于stack exchange，提问作者Vaibhav Jagdale