Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use getInternalInstanceChildren method in Playwright Internal
Best JavaScript code snippet using playwright-internal
backend.js
Source:backend.js 
...2330}2331/**2332 * Get children from a component instance.2333 */2334function getInternalInstanceChildren(instance) {2335 if (instance.$children) {2336 return instance.$children;2337 }2338 if (Array.isArray(instance.subTree.children)) {2339 return instance.subTree.children.filter(vnode => !!vnode.component).map(vnode => vnode.component);2340 }2341 return [];2342}2343/**2344 * Check if an instance is qualified.2345 */2346function isQualified(instance) {2347 const name = shared_utils_1.classify(instance.name || util_1.getInstanceName(instance)).toLowerCase();2348 return name.indexOf(filter) > -1;2349}2350function flatten(items) {2351 return items.reduce((acc, item) => {2352 if (item instanceof Array)2353 acc.push(...flatten(item));2354 else if (item)2355 acc.push(item);2356 return acc;2357 }, []);2358}2359function captureChild(child) {2360 if (child.fnContext && !child.componentInstance) {2361 return capture(child);2362 }2363 else if (child.componentInstance) {2364 if (!util_1.isBeingDestroyed(child.componentInstance))2365 return capture(child.componentInstance);2366 }2367 else if (child.children) {2368 return flatten(child.children.map(captureChild));2369 }2370}2371/**2372 * Capture the meta information of an instance. (recursive)2373 */2374function capture(instance, index, list) {2375 if (instance.__VUE_DEVTOOLS_FUNCTIONAL_LEGACY__) {2376 instance = instance.vnode;2377 }2378 if (instance.$options && instance.$options.abstract && instance._vnode && instance._vnode.componentInstance) {2379 instance = instance._vnode.componentInstance;2380 }2381 // Functional component.2382 if (instance.fnContext && !instance.componentInstance) {2383 const contextUid = instance.fnContext.__VUE_DEVTOOLS_UID__;2384 let id = functionalIds.get(contextUid);2385 if (id == null) {2386 id = 0;2387 }2388 else {2389 id++;2390 }2391 functionalIds.set(contextUid, id);2392 const functionalId = contextUid + ':functional:' + id;2393 markFunctional(functionalId, instance);2394 const children = (instance.children ? instance.children.map(child => child.fnContext2395 ? captureChild(child)2396 : child.componentInstance2397 ? capture(child.componentInstance)2398 : undefined)2399 // router-view has both fnContext and componentInstance on vnode.2400 : instance.componentInstance ? [capture(instance.componentInstance)] : []).filter(Boolean);2401 return {2402 uid: functionalId,2403 id: functionalId,2404 tags: [2405 {2406 label: 'functional',2407 textColor: 0x555555,2408 backgroundColor: 0xeeeeee2409 }2410 ],2411 name: util_1.getInstanceName(instance),2412 renderKey: util_1.getRenderKey(instance.key),2413 children,2414 hasChildren: !!children.length,2415 inactive: false,2416 isFragment: false // TODO: Check what is it for.2417 };2418 }2419 // instance._uid is not reliable in devtools as there2420 // may be 2 roots with same _uid which causes unexpected2421 // behaviour2422 instance.__VUE_DEVTOOLS_UID__ = util_1.getUniqueId(instance);2423 // Dedupe2424 if (captureIds.has(instance.__VUE_DEVTOOLS_UID__)) {2425 return;2426 }2427 else {2428 captureIds.set(instance.__VUE_DEVTOOLS_UID__, undefined);2429 }2430 mark(instance);2431 const name = util_1.getInstanceName(instance);2432 const children = getInternalInstanceChildren(instance)2433 .filter(child => !util_1.isBeingDestroyed(child))2434 .map(capture)2435 .filter(Boolean);2436 const ret = {2437 uid: instance._uid,2438 id: instance.__VUE_DEVTOOLS_UID__,2439 name,2440 renderKey: util_1.getRenderKey(instance.$vnode ? instance.$vnode.key : null),2441 inactive: !!instance._inactive,2442 isFragment: !!instance._isFragment,2443 children,2444 hasChildren: !!children.length,2445 tags: [],2446 meta: {}2447 };2448 if (instance._vnode && instance._vnode.children) {2449 ret.children = ret.children.concat(flatten(instance._vnode.children.map(captureChild))2450 .filter(Boolean));2451 ret.hasChildren = !!ret.children.length;2452 }2453 // record screen position to ensure correct ordering2454 if ((!list || list.length > 1) && !instance._inactive) {2455 const rect = el_1.getInstanceOrVnodeRect(instance);2456 ret.positionTop = rect ? rect.top : Infinity;2457 }2458 else {2459 ret.positionTop = Infinity;2460 }2461 // check if instance is available in console2462 const consoleId = consoleBoundInstances.indexOf(instance.__VUE_DEVTOOLS_UID__);2463 ret.consoleId = consoleId > -1 ? '$vm' + consoleId : null;2464 // check router view2465 const isRouterView2 = instance.$vnode && instance.$vnode.data.routerView;2466 if (instance._routerView || isRouterView2) {2467 ret.isRouterView = true;2468 if (!instance._inactive && instance.$route) {2469 const matched = instance.$route.matched;2470 const depth = isRouterView22471 ? instance.$vnode.data.routerViewDepth2472 : instance._routerView.depth;2473 ret.meta.matchedRouteSegment =2474 matched &&2475 matched[depth] &&2476 (isRouterView2 ? matched[depth].path : matched[depth].handler.path);2477 }2478 ret.tags.push({2479 label: `router-view${ret.meta.matchedRouteSegment ? `: ${ret.meta.matchedRouteSegment}` : ''}`,2480 textColor: 0x000000,2481 backgroundColor: 0xff83442482 });2483 }2484 return ret;2485}2486/**2487 * Mark an instance as captured and store it in the instance map.2488 *2489 * @param {Vue} instance2490 */2491function mark(instance) {2492 const refId = instance.__VUE_DEVTOOLS_UID__;2493 if (!exports.instanceMap.has(refId)) {2494 exports.instanceMap.set(refId, instance);2495 appRecord.instanceMap.set(refId, instance);2496 instance.$on('hook:beforeDestroy', function () {2497 exports.instanceMap.delete(refId);2498 });2499 }2500}2501function markFunctional(id, vnode) {2502 const refId = vnode.fnContext.__VUE_DEVTOOLS_UID__;2503 if (!exports.functionalVnodeMap.has(refId)) {2504 exports.functionalVnodeMap.set(refId, {});2505 vnode.fnContext.$on('hook:beforeDestroy', function () {2506 exports.functionalVnodeMap.delete(refId);2507 });2508 }2509 exports.functionalVnodeMap.get(refId)[id] = vnode;2510 appRecord.instanceMap.set(id, {2511 __VUE_DEVTOOLS_UID__: id,2512 __VUE_DEVTOOLS_FUNCTIONAL_LEGACY__: true,2513 vnode2514 });2515}2516//# sourceMappingURL=tree.js.map2517/***/ }),2518/***/ 1247:2519/***/ ((__unused_webpack_module, exports, __webpack_require__) => {2520"use strict";2521Object.defineProperty(exports, "__esModule", ({ value: true }));2522exports.getUniqueId = exports.getRenderKey = exports.getInstanceName = exports.isBeingDestroyed = void 0;2523const shared_utils_1 = __webpack_require__(1942);2524function isBeingDestroyed(instance) {2525 return instance._isBeingDestroyed;2526}2527exports.isBeingDestroyed = isBeingDestroyed;2528/**2529 * Get the appropriate display name for an instance.2530 */2531function getInstanceName(instance) {2532 const name = shared_utils_1.getComponentName(instance.$options || instance.fnOptions || {});2533 if (name)2534 return name;2535 return instance.$root === instance2536 ? 'Root'2537 : 'Anonymous Component';2538}2539exports.getInstanceName = getInstanceName;2540function getRenderKey(value) {2541 if (value == null)2542 return;2543 const type = typeof value;2544 if (type === 'number') {2545 return value.toString();2546 }2547 else if (type === 'string') {2548 return `'${value}'`;2549 }2550 else if (Array.isArray(value)) {2551 return 'Array';2552 }2553 else {2554 return 'Object';2555 }2556}2557exports.getRenderKey = getRenderKey;2558/**2559 * Returns a devtools unique id for instance.2560 */2561function getUniqueId(instance) {2562 if (instance.__VUE_DEVTOOLS_UID__ != null)2563 return instance.__VUE_DEVTOOLS_UID__;2564 const rootVueId = instance.$root.__VUE_DEVTOOLS_ROOT_UID__;2565 return `${rootVueId}:${instance._uid}`;2566}2567exports.getUniqueId = getUniqueId;2568//# sourceMappingURL=util.js.map2569/***/ }),2570/***/ 5586:2571/***/ ((__unused_webpack_module, exports, __webpack_require__) => {2572"use strict";2573Object.defineProperty(exports, "__esModule", ({ value: true }));2574exports.wrapVueForEvents = void 0;2575const shared_utils_1 = __webpack_require__(1942);2576const internalRE = /^(?:pre-)?hook:/;2577function wrap(app, Vue, method, ctx) {2578 const original = Vue.prototype[method];2579 if (original) {2580 Vue.prototype[method] = function (...args) {2581 const res = original.apply(this, args);2582 logEvent(this, method, args[0], args.slice(1));2583 return res;2584 };2585 }2586 function logEvent(vm, type, eventName, payload) {2587 // The string check is important for compat with 1.x where the first2588 // argument may be an object instead of a string.2589 // this also ensures the event is only logged for direct $emit (source)2590 // instead of by $dispatch/$broadcast2591 if (typeof eventName === 'string' && !internalRE.test(eventName)) {2592 const instance = vm._self || vm;2593 ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_EMIT, app, instance, eventName, payload);2594 }2595 }2596}2597function wrapVueForEvents(app, Vue, ctx) {2598 ;2599 ['$emit', '$broadcast', '$dispatch'].forEach(method => {2600 wrap(app, Vue, method, ctx);2601 });2602}2603exports.wrapVueForEvents = wrapVueForEvents;2604//# sourceMappingURL=events.js.map2605/***/ }),2606/***/ 7167:2607/***/ ((__unused_webpack_module, exports, __webpack_require__) => {2608"use strict";2609Object.defineProperty(exports, "__esModule", ({ value: true }));2610exports.backend = void 0;2611const app_backend_api_1 = __webpack_require__(860);2612const shared_utils_1 = __webpack_require__(1942);2613const data_1 = __webpack_require__(7043);2614const el_1 = __webpack_require__(5030);2615const tree_1 = __webpack_require__(9606);2616const util_1 = __webpack_require__(1247);2617const events_1 = __webpack_require__(5586);2618const plugin_1 = __webpack_require__(6132);2619exports.backend = {2620 frameworkVersion: 2,2621 availableFeatures: [2622 app_backend_api_1.BuiltinBackendFeature.COMPONENTS,2623 app_backend_api_1.BuiltinBackendFeature.FLUSH2624 ],2625 setup(api) {2626 api.on.getAppRecordName(payload => {2627 if (payload.app.name) {2628 payload.name = payload.app.name;2629 }2630 });2631 api.on.getAppRootInstance(payload => {2632 payload.root = payload.app;2633 });2634 api.on.walkComponentTree((payload, ctx) => {2635 payload.componentTreeData = tree_1.walkTree(payload.componentInstance, payload.filter, ctx);2636 });2637 api.on.walkComponentParents((payload, ctx) => {2638 payload.parentInstances = tree_1.getComponentParents(payload.componentInstance, ctx);2639 });2640 api.on.inspectComponent(payload => {2641 injectToUtils();2642 payload.instanceData = data_1.getInstanceDetails(payload.componentInstance);2643 });2644 api.on.getComponentBounds(payload => {2645 payload.bounds = el_1.getInstanceOrVnodeRect(payload.componentInstance);2646 });2647 api.on.getComponentName(payload => {2648 const instance = payload.componentInstance;2649 payload.name = instance.fnContext ? shared_utils_1.getComponentName(instance.fnOptions) : util_1.getInstanceName(instance);2650 });2651 api.on.getElementComponent(payload => {2652 payload.componentInstance = el_1.findRelatedComponent(payload.element);2653 });2654 api.on.editComponentState(payload => {2655 data_1.editState(payload);2656 });2657 api.on.getComponentRootElements(payload => {2658 payload.rootElements = [payload.componentInstance.$el];2659 });2660 api.on.getComponentDevtoolsOptions(payload => {2661 payload.options = payload.componentInstance.$options.devtools;2662 });2663 api.on.getComponentInstances(() => {2664 console.warn('on.getComponentInstances is not implemented for Vue 2');2665 });2666 },2667 setupApp(api, appRecord) {2668 injectToUtils();2669 const { Vue } = appRecord.options.meta;2670 const app = appRecord.options.app;2671 events_1.wrapVueForEvents(app, Vue, api.ctx);2672 plugin_1.setupPlugin(api, app);2673 }2674};2675function injectToUtils() {2676 shared_utils_1.backendInjections.getCustomInstanceDetails = data_1.getCustomInstanceDetails;2677 shared_utils_1.backendInjections.instanceMap = tree_1.instanceMap;2678}2679//# sourceMappingURL=index.js.map2680/***/ }),2681/***/ 6132:2682/***/ ((__unused_webpack_module, exports, __webpack_require__) => {2683"use strict";2684Object.defineProperty(exports, "__esModule", ({ value: true }));2685exports.setupPlugin = void 0;2686const devtools_api_1 = __webpack_require__(2296);2687const shared_utils_1 = __webpack_require__(1942);2688let actionId = 0;2689function setupPlugin(api, app) {2690 const ROUTER_INSPECTOR_ID = 'vue2-router-inspector';2691 const ROUTER_CHANGES_LAYER_ID = 'vue2-router-changes';2692 const VUEX_INSPECTOR_ID = 'vue2-vuex-inspector';2693 const VUEX_MUTATIONS_ID = 'vue2-vuex-mutations';2694 const VUEX_ACTIONS_ID = 'vue2-vuex-actions';2695 devtools_api_1.setupDevtoolsPlugin({2696 app,2697 id: 'org.vuejs.vue2-internal',2698 label: 'Vue 2',2699 homepage: 'https://vuejs.org/',2700 logo: 'https://vuejs.org/images/icons/favicon-96x96.png'2701 }, api => {2702 // Vue Router2703 if (app.$router) {2704 const router = app.$router;2705 // Inspector2706 api.addInspector({2707 id: ROUTER_INSPECTOR_ID,2708 label: 'Routes',2709 icon: 'book',2710 treeFilterPlaceholder: 'Search routes'2711 });2712 api.on.getInspectorTree(payload => {2713 if (payload.app === app && payload.inspectorId === ROUTER_INSPECTOR_ID) {2714 payload.rootNodes = router.options.routes.map(route => formatRouteNode(router, route, '', payload.filter)).filter(Boolean);2715 }2716 });2717 api.on.getInspectorState(payload => {2718 if (payload.app === app && payload.inspectorId === ROUTER_INSPECTOR_ID) {2719 const route = router.matcher.getRoutes().find(r => getPathId(r) === payload.nodeId);2720 if (route) {2721 payload.state = {2722 options: formatRouteData(route)2723 };2724 }2725 }2726 });2727 // Timeline2728 api.addTimelineLayer({2729 id: ROUTER_CHANGES_LAYER_ID,2730 label: 'Router Navigations',2731 color: 0x40a8c42732 });2733 router.afterEach((to, from) => {2734 api.addTimelineEvent({2735 layerId: ROUTER_CHANGES_LAYER_ID,2736 event: {2737 time: Date.now(),2738 title: to.path,2739 data: {2740 from,2741 to2742 }2743 }2744 });2745 api.sendInspectorTree(ROUTER_INSPECTOR_ID);2746 });2747 }2748 // Vuex2749 if (app.$store) {2750 const store = app.$store;2751 api.addInspector({2752 id: VUEX_INSPECTOR_ID,2753 label: 'Vuex',2754 icon: 'storage',2755 treeFilterPlaceholder: 'Filter stores...'2756 });2757 api.on.getInspectorTree((payload) => {2758 if (payload.app === app && payload.inspectorId === VUEX_INSPECTOR_ID) {2759 if (payload.filter) {2760 const nodes = [];2761 flattenStoreForInspectorTree(nodes, store._modules.root, payload.filter, '');2762 payload.rootNodes = nodes;2763 }2764 else {2765 payload.rootNodes = [2766 formatStoreForInspectorTree(store._modules.root, '')2767 ];2768 }2769 }2770 });2771 api.on.getInspectorState((payload) => {2772 if (payload.app === app && payload.inspectorId === VUEX_INSPECTOR_ID) {2773 const modulePath = payload.nodeId;2774 const module = getStoreModule(store._modules, modulePath);2775 // Access the getters prop to init getters cache (which is lazy)2776 // eslint-disable-next-line no-unused-expressions2777 module.context.getters;2778 payload.state = formatStoreForInspectorState(module, store._makeLocalGettersCache, modulePath);2779 }2780 });2781 api.addTimelineLayer({2782 id: VUEX_MUTATIONS_ID,2783 label: 'Vuex Mutations',2784 color: LIME_5002785 });2786 api.addTimelineLayer({2787 id: VUEX_ACTIONS_ID,2788 label: 'Vuex Actions',2789 color: LIME_5002790 });2791 store.subscribe((mutation, state) => {2792 api.sendInspectorState(VUEX_INSPECTOR_ID);2793 const data = {};2794 if (mutation.payload) {2795 data.payload = mutation.payload;2796 }2797 data.state = state;2798 api.addTimelineEvent({2799 layerId: VUEX_MUTATIONS_ID,2800 event: {2801 time: Date.now(),2802 title: mutation.type,2803 data2804 }2805 });2806 }, { prepend: true });2807 store.subscribeAction({2808 before: (action, state) => {2809 const data = {};2810 if (action.payload) {2811 data.payload = action.payload;2812 }2813 action._id = actionId++;2814 action._time = Date.now();2815 data.state = state;2816 api.addTimelineEvent({2817 layerId: VUEX_ACTIONS_ID,2818 event: {2819 time: action._time,2820 title: action.type,2821 groupId: action._id,2822 subtitle: 'start',2823 data2824 }2825 });2826 },2827 after: (action, state) => {2828 const data = {};2829 const duration = Date.now() - action._time;2830 data.duration = {2831 _custom: {2832 type: 'duration',2833 display: `${duration}ms`,2834 tooltip: 'Action duration',2835 value: duration2836 }2837 };2838 if (action.payload) {2839 data.payload = action.payload;2840 }2841 data.state = state;2842 api.addTimelineEvent({2843 layerId: VUEX_ACTIONS_ID,2844 event: {2845 time: Date.now(),2846 title: action.type,2847 groupId: action._id,2848 subtitle: 'end',2849 data2850 }2851 });2852 }2853 }, { prepend: true });2854 }2855 });2856}2857exports.setupPlugin = setupPlugin;2858/**2859 * Extracted from tailwind palette2860 */2861const BLUE_600 = 0x2563eb;2862const LIME_500 = 0x84cc16;2863const CYAN_400 = 0x22d3ee;2864const ORANGE_400 = 0xfb923c;2865const WHITE = 0xffffff;2866const DARK = 0x666666;2867function formatRouteNode(router, route, parentPath, filter) {2868 var _a, _b;2869 const node = {2870 id: parentPath + route.path,2871 label: route.path,2872 children: (_a = route.children) === null || _a === void 0 ? void 0 : _a.map(child => formatRouteNode(router, child, route.path, filter)).filter(Boolean),2873 tags: []2874 };2875 if (filter && !node.id.includes(filter) && !((_b = node.children) === null || _b === void 0 ? void 0 : _b.length))2876 return null;2877 if (route.name != null) {2878 node.tags.push({2879 label: String(route.name),2880 textColor: 0,2881 backgroundColor: CYAN_4002882 });2883 }2884 if (route.alias != null) {2885 node.tags.push({2886 label: 'alias',2887 textColor: 0,2888 backgroundColor: ORANGE_4002889 });2890 }2891 const currentPath = router.currentRoute.matched.reduce((p, m) => p + m.path, '');2892 if (node.id === currentPath) {2893 node.tags.push({2894 label: 'active',2895 textColor: WHITE,2896 backgroundColor: BLUE_6002897 });2898 }2899 if (route.redirect) {2900 node.tags.push({2901 label: 'redirect: ' +2902 (typeof route.redirect === 'string' ? route.redirect : 'Object'),2903 textColor: WHITE,2904 backgroundColor: DARK2905 });2906 }2907 return node;2908}2909function formatRouteData(route) {2910 const data = [];2911 data.push({ key: 'path', value: route.path });2912 if (route.redirect) {2913 data.push({ key: 'redirect', value: route.redirect });2914 }2915 if (route.alias) {2916 data.push({ key: 'alias', value: route.alias });2917 }2918 if (route.props) {2919 data.push({ key: 'props', value: route.props });2920 }2921 if (route.name && route.name != null) {2922 data.push({ key: 'name', value: route.name });2923 }2924 if (route.component) {2925 const component = {};2926 // if (route.component.__file) {2927 // component.file = route.component.__file2928 // }2929 if (route.component.template) {2930 component.template = route.component.template;2931 }2932 if (route.component.props) {2933 component.props = route.component.props;2934 }2935 if (!shared_utils_1.isEmptyObject(component)) {2936 data.push({ key: 'component', value: component });2937 }2938 }2939 return data;2940}2941function getPathId(routeMatcher) {2942 let path = routeMatcher.path;2943 if (routeMatcher.parent) {2944 path = getPathId(routeMatcher.parent) + path;2945 }2946 return path;2947}2948const TAG_NAMESPACED = {2949 label: 'namespaced',2950 textColor: WHITE,2951 backgroundColor: DARK2952};2953function formatStoreForInspectorTree(module, path) {2954 return {2955 id: path || 'root',2956 // all modules end with a `/`, we want the last segment only2957 // cart/ -> cart2958 // nested/cart/ -> cart2959 label: extractNameFromPath(path),2960 tags: module.namespaced ? [TAG_NAMESPACED] : [],2961 children: Object.keys(module._children).map((moduleName) => formatStoreForInspectorTree(module._children[moduleName], path + moduleName + '/'))2962 };2963}2964function flattenStoreForInspectorTree(result, module, filter, path) {2965 if (path.includes(filter)) {2966 result.push({2967 id: path || 'root',2968 label: path.endsWith('/') ? path.slice(0, path.length - 1) : path || 'Root',2969 tags: module.namespaced ? [TAG_NAMESPACED] : []2970 });2971 }2972 Object.keys(module._children).forEach(moduleName => {2973 flattenStoreForInspectorTree(result, module._children[moduleName], filter, path + moduleName + '/');2974 });2975}2976function extractNameFromPath(path) {2977 return path && path !== 'root' ? path.split('/').slice(-2, -1)[0] : 'Root';2978}2979function formatStoreForInspectorState(module, getters, path) {2980 getters = path === 'root' ? getters : getters[path];2981 const gettersKeys = Object.keys(getters);2982 const storeState = {2983 state: Object.keys(module.state).map((key) => ({2984 key,2985 editable: true,2986 value: module.state[key]2987 }))2988 };2989 if (gettersKeys.length) {2990 storeState.getters = gettersKeys.map((key) => ({2991 key: key.endsWith('/') ? extractNameFromPath(key) : key,2992 editable: false,2993 value: getters[key]2994 }));2995 }2996 return storeState;2997}2998function getStoreModule(moduleMap, path) {2999 const names = path.split('/').filter((n) => n);3000 return names.reduce((module, moduleName, i) => {3001 const child = module[moduleName];3002 if (!child) {3003 throw new Error(`Missing module "${moduleName}" for path "${path}".`);3004 }3005 return i === names.length - 1 ? child : child._children;3006 }, path === 'root' ? moduleMap : moduleMap.root._children);3007}3008//# sourceMappingURL=plugin.js.map3009/***/ }),3010/***/ 5467:3011/***/ (function(__unused_webpack_module, exports, __webpack_require__) {3012"use strict";3013var __importDefault = (this && this.__importDefault) || function (mod) {3014 return (mod && mod.__esModule) ? mod : { "default": mod };3015};3016Object.defineProperty(exports, "__esModule", ({ value: true }));3017exports.getCustomInstanceDetails = exports.editState = exports.getInstanceDetails = void 0;3018const util_1 = __webpack_require__(1122);3019const shared_utils_1 = __webpack_require__(1942);3020const shared_data_1 = __importDefault(__webpack_require__(796));3021/**3022 * Get the detailed information of an inspected instance.3023 */3024async function getInstanceDetails(instance, ctx) {3025 var _a;3026 return {3027 id: util_1.getUniqueComponentId(instance, ctx),3028 name: util_1.getInstanceName(instance),3029 file: (_a = instance.type) === null || _a === void 0 ? void 0 : _a.__file,3030 state: await getInstanceState(instance)3031 };3032}3033exports.getInstanceDetails = getInstanceDetails;3034async function getInstanceState(instance) {3035 return processProps(instance).concat(processState(instance), processSetupState(instance), processComputed(instance), processAttrs(instance), processProvide(instance), processInject(instance), processRefs(instance));3036}3037/**3038 * Process the props of an instance.3039 * Make sure return a plain object because window.postMessage()3040 * will throw an Error if the passed object contains Functions.3041 *3042 * @param {Vue} instance3043 * @return {Array}3044 */3045function processProps(instance) {3046 const propsData = [];3047 const propDefinitions = instance.type.props;3048 for (let key in instance.props) {3049 const propDefinition = propDefinitions ? propDefinitions[key] : null;3050 key = shared_utils_1.camelize(key);3051 propsData.push({3052 type: 'props',3053 key,3054 value: instance.props[key],3055 meta: propDefinition ? {3056 type: propDefinition.type ? getPropType(propDefinition.type) : 'any',3057 required: !!propDefinition.required,3058 ...propDefinition.default != null ? {3059 default: propDefinition.default.toString()3060 } : {}3061 } : {3062 type: 'invalid'3063 },3064 editable: shared_data_1.default.editableProps3065 });3066 }3067 return propsData;3068}3069const fnTypeRE = /^(?:function|class) (\w+)/;3070/**3071 * Convert prop type constructor to string.3072 */3073function getPropType(type) {3074 const match = type.toString().match(fnTypeRE);3075 return typeof type === 'function'3076 ? (match && match[1]) || 'any'3077 : 'any';3078}3079/**3080 * Process state, filtering out props and "clean" the result3081 * with a JSON dance. This removes functions which can cause3082 * errors during structured clone used by window.postMessage.3083 *3084 * @param {Vue} instance3085 * @return {Array}3086 */3087function processState(instance) {3088 const type = instance.type;3089 const props = type.props;3090 const getters = type.vuex &&3091 type.vuex.getters;3092 const computedDefs = type.computed;3093 const data = {3094 ...instance.data,3095 ...instance.renderContext3096 };3097 return Object.keys(data)3098 .filter(key => (!(props && key in props) &&3099 !(getters && key in getters) &&3100 !(computedDefs && key in computedDefs)))3101 .map(key => ({3102 key,3103 type: 'data',3104 value: data[key],3105 editable: true3106 }));3107}3108function processSetupState(instance) {3109 const raw = instance.devtoolsRawSetupState || {};3110 return Object.keys(instance.setupState)3111 .map(key => ({3112 key,3113 type: 'setup',3114 value: instance.setupState[key],3115 ...getSetupStateExtra(raw[key])3116 }));3117}3118function getSetupStateExtra(raw) {3119 if (!raw)3120 return {};3121 const info = getSetupStateInfo(raw);3122 const objectType = info.computed ? 'Computed' : info.ref ? 'Ref' : info.reactive ? 'Reactive' : null;3123 return {3124 ...objectType ? { objectType } : {},3125 ...raw.effect ? { raw: raw.effect.raw.toString() } : {},3126 editable: (info.ref || info.computed || info.reactive) && !info.readonly3127 };3128}3129function isRef(raw) {3130 return !!raw.__v_isRef;3131}3132function isComputed(raw) {3133 return isRef(raw) && !!raw.effect;3134}3135function isReactive(raw) {3136 return !!raw.__v_isReactive;3137}3138function isReadOnly(raw) {3139 return !!raw.__v_isReadonly;3140}3141function getSetupStateInfo(raw) {3142 return {3143 ref: isRef(raw),3144 computed: isComputed(raw),3145 reactive: isReactive(raw),3146 readonly: isReadOnly(raw)3147 };3148}3149/**3150 * Process the computed properties of an instance.3151 *3152 * @param {Vue} instance3153 * @return {Array}3154 */3155function processComputed(instance) {3156 const type = instance.type;3157 const computed = [];3158 const defs = type.computed || {};3159 // use for...in here because if 'computed' is not defined3160 // on component, computed properties will be placed in prototype3161 // and Object.keys does not include3162 // properties from object's prototype3163 for (const key in defs) {3164 const def = defs[key];3165 const type = typeof def === 'function' && def.vuex3166 ? 'vuex bindings'3167 : 'computed';3168 // use try ... catch here because some computed properties may3169 // throw error during its evaluation3170 let computedProp = null;3171 try {3172 computedProp = {3173 type,3174 key,3175 value: instance.proxy[key],3176 editable: typeof def.set === 'function'3177 };3178 }3179 catch (e) {3180 computedProp = {3181 type,3182 key,3183 value: '(error during evaluation)'3184 };3185 }3186 computed.push(computedProp);3187 }3188 return computed;3189}3190function processAttrs(instance) {3191 return Object.keys(instance.attrs)3192 .map(key => ({3193 type: 'attrs',3194 key,3195 value: instance.attrs[key]3196 }));3197}3198function processProvide(instance) {3199 return Object.keys(instance.provides)3200 .map(key => ({3201 type: 'provided',3202 key,3203 value: instance.provides[key]3204 }));3205}3206function processInject(instance) {3207 if (!instance.type || !instance.type.inject)3208 return [];3209 let keys = [];3210 if (Array.isArray(instance.type.inject)) {3211 keys = instance.type.inject.map(key => ({3212 key,3213 originalKey: key3214 }));3215 }3216 else {3217 keys = Object.keys(instance.type.inject).map(key => {3218 const value = instance.type.inject[key];3219 let originalKey;3220 if (typeof value === 'string') {3221 originalKey = value;3222 }3223 else {3224 originalKey = value.from;3225 }3226 return {3227 key,3228 originalKey3229 };3230 });3231 }3232 return keys.map(({ key, originalKey }) => ({3233 type: 'injected',3234 key: originalKey && key !== originalKey ? `${originalKey} â ${key}` : key,3235 value: instance.ctx[key]3236 }));3237}3238function processRefs(instance) {3239 return Object.keys(instance.refs)3240 .map(key => ({3241 type: 'refs',3242 key,3243 value: instance.refs[key]3244 }));3245}3246function editState({ componentInstance, path, state }, ctx) {3247 let target;3248 const targetPath = path.slice();3249 if (Object.keys(componentInstance.props).includes(path[0])) {3250 // Props3251 target = componentInstance.props;3252 }3253 else if (Object.keys(componentInstance.devtoolsRawSetupState).includes(path[0])) {3254 // Setup3255 target = componentInstance.devtoolsRawSetupState;3256 const currentValue = shared_utils_1.get(componentInstance.devtoolsRawSetupState, path);3257 if (currentValue != null) {3258 const info = getSetupStateInfo(currentValue);3259 if (info.readonly)3260 return;3261 if (info.ref) {3262 targetPath.splice(1, 0, 'value');3263 }3264 }3265 }3266 else {3267 target = componentInstance.proxy;3268 }3269 if (target && targetPath) {3270 shared_utils_1.set(target, targetPath, 'value' in state ? state.value : undefined, (obj, field, value) => {3271 if (state.remove || state.newKey) {3272 if (Array.isArray(obj)) {3273 obj.splice(field, 1);3274 }3275 else {3276 delete obj[field];3277 }3278 }3279 if (!state.remove) {3280 obj[state.newKey || field] = value;3281 }3282 });3283 }3284}3285exports.editState = editState;3286function reduceStateList(list) {3287 if (!list.length) {3288 return undefined;3289 }3290 return list.reduce((map, item) => {3291 const key = item.type || 'data';3292 const obj = map[key] = map[key] || {};3293 obj[item.key] = item.value;3294 return map;3295 }, {});3296}3297function getCustomInstanceDetails(instance) {3298 const state = getInstanceState(instance);3299 return {3300 _custom: {3301 type: 'component',3302 id: instance.__VUE_DEVTOOLS_UID__,3303 display: util_1.getInstanceName(instance),3304 tooltip: 'Component instance',3305 value: reduceStateList(state),3306 fields: {3307 abstract: true3308 }3309 }3310 };3311}3312exports.getCustomInstanceDetails = getCustomInstanceDetails;3313//# sourceMappingURL=data.js.map3314/***/ }),3315/***/ 4644:3316/***/ ((__unused_webpack_module, exports, __webpack_require__) => {3317"use strict";3318Object.defineProperty(exports, "__esModule", ({ value: true }));3319exports.getInstanceOrVnodeRect = exports.getRootElementsFromComponentInstance = exports.getComponentInstanceFromElement = void 0;3320const shared_utils_1 = __webpack_require__(1942);3321const util_1 = __webpack_require__(1122);3322function getComponentInstanceFromElement(element) {3323 return element.__vueParentComponent;3324}3325exports.getComponentInstanceFromElement = getComponentInstanceFromElement;3326function getRootElementsFromComponentInstance(instance) {3327 if (util_1.isFragment(instance)) {3328 return getFragmentRootElements(instance.subTree);3329 }3330 return [instance.subTree.el];3331}3332exports.getRootElementsFromComponentInstance = getRootElementsFromComponentInstance;3333function getFragmentRootElements(vnode) {3334 if (!vnode.children)3335 return [];3336 const list = [];3337 for (let i = 0, l = vnode.children.length; i < l; i++) {3338 const childVnode = vnode.children[i];3339 if (childVnode.component) {3340 list.push(...getRootElementsFromComponentInstance(childVnode.component));3341 }3342 else if (childVnode.el) {3343 list.push(childVnode.el);3344 }3345 }3346 return list;3347}3348/**3349 * Get the client rect for an instance.3350 *3351 * @param {Vue|Vnode} instance3352 * @return {Object}3353 */3354function getInstanceOrVnodeRect(instance) {3355 const el = instance.subTree.el;3356 if (!shared_utils_1.isBrowser) {3357 // @TODO: Find position from instance or a vnode (for functional components).3358 return;3359 }3360 if (!shared_utils_1.inDoc(el)) {3361 return;3362 }3363 if (util_1.isFragment(instance)) {3364 return getFragmentRect(instance.subTree);3365 }3366 else if (el.nodeType === 1) {3367 return el.getBoundingClientRect();3368 }3369}3370exports.getInstanceOrVnodeRect = getInstanceOrVnodeRect;3371function createRect() {3372 const rect = {3373 top: 0,3374 bottom: 0,3375 left: 0,3376 right: 0,3377 get width() { return rect.right - rect.left; },3378 get height() { return rect.bottom - rect.top; }3379 };3380 return rect;3381}3382function mergeRects(a, b) {3383 if (!a.top || b.top < a.top) {3384 a.top = b.top;3385 }3386 if (!a.bottom || b.bottom > a.bottom) {3387 a.bottom = b.bottom;3388 }3389 if (!a.left || b.left < a.left) {3390 a.left = b.left;3391 }3392 if (!a.right || b.right > a.right) {3393 a.right = b.right;3394 }3395}3396let range;3397/**3398 * Get the bounding rect for a text node using a Range.3399 *3400 * @param {Text} node3401 * @return {Rect}3402 */3403function getTextRect(node) {3404 if (!shared_utils_1.isBrowser)3405 return;3406 if (!range)3407 range = document.createRange();3408 range.selectNode(node);3409 return range.getBoundingClientRect();3410}3411function getFragmentRect(vnode) {3412 const rect = createRect();3413 if (!vnode.children)3414 return rect;3415 for (let i = 0, l = vnode.children.length; i < l; i++) {3416 const childVnode = vnode.children[i];3417 let childRect;3418 if (childVnode.component) {3419 childRect = getInstanceOrVnodeRect(childVnode.component);3420 }3421 else if (childVnode.el) {3422 const el = childVnode.el;3423 if (el.nodeType === 1 || el.getBoundingClientRect) {3424 childRect = el.getBoundingClientRect();3425 }3426 else if (el.nodeType === 3 && el.data.trim()) {3427 childRect = getTextRect(el);3428 }3429 }3430 if (childRect) {3431 mergeRects(rect, childRect);3432 }3433 }3434 return rect;3435}3436//# sourceMappingURL=el.js.map3437/***/ }),3438/***/ 2259:3439/***/ ((__unused_webpack_module, exports, __webpack_require__) => {3440"use strict";3441Object.defineProperty(exports, "__esModule", ({ value: true }));3442exports.ComponentFilter = void 0;3443const shared_utils_1 = __webpack_require__(1942);3444const util_1 = __webpack_require__(1122);3445class ComponentFilter {3446 constructor(filter) {3447 this.filter = filter || '';3448 }3449 /**3450 * Check if an instance is qualified.3451 *3452 * @param {Vue|Vnode} instance3453 * @return {Boolean}3454 */3455 isQualified(instance) {3456 const name = shared_utils_1.classify(instance.name || util_1.getInstanceName(instance)).toLowerCase();3457 return name.indexOf(this.filter) > -1;3458 }3459}3460exports.ComponentFilter = ComponentFilter;3461//# sourceMappingURL=filter.js.map3462/***/ }),3463/***/ 8333:3464/***/ ((__unused_webpack_module, exports, __webpack_require__) => {3465"use strict";3466Object.defineProperty(exports, "__esModule", ({ value: true }));3467exports.ComponentWalker = void 0;3468const util_1 = __webpack_require__(1122);3469const filter_1 = __webpack_require__(2259);3470const el_1 = __webpack_require__(4644);3471class ComponentWalker {3472 constructor(maxDepth, filter, ctx) {3473 this.ctx = ctx;3474 this.maxDepth = maxDepth;3475 this.componentFilter = new filter_1.ComponentFilter(filter);3476 }3477 getComponentTree(instance) {3478 this.captureIds = new Map();3479 return this.findQualifiedChildren(instance, 0);3480 }3481 getComponentParents(instance) {3482 this.captureIds = new Map();3483 const parents = [];3484 this.captureId(instance);3485 let parent = instance;3486 while ((parent = parent.parent)) {3487 this.captureId(parent);3488 parents.push(parent);3489 }3490 return parents;3491 }3492 /**3493 * Find qualified children from a single instance.3494 * If the instance itself is qualified, just return itself.3495 * This is ok because [].concat works in both cases.3496 *3497 * @param {Vue|Vnode} instance3498 * @return {Vue|Array}3499 */3500 async findQualifiedChildren(instance, depth) {3501 var _a;3502 if (this.componentFilter.isQualified(instance) && !((_a = instance.type.devtools) === null || _a === void 0 ? void 0 : _a.hide)) {3503 return [await this.capture(instance, null, depth)];3504 }3505 else if (instance.subTree) {3506 // TODO functional components3507 return this.findQualifiedChildrenFromList(this.getInternalInstanceChildren(instance.subTree), depth);3508 }3509 else {3510 return [];3511 }3512 }3513 /**3514 * Iterate through an array of instances and flatten it into3515 * an array of qualified instances. This is a depth-first3516 * traversal - e.g. if an instance is not matched, we will3517 * recursively go deeper until a qualified child is found.3518 *3519 * @param {Array} instances3520 * @return {Array}3521 */3522 async findQualifiedChildrenFromList(instances, depth) {3523 instances = instances3524 .filter(child => { var _a; return !util_1.isBeingDestroyed(child) && !((_a = child.type.devtools) === null || _a === void 0 ? void 0 : _a.hide); });3525 if (!this.componentFilter.filter) {3526 return Promise.all(instances.map((child, index, list) => this.capture(child, list, depth)));3527 }3528 else {3529 return Array.prototype.concat.apply([], await Promise.all(instances.map(i => this.findQualifiedChildren(i, depth))));3530 }3531 }3532 /**3533 * Get children from a component instance.3534 */3535 getInternalInstanceChildren(subTree) {3536 const list = [];3537 if (subTree.component) {3538 list.push(subTree.component);3539 }3540 if (subTree.suspense) {3541 list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch));3542 }3543 if (Array.isArray(subTree.children)) {3544 subTree.children.forEach(childSubTree => {3545 if (childSubTree.component) {3546 list.push(childSubTree.component);3547 }3548 else {3549 list.push(...this.getInternalInstanceChildren(childSubTree));3550 }3551 });3552 }3553 return list.filter(child => { var _a; return !util_1.isBeingDestroyed(child) && !((_a = child.type.devtools) === null || _a === void 0 ? void 0 : _a.hide); });3554 }3555 captureId(instance) {3556 // instance.uid is not reliable in devtools as there3557 // may be 2 roots with same uid which causes unexpected3558 // behaviour3559 const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : util_1.getUniqueComponentId(instance, this.ctx);3560 instance.__VUE_DEVTOOLS_UID__ = id;3561 // Dedupe3562 if (this.captureIds.has(id)) {3563 return;3564 }3565 else {3566 this.captureIds.set(id, undefined);3567 }3568 this.mark(instance);3569 return id;3570 }3571 /**3572 * Capture the meta information of an instance. (recursive)3573 *3574 * @param {Vue} instance3575 * @return {Object}3576 */3577 async capture(instance, list, depth) {3578 const id = this.captureId(instance);3579 const name = util_1.getInstanceName(instance);3580 const children = this.getInternalInstanceChildren(instance.subTree)3581 .filter(child => !util_1.isBeingDestroyed(child));3582 const treeNode = {3583 uid: instance.uid,3584 id,3585 name,3586 renderKey: util_1.getRenderKey(instance.vnode ? instance.vnode.key : null),3587 inactive: !!instance.isDeactivated,3588 hasChildren: !!children.length,3589 children: [],3590 isFragment: util_1.isFragment(instance),3591 tags: []3592 };3593 // capture children3594 if (depth < this.maxDepth) {...
Using AI Code Generation
1const { getInternalInstanceChildren } = require('playwright/lib/server/dom');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 internalInstance = await page._delegate._mainFrame._context._context._internalObject;8 const children = getInternalInstanceChildren(internalInstance);9 console.log(children);10 await browser.close();11})();12[ { _guid: '0x1',13 _objectId: '{"injectedScriptId":1,"id":1}',14 { description: 'HTMLDocument',15 type: 'object' },16 { description: 'HTMLDocument',17 type: 'object' },18 _internalType: 'document' },19 { _guid: '0x2',20 _objectId: '{"injectedScriptId":1,"id":2}',21 { description: 'HTMLHtmlElement',22 type: 'object' },23 { description: 'HTMLHtmlElement',24 type: 'object' },25 _internalType: 'node' },26 { _guid: '0x3',27 _objectId: '{"injectedScriptId":1,"id":3}',28 { description: 'HTMLHeadElement',29 type: 'object' },30 { description: 'HTMLHeadElement',
Using AI Code Generation
1const { getInternalInstanceChildren } = require('playwright/lib/server/dom');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 internalInstance = await page._mainFrame._page._delegate._document._internalDocument._internalInstance;8 const children = getInternalInstanceChildren(internalInstance);9 console.log(children);10 await browser.close();11})();12[ { _internalNode: { _internalInstance: [Circular] }, _internalParent: null },13 { _internalNode: { _internalInstance: [Circular] }, _internalParent: null } ]
Using AI Code Generation
1const { getInternalInstanceChildren } = require('playwright/lib/client/page');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const internalChildren = await getInternalInstanceChildren(page);7 console.log(internalChildren);8 await browser.close();9})();10[ {11 _initializer: {12 _initializer: {13 _initializer: {14 _initializer: {15 _initializer: {16 _initializer: {17 _initializer: {18 _initializer: {19 _initializer: {20 _initializer: {21 _initializer: {22 _initializer: {23 _initializer: {24 _initializer: {25 _initializer: {26 _initializer: {27 _initializer: {28 _initializer: {29 _initializer: {30 _initializer: {31 _initializer: {32 _initializer: {33 _initializer: {34 _initializer: {35 _initializer: {36 _initializer: {
Using AI Code Generation
1const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');2const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');3const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');4const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');5const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');6const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');7const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');8const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');9const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');10const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');11const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');12const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');13const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');14const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');15const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');16const { getInternalInstanceChildren } = require('playwright/lib/server/dom.js');
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const internal = await page._mainFrame._getInternalInstance();7 const children = await internal.getInternalInstanceChildren();8 console.log(children);9 await browser.close();10})();11 {12 _page: Page {13 _pageBindings: Map(0) {},14 _ownedContexts: Set(0) {},15 _ownedFrames: Set(1) { [Frame] },16 _timeoutSettings: TimeoutSettings { _defaultNavigationTimeout: 30000 },17 _workers: Set(0) {},18 _routes: Map(0) {},19 _viewportSize: { width: 1280, height: 720 },20 _defaultBrowserContext: BrowserContext {21 _ownedPages: Set(1) { [Circular] },22 _timeoutSettings: TimeoutSettings { _defaultNavigationTimeout: 30000 },23 _routes: Map(0) {},
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 const element = await page.$('text=Get Started');6 const internalElement = await element._getInternalInstance();7 const internalChildren = await internalElement._getInternalInstanceChildren();8 console.log(internalChildren);9})();
Using AI Code Generation
1const { getInternalInstanceChildren } = require('playwright/lib/server/dom');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/dom');4const { getInternalInstanceChildren } = require('playwright/lib/server/dom');5const { Page } = require('playwright/lib/server/page');6const { ElementHandle } = require('playwright/lib/server/dom');7const { getInternalInstanceChildren } = require('playwright/lib/server/dom');8const { Page } = require('playwright/lib/server/page');9const { ElementHandle } = require('playwright/lib/server/dom');10const { getInternalInstanceChildren } = require('playwright/lib/server/dom');11const { Page } = require('playwright/lib/server/page');12const { ElementHandle } = require('playwright/lib/server/dom');13const { getInternalInstanceChildren } = require('playwright/lib/server/dom');14const { Page } = require('playwright/lib/server/page');15const { ElementHandle } = require('playwright/lib/server/dom');16const { getInternalInstanceChildren } = require('playwright/lib/server/dom');17const { Page } = require('playwright/lib/server/page');18const { ElementHandle } = require('playwright/lib/server/dom');19const { getInternalInstanceChildren } = require('playwright/lib/server/dom');20const { Page } = require('playwright/lib/server/page');21const { ElementHandle } = require('playwright/lib/server/dom');22const { getInternalInstanceChildren } = require('playwright/lib/server/dom');23const { Page } = require('playwright/lib/server/page');24const { ElementHandle } = require('playwright/lib/server/dom');25const { getInternalInstanceChildren } = require('playwright/lib/server/dom');26const { Page } = require('playwright/lib/server/page');27const { ElementHandle
Using AI Code Generation
1const playwright = require("playwright");2const { InternalInstance } = require("playwright/lib/server/inspector/inspector");3const { chromium } = require("playwright");4(async () => {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const internalInstance = new InternalInstance(page);9 const children = await internalInstance.getInternalInstanceChildren();10 console.log(children);11 await browser.close();12})();13 {14 _creationFrame: {15 },16 {17 }18 }19const playwright = require("playwright");20const { InternalInstance } = require("playwright/lib/server/inspector/inspector");21const { chr
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?
