Селекторы CSS — Кукловод — Node.js — как получить классы элементов

#node.js #css-selectors #puppeteer

Вопрос:

Я использую puppeteer для загрузки отчета с веб-сайта.

Существует боковая панель с категориями, которые открывают дополнительную навигационную панель.

Мне нужно проверить, открыта эта категория или нет, я могу сделать это, проверив, есть ли в категории класс expanded .

Это означает, что кнопка для открытия меню имеет селектор:

body > div.main-sidebar > ul.navbar > li:nth-child(5) > h3

Мне нужно проверить, есть ли у этого элемента класс .expanded

Когда я пытаюсь

  let selector =  page.$(selector2)
 let c = await selector.getProperty("expanded")
 

Я получаю ошибку, что selector.getProperty is not a function

Как я могу проверить классы этого элемента (или лучший способ проверить, открыта ли вспомогательная панель навигации)?

Ответ №1:

Если вы хотите использовать API обработки элементов, способ немного сложнее (и не забывайте await перед page.$() этим ):

 const element = await page.$(selector2)
const className = await (await selector.getProperty("className")).jsonValue()
const isOpen = className.split(' ').includes('expanded')
 

Так что, может быть, проще просто использовать общий веб-API внутри page.evaluate() :

 const isOpen = await page.evaluate(
  selector =>  document.querySelector(selector).matches('.expanded'),
  selector2,
)
 

или:

 const isOpen = await page.evaluate(
  selector =>  document.querySelector(selector).classList.contains('expanded')
  selector2,
)