無法在瀏覽器控制台中使用 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