Невозможно щелкнуть элемент в кукловоде

Question

У меня есть следующий элемент в html:

<div class="c-form-field c-form-field--radio SelectStyle col"><label for="input_radio_style_4" aria-hidden="false" class=""><span class="c-form-label-content"><span class="c-image product c-image--square"><span class="LazyLoad is-visible"><img src="https://images.example.com/is/image/EBFL2/T4144300?wid=88&amp;hei=88&amp;fmt=png-alpha" alt="Teal/White | World Hood" id="T4144300"></span></span></span></label><input name="style" aria-labelledby="styleT4144300" id="input_radio_style_4" type="radio" required="" value="4"></div>

Их много, так что вот мой код для l oop:

const styleElements = await page.$$('.SelectStyle');

Затем я сопоставляю через каждый из них найти определенный тег c:

styleElements.map(async styEl => {
    try {
      const isThisStyle = await styEl.$eval(`img[alt="${prodOption}"]`, img => img);
      if(isThisStyle) {
        await styEl.$('input', input => input.click());
        await styEl.click();
      }
      // await styEl.click();
    } catch (e) {
      console.log(e);
    }

l oop выдает ошибку, когда элемент не совпадает, что нормально, но тогда, когда это элемент, он не нажмите. Я пробовал два разных варианта:

    await styEl.$('input', input => input.click());
    await styEl.click();

Есть идеи, почему элемент не выбирается?

Answer 1

Я понятия не имел, как решить эту проблему с помощью array.map, но простой for l oop отлично работает. Поскольку map возвращает массив той же длины, что и исходный, в этом нет необходимости, нам нужно только щелкнуть элементы, которые соответствуют требуемому условию.

Также должен быть контекст щелчков оставаться page, мы не должны go внутри дескриптора элемента (styEl в вашем скрипте), поэтому я решил go для al oop, индекс элемента более полезен в этом случае использования чем возвращать что-то с каждой итерацией.

1. Мы можем проверять фактические <img> alt в for l oop с каждой итерацией.
2. Проверяем, соответствуют ли они равно prodOption.
3. Если они есть, то мы можем захватить дескриптор текущего <input> по тому же индексу, что и соответствующий тег alt ...
4. .. .и щелкните по нему.

  for (let i = 0; i < styleElements.length; i++) {
    try {
      const currentAlt = await page.evaluate(el => el.alt, (await page.$$('.SelectStyle img'))[i])
      if (currentAlt === prodOption) {
        const currentHandle = await page.$$('.SelectStyle input')
        await currentHandle[i].click()
      }
    } catch (e) {
      console.error(e)
    }
  }