无法在浏览器控制台中使用 javascript select 复选框

Question

我正在使用支持 javascript 的工具自动化我们的应用程序。导航到浏览器控制台的页面，我正在尝试使用 document.queryselector 方法 select web 组件内的复选框，但我无法成功选中该框。

尝试过.checked = true 、select 和提交表单。

我在这家公司和工具方面相对较新，所以需要一些提示。

Answer 1

您正在使用返回数组的querySelectorAll() ，因此您需要指定要更改的数组的 position。 实际上在图像中显示 function 返回一个包含 2 个元素的数组。

Answer 2

您可以使用 for 循环或需要指定 position。

var checkboxes = document.querySelectorAll('selector');
for (var i = 0, len = checkboxes.length; i < len; i++) {
//work with checkboxes[i].checked = true;
}

Answer 3

首先需要检查 DOM（元素检查器）：
这个 Web 组件是否有shadow-root ？

如果是这样，您需要使用以下内容“进入”：
document.querySelector("my-component").shadowRoot.querySelector("....").checked=true

更好的是使用潜入 shadowRoots 的 DOM 潜水：

const shadowDive = (
           el,
           selector,
           match = (el,root)=>{  console.warn('match', el, root); }
)=>{
    let root = el.shadowRoot || el;
    root.querySelector(selector) && match(root.querySelector(selector), root);
    [...root.querySelectorAll("*")].map( el => shadowDive(el, selector, match) );
}
shadowDive( document.body ); // note optional 2nd, 3rd parameter