Playwright教程：如何判断两个不同选择器是否指向同一个元素

import { Locator, Page, ElementHandle } from '@playwright/test';

/**
 * 比较两个Playwright Locator是否指向页面上的同一个DOM元素。
 * @param firstLocator 第一个Locator对象。
 * @param secondLocator 第二个Locator对象。
 * @returns 如果两个Locator指向同一个DOM元素，则返回 true；否则返回 false。
 */
async function compareLocators(firstLocator: Locator, secondLocator: Locator): Promise<boolean> {
    // 步骤一：获取第一个Locator对应的DOM元素的句柄
    // elementHandle() 返回一个 ElementHandle 或 null（如果元素未找到）
    const firstHandle: ElementHandle<HTMLElement | SVGElement> | null = await firstLocator.elementHandle();
    // 步骤一：获取第二个Locator对应的DOM元素的句柄
    const secondHandle: ElementHandle<HTMLElement | SVGElement> | null = await secondLocator.elementHandle();

    // 如果任何一个句柄为 null（即对应的元素在页面上不存在），
    // 那么它们不可能是同一个元素。
    if (!firstHandle || !secondHandle) {
        return false;
    }

    // 步骤二：在浏览器上下文中执行JavaScript，比较两个DOM节点是否相同。
    // page().evaluate() 允许我们在浏览器中运行自定义的JavaScript代码。
    // 当 ElementHandle 被传递给 evaluate 时，它在浏览器内部被转换为实际的DOM Node对象。
    // isEqualNode() 是DOM API的一部分，用于判断两个节点是否在结构和内容上等价。
    // 在此场景下，由于我们关心的是它们是否代表同一个DOM元素实例，isEqualNode() 是一个可靠的选择。
    return firstLocator.page().evaluate(
        (compare: { left: Node, right: Node }) => compare.left.isEqualNode(compare.right),
        { left: firstHandle, right: secondHandle } // 将 ElementHandle 作为参数传递给浏览器内的JS函数
    );
}

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

import { test, expect, Page } from '@playwright/test';

// 假设在一个测试文件中
test('should identify two different selectors pointing to the same element', async ({ page }) => {
    // 模拟页面内容
    await page.setContent(`
        <div id="something">
            <div id="selected">
            </div>
        </div>
    `);

    // 定义两个Locator，它们指向同一个元素
    const selectorA = "#something >> div >> nth=0"; // 注意：nth=0 是第一个子div
    const selectorB = "#selected";

    const locatorA = page.locator(selectorA);
    const locatorB = page.locator(selectorB);

    // 调用上面定义的 compareLocators 函数进行比较
    const areSameElement = await compareLocators(locatorA, locatorB);

    // 验证结果
    console.log(`Locator "${selectorA}" 和 Locator "${selectorB}" 是否指向同一个元素: ${areSameElement}`);
    expect(areSameElement).toBe(true);

    // 示例：如果指向不同元素
    const locatorC = page.locator('#something');
    const areDifferentElement = await compareLocators(locatorA, locatorC);
    console.log(`Locator "${selectorA}" 和 Locator "#something" 是否指向同一个元素: ${areDifferentElement}`);
    expect(areDifferentElement).toBe(false);
});