Почему страница кукловода. $$ eval возвращает undefined

Question

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

export const selectFromDropDown = async (page, selectElement, className, value) => {
  const dropdownInput = await page.waitForSelector(selectElement)
  await dropdownInput.click()
  await page.waitForSelector(`li.${className}`)

  const dropdownItem = await page.$$eval(`li.${className}`, (listItems, val) => listItems.find((item) => item.dataset.value === val), value)
  console.log(dropdownItem, '000000')
  dropdownItem.click()
}

Я также сделал const dropdownItem = await page.$$eval(`li.${className}`, (listItems, val) => listItems.find((item) => console.log('match: ', item.dataset.value === val) || item.dataset.value === val), value). Он регистрирует false для других и true для элемента списка, который соответствует значению, но dropdownItem по-прежнему не определен. Что я делаю не так?

Answer 1

$$eval не вернет handle, вам нужно будет использовать evaluateHandle.

const dropdownItem = await page.evaluateHandle(
    (listItemsSelector, val) => 
        Array.from(document.querySelectorAll(listItemsSelector)
            .find((item) => item.dataset.value === val), 
    `li.${className}`, 
     value)
console.log(dropdownItem, '000000')
await dropdownItem.click()