无法在“文档”上执行“querySelector”：“button[data-id="purple-button" disabled]”不是有效的选择器答案

【问题标题】：Failed to execute 'querySelector' on 'Document': 'button[data-id="purple-button" disabled]' is not a valid selector无法在“文档”上执行“querySelector”：“button[data-id="purple-button" disabled]”不是有效的选择器
【发布时间】：2021-03-17 21:40:45
【问题描述】：

如何查询具有多个属性的元素？ IE。我想根据元素类型、data-id以及是否为disabled来选择元素。

这里是html：

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

这是我的测试代码：

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

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

提前致谢！

【问题讨论】：

document.querySelector('button[data-id="purple-button"]')忘记禁用属性，它并不重要
感谢@MisterJojo，但禁用按钮对我来说很重要。有没有办法检查呢？
忘记禁用属性，它并不重要，没有禁用属性的按钮在禁用测试时总是返回 false
感觉你想获得一些元素的数组？我建议一旦你得到你.filter()那些“禁用”的匹配项？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript html jestjs puppeteer queryselector

【解决方案1】：

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

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

每this Stack Overflow answer

【讨论】：

谢谢，这正是我想要的！欢迎来到 Stackoverflow！

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：