Unable to select checkbox using javascript in browser console

Question

i am automating our application using a tool that supports javascript.Navigated to the page at browser console, i am trying to select the checkbox inside a web component using document.queryselector method but i am not able to succeed in checking the box.

tried .checked = true , select and submitform.

i am relatively new in this company and to the tool, so need some tip.

Answer 1

You are using querySelectorAll() that return an array, so you need to specify the position of the array that you want to change. Actually in the image show that the function return an array with 2 elements.

Answer 2

You can use for loop or need to specify the position.

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

Answer 3

First thing you need to check in the DOM (Elements Inspector):
Does this Web Component have a shadow-root ??

If so you need to "go in" with something like:
document.querySelector("my-component").shadowRoot.querySelector("....").checked=true

Better yet is to use a DOM dive that dives into shadowRoots:

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