无法在 'Document' 上执行 'querySelector'：'button[data-id="purple-button" disabled]' 不是有效的选择器

Question

如何查询具有多个属性的元素？ IE。我想 select 基于元素类型 data-id 的元素，以及它是否 disabled。

这里是 html:

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

这是我的测试代码：

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

我尝试运行测试时的错误是这个 post 的标题。我曾尝试查看 Whosebug 上的其他解决方案，但尚未找到任何使用具有多个属性的元素示例的解决方案。

提前致谢！

Answer 1

大多数情况下，当按钮被禁用时，它有一个“aria-label”或者当按钮变为启用 -> 禁用时会发生变化的东西。

这是我通常检查可分页按钮何时到达末尾的方式。

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

Answer 2

您应该使用方括号来分隔属性。

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

每

Answer 3

我发现您的代码存在一些问题，因此我也将其包括在内。

谨慎对待那些 disabled=，例如，请参见此处，我在此处获取节点列表，然后过滤它们以获取禁用的节点。

请注意，您还可以将 .length 作为布尔值与 !! 一起使用，因此我也包含了该示例（不是您的 !== null; 东西）

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>

无法在 'Document' 上执行 'querySelector'：'button[data-id="purple-button" disabled]' 不是有效的选择器

Failed to execute 'querySelector' on 'Document': 'button[data-id="purple-button" disabled]' is not a valid selector

html

javascript

jestjs

puppeteer

queryselector