Can't Import Private Key

[imacrosid]

Describe the problem
Actually I'm facing 2 problem, When I try to setup metamask it doesn't use my config (seed, password & always show testnet) but it's okay. I just want to know how to fix failed when trying to import PK.

You think I'm doing wrong step ? Please let me know thanks.

async function task5_Week3(newPrivateKey) {
  const newSeed =
    "test test test test test test test test test test test test ";
  const DappeteerLaunchOptions = {
    metaMaskVersion: "v11.12.1",
    metaMaskPath: "metamask-chrome-11.12.1.zip",
    automation: "puppeteer",
    headless: false,
  };

  const MetaMaskOptions = {
    seed: newSeed,
    password: "Abc12345",
    showTestNets: false,
  };
  try {
    const { metaMask, browser } = await dappeteer.bootstrap(
      DappeteerLaunchOptions,
      MetaMaskOptions
    );
    const dappPage = await browser.newPage();
    await dappPage.goto("https://www.google.com");
    await metaMask.importPK(newPrivateKey);
  } catch (error) {
    console.error("Something Wrong:", error);
  }
}

Log

Something Wrong: TimeoutError: Waiting for selector `.//span[contains(.,'Eth_sign requests')]/parent::div/following-sibling::div/div/div/div|//span[contains(.,'Eth_sign requests')]/parent::div/following-sibling::div/div/label/div` failed: Waiting failed: 30000ms exceeded

System:

• OS Windows 10 Home Single Language
• NodeJs v20.10.0
• dappeteer 5.2.1
• puppeteer 21.6.1

[eugene-ray]

Having the same issue and can't find a workaround so far.

[jeasonnow]

The current version of dappeteer supports an older version of the MetaMask extension. In the latest version, the DOM structure of the MetaMask toggle component has changed. Please refer to the snapshot for details.

from: //span[contains(.,'${text}')]/parent::div/following-sibling::div/div/label/div
to: //span[contains(.,'${text}')]/parent::div/following-sibling::div/label/div

<div
      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
      data-testid="advanced-setting-toggle-ethsign"
    >
      <div
        class="settings-page__content-item"
      >
        <span>
          Eth_sign requests
        </span>
        <div
          class="settings-page__content-description"
        >
          If you enable this setting, you might get signature requests that aren’t readable. By signing a message you don't understand, you could be agreeing to give away your funds and NFTs.
        </div>
      </div>
      <div
        class="settings-page__content-item-col"
      >
        <label
          class="toggle-button toggle-button--off eth-sign-toggle"
          tabindex="0"
        >
          <div
            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
          >
            <div
              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
            >
              <div
                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
              />
              <div
                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
              />
            </div>
            <div
              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
            >
              <div
                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
              />
            </div>
            <input
              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
              type="checkbox"
              value="false"
            />
          </div>
          <div
            class="toggle-button__status"
          >
            <span
              class="toggle-button__label-off"
            >
              OFF (Recommended)
            </span>
            <span
              class="toggle-button__label-on"
            >
              ON (Not recommended)
            </span>
          </div>
        </label>
      </div>
    </div>

The method used by the current version of dappeteer to access this toggle is as follows:

export const getSettingsSwitch = (
  page: DappeteerPage,
  text: string
): Promise<DappeteerElementHandle | null> =>
  page.waitForXPath(
    [
      `//span[contains(.,'${text}')]/parent::div/following-sibling::div/div/div/div`,
      `//span[contains(.,'${text}')]/parent::div/following-sibling::div/div/label/div`,
    ].join("|"),
    { visible: true }
  );

To fix this issue, a new XPath needs to be added：//span[contains(.,'${text}')]/parent::div/following-sibling::div/label/div