How do I query for an element with multiple attributes? I.E. I want to select the element based on its element type, data-id, and whether it is disabled or not.

Here is the html:

<button disabled="" data-id="purple-button">...</button>

and here is my test code:

await page.evaluate(
    () => document.querySelector('button[data-id="purple-button" disabled]') !== null,

The error when I try running the test is the title of this post. I have tried looking at other solutions on stackoverflow but have not found any yet that use examples of elements with multiple attributes.

Thanks in advance!

  • document.querySelector('button[data-id="purple-button"]') forget disabled attribute, it's not signifiant – Mister Jojo Mar 17 at 21:42
  • Thanks @MisterJojo, but it is important to me that the button is disabled. Is there a way to check that too? – Marlo Mar 17 at 21:44
  • forget disabled attribute, it's not signifiant ,a button with no disabled attribute will always return false on a disabled test – Mister Jojo Mar 17 at 21:46
  • Feels like you want to get an array of some elements perhaps? I would suggest once you get the matches that you .filter() those for "disabled" perhaps? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Mark Schultheiss Mar 17 at 21:56

You should use brackets to separate the attributes.


Per this Stack Overflow answer

  • Thanks, this is exactly what I was looking for! And welcome to Stackoverflow! – Marlo Mar 18 at 15:41

Most of the time when a button is disabled it has an "aria-label" or something that changes when a button goes to enabled -> disabled.

This is how I usually check when a pageable button has reached the end.

document.querySelector('button[data-id="purple-button"').getAttribute("aria-label") == "disabled"

I see a couple of issues with your code so I include that as well.

Use caution with those disabled=, see here for example where I get a node list then filter them to get those that are disabled.

Note you can also leverage the .length as a boolean with a !!, so I included that example as well (not your !== null; thing)

let purples = document.querySelectorAll('button[data-id="purple-button"]');
console.log("p:", purples.length);
let purplesDisabled = Array.prototype.filter.call(purples, function(el) {
  return el.disabled;
console.log("p:", purples.length, "pD:", purplesDisabled.length, !!purplesDisabled.length);

let greens = document.querySelectorAll('button[data-id="green-button"]');
console.log("p:", greens.length);
let greensDisabled = Array.prototype.filter.call(greens, function(el) {
  return el.disabled;
console.log("g:", greens.length, "gD:", greensDisabled.length, "Boolean:", !!greensDisabled.length);
<button disabled data-id="purple-button">...</button>
<button disabled data-id="purple-button">...</button>
<button data-id="purple-button">...</button>
<button disabled="fred" data-id="purple-button">...</button>
<button disabled=false data-id="purple-button">Nope, it is disabled</button>
<button disabled="false" data-id="purple-button">Not Really NOT disabled</button>

<button data-id="green-button">...</button>
<button data-id="green-button">...</button>
<button data-id="green-button">...</button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.