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

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

如何查询具有多个属性的元素？ IE。我想根据元素类型、数据 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"][disabled]')

每this Stack Overflow answer

,

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

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

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

,

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

谨慎对待那些 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>