Playwright locator.evaluateAll 如何返回使用节点 forEach 填充的地图

我想抢夺所有人的财产<custom-tag>节点和子节点的内部文本类型<custom-text>或类型<custom-number>

devtools 中的简化版本是这样的

const headersMap = new Map();
var headers = Object.create(null);
document.querySelectorAll("h2").forEach(el => {
    
    headers[el.id] = el.innerText
    headersMap.set(el.id, el.innerText)    
});
console.log("h2 count > 2 === " , (headersMap.size>2))
console.table(Array.from(headersMap, ([name, value]) => ({ name, value })));

For the API测试页面 https://playwright.dev/docs/api-testing这看起来像这样

这是我的剧作家尝试

test('API Testing - H2 count greater than 2', async ({ }) => {     
    await test.step('API Testing - get titles', async() => {

        await page.goto('https://playwright.dev/docs/api-testing');
        
        const headersList = await page.locator('h2');
        var headersMap = await headersList.evaluateAll(node => {
            const headersMap = new Map();
            var headers = Object.create(null);
            headers[node.id] = node.innerText
            headersMap.set(node.id, node.innerText)    
            return headersMap;
        });
        await expect(headersMap.size).toBeGreaterThan(2);
        page.pause();
        
    });
});

但它报告说：

   Error: expect(received).toBeGreaterThan(expected)
   Matcher error: received value must be a number or bigint
   Received has value: undefined
      47 |             return headersMap;
      48 |         });
    > 49 |         await expect(headersMap.size).toBeGreaterThan(2);
         |                                       ^
      50 |         page.pause();

Question

• 我如何创建一个对象，用 forEach 填充它并返回它？
• 必须改变什么my_locator.evaluateAll()返回地图？

当你使用locator.evaluateAll() https://playwright.dev/docs/api/class-locator#locator-evaluate-all，您在回调中得到一个数组。我会调用参数nodes而不是node所以你很清楚你需要迭代它。

第二个问题：地图不容易序列化。尝试一下：

const m = new Map();
m.set("hello", "world");
console.log(m.get("hello")); // => "world"
console.log(JSON.stringify(m)); // => {}

所有传入和传出的数据evaluate调用将被反/序列化，这将破坏你的地图。除非你有一些令人信服的理由来使用地图，否则我只会使用一个普通的旧对象。

这是一种选择：

import {expect, test} from "@playwright/test"; // ^1.30.0

test("playwright docs page has correct headers", async ({page}) => {
  const url = "https://playwright.dev/docs/api-testing";
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const headers = await page.locator("h2").evaluateAll(nodes =>
    Object.fromEntries(
      nodes.map(node => [node.id, node.textContent.trim()])
    )
  );
  const expected = {
    "writing-api-test": "Writing API Test​",
    "using-request-context": "Using request context​",
    "sending-api-requests-from-ui-tests": "Sending API requests from UI tests​",
    "reusing-authentication-state": "Reusing authentication state​",
    "context-request-vs-global-request": "Context request vs global request​",
  };
  expect(headers).toEqual(expected);
});

请注意，您不需要await一个定位器定义，只有一个操作。通常使用.textContent而不是.innerText。修剪 HTML 字符串以使其标准化。留意有趣的事情​​这些标题中的 s （考虑仅抓取文本节点并忽略<a>）。无需await非定位器断言。

尽管如此，上述方法并不完全是最佳实践，因为它不使用网络优先 https://playwright.dev/docs/best-practices#use-web-first-assertions断言。我会重写它以使用.toHaveText()直接在定位器上。

await expect(page.locator("h2")).toHaveText([
  "Writing API Test​",
  "Using request context​",
  "Sending API requests from UI tests​",
  "Reusing authentication state​",
  "Context request vs global request​",
]);

id 可以单独测试，而且可能并不那么重要。你可以poll https://playwright.dev/docs/test-assertions#polling or retry https://playwright.dev/docs/test-assertions#retrying等待谓词为真作为最后的手段，但如果你确定这些总是静态地出现在页面上，那么打破网络优先规则可能是可以的。