playwright - 如何获取 CSS ::after 选择器的定位器？

Question

我有以下元素（为简洁起见）：

<div id="searchButton">
    <div>
        <div>
            "Search"
            ::after
        </div>
    </div>
</div>

渲染到这个元素：

我现在想单击下拉箭头。

如何为此编写选择器？

Answer 1

取决于你的 CSS 你可以试试这个：

const element = await page.locator('div:has-text("Search")')
const arrow = await element.evaluate((e1) => {     
       return window.getComputedStyle(e1,':after').top
    })

这应该返回位置，然后使用鼠标单击坐标，但它可能会返回auto，在这种情况下尝试找到您可以使用而不是的属性.top