Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Unable to adopt element handle from a different document

See original GitHub issue

Context:

Playwright Version: 1.2.1
Operating System: Mac
Node version: v12.16.3
Browser: Chromium

Code Snippet

const { chromium } = require("playwright-chromium");

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://haircuttery.com");
  await page.click("#salonSearch-header");
  await page.fill("#salonSearch-header", "59718");
  await page.click("#submit");
  await page.click(
    '[href="/client/checkin.html?reqType=newappointment&salonid=4390"]'
  );

  // error here
  await page.waitForSelector("html");
})();

Describe the bug

We want to get the html element to scroll it. However we are unable to get the element since it fails with this error: await page.waitForSelector("html"); fails with “Unable to adopt element handle from a different document”

 pw:api   waiting for scheduled navigations to finish [] +0ms
  pw:api navigated to "https://haircuttery.com/client/checkin.html?reqType=newappointment&salonid=4390" [] +261ms
  pw:api   navigations have finished [] +3ms
  pw:api <= page.click succeeded +0ms
  pw:api => page.waitForSelector started +1ms
  pw:api waiting for selector "html" to be visible [] +0ms
  pw:api   selector resolved to visible <html lang="en">…</html> [] +48ms
  pw:api <= page.waitForSelector failed +312ms
(node:91208) UnhandledPromiseRejectionWarning: Error: Unable to adopt element handle from a different document
================ page.waitForSelector logs ================
[api] waiting for selector "html" to be visible
[api]   selector resolved to visible <html lang="en">…</html>
============================================================
Note: use DEBUG=pw:api environment variable and rerun to capture Playwright logs.
    at FrameSession._adoptBackendNodeId (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/chromium/crPage.js:745:19)
    at runMicrotasks (<anonymous>)
    at runNextTicks (internal/process/task_queues.js:62:5)
    at processImmediate (internal/timers.js:429:9)
    at async /Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/frames.js:394:33
    at async ProgressController.run (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/progress.js:77:28)
    at async /Users/jon/dev/examples/pw-core/haircuttery.js:13:3
  -- ASYNC --
    at Frame.waitForSelector (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/helper.js:78:23)
    at /Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/page.js:131:61
    at Page._attributeToPage (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/page.js:356:20)
    at Page.waitForSelector (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/page.js:131:21)
    at Page.waitForSelector (/Users/jon/dev/examples/pw-core/node_modules/playwright-chromium/lib/helper.js:79:31)
    at /Users/jon/dev/examples/pw-core/haircuttery.js:13:14
    at runNextTicks (internal/process/task_queues.js:62:5)
    at processImmediate (internal/timers.js:429:9)
(node:91208) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:91208) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:12 (7 by maintainers)

Top GitHub Comments

1reaction

HelenMariiacommented, Jun 22, 2021

Hey! I have the same issue but with different details. I’ll try to provide them:

Context: Playwright Version: 1.10.0 Jest-playwright-preset: ~1.5.2 Operating System: Ubuntu Node version: v12.13.0 Browser: Chromium

Code Snippet

it('Check user's products', async () => {
   ...
  // here where related logic starts: 
  await page.waitForSelector(selectors.linkTile);
  const tiles = await page.$$(selectors.linkTile);
  const productIds: string[] = [];

  for (const tile of tiles) {
    productIds.push(await readMetadata(tile));
  }
  expect(productIds.every((id) => user.availableProducts.includes(id))).toEqual(true);
  });

This code uses readMetadata helper. Here this mistakes comes:

export const readMetadata = async (element: ElementHandle<SVGElement | HTMLElement>): Promise<string> => {
return (await element.getAttribute(DATA_META_SELECTOR)) as string;
};

Describe the bug

 elementHandle.getAttribute: Unable to adopt element handle from a different document

      3 |
      4 | export const readMetadata = async (element: ElementHandle<SVGElement | HTMLElement>): Promise<string> => {
    > 5 |   return (await element.getAttribute(DATA_META_SELECTOR)) as string;
        |                         ^
      6 | };
      7 |
      at Object.captureStackTrace (../node_modules/playwright/lib/utils/stackTrace.js:48:19)
      at Connection.sendMessageToServer (../node_modules/playwright/lib/client/connection.js:69:48)
      at Proxy.<anonymous> (../node_modules/playwright/lib/client/channelOwner.js:64:61)
      at ../node_modules/playwright/lib/client/elementHandle.js:75:42
      at ElementHandle._wrapApiCall (../node_modules/playwright/lib/client/channelOwner.js:77:34)
      at ElementHandle.getAttribute (../node_modules/playwright/lib/client/elementHandle.js:74:21)
      at tests/helpers/metadata.ts:5:25
      at step (tests/helpers/metadata.ts:33:23)
      at Object.next (tests/helpers/metadata.ts:14:53)
      at tests/helpers/metadata.ts:8:71

or at the same place sometimes happens one more problem:

elementHandle.getAttribute: Protocol error (DOM.describeNode): Cannot find context with specified id

      3 |
      4 | export const readMetadata = async (element: ElementHandle<SVGElement | HTMLElement>): Promise<string> => {
    > 5 |   return (await element.getAttribute(DATA_META_SELECTOR)) as string;
        |                         ^
      6 | };
      7 |

      at Object.captureStackTrace (../node_modules/playwright/lib/utils/stackTrace.js:48:19)
      at Connection.sendMessageToServer (../node_modules/playwright/lib/client/connection.js:69:48)
      at Proxy.<anonymous> (../node_modules/playwright/lib/client/channelOwner.js:64:61)
      at ../node_modules/playwright/lib/client/elementHandle.js:75:42
      at ElementHandle._wrapApiCall (../node_modules/playwright/lib/client/channelOwner.js:77:34)
      at ElementHandle.getAttribute (../node_modules/playwright/lib/client/elementHandle.js:74:21)
      at tests/helpers/metadata.ts:5:25
      at step (tests/helpers/metadata.ts:33:23)
      at Object.next (tests/helpers/metadata.ts:14:53)
      at tests/helpers/metadata.ts:8:71

1reaction

jperlcommented, Jul 21, 2020

Sorry it’s a weird reproduction, just something I encountered using playwright on random sites. This is a slightly more robust selector that is not geographically dependent.

const { chromium } = require("playwright-chromium");

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://haircuttery.com");
  await page.click("#salonSearch-header");
  await page.fill("#salonSearch-header", "60007");
  await page.click("#submit");
  await page.click("text=Book Your Appointment Now");
  // instead of  await page.click('[href="/client/checkin.html?reqType=newappointment&salonid=4390"]');
  await page.waitForSelector("html");
  await browser.close();
})();

Top Results From Across the Web

getting a handle on an element in the context of another

But what I need is a handle on the label element so that I can get its sibling field so I can type...

feature(evaluate): support cross-context element handles (#295)

throw new Error('Unable to adopt element handle from a different document');, throw new Error('Unable to adopt element handle from a different document');.

ElementHandle class - Puppeteer

ElementHandle prevents the DOM element from being garbage-collected unless the handle is disposed. ElementHandles are auto-disposed when their origin frame ...

WebDriver - W3C

WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral ...

Dropping and Adding Online Classes - Confluence

Issuing Office. Registrar's Office. Affected Parties. Students. Policy Language. Liberty University Online students may register for courses online through ...