Using puppeteer get a selector from an input label

user_10188650 0
Viewed 861

So, I have a front end in React.js or Ember.js - not sure. I'm just trying to automate some testing for it. When looking at the HTML in the Chrome Dev Tools, I see

<label class="MuiFormLabel-root-16 MuiInputLabel-root-5 MuiInputLabel-formControl-10 MuiInputLabel-animated-13 MuiInputLabel-outlined-15" data-shrink="false">Username</label>

This is set in an iframe (which isn't too important for this issue). I'm trying to get the ElementHandler using the puppeteer function

frame.$(selector)

How do I get the selector given

Username

I've tried a few things, but with little success.

puppeteer selector
2 Answers

If I understand correctly, you need to find an element by its text content. If so, these are at least two ways:

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch(); // { headless: false, defaultViewport: null, args: ['--lang=en'] }
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    const element1 = await page.evaluateHandle(() => {
      return [...document.querySelectorAll('h1')].find(h1 => h1.innerText === 'Example Domain');
    });
    console.log(await (await element1.getProperty('outerHTML')).jsonValue());

    const [element2] = await page.$x('//h1[text()="Example Domain"]');
    console.log(await (await element2.getProperty('outerHTML')).jsonValue());

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();
user_26255600

My solution was to place HTML data attributes in the front end code so that I can easily select them.

user_101886500
Related