Question 334069 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get Button element inside several shadow roots of html page (Metamask) using JS?

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.

Tags:

2

Answers


  1. 0

    Your button is placed inside several shadow-roots that are not rendered at the same moment after click on connect button.

    You should wait for every internal shadow-root to be rendered and only then check it’s structure and get another Shadow DOM.

    You can implement function waitFor that waits for function value to be truthy and return it’s value and function drillIntoShadowRoots that loops through shadow host and wait for it’s internal structure to be rendered.
    After last structure is rendered, you get target element.

    Modal shadow-hosts have tags correspondingly 'w3m-modal', 'w3m-router', 'w3m-connect-view', 'wui-list-wallet'

    let waitFor = async (action, timeoutMs = 10000, pollIntervalMs = 500) => {
  let isTimeout = false;
  const timeoutId = setTimeout(() => {
    isTimeout = true;
  }, timeoutMs);
  let result;
  while (!isTimeout && !result) {
    result = await action();
    await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
  }

  clearTimeout(timeoutId);
  if (isTimeout) {
    throw new Error('Timeout exceeded!');
  } else {
    return result;
  }
};

async function drillIntoShadowRoots(hostsSelectors, targetSelector) {
  let targetElement;
  const elementGetter = (s) => (targetElement ?? document).querySelector(s).shadowRoot;
  for (selector of hostsSelectors) {
    targetElement = await waitFor(() => elementGetter(selector));
  }
  return waitFor(() => targetElement.querySelector(targetSelector));
}

let openModalElement = await drillIntoShadowRoots(['w3m-button', 'w3m-connect-button'], '[data-testid=connect-button]');
openModalElement.click();
const walletConnectElement = await drillIntoShadowRoots(['w3m-modal', 'w3m-router', 'w3m-connect-view', 'wui-list-wallet'], 'button');
walletConnectElement.click();
    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search