Как получить атрибуты DIV с кукловодом?

Question

Я получаю href из a элементов

const hrefs = await page.evaluate(() => 
Array.from(document.body.querySelectorAll('a'), ({ href }) => href));

, но когда я пытаюсь получить aria-label или data-xx div элементов, этот метод не работает.

Почему это так и как я могу получить aria-label или data-xx атрибуты div элементов?

HTML

<div class="test" arial-label="something" data-all="something">
</div>

Answer 1

Проблема: атрибут узла DOM attribute Атрибут элемента HTML

На узле DOM доступны только некоторые атрибуты HTML.И даже открытая может содержать другое значение: атрибут href узла DOM не совпадает с атрибутом, записанным в HTML (<a href="..."></a>).Для примера:

<a id="link" href="test.html">Link</a>

Доступ к document.querySelector('#link').href вернет полный путь (например, http://example.com/test.html) вместо test.html.Чтобы получить исходный атрибут элемента, вы должны использовать функцию getAttribute.

Решение

Возвращаясь к вашему коду, это означает, что вы можете прочитать aria-label иdata-all с использованием getAttribute, например:

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('aria-label'));

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('data-all'));

---

Для доступа к атрибуту data доступно дополнительное решение.Вы можете получить доступ к значениям data с помощью специального атрибута dataset, который позволяет читать значение data-xx следующим образом:

Array.from(document.body.querySelectorAll('div'), (el) => el.dataset.xx);