Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use performSyncWorkOnRoot method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ReactWorkLoop.js
Source:ReactWorkLoop.js 
...9let workInProgress = null;1011export function scheduleUpdateOnFiber(fiber) {12 const fiberRoot = markUpdateLaneFromFiberToRoot(fiber);13 performSyncWorkOnRoot(fiberRoot);14}1516/**17 * æ¾å°æ顶级çfiberèç¹ï¼æ顶级çfiberèç¹æ²¡æparentæé18 */19function markUpdateLaneFromFiberToRoot(sourceFiber) {20 let node = sourceFiber;21 let parent = node.return;22 while (parent) {23 node = parent;24 parent = node.parent;25 }26 return node.stateNode;27}2829function performSyncWorkOnRoot(fiberRoot) {30 workInProgressRoot = fiberRoot;31 workInProgress = createWorkInProgress(workInProgressRoot.current);3233 workLoopSync(); // æ§è¡å·¥ä½å¾ªç¯34 commitRoot() // æ交修æ¹çDOM35}3637function workLoopSync() {38 while (workInProgress) {39 performUnitOfWork(workInProgress);40 }41}4243/**
...
index.js
Source:index.js
...19function render(element, root) {20 // console.log(element)21 let fiberRoot = legacyCreateRootFromDOMContainer(element, root);22 23 performSyncWorkOnRoot(fiberRoot)24}25function legacyCreateRootFromDOMContainer (element, root) { 26 return {27 stateNode: root,28 props: {29 children: [element]30 }31 }32}33function performSyncWorkOnRoot(fiberRoot){34 workInProgressRoot = fiberRoot;35 nextUnitOfWork = workInProgressRoot;36 37 workLoopSync()38 39}40// æ§è¡ä»»å¡å¾ªç¯41function workLoopSync () { 42 43 while(nextUnitOfWork != null){44 nextUnitOfWork = performUnitOfWork(nextUnitOfWork)45 }46 47 if (!nextUnitOfWork) {...
FiberWorkLoop.js
Source:FiberWorkLoop.js
...43}44export function scheduleUpdateOnFiber(45 fiber46) {47 performSyncWorkOnRoot(fiber.stateNode)48}49function performSyncWorkOnRoot(root) {50 renderRootSync(root)51 //AcommitRoot(root)52}53function renderRootSync(root) {54 if (workInProgressRoot !== root) {55 // Mount56 prepareFreshStack(root)57 }58 workLoopSync()59}60function workLoopSync() {61 while(workInProgress !== null) {62 performUnitOfWork(workInProgress)63 }...
4.5.ReactFiberWorkLoop.js
Source:4.5.ReactFiberWorkLoop.js
...30function scheduleSyncCallback(callback){31 syncQueue.push(callback)32}33//æ§è¡æ¸²æä»»å¡34function performSyncWorkOnRoot(workInProgress){35 let root = workInProgress;36 console.log('å¼å§è°åä»»å¡')37 while(workInProgress){38 if(workInProgress.tag === ClassComponent){39 let inst =workInProgress.stateNode;40 inst.state = processUpdateQueue(inst,workInProgress)41 inst.render(); //å¾å°ææ°ç¶æå,å°±å¯ä»¥è°ç¨renderæ¹æ³éè¿ææ°çèædomï¼éè¿diffæ´æ°42 }43 workInProgress = workInProgress.child44 }45 commitRoot(root)46}47function commitRoot(root){48}...
scheduleUpdateOnFiber.js
Source:scheduleUpdateOnFiber.js
1import { classComponent, HostRoot } from "./ReactWorkTags";2import { RootFiber } from './index';3import { ConcurrentMode, NoMode } from "./ReactTypeofMode";4const Queue = []5// éæ¹é6export const NoContext = /* */ 0b000;7const BatchedContext = /* */ 0b001;8let executionContext = NoContext;9const scheduleSyncCallback = (callback) => Queue.push(callback);10/**11 * è°å12 * @param {*} workInProgress 13 */14const performSyncWorkOnRoot = (workInProgress) => {15 const root = workInProgress;16 while (workInProgress) {17 if (workInProgress.tag === classComponent) {18 const instance = workInProgress.stateNode;19 // æ ¹æ®èç¶æåæ°ç¶æè¿è¡æ´æ°20 instance.state = workInProgress.updateQueue.reduce((pre, { payload }) => ({21 ...pre,22 ...(typeof payload === 'function' ? payload(pre) : payload)23 }), instance.state);24 instance.render();25 }26 workInProgress = workInProgress.child;27 }28 root.callbackPriority = 029}30/**31 * è°åº¦32 * @param {*} root 33 * @param {*} eventTime 34 * @returns 35 */36const ensureRootIsScheduled = (root, eventTime) => {37 // è·åèµéä¸é¢æé«çä¼å
级38 const newCallbackPriority = 12;39 const existingCallbackPriority = root?.callbackPriority;40 if (existingCallbackPriority === newCallbackPriority) {41 console.log('è°åº¦æ¬¡æ°');42 return;43 }44 scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));45 queueMicrotask(flushSyncCallbackQueue);46 root.callbackPriority = newCallbackPriority;47}48function flushSyncCallbackQueue() {49 Queue.forEach(cb => cb());50 Queue.length = 0;51}52/**53 * å¨è¯¥fiberä¸é¢è¿è¡è°åº¦æ´æ°54 * @param {*} fiber 55 * @param {*} lane 56 * @param {*} eventTime 57 */58const scheduleUpdateOnFiber = (fiber, lane, eventTime) => {59 // è°åº¦60 ensureRootIsScheduled(RootFiber, eventTime);61 if (executionContext === NoContext && (fiber.mode & ConcurrentMode) === NoMode) {62 flushSyncCallbackQueue();63 }64}65/**66 * æ¹éæ´æ°67 * @param {*} fn 68 */69export const batchedUpdates = (fn) => {70 executionContext |= BatchedContext;71 fn();72 executionContext = NoContext;73}...
状态更新调用路径.js
Source:状态更新调用路径.js
1/*2 *3触åç¶ææ´æ°ï¼æ ¹æ®åºæ¯è°ç¨ä¸åæ¹æ³ï¼4 1.ReactDOM.render5 2.this.setState6 3.this.forceUpdate7 4.useState8 5.useReducer9 |10 |11 v12å建Update对象ï¼'updateContainer'ï¼13 |14 |15 v16ä»fiberå°rootï¼`markUpdateLaneFromFiberToRoot`ï¼17 ï¼ä»è§¦åç¶ææ´æ°çfiberä¸ç´åä¸éåå°rootFiberï¼å¹¶è¿årootFiberãï¼18 |19 |20 v21è°åº¦æ´æ°ï¼`ensureRootIsScheduled`ï¼ åæ¥/å¼æ¥22 以ä¸æ¯ensureRootIsScheduledææ ¸å¿çä¸æ®µä»£ç ï¼23 if (newCallbackPriority === SyncLanePriority) {24 // ä»»å¡å·²ç»è¿æï¼éè¦åæ¥æ§è¡renderé¶æ®µ25 newCallbackNode = scheduleSyncCallback(26 performSyncWorkOnRoot.bind(null, root)27 );28 } else {29 // æ ¹æ®ä»»å¡ä¼å
级å¼æ¥æ§è¡renderé¶æ®µ30 var schedulerPriorityLevel = lanePriorityToSchedulerPriority(31 newCallbackPriority32 );33 newCallbackNode = scheduleCallback(34 schedulerPriorityLevel,35 performConcurrentWorkOnRoot.bind(null, root)36 );37 }38 |39 |40 v41renderé¶æ®µï¼`performSyncWorkOnRoot` æ `performConcurrentWorkOnRoot`ï¼42 |43 |44 v45commité¶æ®µï¼`commitRoot`ï¼...
ReactFiberWorkLoop.js
Source:ReactFiberWorkLoop.js
...9 * @param {*} fiber 10 */11export function scheduleUpdateOnFiber(fiber) {12 const fiberRoot = markUpdateLaneFromFiberToRoot(fiber);13 performSyncWorkOnRoot(fiberRoot);14}15/**16 * æ ¹æ®èçfiberæ åæ´æ°å¯¹è±¡å建æ°çfiberæ ï¼ç¶åæ ¹æ®æ°çfiberæ æ´æ°çå®DOM17 * @param {*} fiberRoot 18 */19function performSyncWorkOnRoot(fiberRoot) {20 workInProgressRoot = fiberRoot;21 workInProgress = createWorkInProgress(workInProgressRoot.current);22 console.log(workInProgress);23}24function markUpdateLaneFromFiberToRoot(sourceFiber) {25 let node = sourceFiber;26 let parent = node.return;27 while (parent) {28 node = parent;29 parent = parent.parent;30 }31 //nodeå
¶å®è¯å®fiberæ çæ ¹èç¹ï¼å
¶å®å°±æ¯ hostRootFiber .stateNode div#root32 return node.stateNode;33}
updateState.js
Source:updateState.js
1// 触åç¶ææ´æ°2// |3// v4// å建Update对象5// |6// v7// ä»fiberå°root8// |9// v10// è°åº¦æ´æ°11// |12// v13// renderé¶æ®µ - performSyncWorkOnRoot æ performConcurrentWorkOnRoot14// |15// v...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3const browser = await chromium.launch({ headless: false });4const context = await browser.newContext();5const page = await context.newPage();6await page.screenshot({ path: `example.png` });7await browser.close();8})();
Using AI Code Generation
1const { performSyncWorkOnRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const { RecorderSupplement } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3const { Frame } = require('playwright/lib/server/chromium/crPage.js');4const { Page } = require('playwright/lib/server/chromium/crPage.js');5const { ElementHandle } = require('playwright/lib/server/chromium/crElementHandle.js');6const { JSHandle } = require('playwright/lib/server/chromium/crJSHandle.js');7const { helper } = require('playwright/lib/server/helper.js');8const frame = new Frame(new Page(new RecorderSupplement()));9const elementHandle = new ElementHandle(new JSHandle(new Page(new RecorderSupplement())), {});10const jsHandle = new JSHandle(new Page(new RecorderSupplement()));11const helperObject = new helper();12performSyncWorkOnRoot(frame, elementHandle, jsHandle, helperObject);
Using AI Code Generation
1const { performSyncWorkOnRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const { RecorderSupplement } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3const { Page } = require('playwright/lib/server/page.js');4const { Frame } = require('playwright/lib/server/frame.js');5const { ElementHandle } = require('playwright/lib/server/dom.js');6const { chromium } = require('playwright');7(async () => {8 const browser = await chromium.launch();9 const page = await browser.newPage();10 const element = await page.$('text=Get started');11 await element.click();12 await page.waitForTimeout(5000);13 await browser.close();14})();15const { helper } = require('playwright/lib/server/helper.js');16const { PageSupplement } = require('playwright/lib/server/pageSupplement.js');17const { FrameSupplement } = require('playwright/lib/server/frameSupplement.js');18const { ElementHandleSupplement } = require('playwright/lib/server/elementHandleSupplement.js');19const { RecorderSupplement } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');20const { Page } = require('playwright/lib/server/page.js');21const { Frame } = require('playwright/lib/server/frame.js');22const { ElementHandle } = require('playwright/lib/server/dom.js');23module.exports = {24};25function performSyncWorkOnRoot(root, callback) {26 const supplement = getSupplement(root);27 return supplement._performSyncWork(callback);28}29function getSupplement(root) {30 if (root instanceof Page)31 return root._pageSupplement(RecorderSupplement);32 if (root instanceof Frame)33 return root._frameSupplement(RecorderSupplement);34 if (root instanceof ElementHandle)35 return root._elementHandleSupplement(RecorderSupplement);36 throw new Error('Unknown root type');37}38const { helper } = require('playwright/lib/server/helper.js');39const { PageSupplement } = require('playwright/lib/server/pageSupplement.js');40const { FrameSupplement } = require('playwright/lib/server/frameSupplement.js');41const { ElementHandleSupplement } =
Using AI Code Generation
1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6const { performSyncWorkOnRoot } = require('playwright/lib/internal/inspectorAdapters/inspectorAdapter');7await performSyncWorkOnRoot(page, 'Runtime.evaluate', { expression: '1 + 1' });8await browser.close();
Using AI Code Generation
1const path = require('path');2const playwright = require('playwright');3(async () => {4 const browser = await playwright['chromium'].launch({5 });6 const page = await browser.newPage();7 await page.goto(url);8 await page.waitForSelector('#btn');9 const result = await page.evaluate(() => {10 const root = document.getElementById('root');11 const btn = document.getElementById('btn');12 const { performSyncWorkOnRoot } = window['ReactDom'];13 const onCommit = performSyncWorkOnRoot(root, () => {14 btn.innerText = 'I am clicked';15 });16 onCommit.then(() => {17 console.log('I am clicked');18 });19 });20 await browser.close();21})();22const rootElement = document.getElementById('root');23const btn = document.createElement('button');24btn.innerText = 'Click me';25btn.id = 'btn';26rootElement.appendChild(btn);27btn.addEventListener('click', () => {28 const { unstable_batchedUpdates } = window['ReactDom'];29 unstable_batchedUpdates(() => {30 btn.innerText = 'I am clicked';31 });32});33{34 "scripts": {35 },36 "dependencies": {37 }38}
Using AI Code Generation
1const { Playwright } = require('playwright');2const { Internal } = require('playwright/lib/server/playwright');3const { Page } = require('playwright/lib/server/page');4const { Frame } = require('playwright/lib/server/frame');5const { JSHandle } = require('playwright/lib/server/jsHandle');6const { ElementHandle } = require('playwright/lib/server/elementHandler');7const { createJSHandle } = require('playwright/lib/server/frames');8const { createHandle } = require('playwright/lib/server/injected/injectedScript');9const playwright = new Playwright();10const internal = new Internal(playwright);11const page = new Page(internal, 'page1', null, null);12const frame = new Frame(page, 'frame1', null);13const jsHandle = createJSHandle(frame, createHandle('test'));14const elementHandle = new ElementHandle(frame, jsHandle, null);15const result = internal.performSyncWorkOnRoot(elementHandle, () => {16 return document.body;17});18console.log(result);
Using AI Code Generation
1const { getTestState } = require("@playwright/test");2const { performSyncWorkOnRoot } = require("@playwright/test/lib/server/supplements/recorder/recorderSupplement");3module.exports = {4 async test(testInfo) {5 const { page, context } = getTestState(testInfo);6 await page.click("text=Get started");7 await page.click("text=Go to docs");8 await page.click("text=Go to API");9 await page.click("text=Go to examples");10 await page.click("text=Go to blog");11 await page.click("text=Go to community");12 await page.click("text=Go to GitHub");13 await page.click("text=Go to Twitter");14 await page.click("text=Go to Discord");15 await page.click("text=Go to YouTube");16 await page.click("text=Go to Stack Overflow");17 performSyncWorkOnRoot(context);18 },19};20const { PlaywrightTestConfig } = require("@playwright/test");21const config = {22 {23 use: {24 },25 },26 use: {27 },28};29module.exports = config;30{31 "scripts": {32 },33 "dependencies": {34 }35}
Using AI Code Generation
1console.log("Hello");2await page.evaluate(() => {3 const root = document.getElementById('root');4 const container = document.createElement('div');5 container.id = 'container';6 root.appendChild(container);7 ReactDOM.render(<div>Test</div>, container);8});9await page.evaluate(() => {10 const root = document.getElementById('root');11 const container = document.getElementById('container');12 const work = ReactDOM.unmountComponentAtNode(container);13 console.log(work);14 root.removeChild(container);15});16console.log("Hello");17await page.evaluate(() => {18 const root = document.getElementById('root');19 const container = document.createElement('div');20 container.id = 'container';21 root.appendChild(container);22 ReactDOM.render(<div>Test</div>, container);23});24await page.evaluate(() => {25 const root = document.getElementById('root');26 const container = document.getElementById('container');27 const work = ReactDOM.unmountComponentAtNode(container);28 console.log(work);29 root.removeChild(container);30});31console.log("Hello");32await page.evaluate(() => {33 const root = document.getElementById('root');34 const container = document.createElement('div');35 container.id = 'container';36 root.appendChild(container);37 ReactDOM.render(<div>Test</div>, container);38});39await page.evaluate(() => {40 const root = document.getElementById('root');41 const container = document.getElementById('container');42 const work = ReactDOM.unmountComponentAtNode(container);43 console.log(work);44 root.removeChild(container);45});46console.log("Hello");47await page.evaluate(() => {48 const root = document.getElementById('root');49 const container = document.createElement('div');50 container.id = 'container';51 root.appendChild(container);52 ReactDOM.render(<div>Test</div>, container);53});54await page.evaluate(() => {55 const root = document.getElementById('root');56 const container = document.getElementById('container');57 const work = ReactDOM.unmountComponentAtNode(container);58 console.log(work);59 root.removeChild(container);60});61console.log("Hello");62await page.evaluate(() => {63 const root = document.getElementById('root');64 const container = document.createElement('div');
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?
