Puppeteer: remove attribute

Question

<div>
  <button class="button--primary button--filled" disabled="disabled" data-action="publish">
   <span class="ButtonText">Save and publish
   </span>
  </button>
</div>

I have the above button element on browser and I couldn't enable it unless I remove the disabled="disabled" attribute. Setting another value didn't help.

Is there a way to remove the attribute completely? (Using page.$eval() is preferable)

Answer 1

As pointed out in the comments, you can use Element.removeAttribute(attrName):

const puppeteer = require("puppeteer"); // ^24.4.0

const html = `
<div>
  <button class="button--primary button--filled" disabled="disabled" data-action="publish">
   <span class="ButtonText">Save and publish
   </span>
  </button>
</div>`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const sel = '.button--primary.button--filled[disabled="disabled"]';
  const el = await page.waitForSelector(sel);
  await page.$eval(sel, el => el.removeAttribute("disabled"));
  console.log(await el.evaluate(el => el.outerHTML));
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

Output (with disabled="disabled" removed):

<button class="button--primary button--filled" data-action="publish">
   <span class="ButtonText">Save and publish
   </span>
  </button>