使用带空格的属性选择器单击 Puppeteer 页面

Question

此 Meteor 代码在服务器上使用 Puppeteer 13.1.2。它使用 for 循环使用其 title 属性打开 a 链接。只要该值不包含空格，它就可以工作，但无法打开包含空格的属性值的弹出页面。知道如何打开这些弹出窗口吗？ 谢谢

const headings = ['One', 'Tow', 'Three/Four', 'Five Six', "Seven and more"]
for (let i = 0; i < headings.length; i++) {
  console.log('headings: ', headings[i])
  const [popup] = await Promise.all([
    new Promise((resolve) => page.once('popup', resolve)),
    page.click('a[title~="' + headings[i] + '"]'),
  ]);
}

<tr class="rowDark">
    <td width="10%" align="center">
        <input type="checkbox" name="selectedCheckboxes" value="Five Six" disabled="disabled" id="FiveSix" />
    </td>
    <td width="90%" class="smallText" align="left">
        <a href="/is/ASD.do?action=create&area=Five Six&iType=e" class="textLink" target="sons" title="Five Six (opens new window)" onclick="return displayReason(this.href);">
      Five Six
      </a>
    </td>

</tr>

使用上面的代码，我收到以下错误：错误：找不到选择器的节点：a[title〜=“五六”]

Answer 1

您可以首先选择所有 .textLink 元素，然后按其标题值的文本过滤找到的元素。以下是两个用于按属性过滤元素的辅助函数：

// allows selecting a property from an elementhandle like title OR text or something,
async function getPropertyValue(element, property) {
  const textElement = await element.getProperty(property)
  const text = await textElement.jsonValue()
  return text.trim()
}

// filters an array of elementHandles against some property. 
// Ideal for filtering elements by its title value for example.
async function filterByPropertyValiue(elements, property, searchValue) {
  for(let element of elements) {

    // you can apply some transformations to value OR searchValue
    // in order to remove some stuff or make the matching appropriate to your
    // use case.
    const value = await getPropertyValue(element, property)
    if(value === searchValue) {
      // when found return element
      return element
    }
  }

  // if not found throw.
  throw 'Element not found by propertyValue. property: ' + property + ', value: ' + searchValue
}

在您的特定示例中，这现在应该可以工作：

const openPopup = async (page, titleText, timeoutMs) => {

  // return whole promise so timeout can be applied.
  const links = await page.$('a.textLink')

  // throws if target is not found.
  const target = await filterByPropertyValiue(links, 'title', titleText)

  const popup = new Promise((resolve, reject) => {
    page.once('popup', resolve)
    // it is nice to have a timeout on this.
    setTimeout(reject, timeoutMs)
  })

  // run the click not directly for letting the above
  // promise work first.
  process.nextTick(() => {
    page.click(target)
  })

  return popup
}

// ope the popups..
const headings = ['One', 'Tow', 'Three/Four', 'Five Six', "Seven and more"]
  // select links in advance..
  for (let i = 0; i < headings.length; i++) {
    console.log('headings: ', headings[i])
    const popup = await openPopup(page, headings[i], 15 * 1000)
  }