如果两个不同的选择器指向页面上的同一个元素，如何解决？

Question

鉴于以下页面

<div id="something">
    <div id="selected">
    </div>
</div>

在剧作家中，我有两个这样的选择器..

selectorA = "#something >> div >> nth=1";
selectorB = "#selected";

这两个选择器指向页面上的同一个元素。 如何比较两个选择器/定位器以确定它们是否指向同一个元素？

Answer 1

您可以使用document.querySelector检索两者并比较两个 object，如果它是相同的元素，它们将引用相同的元素。

document.querySelector(selectorA) === document.querySelector(selectorB)

Answer 2

您可以使用剧作家检查员

https://playwright.dev/docs/debug#debugging-selectors

Answer 3

我发现了如何做到这一点。

async function compareLocators(firstLocator: Locator, secondLocator: Locator): Promise<boolean> {
    const firstHandle = await firstLocator.elementHandle();
    const secondHandle = await secondLocator.elementHandle();
    return firstLocator.page().evaluate(
        compare => compare.left.isEqualNode(compare.right),
        { left: firstHandle, right: secondHandle }
    );
}

现在你可以给这个 function 提供两个定位器，如果它们指向同一个定位器，它会返回真/假。