-1

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!

Marlo
  • 490
  • 3
  • 7
  • 21
  • `document.querySelector('button[data-id="purple-button"]')` forget disabled attribute, it's not signifiant – Mister Jojo Mar 17 '21 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 '21 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 '21 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? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter – Mark Schultheiss Mar 17 '21 at 21:56

3 Answers3

3

You should use brackets to separate the attributes.

document.querySelector('button[data-id="purple-button"][disabled]')

Per this Stack Overflow answer

Clay Roper
  • 86
  • 5
0

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"
Ryan o
  • 23
  • 1
  • 4
0

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>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100