CODEWITHSUNDEEP
javascriptpuppeteer
Liam Butler
Liam Butler

Reputation: 43

Problems with experimental chromium feature?

I've been playing around with the Accessibility Object Model API and I thought it would be cool to try and use it in a Puppeteer test.

getComputedAccessibleNode returns a promise. I can get the ComputedAccessibleNode to display in the browser console, but I just get an empty object when trying to log to the Puppeteer console instead.

Am I missing something, or could it be because getComputedAccessibleNode is still an experimental feature?

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;
})()

Upvotes: 3

Views: 167

Answers (1)

Yoann
Yoann

Reputation: 3060

It seems that ComputedAccessibleNode has no enumerable property.

And puppeteer seems to do some light copy of your object to bring it back to the Node context.

With a for ... in you'll be able to make a proper copy of your object and return it to your Node context:

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.

Upvotes: 3

Related Questions