Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use getPublicRootInstance method in Playwright Internal
Best JavaScript code snippet using playwright-internal
reactDom_render.js
Source:reactDom_render.js 
...16 // è¿éå¤ççæ¯ ReactDOM.render å
¥åä¸çåè°å½æ°17 if (typeof callback === 'function') {18 var originalCallback = callback;19 callback = function() {20 var instance = getPublicRootInstance(fiberRoot);21 originalCallback.call(instance)22 }23 }24 // éæ¹éæ´æ°25 unbatchedUpdates(function() {26 updateContainer(children, fiberRoot, parentComponent, callback);27 });28 } else {29 fiberRoot = root._internalRoot;30 if (typeof callback === 'function') {31 var originalCallback = callback;32 callback = function() {33 var instance = getPublicRootInstance(fiberRoot);34 originalCallback.call(instance)35 }36 }37 updateContainer(children, fiberRoot, parentComponent, callback)38 }39 return getPublicRootInstance(fiberRoot)40}41/**42 * 2ãrenderé¶æ®µ43 * ReactDOM.render触åçåæ¥æ¨¡å¼ä¸ï¼å®ä»æ¯ä¸ä¸ªæ·±åº¦ä¼å
æç´¢çè¿ç¨ï¼44 * beginWorkå°å建æ°çFiberèç¹ï¼ècompleteWorkåè´è´£å°Fiberèç¹æ å°ä¸ºDOMèç¹45 */46// åæ°currentæ¯ç°ææ ç»æä¸ç rootFiber 对象47function createWorkInProgress(current, pendingProps) {48 var workInProgress = current.alternate;49 // ReactDOM.render触åçé¦å±æ¸²æå°è¿å
¥æ¤é»è¾50 if (workInProgress === null) {51 // workInProgress æ¯ createFiber æ¹æ³çè¿åå¼ãå°±æ¯currentçå¯æ¬52 workInProgress = createFiber(current.tag, pendingProps, current.key, current.mode);53 workInProgress.elementType = current.elementType;...
ReactDOMLegacy.js
Source:ReactDOMLegacy.js
...38 console.log("root==>", root)39 // if (typeof callback === "function") {40 // const originalCallback = callback;41 // callback = function () {42 // const instance = getPublicRootInstance(fiberRoot)43 // // æ§è¡åè°å½æ°,å¨æ ¹fiberèç¹å建å®æçæ¶åæ§è¡åè°å½æ°44 // originalCallback.call(instance)45 // }46 // }47 // unbatchedUpates(() => {48 // updateContainer(children, fiberRoot, parentComponent, callback)49 // })50 } else {51 fiberRoot = root._internalRoot52 if (typeof callback === "function") {53 const originalCallback = callback;54 callback = function () {55 const instance = getPublicRootInstance(fiberRoot);56 originalCallback.call(instance)57 }58 }59 updateContainer(children, fiberRoot, parentComponent, callback)60 }61 return getPublicRootInstance(fiberRoot)62}63function getPublicRootInstance(container) {64 const containerFiber = container.current;65 if (!containerFiber.child) {66 return null67 }68 return containerFiber.child.stateNode69}70/**71 * ä»container domåå»ºæ ¹èç¹72 * @param container 73 * @param forceHydrate 74 */75function legacyCreateRootFromDOMContainer(container, forceHydrate) {76 // å¦æéssrï¼å
æ¸
空å
容77 if (!forceHydrate) {...
ReactFiberReconciler.js
Source:ReactFiberReconciler.js
...39 updateContainer(element : ReactElement<any>, container : OpaqueNode) : void,40 unmountContainer(container : OpaqueNode) : void,41 performWithPriority(priorityLevel : PriorityLevel, fn : Function) : void,42 // Used to extract the return value from the initial render. Legacy API.43 getPublicRootInstance(container : OpaqueNode) : (C | null),44};45module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconciler<C> {46 var { scheduleWork, performWithPriority } = ReactFiberScheduler(config);47 return {48 mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode {49 const root = createFiberRoot(containerInfo);50 const container = root.current;51 // TODO: Use pending work/state instead of props.52 // TODO: This should not override the pendingWorkPriority if there is53 // higher priority work in the subtree.54 container.pendingProps = element;55 scheduleWork(root);56 // It may seem strange that we don't return the root here, but that will57 // allow us to have containers that are in the middle of the tree instead58 // of being roots.59 return container;60 },61 updateContainer(element : ReactElement<any>, container : OpaqueNode) : void {62 // TODO: If this is a nested container, this won't be the root.63 const root : FiberRoot = (container.stateNode : any);64 // TODO: Use pending work/state instead of props.65 root.current.pendingProps = element;66 scheduleWork(root);67 },68 unmountContainer(container : OpaqueNode) : void {69 // TODO: If this is a nested container, this won't be the root.70 const root : FiberRoot = (container.stateNode : any);71 // TODO: Use pending work/state instead of props.72 root.current.pendingProps = [];73 scheduleWork(root);74 },75 performWithPriority,76 getPublicRootInstance(container : OpaqueNode) : (C | null) {77 return null;78 },79 };...
ReactDOM.render.js
Source:ReactDOM.render.js
...21 if (typeof callback === 'function') {22 var originalCallback = callback;23 callback = function () {24 // console.log(root._internalRoot) fiberRootå®ä¾25 var instance = DOMRenderer.getPublicRootInstance(root._internalRoot);26 console.log(instance) //ç»ä»¶å®ä¾ Appç»ä»¶å®ä¾27 originalCallback.call(instance);28 };29 }30 // Initial mount should not be batched.31 // é¦æ¬¡æå
¥å¿
é¡»åæ¥æ§è¡ï¼ä¸è½æ¹éæå
¥32 DOMRenderer.unbatchedUpdates(function () {33 // å¦æåå¨parentComponentï¼æ¸²æåæ 34 if (parentComponent != null) {35 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);36 } else {37 //ç´æ¥å°childrenæå
¥container38 root.render(children, callback);39 }40 });41 } else {4243 // éé¦æ¬¡æ¸²æ44 if (typeof callback === 'function') {45 var _originalCallback = callback;46 callback = function () {47 var instance = DOMRenderer.getPublicRootInstance(root._internalRoot);48 _originalCallback.call(instance);49 };50 }51 // Update52 if (parentComponent != null) {53 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);54 } else {55 root.render(children, callback);56 }57 }58 return DOMRenderer.getPublicRootInstance(root._internalRoot);59 }60 6162 function legacyCreateRootFromDOMContainer(container, forceHydrate) {63 var shouldHydrate = forceHydrate || shouldHydrateDueToLegacyHeuristic(container);64 // First clear any existing content.6566 // æ¸
é¤containerå
ç´ çææåå
ç´ 67 if (!shouldHydrate) {68 var warned = false;69 var rootSibling = void 0;70 while (rootSibling = container.lastChild) {71 72 container.removeChild(rootSibling);
...
react-dom-tools.js
Source:react-dom-tools.js
...21 if (typeof callback === 'function') {22 var originalCallback = callback;23 24 callback = function () {25 var instance = getPublicRootInstance(fiberRoot);26 originalCallback.call(instance);27 };28 } // Initial mount should not be batched.29 30 31 unbatchedUpdates(function () {32 updateContainer(children, fiberRoot, parentComponent, callback);33 });34 } else {35 fiberRoot = root;36 37 if (typeof callback === 'function') {38 var _originalCallback = callback;39 40 callback = function () {41 var instance = getPublicRootInstance(fiberRoot);42 43 _originalCallback.call(instance);44 };45 } // Update46 47 48 updateContainer(children, fiberRoot, parentComponent, callback);49 }50 51 return getPublicRootInstance(fiberRoot);...
legacyRenderSubtreeIntoContainer.js
Source:legacyRenderSubtreeIntoContainer.js
...25 fiberRoot = root._internalRoot;26 if (typeof callback === 'function') {27 const originalCallback = callback;28 callback = function() {29 const instance = getPublicRootInstance(fiberRoot);30 originalCallback.call(instance);31 };32 }33 // Initial mount should not be batched.34 unbatchedUpdates(() => {35 updateContainer(children, fiberRoot, parentComponent, callback);36 });37 } else {38 // éé¦æ¬¡æè½½39 fiberRoot = root._internalRoot;40 if (typeof callback === 'function') {41 const originalCallback = callback;42 callback = function() {43 const instance = getPublicRootInstance(fiberRoot);44 originalCallback.call(instance);45 };46 }47 // Update48 updateContainer(children, fiberRoot, parentComponent, callback);49 }50 return getPublicRootInstance(fiberRoot);...
index.js
Source:index.js
...10 unbatchedUpdate(() => {11 debugger;12 root.render(element, callback);13 })14 return getPublicRootInstance(root._internalRoot);15}16function getPublicRootInstance (container) {17 const containerFiber = container.current;18 if (!containerFiber.child) {19 return null;20 }21 switch (containerFiber.child.tag) { 22 case HostComponent:23 return getPublicInstance(containerFiber.child.stateNode); 24 default:25 return containerFiber.child.stateNode;26 }27}28function legacyCreateFromContainer (container) {...
render.js
Source:render.js
1import ReactReconciler from 'react-reconciler';2import hostConfig from './hostConfig';3export const ReactReconcilerInst = ReactReconciler(hostConfig);4function getPublicRootInstance(container) {5 const containerFiber = container.current;6 if (!containerFiber.child) {7 return null;8 }9 return containerFiber.child.stateNode;10}11export default function render(rootElement, container) {12 if (!container._rootContainer) {13 container._rootContainer = ReactReconcilerInst.createContainer(container, 0, false, null);14 }15 ReactReconcilerInst.updateContainer(rootElement, container._rootContainer, null, () => {16 });17 return getPublicRootInstance(container._rootContainer);...
Using AI Code Generation
1const playwright = require('playwright');2const { getPublicRootInstance } = require('playwright/lib/server/browserContext');3(async () => {4 const browser = await playwright.chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const root = getPublicRootInstance(page);8 console.log(root);9 await browser.close();10})();11PlaywrightElementHandle {12 _channel: ChannelOwner {13 },14 _page: PlaywrightPage {15 _channel: ChannelOwner {16 },17 _browserContext: PlaywrightBrowserContext {18 _channel: ChannelOwner {19 },20 _browser: PlaywrightBrowser {21 _channel: ChannelOwner {22 },23 },24 _options: { viewport: null, ignoreHTTPSErrors: false, bypassCSP: false, javaScriptEnabled: true, userAgent: null, timezoneId: null, locale: null, geolocation: null, permissions: null, extraHTTPHeaders: null, offline: false, httpCredentials: null, deviceScaleFactor: null, isMobile: false, hasTouch: false, colorScheme: null, acceptDownloads: false, _recordVideo: null, _recordHar: null, _videoSize: null, _timeoutSettings: [TimeoutSettings], _logger: [Logger] },25 },26 _options: { viewport: null, ignoreHTTPSErrors: false, bypassCSP: false, javaScriptEnabled
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/frames');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const frame = page.mainFrame();8 const publicRootInstance = getPublicRootInstance(frame);9 console.log(publicRootInstance);10 await browser.close();11})();
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/domServer');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const rootInstance = await page.evaluateHandle(() => document);8 const rootElement = getPublicRootInstance(rootInstance);9 console.log(rootElement);10 await browser.close();11})();12{13 _ownerDocument: {14 _cookieCache: {},
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/browserContext');2const context = await browser.newContext();3const page = await context.newPage();4const publicRootInstance = getPublicRootInstance(page);5console.log(publicRootInstance);6await page.close();7await context.close();8const { getPublicRootInstance } = require('playwright/lib/server/browserContext');9const context = await browser.newContext();10const page = await context.newPage();11const publicRootInstance = getPublicRootInstance(page);12console.log(publicRootInstance);13await page.close();14await context.close();15const { getPublicRootInstance } = require('playwright/lib/server/browserContext');16const context = await browser.newContext();17const page = await context.newPage();18const publicRootInstance = getPublicRootInstance(page);19console.log(publicRootInstance);20await page.close();21await context.close();22const { getPublicRootInstance } = require('playwright/lib/server/browserContext');23const context = await browser.newContext();24const page = await context.newPage();25const publicRootInstance = getPublicRootInstance(page);26console.log(publicRootInstance);27await page.close();28await context.close();29const { getPublicRootInstance } = require('playwright/lib/server/browserContext');30const context = await browser.newContext();31const page = await context.newPage();32const publicRootInstance = getPublicRootInstance(page);33console.log(publicRootInstance);34await page.close();35await context.close();36const { getPublicRootInstance } = require('playwright/lib/server/browserContext');37const context = await browser.newContext();38const page = await context.newPage();39const publicRootInstance = getPublicRootInstance(page);40console.log(publicRootInstance);41await page.close();42await context.close();43const { getPublicRootInstance } = require('playwright/lib/server/browserContext');44const context = await browser.newContext();45const page = await context.newPage();46const publicRootInstance = getPublicRootInstance(page);47console.log(publicRootInstance);48await page.close();49await context.close();
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/dom')2const { chromium } = require('playwright')3const browser = await chromium.launch()4const context = await browser.newContext()5const page = await context.newPage()6const root = await getPublicRootInstance(page)7console.log(root.innerHTML)8await browser.close()9{10 "scripts": {11 },12 "dependencies": {13 }14}15I would suggest to use the public API to get the root element. For example, you can use page.$(‘html’)16Thanks for the response @pavelfeldman. I tried using page.$(‘html’) but it seems that it is returning null . I am using playwright version 1.0.2. Is there something I am missing here?
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/dom');2const { getPublicInstance } = require('playwright/lib/server/dom');3const { getPublicInstanceHandle } = require('playwright/lib/server/dom');4const { getPublicElement } = require('playwright/lib/server/dom');5const { getPublicFrame } = require('playwright/lib/server/dom');6const { getPublicExecutionContext } = require('playwright/lib/server/dom');7const { getPublicPage } = require('playwright/lib/server/dom');8const { chromium } = require('playwright');9(async () => {10 const browser = await chromium.launch();11 const context = await browser.newContext();12 const page = await context.newPage();13 const root = await getPublicRootInstance(page);14 const input = await root.$('input');15 const inputHandle = await getPublicInstanceHandle(input);16 const inputElement = await getPublicElement(inputHandle);17 const inputPage = await getPublicPage(inputElement);18 const inputExecutionContext = await getPublicExecutionContext(inputPage);19 const inputInstance = await getPublicInstance(inputExecutionContext);20 console.log(inputInstance);21 await browser.close();22})();
Using AI Code Generation
1const { getPublicRootInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');2const rootInstance = getPublicRootInstance();3const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');4const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');5const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');6const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');7const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');8const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');9const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');10const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');11const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');12const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');13const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');14const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');15const { getPublicInstance } = require('playwright/lib/server/supplements/recorder/recorderApp');16const instance = getPublicInstance(rootInstance, 'data-test-id', 'test-id');
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
