Перебирать элементы в Nodejs

Question

У меня есть веб-страница, где я хочу навести курсор на все теги привязки и получить стили, рассчитанные для этого тега. Эта функция, которую я написал, кажется, не работает, поскольку она дает мне оригинальный стиль привязки, а не стили наведения. Пожалуйста, помогите.

let data = await page.evaluate(() => {
    let elements = document.getElementsByTagName('a');
    properties = []
    for (var element of elements){
        element.focus();
        properties.push(JSON.parse(JSON.stringify(window.getComputedStyle(element, null)["backgroundColor"])));
    }
    return properties;
});

Answer 1

Прежде всего, вы должны преобразовать результаты из document.getElementsByTagName в обычный массив

const elements = [...document.getElementsByTagName('textarea')];

Далее, чтобы получить свойство элемента, используйте следующий синтаксис:

window.getComputedStyle(element).getPropertyValue("background-color")

Наконец, это полностью рабочий пример:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://css-tricks.com/almanac/selectors/f/focus/');


  const data = await page.evaluate(() => {
    const elements = document.getElementsByTagName('textarea');

    return [...elements].map(element => {
      element.focus();
      return window.getComputedStyle(element).getPropertyValue("background-color");
    });
  });

  console.log(data);

  await browser.close();
})();

Answer 2

Вы можете использовать page.$$() для получения ElementHandle массива textarea элементов.

Затем вы можете использовать elementHandle.hover(), чтобы навести курсор на каждый элемент, а затем page.evaluate(), чтобы получить вычисленный цвет фона для отправки в массив data:

const elements = await page.$$( 'textarea' );
const data = [];

for ( let i = 0; i < elements.length; i++ )
{
    await elements[i].hover();

    data.push( await page.evaluate( element => window.getComputedStyle( element ).backgroundColor, elements[i] ) );
}

console.log( data );

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle попробуйте document.getComputedStyle (element, ': hover')