如何在 Playwright 中获取元素最接近的父元素？

Question

我是剧作家中的新手，我找不到如何获取元素父级的解决方案？\n这是我到目前为止所拥有的：

\n

    const deliveryItems = await page.locator('.js-delivery-container'); //Items\n    const deliveryMethod = deliveryItems.locator('input[value="50"]'); //input in items selected by value\n    const example_parent = await deliveryMethod.closest('.js-delivery-name'); //name what i want to check\n    await expect(example_parent).toHaveText('Osobn\xc3\xad odb\xc4\x9br'); //check if selected right delivery\n

\n

但是当我运行它时..控制台中弹出错误：

\n

 TypeError: deliveryMethod.closest is not a function\n\n  33 |\n  34 |         const deliveryMethod = deliveryItems.locator('input[value="50"]');\n> 35 |         const example_parent = await deliveryMethod.closest('.js-delivery-name');\n

\n

谁能给我解释一下吗？谢谢

\n

我的结构如下所示：

\n

<div class="select-content-box js-delivery-container">\n   <div class="select-content delivery-icon-factory">\n        <div class="extended-title transport-icon js-delivery-name">Osobn\xc3\xad odb\xc4\x9br</div>\n        <div class="extended-price js-delivery-price"></div>\n        <div class="select-btn">\n            <label class="label toggle">\n                <input type="radio" name="radio-delivery" value="50">\n                <div class="toggle-control"></div>\n            </label>\n        </div>\n        <div class="cleaner"></div>\n        <div class="select-address" style=""></div>\n    </div>\n</div>\n

\n

Answer 1

您正在尝试的方法ElementHandle.closest()目前在 API 中不存在（或者在您使用的 Playwright 版本中尚不可用，我只在这个讨论#6015中找到它）。这就是错误的原因。

\n

问题

\n

您想要根据其值 ( input[value="50"]) 找到输入字段与.js-delivery-name元素之间的连接，这是不可能的，或者至少任何.parentElement?.parentElement?.nextSibling?.nextSibling...结构都非常脆弱，这同样适用于XPath 轴（它们甚至不处于子祖先关系中）但有点“二侄女/侄子-二姨/叔叔”关系）。

\n

可能的解决方案

\n

我建议如下。“剧作家可以根据页面布局选择元素。这些可以与常规 CSS 结合以获得更好的效果。”

\n

1-2.)desired name within + delivery items:使用子组合器和通用选择器，您可以编写可以在容器元素中获取所需元素的模式，例如：.js-delivery-container > * .js-delivery-name

\n

3.)above this input:当您拥有精确的选择器时，您可以通过查找与特定方向上的另一个 CSS 选择器查询最接近的元素（使用:above()、:below()、:near()和方法，例如 ）来获取它。正如文档所说：“匹配与内部选择器匹配的任何元素之上的元素”。:left-of():right-of():above(input[value="50"])

\n

//                                delivery items       desired name within    above this input     \n//                           ______________________  __  _______________  ________________________\n//                          |                      ||  ||               ||               \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0|\nconst parent = page.locator(\'.js-delivery-container > * .js-delivery-name:above(input[value="50"])\')\nawait expect(parent).toHaveText(/Osobn\xc3\xad odb\xc4\x9br/)\n

\n

注意：布局选择器使用边界客户端矩形来计算元素的距离和相对位置，因此这些above等below方向严格意味着布局位置，而不是 DOM 祖先。

\n