Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use trapBubbledEvent method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ReactEventEmitter.js
Source:ReactEventEmitter.js 
...77 * @param {string} handlerBaseName Event name (e.g. "click").78 * @param {DOMEventTarget} element Element on which to attach listener.79 * @internal80 */81function trapBubbledEvent(topLevelType, handlerBaseName, element) {82 EventListener.listen(83 element,84 handlerBaseName,85 ReactEventEmitter.TopLevelCallbackCreator.createTopLevelCallback(86 topLevelType87 )88 );89}90/**91 * Traps a top-level event by using event capturing.92 *93 * @param {string} topLevelType Record from `EventConstants`.94 * @param {string} handlerBaseName Event name (e.g. "click").95 * @param {DOMEventTarget} element Element on which to attach listener.96 * @internal97 */98function trapCapturedEvent(topLevelType, handlerBaseName, element) {99 EventListener.capture(100 element,101 handlerBaseName,102 ReactEventEmitter.TopLevelCallbackCreator.createTopLevelCallback(103 topLevelType104 )105 );106}107/**108 * Listens to window scroll and resize events. We cache scroll values so that109 * application code can access them without triggering reflows.110 *111 * NOTE: Scroll events do not bubble.112 *113 * @private114 * @see http://www.quirksmode.org/dom/events/scroll.html115 */116function registerScrollValueMonitoring() {117 var refresh = ViewportMetrics.refreshScrollValues;118 EventListener.listen(window, 'scroll', refresh);119 EventListener.listen(window, 'resize', refresh);120}121/**122 * `ReactEventEmitter` is used to attach top-level event listeners. For example:123 *124 * ReactEventEmitter.putListener('myID', 'onClick', myFunction);125 *126 * This would allocate a "registration" of `('onClick', myFunction)` on 'myID'.127 *128 * @internal129 */130var ReactEventEmitter = merge(ReactEventEmitterMixin, {131 /**132 * React references `ReactEventTopLevelCallback` using this property in order133 * to allow dependency injection.134 */135 TopLevelCallbackCreator: null,136 /**137 * Ensures that top-level event delegation listeners are installed.138 *139 * There are issues with listening to both touch events and mouse events on140 * the top-level, so we make the caller choose which one to listen to. (If141 * there's a touch top-level listeners, anchors don't receive clicks for some142 * reason, and only in some cases).143 *144 * @param {boolean} touchNotMouse Listen to touch events instead of mouse.145 * @param {DOMDocument} contentDocument DOM document to listen on146 */147 ensureListening: function(touchNotMouse, contentDocument) {148 invariant(149 ExecutionEnvironment.canUseDOM,150 'ensureListening(...): Cannot toggle event listening in a Worker ' +151 'thread. This is likely a bug in the framework. Please report ' +152 'immediately.'153 );154 invariant(155 ReactEventEmitter.TopLevelCallbackCreator,156 'ensureListening(...): Cannot be called without a top level callback ' +157 'creator being injected.'158 );159 // Call out to base implementation.160 ReactEventEmitterMixin.ensureListening.call(161 ReactEventEmitter,162 {163 touchNotMouse: touchNotMouse,164 contentDocument: contentDocument165 }166 );167 },168 /**169 * Sets whether or not any created callbacks should be enabled.170 *171 * @param {boolean} enabled True if callbacks should be enabled.172 */173 setEnabled: function(enabled) {174 invariant(175 ExecutionEnvironment.canUseDOM,176 'setEnabled(...): Cannot toggle event listening in a Worker thread. ' +177 'This is likely a bug in the framework. Please report immediately.'178 );179 if (ReactEventEmitter.TopLevelCallbackCreator) {180 ReactEventEmitter.TopLevelCallbackCreator.setEnabled(enabled);181 }182 },183 /**184 * @return {boolean} True if callbacks are enabled.185 */186 isEnabled: function() {187 return !!(188 ReactEventEmitter.TopLevelCallbackCreator &&189 ReactEventEmitter.TopLevelCallbackCreator.isEnabled()190 );191 },192 /**193 * We listen for bubbled touch events on the document object.194 *195 * Firefox v8.01 (and possibly others) exhibited strange behavior when196 * mounting `onmousemove` events at some node that was not the document197 * element. The symptoms were that if your mouse is not moving over something198 * contained within that mount point (for example on the background) the199 * top-level listeners for `onmousemove` won't be called. However, if you200 * register the `mousemove` on the document object, then it will of course201 * catch all `mousemove`s. This along with iOS quirks, justifies restricting202 * top-level listeners to the document object only, at least for these203 * movement types of events and possibly all events.204 *205 * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html206 *207 * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but208 * they bubble to document.209 *210 * @param {boolean} touchNotMouse Listen to touch events instead of mouse.211 * @param {DOMDocument} contentDocument Document which owns the container212 * @private213 * @see http://www.quirksmode.org/dom/events/keys.html.214 */215 listenAtTopLevel: function(touchNotMouse, contentDocument) {216 invariant(217 !contentDocument._isListening,218 'listenAtTopLevel(...): Cannot setup top-level listener more than once.'219 );220 var topLevelTypes = EventConstants.topLevelTypes;221 var mountAt = contentDocument;222 registerScrollValueMonitoring();223 trapBubbledEvent(topLevelTypes.topMouseOver, 'mouseover', mountAt);224 trapBubbledEvent(topLevelTypes.topMouseDown, 'mousedown', mountAt);225 trapBubbledEvent(topLevelTypes.topMouseUp, 'mouseup', mountAt);226 trapBubbledEvent(topLevelTypes.topMouseMove, 'mousemove', mountAt);227 trapBubbledEvent(topLevelTypes.topMouseOut, 'mouseout', mountAt);228 trapBubbledEvent(topLevelTypes.topClick, 'click', mountAt);229 trapBubbledEvent(topLevelTypes.topDoubleClick, 'dblclick', mountAt);230 trapBubbledEvent(topLevelTypes.topContextMenu, 'contextmenu', mountAt);231 if (touchNotMouse) {232 trapBubbledEvent(topLevelTypes.topTouchStart, 'touchstart', mountAt);233 trapBubbledEvent(topLevelTypes.topTouchEnd, 'touchend', mountAt);234 trapBubbledEvent(topLevelTypes.topTouchMove, 'touchmove', mountAt);235 trapBubbledEvent(topLevelTypes.topTouchCancel, 'touchcancel', mountAt);236 }237 trapBubbledEvent(topLevelTypes.topKeyUp, 'keyup', mountAt);238 trapBubbledEvent(topLevelTypes.topKeyPress, 'keypress', mountAt);239 trapBubbledEvent(topLevelTypes.topKeyDown, 'keydown', mountAt);240 trapBubbledEvent(topLevelTypes.topInput, 'input', mountAt);241 trapBubbledEvent(topLevelTypes.topChange, 'change', mountAt);242 trapBubbledEvent(243 topLevelTypes.topSelectionChange,244 'selectionchange',245 mountAt246 );247 trapBubbledEvent(248 topLevelTypes.topCompositionEnd,249 'compositionend',250 mountAt251 );252 trapBubbledEvent(253 topLevelTypes.topCompositionStart,254 'compositionstart',255 mountAt256 );257 trapBubbledEvent(258 topLevelTypes.topCompositionUpdate,259 'compositionupdate',260 mountAt261 );262 if (isEventSupported('drag')) {263 trapBubbledEvent(topLevelTypes.topDrag, 'drag', mountAt);264 trapBubbledEvent(topLevelTypes.topDragEnd, 'dragend', mountAt);265 trapBubbledEvent(topLevelTypes.topDragEnter, 'dragenter', mountAt);266 trapBubbledEvent(topLevelTypes.topDragExit, 'dragexit', mountAt);267 trapBubbledEvent(topLevelTypes.topDragLeave, 'dragleave', mountAt);268 trapBubbledEvent(topLevelTypes.topDragOver, 'dragover', mountAt);269 trapBubbledEvent(topLevelTypes.topDragStart, 'dragstart', mountAt);270 trapBubbledEvent(topLevelTypes.topDrop, 'drop', mountAt);271 }272 if (isEventSupported('wheel')) {273 trapBubbledEvent(topLevelTypes.topWheel, 'wheel', mountAt);274 } else if (isEventSupported('mousewheel')) {275 trapBubbledEvent(topLevelTypes.topWheel, 'mousewheel', mountAt);276 } else {277 // Firefox needs to capture a different mouse scroll event.278 // @see http://www.quirksmode.org/dom/events/tests/scroll.html279 trapBubbledEvent(topLevelTypes.topWheel, 'DOMMouseScroll', mountAt);280 }281 // IE<9 does not support capturing so just trap the bubbled event there.282 if (isEventSupported('scroll', true)) {283 trapCapturedEvent(topLevelTypes.topScroll, 'scroll', mountAt);284 } else {285 trapBubbledEvent(topLevelTypes.topScroll, 'scroll', window);286 }287 if (isEventSupported('focus', true)) {288 trapCapturedEvent(topLevelTypes.topFocus, 'focus', mountAt);289 trapCapturedEvent(topLevelTypes.topBlur, 'blur', mountAt);290 } else if (isEventSupported('focusin')) {291 // IE has `focusin` and `focusout` events which bubble.292 // @see293 // http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html294 trapBubbledEvent(topLevelTypes.topFocus, 'focusin', mountAt);295 trapBubbledEvent(topLevelTypes.topBlur, 'focusout', mountAt);296 }297 if (isEventSupported('copy')) {298 trapBubbledEvent(topLevelTypes.topCopy, 'copy', mountAt);299 trapBubbledEvent(topLevelTypes.topCut, 'cut', mountAt);300 trapBubbledEvent(topLevelTypes.topPaste, 'paste', mountAt);301 }302 },303 registrationNames: EventPluginHub.registrationNames,304 putListener: EventPluginHub.putListener,305 getListener: EventPluginHub.getListener,306 deleteListener: EventPluginHub.deleteListener,307 deleteAllListeners: EventPluginHub.deleteAllListeners,308 trapBubbledEvent: trapBubbledEvent,309 trapCapturedEvent: trapCapturedEvent310});...
ReactEvent.mjs
Source:ReactEvent.mjs
...91 * Traps top-level events that bubble. Delegates to the main dispatcher92 * `handleTopLevel` after performing some basic normalization via93 * `TopLevelCallbackCreator.createTopLevelCallback`.94 */95function trapBubbledEvent(topLevelType, handlerBaseName, onWhat) {96 listen(97 onWhat,98 handlerBaseName,99 ReactEvent.TopLevelCallbackCreator.createTopLevelCallback(topLevelType)100 );101}102/**103 * Traps a top-level event by using event capturing.104 */105function trapCapturedEvent(topLevelType, handlerBaseName, onWhat) {106 capture(107 onWhat,108 handlerBaseName,109 ReactEvent.TopLevelCallbackCreator.createTopLevelCallback(topLevelType)110 );111}112/**113 * Listens to document scroll and window resize events that may change the114 * document scroll values. We store those results so as to discourage115 * application code from asking the DOM itself which could trigger additional116 * reflows.117 */118function registerDocumentScrollListener() {119 listen(window, 'scroll', function (nativeEvent) {120 if (nativeEvent.target === window) {121 BrowserEnv.refreshAuthoritativeScrollValues();122 }123 });124}125function registerDocumentResizeListener() {126 listen(window, 'resize', function (nativeEvent) {127 if (nativeEvent.target === window) {128 BrowserEnv.refreshAuthoritativeScrollValues();129 }130 });131}132/**133 * Summary of `ReactEvent` event handling:134 *135 * - We trap low level 'top-level' events.136 *137 * - We dedupe cross-browser event names into these 'top-level types' so that138 * `DOMMouseScroll` or `mouseWheel` both become `topMouseWheel`.139 *140 * - At this point we have native browser events with the top-level type that141 * was used to catch it at the top-level.142 *143 * - We continuously stream these native events (and their respective top-level144 * types) to the event plugin system `EventPluginHub` and ask the plugin145 * system if it was able to extract `AbstractEvent` objects. `AbstractEvent`146 * objects are the events that applications actually deal with - they are not147 * native browser events but cross-browser wrappers.148 *149 * - When returning the `AbstractEvent` objects, `EventPluginHub` will make150 * sure each abstract event is annotated with "dispatches", which are the151 * sequence of listeners (and IDs) that care about the event.152 *153 * - These `AbstractEvent` objects are fed back into the event plugin system,154 * which in turn executes these dispatches.155 *156 * @private157 */158function listenAtTopLevel(touchNotMouse) {159 invariant(160 !_isListening,161 'listenAtTopLevel(...): Cannot setup top-level listener more than once.'162 );163 var mountAt = document;164 registerDocumentScrollListener();165 registerDocumentResizeListener();166 trapBubbledEvent(topLevelTypes.topMouseOver, 'mouseover', mountAt);167 trapBubbledEvent(topLevelTypes.topMouseDown, 'mousedown', mountAt);168 trapBubbledEvent(topLevelTypes.topMouseUp, 'mouseup', mountAt);169 trapBubbledEvent(topLevelTypes.topMouseMove, 'mousemove', mountAt);170 trapBubbledEvent(topLevelTypes.topMouseOut, 'mouseout', mountAt);171 trapBubbledEvent(topLevelTypes.topClick, 'click', mountAt);172 trapBubbledEvent(topLevelTypes.topDoubleClick, 'dblclick', mountAt);173 trapBubbledEvent(topLevelTypes.topMouseWheel, 'mousewheel', mountAt);174 if (touchNotMouse) {175 trapBubbledEvent(topLevelTypes.topTouchStart, 'touchstart', mountAt);176 trapBubbledEvent(topLevelTypes.topTouchEnd, 'touchend', mountAt);177 trapBubbledEvent(topLevelTypes.topTouchMove, 'touchmove', mountAt);178 trapBubbledEvent(topLevelTypes.topTouchCancel, 'touchcancel', mountAt);179 }180 trapBubbledEvent(topLevelTypes.topKeyUp, 'keyup', mountAt);181 trapBubbledEvent(topLevelTypes.topKeyPress, 'keypress', mountAt);182 trapBubbledEvent(topLevelTypes.topKeyDown, 'keydown', mountAt);183 trapBubbledEvent(topLevelTypes.topChange, 'change', mountAt);184 trapBubbledEvent(185 topLevelTypes.topDOMCharacterDataModified,186 'DOMCharacterDataModified',187 mountAt188 );189 // Firefox needs to capture a different mouse scroll event.190 // @see http://www.quirksmode.org/dom/events/tests/scroll.html191 trapBubbledEvent(topLevelTypes.topMouseWheel, 'DOMMouseScroll', mountAt);192 // IE < 9 doesn't support capturing so just trap the bubbled event there.193 if (isEventSupported('scroll', true)) {194 trapCapturedEvent(topLevelTypes.topScroll, 'scroll', mountAt);195 } else {196 trapBubbledEvent(topLevelTypes.topScroll, 'scroll', window);197 }198 if (isEventSupported('focus', true)) {199 trapCapturedEvent(topLevelTypes.topFocus, 'focus', mountAt);200 trapCapturedEvent(topLevelTypes.topBlur, 'blur', mountAt);201 } else if (isEventSupported('focusin')) {202 // IE has `focusin` and `focusout` events which bubble.203 // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html204 trapBubbledEvent(topLevelTypes.topFocus, 'focusin', mountAt);205 trapBubbledEvent(topLevelTypes.topBlur, 'focusout', mountAt);206 }207}208/**209 * This is the heart of `ReactEvent`. It simply streams the top-level native210 * events to `EventPluginHub`.211 *212 * @param {object} topLevelType Record from `EventConstants`.213 * @param {Event} nativeEvent A Standard Event with fixed `target` property.214 * @param {DOMElement} renderedTarget Element of interest to the framework.215 * @param {string} renderedTargetID string ID of `renderedTarget`.216 * @internal217 */218function handleTopLevel(219 topLevelType,...
ReactEvent.js
Source:ReactEvent.js
...91 * Traps top-level events that bubble. Delegates to the main dispatcher92 * `handleTopLevel` after performing some basic normalization via93 * `TopLevelCallbackCreator.createTopLevelCallback`.94 */95function trapBubbledEvent(topLevelType, handlerBaseName, onWhat) {96 listen(97 onWhat,98 handlerBaseName,99 ReactEvent.TopLevelCallbackCreator.createTopLevelCallback(topLevelType)100 );101}102/**103 * Traps a top-level event by using event capturing.104 */105function trapCapturedEvent(topLevelType, handlerBaseName, onWhat) {106 capture(107 onWhat,108 handlerBaseName,109 ReactEvent.TopLevelCallbackCreator.createTopLevelCallback(topLevelType)110 );111}112/**113 * Listens to document scroll and window resize events that may change the114 * document scroll values. We store those results so as to discourage115 * application code from asking the DOM itself which could trigger additional116 * reflows.117 */118function registerDocumentScrollListener() {119 listen(window, 'scroll', function(nativeEvent) {120 if (nativeEvent.target === window) {121 BrowserEnv.refreshAuthoritativeScrollValues();122 }123 });124}125function registerDocumentResizeListener() {126 listen(window, 'resize', function(nativeEvent) {127 if (nativeEvent.target === window) {128 BrowserEnv.refreshAuthoritativeScrollValues();129 }130 });131}132/**133 * Summary of `ReactEvent` event handling:134 *135 * - We trap low level 'top-level' events.136 *137 * - We dedupe cross-browser event names into these 'top-level types' so that138 * `DOMMouseScroll` or `mouseWheel` both become `topMouseWheel`.139 *140 * - At this point we have native browser events with the top-level type that141 * was used to catch it at the top-level.142 *143 * - We continuously stream these native events (and their respective top-level144 * types) to the event plugin system `EventPluginHub` and ask the plugin145 * system if it was able to extract `AbstractEvent` objects. `AbstractEvent`146 * objects are the events that applications actually deal with - they are not147 * native browser events but cross-browser wrappers.148 *149 * - When returning the `AbstractEvent` objects, `EventPluginHub` will make150 * sure each abstract event is annotated with "dispatches", which are the151 * sequence of listeners (and IDs) that care about the event.152 *153 * - These `AbstractEvent` objects are fed back into the event plugin system,154 * which in turn executes these dispatches.155 *156 * @private157 */158function listenAtTopLevel(touchNotMouse) {159 invariant(160 !_isListening,161 'listenAtTopLevel(...): Cannot setup top-level listener more than once.'162 );163 var mountAt = document;164 registerDocumentScrollListener();165 registerDocumentResizeListener();166 trapBubbledEvent(topLevelTypes.topMouseOver, 'mouseover', mountAt);167 trapBubbledEvent(topLevelTypes.topMouseDown, 'mousedown', mountAt);168 trapBubbledEvent(topLevelTypes.topMouseUp, 'mouseup', mountAt);169 trapBubbledEvent(topLevelTypes.topMouseMove, 'mousemove', mountAt);170 trapBubbledEvent(topLevelTypes.topMouseOut, 'mouseout', mountAt);171 trapBubbledEvent(topLevelTypes.topClick, 'click', mountAt);172 trapBubbledEvent(topLevelTypes.topDoubleClick, 'dblclick', mountAt);173 trapBubbledEvent(topLevelTypes.topMouseWheel, 'mousewheel', mountAt);174 if (touchNotMouse) {175 trapBubbledEvent(topLevelTypes.topTouchStart, 'touchstart', mountAt);176 trapBubbledEvent(topLevelTypes.topTouchEnd, 'touchend', mountAt);177 trapBubbledEvent(topLevelTypes.topTouchMove, 'touchmove', mountAt);178 trapBubbledEvent(topLevelTypes.topTouchCancel, 'touchcancel', mountAt);179 }180 trapBubbledEvent(topLevelTypes.topKeyUp, 'keyup', mountAt);181 trapBubbledEvent(topLevelTypes.topKeyPress, 'keypress', mountAt);182 trapBubbledEvent(topLevelTypes.topKeyDown, 'keydown', mountAt);183 trapBubbledEvent(topLevelTypes.topChange, 'change', mountAt);184 trapBubbledEvent(185 topLevelTypes.topDOMCharacterDataModified,186 'DOMCharacterDataModified',187 mountAt188 );189 // Firefox needs to capture a different mouse scroll event.190 // @see http://www.quirksmode.org/dom/events/tests/scroll.html191 trapBubbledEvent(topLevelTypes.topMouseWheel, 'DOMMouseScroll', mountAt);192 // IE < 9 doesn't support capturing so just trap the bubbled event there.193 if (isEventSupported('scroll', true)) {194 trapCapturedEvent(topLevelTypes.topScroll, 'scroll', mountAt);195 } else {196 trapBubbledEvent(topLevelTypes.topScroll, 'scroll', window);197 }198 if (isEventSupported('focus', true)) {199 trapCapturedEvent(topLevelTypes.topFocus, 'focus', mountAt);200 trapCapturedEvent(topLevelTypes.topBlur, 'blur', mountAt);201 } else if (isEventSupported('focusin')) {202 // IE has `focusin` and `focusout` events which bubble.203 // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html204 trapBubbledEvent(topLevelTypes.topFocus, 'focusin', mountAt);205 trapBubbledEvent(topLevelTypes.topBlur, 'focusout', mountAt);206 }207}208/**209 * This is the heart of `ReactEvent`. It simply streams the top-level native210 * events to `EventPluginHub`.211 *212 * @param {object} topLevelType Record from `EventConstants`.213 * @param {Event} nativeEvent A Standard Event with fixed `target` property.214 * @param {DOMElement} renderedTarget Element of interest to the framework.215 * @param {string} renderedTargetID string ID of `renderedTarget`.216 * @internal217 */218function handleTopLevel(219 topLevelType,...
module$ReactEventEmitter.js
Source:module$ReactEventEmitter.js
1goog.provide("module$ReactEventEmitter");2var module$ReactEventEmitter = {};3goog.require("module$merge");4goog.require("module$isEventSupported");5goog.require("module$invariant");6goog.require("module$ViewportMetrics");7goog.require("module$ReactEventEmitterMixin");8goog.require("module$ExecutionEnvironment");9goog.require("module$EventPluginHub");10goog.require("module$EventListener");11goog.require("module$EventConstants");12var EventConstants$$module$ReactEventEmitter = module$EventConstants;13var EventListener$$module$ReactEventEmitter = module$EventListener;14var EventPluginHub$$module$ReactEventEmitter = module$EventPluginHub;15var ExecutionEnvironment$$module$ReactEventEmitter = module$ExecutionEnvironment;16var ReactEventEmitterMixin$$module$ReactEventEmitter = module$ReactEventEmitterMixin;17var ViewportMetrics$$module$ReactEventEmitter = module$ViewportMetrics;18var invariant$$module$ReactEventEmitter = module$invariant;19var isEventSupported$$module$ReactEventEmitter = module$isEventSupported;20var merge$$module$ReactEventEmitter = module$merge;21function trapBubbledEvent$$module$ReactEventEmitter(topLevelType, handlerBaseName, element) {22 EventListener$$module$ReactEventEmitter.listen(element, handlerBaseName, ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator.createTopLevelCallback(topLevelType))23}24function trapCapturedEvent$$module$ReactEventEmitter(topLevelType, handlerBaseName, element) {25 EventListener$$module$ReactEventEmitter.capture(element, handlerBaseName, ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator.createTopLevelCallback(topLevelType))26}27function registerScrollValueMonitoring$$module$ReactEventEmitter() {28 var refresh = ViewportMetrics$$module$ReactEventEmitter.refreshScrollValues;29 EventListener$$module$ReactEventEmitter.listen(window, "scroll", refresh);30 EventListener$$module$ReactEventEmitter.listen(window, "resize", refresh)31}32var ReactEventEmitter$$module$ReactEventEmitter = merge$$module$ReactEventEmitter(ReactEventEmitterMixin$$module$ReactEventEmitter, {TopLevelCallbackCreator:null, ensureListening:function(touchNotMouse, contentDocument) {33 invariant$$module$ReactEventEmitter(ExecutionEnvironment$$module$ReactEventEmitter.canUseDOM);34 invariant$$module$ReactEventEmitter(ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator);35 ReactEventEmitterMixin$$module$ReactEventEmitter.ensureListening.call(ReactEventEmitter$$module$ReactEventEmitter, {touchNotMouse:touchNotMouse, contentDocument:contentDocument})36}, setEnabled:function(enabled) {37 invariant$$module$ReactEventEmitter(ExecutionEnvironment$$module$ReactEventEmitter.canUseDOM);38 if(ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator) {39 ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator.setEnabled(enabled)40 }41}, isEnabled:function() {42 return!!(ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator && ReactEventEmitter$$module$ReactEventEmitter.TopLevelCallbackCreator.isEnabled())43}, listenAtTopLevel:function(touchNotMouse, contentDocument) {44 invariant$$module$ReactEventEmitter(!contentDocument._isListening);45 var topLevelTypes = EventConstants$$module$ReactEventEmitter.topLevelTypes;46 var mountAt = contentDocument;47 registerScrollValueMonitoring$$module$ReactEventEmitter();48 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topMouseOver, "mouseover", mountAt);49 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topMouseDown, "mousedown", mountAt);50 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topMouseUp, "mouseup", mountAt);51 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topMouseMove, "mousemove", mountAt);52 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topMouseOut, "mouseout", mountAt);53 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topClick, "click", mountAt);54 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDoubleClick, "dblclick", mountAt);55 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topContextMenu, "contextmenu", mountAt);56 if(touchNotMouse) {57 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topTouchStart, "touchstart", mountAt);58 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topTouchEnd, "touchend", mountAt);59 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topTouchMove, "touchmove", mountAt);60 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topTouchCancel, "touchcancel", mountAt)61 }62 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topKeyUp, "keyup", mountAt);63 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topKeyPress, "keypress", mountAt);64 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topKeyDown, "keydown", mountAt);65 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topInput, "input", mountAt);66 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topChange, "change", mountAt);67 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topSelectionChange, "selectionchange", mountAt);68 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topCompositionEnd, "compositionend", mountAt);69 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topCompositionStart, "compositionstart", mountAt);70 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topCompositionUpdate, "compositionupdate", mountAt);71 if(isEventSupported$$module$ReactEventEmitter("drag")) {72 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDrag, "drag", mountAt);73 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragEnd, "dragend", mountAt);74 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragEnter, "dragenter", mountAt);75 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragExit, "dragexit", mountAt);76 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragLeave, "dragleave", mountAt);77 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragOver, "dragover", mountAt);78 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDragStart, "dragstart", mountAt);79 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topDrop, "drop", mountAt)80 }81 if(isEventSupported$$module$ReactEventEmitter("wheel")) {82 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topWheel, "wheel", mountAt)83 }else {84 if(isEventSupported$$module$ReactEventEmitter("mousewheel")) {85 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topWheel, "mousewheel", mountAt)86 }else {87 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topWheel, "DOMMouseScroll", mountAt)88 }89 }90 if(isEventSupported$$module$ReactEventEmitter("scroll", true)) {91 trapCapturedEvent$$module$ReactEventEmitter(topLevelTypes.topScroll, "scroll", mountAt)92 }else {93 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topScroll, "scroll", window)94 }95 if(isEventSupported$$module$ReactEventEmitter("focus", true)) {96 trapCapturedEvent$$module$ReactEventEmitter(topLevelTypes.topFocus, "focus", mountAt);97 trapCapturedEvent$$module$ReactEventEmitter(topLevelTypes.topBlur, "blur", mountAt)98 }else {99 if(isEventSupported$$module$ReactEventEmitter("focusin")) {100 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topFocus, "focusin", mountAt);101 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topBlur, "focusout", mountAt)102 }103 }104 if(isEventSupported$$module$ReactEventEmitter("copy")) {105 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topCopy, "copy", mountAt);106 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topCut, "cut", mountAt);107 trapBubbledEvent$$module$ReactEventEmitter(topLevelTypes.topPaste, "paste", mountAt)108 }109}, registrationNames:EventPluginHub$$module$ReactEventEmitter.registrationNames, putListener:EventPluginHub$$module$ReactEventEmitter.putListener, getListener:EventPluginHub$$module$ReactEventEmitter.getListener, deleteListener:EventPluginHub$$module$ReactEventEmitter.deleteListener, deleteAllListeners:EventPluginHub$$module$ReactEventEmitter.deleteAllListeners, trapBubbledEvent:trapBubbledEvent$$module$ReactEventEmitter, trapCapturedEvent:trapCapturedEvent$$module$ReactEventEmitter});110module$ReactEventEmitter.module$exports = ReactEventEmitter$$module$ReactEventEmitter;111if(module$ReactEventEmitter.module$exports) {112 module$ReactEventEmitter = module$ReactEventEmitter.module$exports113}...
ReactBrowserEventEmitter.js
Source:ReactBrowserEventEmitter.js
...65 var d = a[l];66 if (!(i.hasOwnProperty(d) && i[d])) {67 if (d === u.topWheel) {68 if (c("wheel")) {69 g.ReactEventListener.trapBubbledEvent(u.topWheel, "wheel", n);70 } else {71 if (c("mousewheel")) {72 g.ReactEventListener.trapBubbledEvent(u.topWheel, "mousewheel", n);73 } else {74 g.ReactEventListener.trapBubbledEvent(u.topWheel, "DOMMouseScroll", n);75 }76 }77 } else {78 if (d === u.topScroll) {79 if (c("scroll", true)) {80 g.ReactEventListener.trapCapturedEvent(u.topScroll, "scroll", n);81 } else {82 g.ReactEventListener.trapBubbledEvent(u.topScroll, "scroll", g.ReactEventListener.WINDOW_HANDLE);83 }84 } else {85 if (d === u.topFocus || d === u.topBlur) {86 if (c("focus", true)) {87 g.ReactEventListener.trapCapturedEvent(u.topFocus, "focus", n);88 g.ReactEventListener.trapCapturedEvent(u.topBlur, "blur", n);89 } else {90 if (c("focusin")) {91 g.ReactEventListener.trapBubbledEvent(u.topFocus, "focusin", n);92 g.ReactEventListener.trapBubbledEvent(u.topBlur, "focusout", n);93 };94 }95 i[u.topBlur] = true;96 i[u.topFocus] = true;97 } else {98 if (f.hasOwnProperty(d)) {99 g.ReactEventListener.trapBubbledEvent(d, f[d], n)100 };101 }102 }103 }104 i[d] = true;105 };106 }107 },108 trapBubbledEvent: function(e, t, n) {109 return g.ReactEventListener.trapBubbledEvent(e, t, n);110 },111 trapCapturedEvent: function(e, t, n) {112 return g.ReactEventListener.trapCapturedEvent(e, t, n);113 },114 ensureScrollValueMonitoring: function() {115 if (!d) {116 var e = u.refreshScrollValues;117 g.ReactEventListener.monitorScrollValue(e);118 d = true;119 }120 },121 eventNameDispatchConfigs: i.eventNameDispatchConfigs,122 registrationNameModules: i.registrationNameModules,123 putListener: i.putListener,...
Using AI Code Generation
1const playwright = require('playwright');2const { trapBubbledEvent } = playwright._internal;3async function main() {4 const browser = await playwright.chromium.launch();5 const page = await browser.newPage();6 const [popup] = await Promise.all([7 page.waitForEvent('popup'),8 page.click('text=Get started')9 ]);10 await trapBubbledEvent(popup, 'console');11 await popup.click('text=Run in Playwright');12 await popup.waitForLoadState();13 await browser.close();14}15main();
Using AI Code Generation
1const { trapBubbledEvent } = require('playwright/lib/client/elementHandler');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch({5 });6 const page = await browser.newPage();7 const elementHandle = await page.$('input[title="Search"]');8 const eventPromise = new Promise((resolve) => {9 trapBubbledEvent(elementHandle, 'input', resolve);10 });11 await page.fill('input[title="Search"]', 'Playwright');12 await eventPromise;13 await browser.close();14})();15import { trapBubbledEvent } from 'playwright/lib/client/elementHandler';16import { chromium } from 'playwright';17(async () => {18 const browser = await chromium.launch({19 });20 const page = await browser.newPage();21 const elementHandle = await page.$('input[title="Search"]');22 const eventPromise = new Promise((resolve) => {23 trapBubbledEvent(elementHandle, 'input', resolve);24 });25 await page.fill('input[title="Search"]', 'Playwright');26 await eventPromise;27 await browser.close();28})();29from playwright import sync_playwright30with sync_playwright() as p:31 browser = p.chromium.launch()32 page = browser.new_page()33 elementHandle = page.query_selector('input[title="Search"]')34 eventPromise = new Promise((resolve) => {35 trapBubbledEvent(elementHandle, 'input', resolve);36 });37 page.fill('input[title="Search"]', 'Playwright')38 browser.close()39import com.microsoft.playwright.*;40import static com.microsoft.playwright.Page.trapBubbledEvent;41public class Example {42 public static void main(String[] args) {43 try (Playwright playwright = Playwright.create()) {
Using AI Code Generation
1const {trapBubbledEvent} = require('playwright/lib/internal/elementHandleDispatcher');2const {ElementHandle} = require('playwright/lib/cjs/puppeteer/common/JSHandle');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const elementHandle = await page.$('input[name="q"]');8 const [event] = await Promise.all([9 trapBubbledEvent(elementHandle, 'keyup'),10 page.keyboard.press('a'),11 ]);12 console.log(event);13 await browser.close();14})();15{ type: 'keyup',16 srcElement: { type: 'text' },17 target: { type: 'text' },18 currentTarget: { type: 'text' },19 path: [ { type: 'text' } ],20 which: 65 }
Using AI Code Generation
1const {trapBubbledEvent} = require('@playwright/test/lib/server/events');2const {test} = require('@playwright/test');3test('test', async ({page}) => {4 await page.evaluate(() => {5 trapBubbledEvent(document, 'click', (event) => {6 console.log(event);7 });8 });9 await page.click('text=Google Search');10});
Using AI Code Generation
1const {trapBubbledEvent} = require('@playwright/test/lib/utils/events');2const {EventEmitter} = require('events');3const emitter = new EventEmitter();4const listener = trapBubbledEvent(emitter, 'event', (event) => {5 console.log(event);6});7emitter.emit('event', 'hello');8listener.dispose();9emitter.emit('event', 'world');
Using AI Code Generation
1const playwright = require('playwright');2const internal = require('playwright/lib/internal');3const {trapBubbledEvent} = internal.helper;4async function test() {5 const browser = await playwright.chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 await page.evaluate(() => {9 document.addEventListener('click', event => {10 console.log('click event fired');11 });12 });13 await trapBubbledEvent(page, 'click', e => {14 console.log('click event was bubbled');15 return true;16 });17 await page.click('text=Get started');18 await browser.close();19}20test();21const playwright = require('playwright');22const internal = require('playwright/lib/internal');23const {trapBubbledEvent} = internal.helper;24async function test() {25 const browser = await playwright.chromium.launch();26 const context = await browser.newContext();27 const page = await context.newPage();28 await page.evaluate(() => {29 document.addEventListener('click', event => {30 console.log('click event fired');31 });32 });33 await trapBubbledEvent(page, 'click', e => {34 console.log('click event was bubbled');35 return true;36 });37 await page.click('text=Get started');38 await browser.close();39}40test();41const playwright = require('playwright');42const internal = require('playwright/lib/internal');43const {trapBubbledEvent} = internal.helper;44async function test() {45 const browser = await playwright.chromium.launch();46 const context = await browser.newContext();47 const page = await context.newPage();48 await page.evaluate(() => {
Using AI Code Generation
1const {trapBubbledEvent} = require('@playwright/test/lib/utils/events');2const {Page} = require('@playwright/test');3async function main() {4 const page = await browser.newPage();5 const eventPromise = trapBubbledEvent(page, 'request');6 const request = await eventPromise;7 console.log(request.url());8}9main();
Using AI Code Generation
1const { trapBubbledEvent } = require('playwright/lib/internal/frames');2(async () => {3const browser = await chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await trapBubbledEvent(page, 'load', (event) => {7console.log("Page loaded");8});9await browser.close();10})();
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?
