Puppeteer: Find element by HTML attribute

Question

Essentially, I am trying to get Puppeteer to find an element on this page by its attribute data-form-field-value which must equal 244103310504090.

This is the HTML code to the button:

<section class="fl-accordion-tab--content">
<div class="fl-product-size">
</button><button class="fl-product-size--item fl-product-size--item__is- 
selected" type="button" data-form-field-target="SKU" data-form-field-base-css- 
name="fl-product-size--item" data-form-field-value="244103310504090" data-form- 
field-unselect-group="" data-testid="fl-size-244103310504-US-9" data-product- 
size-select-item="244103310504090" data-form-field-selected="true">
<span>9</span>
</button></div>
</section>

I've tried with a few things however I cannot seem to find a solution, any help is appreciated!

Lick

Hi! Care to show the piece of code you've tried? Also, your HTML seems weird with that </button> closing tag out of place. – Cartulary

Answer 1

Looking at the documentation for Puppeteer, you need to construct an element selector for the attribute you have specified.

The MDN documentation for attribute selectors explains how to do this:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Select the element using the attribute
  const element = await page.$('[data-form-field-value="244103310504090"]');

  // ...
});

Icelander

hmm yea I have an element selector already setup but all the xpaths I've tried including the one you just suggested are not working... This is the actual xpath of the object which works: //*[@id="fitanalytics_sizecontainer"]/section[2]/div/button[5] but obviously I'm trying to find the element by its attribute, not via this exact xpath – Lick

Are you definitely using page.$ and not page.xpath? Please could you paste the exact code you're using - this function should use standard CSS selectors and not XPath – Icelander

yes I am definitely using page.$, see my code here: const [sizeOption] = await page.$('[data-form-field-value="244103310504090"]'); if (sizeOption) { await sizeOption.click(); } – Lick

page.$ will only ever return a single element (page.$$ returns an array), you should be able to rewrite that code as: const sizeOption = await page.$('[data-form-field-value="244103310504090"]'); if (sizeOption) { await sizeOption.click(); } – Icelander

But that's the exact same code I sent above, just without the [] around the const which is needed for the .click() function – Lick

@Lick I'm saying that you shouldn't need the [] for the click function, because page.$ returns a promise which evaluates to a single element - not an array – Icelander

Hmm well without the [], it gives me this error: UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement but it's definitely visible – Lick

Answer 2

You can simply do this by await page.$('xpath///*[@data-form-field-value="244103310504090"]');

Dahna