Problems selecting a div depending on text inside

Question

i've been working on a project with puppeteer and it was going great so far until a tried to localize div's depending on their text. I can't use the div id, name or class, i need to find it by the text inside of it. My idea is to create an array of all the text i need to find and then loop trought the div's to find the ones that match any of the text in the array. Can anybody help me find a solution? Thank you!

Answer 1

This is relatively straightforward using vanilla javascript (no JS libraries):

// Get an array of all <divs>:
let allDivs = [... document.getElementsByTagName('div')];


// Loop through allDivs, checking the text of each one:
allDivs.forEach((div) => {

  let textInsideDiv = div.textContent;

  // THE REST OF YOUR CODE HERE
  // if (myArrayOfText.indexOf(textInsideDiv) > -1)) { etc.}
}

Answer 2

Matching by text isn't something you can do with plain CSS Selectors, but it is supported in jQuery and xPath, if they are possible for you to use.

The jQuery :contains() selector:

$('div:contains("yourText")')

The xPath text() selectors

$x('//div[text()="yourText"]')            // Match
$x('//div[contains(text(), "yourText")]') // Substring / Contains