[FIXED] How to get Button element inside several shadow roots of html page (Metamask) using JS?

Issue

I need to get the button to connect the Metamask wallet to Metis network (https://decentralize.metis.io/) using Javascript.

I want to get the Metamask button in below screen: But the button is hidden hin shadow root of the page

I tried to use below script to access the Metamask button but I cannot

document.querySelector('w3m-modal').shadowRoot.querySelector('wui-flex style').shadowRoot.querySelector('wui-card').shadowRoot.querySelector('w3m-router').shadowRoot.querySelector('w3m-connect-view').shadowRoot.querySelector('wui-flex').shadowRoot.querySelectorAll('wui-list-wallet')[1].shadowRoot.querySelector('button').click(); 

But it cannot run and return the error. Could you please help to review and advise? Thank you.

Solution

Try the below to click on the Metamask

document.querySelector('w3m-modal').shadowRoot.querySelector('w3m-router').shadowRoot.querySelector('w3m-connect-view').shadowRoot.querySelector('wui-flex').querySelector('wui-list-wallet:nth-child(3)').shadowRoot.querySelector('button').click();

Answered By - YaDav MaNish