Puppeteer page click using attribute selector with spaces

Question

This Meteor code uses Puppeteer 13.1.2 on the server. It uses a for loops to open an a link using its title attribute. It works as long as the value has no spaces but it failes to open the popup page with the attribute values that contains spaces. Any idea how to open these popups? Thanks

 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>

With above code I got following error: Error: No node found for selector: a[title~="Five Six"]

Answer 1

You could first select all .textLink elements and then filter the found elements by its title value's text. Here are 2 helper functions for filtering elements by its properties:

// 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
}

On your particular example this should now work:

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