How to use listenToAllSupportedEvents method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

react-dom.js

Source: react-dom.js Github

copy
1import { listenToAllSupportedEvents } from "./DOMPluginEvnentSystem"
2import { HostComponent } from "./ReactWorkTags"
3import { internalInstanceKey, internalPropsKey } from "./ReactDOMComponentTree"
4
5function render(vdom, container) {
6  listenToAllSupportedEvents(container)
7  mount(vdom, container)
8}
9function mount(vdom, parentDOM) {
10  let newDOM = createDOM(vdom, parentDOM)
11  parentDOM.appendChild(newDOM)
12}
13function createDOM(vdom, parentDOM) {
14  let { type, props } = vdom
15  let dom
16  if (typeof vdom === "string" || typeof vdom === "number") {
17    dom = document.createTextNode(vdom)
18  } else {
19    dom = document.createElement(type)
20  }
21  let returnFiber = parentDOM[internalInstanceKey] || null
22  let fiber = {
23    tag: HostComponent,
24    type,
25    stateNode: dom,
26    return: returnFiber,
27  }
28  dom[internalInstanceKey] = fiber // 构建fiber树
29  dom[internalPropsKey] = props // 存放属性,方便查找处理方法
30  if (props) {
31    updateProps(dom, {}, props)
32    if (Array.isArray(props.children)) {
33      reconcleChildren(props.children, dom)
34    } else {
35      mount(props.children, dom)
36    }
37  }
38  return dom
39}
40function reconcleChildren(children, parentDOM) {
41  children.forEach((child) => mount(child, parentDOM))
42}
43function updateProps(dom, oldProps, newProps) {}
44
45const ReactDOM = {
46  render,
47}
48export default ReactDOM
49
Full Screen

ReactDOMRoot.js

Source: ReactDOMRoot.js Github

copy
1import { createHostRootFiber } from "../../reconciler/Fiber"
2import { createContainer } from "../../reconciler/FIberReconciler"
3import { initializeUpdateQueue } from "../../reconciler/UpdateQueue"
4
5const randomKey = Math.random().toString(36).slice(2)
6export const internalContainerKey = '__reactContainer$' + randomKey
7export const internalInstanceKey = '__reactInstance$' + randomKey
8export const intenralReactPropsKey = '__reactPropsKey$' + randomKey
9
10const allNativeEvents = new Set()
11const regitrationNameDependencies = {}
12
13allNativeEvents.add('click')
14
15const ELEMENT_NODE = 1
16const TEXT_NODE = 3
17
18export function createLegacyRoot(container) {
19  return new ReactBlockingRoot(container)
20}
21
22function ReactBlockingRoot(container) {
23  this._internalRoot = createRoot(container)
24}
25
26function createRoot(container) {
27  if (!container) {
28    throw new Error('container dom can not be empty')
29  }
30  // create fiberRoot container
31  const root = createContainer(container)
32  console.log(container)
33
34  // listen event
35
36  listenToAllSupportedEvents(container)
37  return root
38}
39
40
41function listenToAllSupportedEvents(rootContainerElement) {
42
43  allNativeEvents.forEach(domEventName => {
44      listenToNativeEvent(
45        domEventName,
46        true,
47        rootContainerElement,
48        null
49      )
50  })
51}
52
53function listenToNativeEvent(
54  domEventName,
55  isCapture,
56  rootTarget,
57  target
58) {
59  target = target || rootTarget
60
61  const listener = createListener(domEventName, rootTarget)
62
63  target.addEventListener(domEventName, listener)
64}
65
66function createListener(
67  domEventName,
68  targetContainer
69) {
70  return dispatchEvent.bind(null, domEventName, null, targetContainer)
71}
72
73function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent)  {
74
75  // find path
76  const nativeEventTarget = nativeEvent.target
77  const props = nativeEventTarget[intenralReactPropsKey]
78  const reactEventName = 'on' + domEventName[0].toUpperCase() + domEventName.slice(1)
79
80  for (const prop in props) {
81    if (props.hasOwnProperty(prop) && prop === reactEventName) {
82      props[prop](nativeEvent)
83    }
84  }
85
86}
87
88function getEventTarget(event) {
89  let target = event.target
90
91  return target.nodeType === TEXT_NODE ? target.parentNode : target
92}
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)