CODEWITHSUNDEEP
javascriptnode.jspuppeteer
James
James

Reputation: 207

Puppeteer: Find element by HTML attribute

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!

Upvotes: 5

Views: 26993

Answers (2)

Kdp
Kdp

Reputation: 58

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

Upvotes: 1

Sam L
Sam L

Reputation: 313

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"]');

  // ...
});

Upvotes: 7

Related Questions