无法单击 puppeteer 中的元素

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>

有很多这样的，所以这是我要循环的代码：

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

然后我通过每个映射找到一个特定的标签：

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);
    }

当元素不匹配时，循环会出错，这没关系，但是当它是它不点击的元素时。我尝试了两种不同的选择：

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

知道为什么没有选择元素吗？

Answer 1

我不知道如何使用array.map 解决这个问题，但是一个简单的for 循环可以正常工作。由于map返回的是一个和原来长度相同的数组，这里就不需要了，我们只需要点击符合条件的元素即可。

而且点击的上下文应该保持page，我们不应该进入元素句柄（你的脚本中的styEl），因此我决定循环，元素的索引更多在这个用例中比每次迭代都返回一些东西有用。

1. 我们可以在每次迭代的 for 循环中检查实际的 <img> 的 alt。
2. 检查它们是否等于prodOption。
3. 如果是，那么我们可以在与匹配的 alt 标记完全相同的索引上获取当前 <input> 的句柄...
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)
    }
  }