javascript - 实验 Chrome 功能有问题吗？

Question

我一直在研究 Accessibility Object Model API，我认为尝试在 Puppeteer 测试中使用它会很酷。

getComputedAccessibleNode 返回一个 promise 。我可以让 ComputedAccessibleNode 显示在浏览器控制台中，但是当我尝试登录到 Puppeteer 控制台时，我只得到一个空对象。

我是不是遗漏了什么，或者是因为 getComputedAccessibleNode 仍然是一个实验性功能？

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless : false, 
    devtools: true,
    args : ['--enable-accessibility-object-model'] 
  });
  const page = await browser.newPage()

  await page.goto('http://localhost:3000/')

  // This shows the ComputedAccessibleNode in the browser console.
  a11y_node = await page.evaluate(() => {
    const checkbox = document.querySelector('label');
    getComputedAccessibleNode(checkbox)
    .then((data) => console.log(data))
  });

  // Why does this show an empty object?
  page.$eval('label', (el) => getComputedAccessibleNode(el))
  .then((data) => console.log(data))

  debugger;
})()

Answer 1

ComputedAccessibleNode 似乎没有可枚举的属性。

而且 puppeteer 似乎对您的对象做了一些简单的复制，以将其带回 Node 上下文。

用for ... in您将能够制作对象的正确副本并将其返回到您的节点上下文:

a11y_node = await page.evaluate(() => {
    const checkbox = document.querySelector('label');
    return getComputedAccessibleNode(checkbox)
        .then((data) => {
            var obj = {};
            for (key in data) {
                obj[key] = data[key]
            }
            return obj
        });
});
console.log(a11y_node); // logs the object.