How to use sameVnode method in Playwright Internal

Best JavaScript code snippet using playwright-internal

snabbdom.js

Source:snabbdom.js Github

copy

Full Screen

...10 return s !== undefined;11 }12 var emptyNode = VNode('', {}, [], undefined, undefined);13 //这个函数主要用于比较oldvnode与vnode同层次节点的比较，如果同层次节点的key和sel都相同，我们就可以保留这个节点， 否则直接替换节点14 function sameVnode(vnode1, vnode2) {15 return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;16 }17 //将oldvnode数组中位置对oldvnode.key的映射转换为oldvnode.key对位置的映射18 //例如:19 /*20 [{key:'a'},{key:'b'},{key:'c'}] ==> {'a':0, 'b':1, 'c':2}21 */22 function createKeyToOldIdx(children, beginIdx, endIdx) {23 var i, map = {},24 key;25 for (i = beginIdx; i <= endIdx; ++i) {26 key = children[i].key;27 if (isDef(key)) map[key] = i;28 }29 return map;30 }31 var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post']; //全局钩子：modules自带的钩子函数32 function init(modules, api) {33 var i, j, cbs = {};34 //获取对于真实dom操作的api35 if (isUndef(api)) api = domApi;36 //注册钩子的回调，在发生状态变更时，触发对应属性变更37 /*38 例如:cbs={39 create:[ClassModule.create,EventlistenerModule.create...],40 update:[ClassModule.update,EventlistenerModule.update...]41 ...42 }43 */44 for (i = 0; i < hooks.length; ++i) {45 cbs[hooks[i]] = [];46 for (j = 0; j < modules.length; ++j) {47 if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);48 }49 }50 /*51 这个函数主要的功能是将一个真实的无子节点的DOM节点转化成vnode形式，52 如<div id='a' class='b c'></div>将转换为{sel:'div#a.b.c',data:{},children:[],text:undefined,elm:<div id='a' class='b c'>}53 */54 function emptyNodeAt(elm) {55 var id = elm.id ? '#' + elm.id : '';56 var c = elm.className ? '.' + elm.className.split(' ').join('.') : '';57 return VNode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm);58 }59 /*60 remove一个vnode时，会触发remove钩子作拦截器，只有在所有remove钩子61 回调函数都触发完才会将节点从父节点删除，而这个函数提供的就是对remove钩子回调操作的计数功能62 */63 function createRmCb(childElm, listeners) {64 return function() {65 if (--listeners === 0) {66 var parent = api.parentNode(childElm);67 api.removeChild(parent, childElm);68 }69 };70 }71 //将vnode创建为真实dom72 function createElm(vnode, insertedVnodeQueue) {73 var i, data = vnode.data;74 if (data !== undefined) {75 if (isDef(i = data.hook) && isDef(i = i.init)) {76 i(vnode);77 data = vnode.data;78 }79 }80 var elm, children = vnode.children,81 sel = vnode.sel;82 if (isDef(sel)) {83 //解析sel参数，例如div#divId.divClass ==>id="divId" class="divClass"84 var hashIdx = sel.indexOf('#');85 //先id后class86 var dotIdx = sel.indexOf('.', hashIdx);87 var hash = hashIdx > 0 ? hashIdx : sel.length;88 var dot = dotIdx > 0 ? dotIdx : sel.length;89 var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;90 //创建一个DOM节点引用，并对其属性实例化91 elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) : api.createElement(tag);92 //获取id名 #a --> a93 if (hash < dot) elm.id = sel.slice(hash + 1, dot);94 //获取类名，并格式化 .a.b --> a b95 if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');96 //如果存在子元素Vnode节点，则递归将子元素节点插入到当前Vnode节点中，并将已插入的子元素节点在insertedVnodeQueue中作记录97 if (is.array(children)) {98 for (i = 0; i < children.length; ++i) {99 api.appendChild(elm, createElm(children[i], insertedVnodeQueue));100 }101 } else if (is.primitive(vnode.text)) { //如果存在子文本节点，则直接将其插入到当前Vnode节点102 api.appendChild(elm, api.createTextNode(vnode.text));103 }104 //当创建完毕后，触发全局create钩子回调105 for (i = 0; i < cbs.create.length; ++i) {106 cbs.create[i](emptyNode, vnode);107 }108 i = vnode.data.hook; // Reuse variable109 if (isDef(i)) { //触发自身的create钩子回调110 if (i.create) i.create(emptyNode, vnode);111 //如果有insert钩子，则推进insertedVnodeQueue中作记录，从而实现批量插入触发insert回调112 if (i.insert) insertedVnodeQueue.push(vnode);113 }114 }115 //如果没声明选择器，则说明这个是一个text节点116 else {117 elm = vnode.elm = api.createTextNode(vnode.text);118 }119 return vnode.elm;120 }121 //将vnode转换后的dom节点插入到dom树的指定位置中去122 function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {123 for (; startIdx <= endIdx; ++startIdx) {124 api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before);125 }126 }127 /*128 这个函数用于手动触发destory钩子回调，主要步骤如下：129 先调用vnode上的destory130 再调用全局下的destory131 递归调用子vnode的destory132 */133 function invokeDestroyHook(vnode) {134 var i, j, data = vnode.data;135 if (isDef(data)) {136 if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode); //调用自身的destroy钩子137 for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode); //调用全局destroy钩子138 if (isDef(i = vnode.children)) {139 for (j = 0; j < vnode.children.length; ++j) {140 invokeDestroyHook(vnode.children[j]);141 }142 }143 }144 }145 /*146 这个函数主要功能是批量删除DOM节点，需要配合invokeDestoryHook和createRmCb147 主要步骤如下：148 调用invokeDestoryHook以触发destory回调149 调用createRmCb来开始对remove回调进行计数150 删除DOM节点151 *152 *153 * @param parentElm 父节点154 * @param vnodes 删除节点数组155 * @param startIdx 删除起始坐标156 * @param endIdx 删除结束坐标157 */158 function removeVnodes(parentElm, vnodes, startIdx, endIdx) {159 for (; startIdx <= endIdx; ++startIdx) {160 var i, listeners, rm, ch = vnodes[startIdx]; //ch代表子节点161 if (isDef(ch)) {162 if (isDef(ch.sel)) {163 //调用destroy钩子164 invokeDestroyHook(ch);165 //对全局remove钩子进行计数166 listeners = cbs.remove.length + 1;167 rm = createRmCb(ch.elm, listeners);168 //调用全局remove回调函数，并每次减少一个remove钩子计数169 for (i = 0; i < cbs.remove.length; ++i) {170 cbs.remove[i](ch, rm);171 }172 //调用内部vnode.data.hook中的remove钩子（只有一个）173 if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {174 i(ch, rm);175 } else {176 //如果没有内部remove钩子，需要调用rm，确保能够remove节点177 rm();178 }179 } else { // Text node180 api.removeChild(parentElm, ch.elm);181 }182 }183 }184 }185 //http://qiutianaimeili.com/html/page/2018/05/4si69yn4stl.html186 //比较new vnode和old vnode的子节点187 function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {188 /*189 (oldStartVnode) (oldEndVnode)190 oStartIdx-> <-oEndIdx191 old [x x x x x] 192 193 (newStartVnode) (newEndVnode)194 nStartIdx-> <-nEndIdx195 new [x x x x x] 196 特殊比较规则：197 1.sameVnode(oldStartVnode, newStartVnode) 198 sameVnode是比较vnode的sel和key值，如果不设置key值，则key值都为undefined，为相等，必须要两者都相同才返回true199 ****************************************200 (oldStartVnode) 201 oStartIdx-> 202 old [x x x x x] 203 204 (newStartVnode) 205 nStartIdx-> 206 new [x x x x x] 207 若相似则不用将整个old vnode删除，比较new vnode和old vnode差异，进行patch；oStartIdx++ nStartIdx++208 ****************************************209 2.sameVnode(oldEndVnode, newEndVnode)210 (oldEndVnode)211 <-oEndIdx212 old [x x x x x] 213 214 (newEndVnode)215 <-nEndIdx216 new [x x x x x] 217 若相似则不用将整个old vnode删除，比较new vnode和old vnode差异，进行patch；oEndIdx++ nEndIdx++218 ****************************************219 3.sameVnode(oldStartVnode, newEndVnode)220 (oldStartVnode) 221 oStartIdx-> 222 old [x x x x x] 223 224 (newEndVnode)225 <-nEndIdx226 new [x x x x x] 227 228 若相似则不用将整个old vnode删除，比较new vnode和old vnode差异，进行patch；oStartIdx++ nEndIdx++229 ****************************************230 4.sameVnode(oldEndVnode, newStartVnode)231 (oldEndVnode)232 <-oEndIdx233 old [x x x x x] 234 235 (newStartVnode) 236 nStartIdx-> 237 new [x x x x x] 238 若相似则不用将整个old vnode删除，比较new vnode和old vnode差异，进行patch；oEndIdx++ nStartIdx++239 */240 var oldStartIdx = 0,241 newStartIdx = 0;242 var oldEndIdx = oldCh.length - 1;243 var oldStartVnode = oldCh[0];244 var oldEndVnode = oldCh[oldEndIdx];245 var newEndIdx = newCh.length - 1;246 var newStartVnode = newCh[0];247 var newEndVnode = newCh[newEndIdx];248 var oldKeyToIdx, idxInOld, elmToMove, before;249 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {250 if (isUndef(oldStartVnode)) {251 oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left252 } else if (isUndef(oldEndVnode)) {253 oldEndVnode = oldCh[--oldEndIdx];254 } else if (sameVnode(oldStartVnode, newStartVnode)) {255 patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);256 oldStartVnode = oldCh[++oldStartIdx];257 newStartVnode = newCh[++newStartIdx];258 } else if (sameVnode(oldEndVnode, newEndVnode)) {259 patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);260 oldEndVnode = oldCh[--oldEndIdx];261 newEndVnode = newCh[--newEndIdx];262 } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right263 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);264 api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));265 oldStartVnode = oldCh[++oldStartIdx];266 newEndVnode = newCh[--newEndIdx];267 } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left268 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);269 api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);270 oldEndVnode = oldCh[--oldEndIdx];271 newStartVnode = newCh[++newStartIdx];272 } else {273 if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);274 idxInOld = oldKeyToIdx[newStartVnode.key]; //遍历oldVnode,查看newVnode是否存在于oldVnode275 if (isUndef(idxInOld)) { // 如果不存在，则为新节点，进行添加276 api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);277 newStartVnode = newCh[++newStartIdx];278 } else {279 //若存在，需要查看sel属性是否一致，如果不一致则新增；若存在，则在旧Vnode上进行patch280 elmToMove = oldCh[idxInOld];281 if (elmToMove.sel !== newStartVnode.sel) {282 api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);283 } else {284 patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);285 oldCh[idxInOld] = undefined;286 api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);287 }288 newStartVnode = newCh[++newStartIdx];289 }290 }291 }292 //遍历结束后，查看新旧Vnode数组的遍历情况，是否遍历完293 if (oldStartIdx > oldEndIdx) { //若旧Vnode数组遍历完,则将剩余的新Vnode数组中的Vnode进行添加294 before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;295 addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);296 } else if (newStartIdx > newEndIdx) { //若新Vnode数组遍历完，则删除剩余的旧Vnode数组中的Vnode297 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);298 }299 }300 function patchVnode(oldVnode, vnode, insertedVnodeQueue) {301 var i, hook;302 //在patch之前，先调用vnode.data的prePatch钩子303 if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {304 i(oldVnode, vnode);305 }306 var elm = vnode.elm = oldVnode.elm,307 oldCh = oldVnode.children,308 ch = vnode.children;309 //如v果oldnode和vnode的引用相同，说明没发生任何变化直接返回，避免性能浪费310 if (oldVnode === vnode) return;311 //如果oldvnode和vnode不同，说明vnode有更新312 //如果vnode和oldvnode不相似则直接用vnode引用的DOM节点去替代oldvnode引用的旧节点313 if (!sameVnode(oldVnode, vnode)) {314 var parentElm = api.parentNode(oldVnode.elm);315 elm = createElm(vnode, insertedVnodeQueue);316 api.insertBefore(parentElm, elm, oldVnode.elm);317 removeVnodes(parentElm, [oldVnode], 0, 0);318 return;319 }320 //如果vnode和oldvnode相似，那么我们要对oldvnode本身进行更新321 if (isDef(vnode.data)) {322 //首先调用全局的update钩子，对vnode.elm本身属性进行更新323 for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);324 //然后调用vnode.data里面的update钩子,再次对vnode.elm更新325 i = vnode.data.hook;326 if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);327 }328 /*329 分情况讨论节点的更新： new代表新Vnode old代表旧Vnode330 ps:如果自身存在文本节点，则不存在子节点 即:有text则不会存在ch331 1 new不为文本节点332 1.1 new不为文本节点,new还存在子节点 333 1.1.1 new不为文本节点,new还存在子节点,old有子节点334 1.1.2 new不为文本节点,new还存在子节点,old没有子节点335 1.1.2.1 new不为文本节点,new还存在子节点,old没有子节点,old为文本节点336 1.2 new不为文本节点,new不存在子节点337 1.2.1 new不为文本节点,new不存在子节点,old存在子节点338 1.2.2 new不为文本节点,new不存在子节点,old为文本节点339 2.new为文本节点340 2.1 new为文本节点,并且old与new的文本节点不相等341 ps：这里只需要讨论这一种情况，因为如果old存在子节点，那么文本节点text为undefined，则与new的text不相等342 直接node.textContent即可清楚old存在的子节点。若old存在子节点，且相等则无需修改343 */344 //1345 if (isUndef(vnode.text)) {346 //1.1.1347 if (isDef(oldCh) && isDef(ch)) {348 //当Vnode和oldvnode的子节点不同时，调用updatechilren函数，diff子节点349 if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);350 }351 //1.1.2352 else if (isDef(ch)) {353 //oldvnode是text节点，则将elm的text清除354 //1.1.2.1355 if (isDef(oldVnode.text)) api.setTextContent(elm, '');356 //并添加vnode的children357 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);358 }359 //如果oldvnode有children，而vnode没children，则移除elm的children360 //1.2.1361 else if (isDef(oldCh)) {362 removeVnodes(elm, oldCh, 0, oldCh.length - 1);363 }364 //1.2.2365 //如果vnode和oldvnode都没chidlren，且vnode没text，则删除oldvnode的text366 else if (isDef(oldVnode.text)) {367 api.setTextContent(elm, '');368 }369 }370 //如果oldvnode的text和vnode的text不同，则更新为vnode的text，371 //2.1372 else if (oldVnode.text !== vnode.text) {373 api.setTextContent(elm, vnode.text);374 }375 //patch完，触发postpatch钩子376 if (isDef(hook) && isDef(i = hook.postpatch)) {377 i(oldVnode, vnode);378 }379 }380 return function(oldVnode, vnode) {381 var i, elm, parent;382 //记录被插入的vnode队列，用于批量触发insert383 var insertedVnodeQueue = [];384 //调用全局pre钩子385 for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();386 //如果oldvnode是dom节点，转化为oldvnode，在初始化渲染的时候的处理387 if (isUndef(oldVnode.sel)) {388 oldVnode = emptyNodeAt(oldVnode);389 }390 //如果oldvnode与vnode相似，进行更新；比较其key值与sel值391 if (sameVnode(oldVnode, vnode)) {392 patchVnode(oldVnode, vnode, insertedVnodeQueue);393 } else {394 //否则，将vnode插入，并将oldvnode从其父节点上直接删除395 elm = oldVnode.elm;396 parent = api.parentNode(elm);397 createElm(vnode, insertedVnodeQueue);398 if (parent !== null) {399 api.insertBefore(parent, vnode.elm, api.nextSibling(elm));400 removeVnodes(parent, [oldVnode], 0, 0);401 }402 }403 //插入完后，调用被插入的vnode的insert钩子404 for (i = 0; i < insertedVnodeQueue.length; ++i) {405 insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1// 比较属性更新、文本更新、触发子节点更新2function patchVnode() {}3// 比较节点是否是同一个4function sameVnode() {}5// 是否是undefined or null6function isUndef() {}7// 是否是非undefined or null8function isDef() {}9// 在end和start之间批量插入新节点10function addVNodes() {}11// 批量删除节点12function removeVnodes() {}13// 新增并插入单个节点14function createElm() {}15// 跨平台、封装简化API16const nodeOps = {17 // 节点的移动并插入操作18 insertBefore() {}19};20// 如何测试呢？我会把这个方法置换源代码的updateChildren方法，一些工具函数如createKeyToOldIdx，我会把它声明在函数的的作用域内，既保证函数执行的逻辑，又不影响其他人引用21// 暂不考虑transition22// 以老节点为基准23// eslint-disable-next-line no-unused-vars24function updateChildren(parentElm, oldList, newList) {25 function log(list) {26 console.log(list.map(({ key }) => key));27 }28 log(oldList);29 log(newList);30 // 先假设节点数组都有key且key不重复31 // 生成key的下标32 // { key1: 1, key2: 3, key3: 4}33 function createKeyToOldIdx(oldList, oldStart, oldEnd) {34 const map = {};35 for (let i = oldStart; i <= oldEnd; i++) {36 const { key } = oldList[i];37 if (isDef(key)) map[key] = i;38 }39 return map;40 }41 // 处理节点没有key的情况 没有key直接遍历比较 返回下标 此时时间复杂度变为O(n^2)42 function findIdxInOld(vnode, list, beginIdx, endIdx) {43 for (let i = beginIdx; i < endIdx; i++) {44 const c = list[i];45 if (isDef(c) && sameVnode(vnode, c)) return i;46 }47 }48 const lastIndex = arr => arr.length - 1;49 let [oldStartIdx, oldEndIdx] = [0, lastIndex(oldList)];50 let [newStartIdx, newEndIdx] = [0, lastIndex(newList)];51 // 两两交叉比较52 let [newStartVnode, newEndVnode] = [newList[newStartIdx], newList[newEndIdx]];53 let [oldStartVnode, oldEndVnode] = [oldList[oldStartIdx], oldList[oldEndIdx]];54 // 生成老节点 key和下标的映射55 let oldKeyToIdx;56 // 循环至其中一个数组遍历完成57 while (newStartIdx <= newEndIdx && oldStartIdx <= oldEndIdx) {58 // 处理一些异常 老首或老末不存在 则继续循环59 if (isUndef(oldStartVnode)) {60 oldStartVnode = oldList[++oldStartIdx];61 } else if (isUndef(oldEndVnode)) {62 oldEndVnode = oldList[--oldEndIdx];63 // 老首 == 新首 不用移动直接更新64 } else if (sameVnode(oldStartVnode, newStartVnode)) {65 patchVnode(oldStartVnode, newStartVnode);66 newStartVnode = newList[++newStartIdx];67 oldStartVnode = oldList[++oldStartIdx];68 // 老末 == 新末 不用移动直接更新69 } else if (sameVnode(oldEndVnode, newEndVnode)) {70 patchVnode(oldEndVnode, newEndVnode);71 newEndVnode = newList[--newEndIdx];72 oldEndVnode = oldList[--oldEndIdx];73 // 老首 == 新末74 } else if (sameVnode(oldStartVnode, newEndVnode)) {75 // 先执行节点属性更新76 patchVnode(oldStartVnode, newEndVnode);77 // 注意：insertBefore、appendChild都是节点移动操作78 // 把老首移动到oldEndIdx位置;79 // insert之后没有改变下标80 // 没有操作vdom81 // 这里对节点插入操作做了一些封装，1. 同构，要保证两端运行。 2. 简化API，末尾插入使用的其实是appendChild82 nodeOps.insertBefore(83 parentElm,84 oldStartVnode.elm,85 nodeOps.nextSibling(oldEndVnode.elm)86 );87 // 这里要移动下标88 oldStartVnode = oldList[++oldStartIdx];89 newEndVnode = newList[--newEndIdx];90 // 老末 == 新首91 } else if (sameVnode(oldEndVnode, newStartVnode)) {92 patchVnode(oldEndVnode, newStartVnode);93 // 把老末移动到oldStartIndex94 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);95 oldEndVnode = oldList[--oldEndIdx];96 newStartVnode = newList[++newStartIdx];97 // 以上所有情况其实都是对常规场景的优化，就是比如节点增删，时间复杂度都是O(n)98 // 对于节点交换位置，可能会触发以下算法，就是常规的队列比较移动算法，如果有key时间复杂度也是O(n)，但能做到差异最小化99 // 54231 => 14532 到53 => 42会进入100 // 利用了队列的唯一key101 } else {102 // 映射只生成一次103 if (isUndef(oldKeyToIdx))104 oldKeyToIdx = createKeyToOldIdx(oldList, oldStartIdx, oldEndIdx);105 // 这里假设子节点都有唯一key106 const idxInOld = isDef(newStartVnode.key)107 ? oldKeyToIdx[newStartVnode.key]108 : findIdxInOld(newStartVnode, oldList, oldStartIdx, oldEndIdx);109 if (isUndef(idxInOld)) {110 // 如果新首在老节点中不存在 进行新增并插入操作111 // 插入并新增节点112 createElm(newStartVnode, [], parentElm, oldStartVnode.elm);113 } else {114 // 否则就是更新操作115 // 找到需要更新的节点116 const vnodeToMove = oldList[idxInOld];117 // 保险起见这里还需要比较一次，防止出现key相同，但节点类型不同情况118 if (sameVnode(vnodeToMove, newStartVnode)) {119 // 老规矩先执行属性更新120 patchVnode(vnodeToMove, newStartVnode);121 // 这一步很关键 因为节点已经被移动了 置空可以在下次循环时过滤掉 在上面122 oldList[idxInOld] = undefined;123 // 再次强调：insertBefore是移动操作124 nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm);125 } else {126 // 如果节点key相同 但类型不同 那么相当于插入了新节点127 // 插入并新增节点128 createElm(newStartVnode, [], parentElm, oldStartVnode.elm);129 }130 }131 // while(i) {++i} 循环结束时i+=1132 newStartVnode = newList[++newStartIdx];133 }134 }135 // 循环结束时可能出现三种情况: 1. 老节点未遍历完 2. 新节点未遍历完. 3. 全部节点都遍历完成136 // 为什么不用oldEndIdx > oldStartIdx ? 来判断老节点未遍历完 我觉得都行137 if (oldStartIdx > oldEndIdx) {138 // 老节点遍历完成 新节点可能还未遍历完成 未完成的直接批量插入到oldStartIdx和oldEndIdx交错的位置139 // 最典型的场景就是中间连续节点新增的情况140 const refElm = isUndef(newList[newEndIdx + 1])141 ? null142 : newList[newEndIdx + 1].elm;143 // 这个函数细细一想里面应该涉及到一个VDom的操作 与differ本身无关 所以就直接复用了144 addVnodes(parentElm, refElm, newList, newStartIdx, newEndIdx, []);145 } else if (newStartIdx > newEndIdx) {146 // 如果新节点先遍历完 则把多的老节点全部删除掉147 // 最典型的就是批量节点删除情况148 // 还有一种全部都走else的情况149 removeVnodes(parentElm, oldList, oldStartIdx, oldEndIdx);150 }151}152if (sameVnode(oldStartVnode, newStartVnode)) {153 patchVnode(oldStartVnode, newStartVnode);154 newStartVnode = newList[++newStartIdx];155 oldStartVnode = oldList[++oldStartIdx];156 // 老末 == 新末 不用移动直接更新157} else if (sameVnode(oldEndVnode, newEndVnode)) {158 patchVnode(oldEndVnode, newEndVnode);159 newEndVnode = newList[--newEndIdx];160 oldEndVnode = oldList[--oldEndIdx];161 // 老首 == 新末162} else if (sameVnode(oldStartVnode, newEndVnode)) {163 // 先执行节点属性更新164 patchVnode(oldStartVnode, newEndVnode);165 nodeOps.insertBefore(166 parentElm,167 oldStartVnode.elm,168 nodeOps.nextSibling(oldEndVnode.elm)169 );170 // 这里要移动下标171 oldStartVnode = oldList[++oldStartIdx];172 newEndVnode = newList[--newEndIdx];173 // 老末 == 新首174} else if (sameVnode(oldEndVnode, newStartVnode)) {175 patchVnode(oldEndVnode, newStartVnode);176 // 把老末移动到oldStartIndex177 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);178 oldEndVnode = oldList[--oldEndIdx];179 newStartVnode = newList[++newStartIdx];...

Full Screen

Full Screen

diff_patch.js

Source:diff_patch.js Github

copy

Full Screen

...41 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);42 } else if (!vnode) {43 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);44 } else {45 if (sameVnode(oldVNode, vnode)) {46 patchVnode(oldVNode, vnode);47 } else {48 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);49 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);50 }51 }52 }53}54{ 55 /**56 * 在当新老 VNode 节点都是 isStatic（静态的），并且 key 相同时，只要将 componentInstance 与 elm 从老 VNode 节点“拿过来”即可。57 * 58 * 这里的 isStatic 也就是前面提到过的「编译」的时候会将静态节点标记出来，这样就可以跳过比对的过程。59 */60 function patchVnode (oldVnode, vnode) {61 if (oldVnode === vnode) {62 return;63 }64 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {65 vnode.elm = oldVnode.elm;66 vnode.componentInstance = oldVnode.componentInstance;67 return;68 }69 const elm = vnode.elm = oldVnode.elm;70 const oldCh = oldVnode.children;71 const ch = vnode.children;72 if (vnode.text) {73 nodeOps.setTextContent(elm, vnode.text);74 } else {75 if (oldCh && ch && (oldCh !== ch)) {76 updateChildren(elm, oldCh, ch);77 } else if (ch) {78 if (oldVnode.text) nodeOps.setTextContent(elm, '');79 addVnodes(elm, null, ch, 0, ch.length - 1);80 } else if (oldCh) {81 removeVnodes(elm, oldCh, 0, oldCh.length - 1)82 } else if (oldVnode.text) {83 nodeOps.setTextContent(elm, '')84 }85 }86 }87}88{89 function updateChildren (parentElm, oldCh, newCh) {90 let oldStartIdx = 0;91 let newStartIdx = 0;92 let oldEndIdx = oldCh.length - 1;93 let oldStartVnode = oldCh[0];94 let oldEndVnode = oldCh[oldEndIdx];95 let newEndIdx = newCh.length - 1;96 let newStartVnode = newCh[0];97 let newEndVnode = newCh[newEndIdx];98 let oldKeyToIdx, idxInOld, elmToMove, refElm;99 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {100 if (!oldStartVnode) {101 oldStartVnode = oldCh[++oldStartIdx];102 } else if (!oldEndVnode) {103 oldEndVnode = oldCh[--oldEndIdx];104 } else if (sameVnode(oldStartVnode, newStartVnode)) {105 patchVnode(oldStartVnode, newStartVnode);106 oldStartVnode = oldCh[++oldStartIdx];107 newStartVnode = newCh[++newStartIdx];108 } else if (sameVnode(oldEndVnode, newEndVnode)) {109 patchVnode(oldEndVnode, newEndVnode);110 oldEndVnode = oldCh[--oldEndIdx];111 newEndVnode = newCh[--newEndIdx];112 } else if (sameVnode(oldStartVnode, newEndVnode)) {113 patchVnode(oldStartVnode, newEndVnode);114 nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm));115 oldStartVnode = oldCh[++oldStartIdx];116 newEndVnode = newCh[--newEndIdx];117 } else if (sameVnode(oldEndVnode, newStartVnode)) {118 patchVnode(oldEndVnode, newStartVnode);119 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);120 oldEndVnode = oldCh[--oldEndIdx];121 newStartVnode = newCh[++newStartIdx];122 } else {123 let elmToMove = oldCh[idxInOld];124 if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);125 idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;126 if (!idxInOld) {127 createElm(newStartVnode, parentElm);128 newStartVnode = newCh[++newStartIdx];129 } else {130 elmToMove = oldCh[idxInOld];131 if (sameVnode(elmToMove, newStartVnode)) {132 patchVnode(elmToMove, newStartVnode);133 oldCh[idxInOld] = undefined;134 nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);135 newStartVnode = newCh[++newStartIdx];136 } else {137 createElm(newStartVnode, parentElm);138 newStartVnode = newCh[++newStartIdx];139 }140 }141 }142 }143 if (oldStartIdx > oldEndIdx) {144 refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null;145 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);...

Full Screen

Full Screen

vdom.js

Source:vdom.js Github

copy

Full Screen

...86 if (!oldStartVnode) {87 oldStartVnode = [++oldStartIdx]88 } else if (!oldEndVnode) {89 oldEndVnode = [--oldEndIdx]90 } else if (sameVnode(oldStartVnode, newStartVnode)) {91 patchVnode(oldStartVnode, newStartVnode)92 oldStartVnode = oldCh[++oldStartIdx]93 newStartVnode = newCh[++newStartIdx]94 } else if (sameVnode(oldEndVnode, newEndVnode)) {95 patchVnode(oldEndVnode, newEndVnode)96 oldEndVnode = oldCh[--oldEndIdx]97 newEndVnode = newCh[--newEndIdx]98 } else if (sameVnode(oldStartVnode, newEndVnode)) {99 // 老头 新尾100 patchVnode(oldStartVnode, newEndVnode)101 nodeOps.insertBefore(102 parentElm,103 oldStartVnode.elm,104 nodeOps.nextSibling(oldEndVnode.elm)105 )106 oldStartVnode = oldCh[++oldStartIdx]107 newEndVnode = newCh[--newEndIdx]108 } else if (sameVnode(oldEndVnode, newStartVnode)) {109 patchVnode(oldEndVnode, newStartVnode)110 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)111 oldEndVnode = oldCh[--oldEndIdx]112 newStartVnode = newCh[++newStartIdx]113 } else {114 // 如果以上都没匹配到，就根据新的key 从老的节点里 把它找出来，然后挪到 oldStartIdx 的位置，并清空115 let idxInOld116 for (let i = oldStartIdx; i <= oldEndIdx; ++i) {117 if (oldCh[i] && newStartVnode.key == oldCh[i].key) {118 idxInOld = i119 break120 }121 }122 if (!idxInOld) {123 createElm(newStartVnode, parentElm, oldStartVnode.elm)124 } else {125 let vnodeToMove = oldCh[idxInOld]126 if (sameVnode(vnodeToMove, newStartVnode)) {127 patchVnode(vnodeToMove, newStartVnode)128 oldCh[idxInOld] = undefined129 nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)130 } else {131 createElm(newStartVnode, parentElm, oldStartVnode.elm)132 }133 }134 newStartVnode = newCh[++newStartIdx]135 }136 }137 if (oldStartIdx > oldEndIdx) {138 refElm = !newCh[newEndIdx + 1] ? null : newCh[newEndIdx + 1].elm139 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx)140 } else if (newStartIdx > newEndIdx) {141 removeVnodes(oldCh, oldStartIdx, oldEndIdx)142 }143}144function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx) {145 for (; startIdx <= endIdx; ++startIdx) {146 createElm(vnodes[startIdx], parentElm, refElm)147 }148}149function removeVnodes(vnodes, startIdx, endIdx) {150 for (; startIdx <= endIdx; ++startIdx) {151 const ch = vnodes[startIdx]152 if (ch) {153 removeNode(ch.elm)154 }155 }156}157function removeNode(el) {158 const parent = nodeOps.parentNode(el)159 if (parent) {160 nodeOps.removeChild(parent, el)161 }162}163function sameVnode(a, b) {164 return a.key === b.key && a.tag === b.tag...

Full Screen

Full Screen

patch.js

Source:patch.js Github

copy

Full Screen

...81 if (isUndef(oldStartVnode)) {82 oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left83 } else if (isUndef(oldEndVnode)) {84 oldEndVnode = oldCh[--oldEndIdx]85 } else if (sameVnode(oldStartVnode, newStartVnode)) {86 patchVnode(oldStartVnode, newStartVnode)87 oldStartVnode = oldCh[++oldStartIdx]88 newStartVnode = newCh[++newStartIdx]89 } else if (sameVnode(oldEndVnode, newEndVnode)) {90 patchVnode(oldEndVnode, newEndVnode)91 oldEndVnode = oldCh[--oldEndIdx]92 newEndVnode = newCh[--newEndIdx]93 } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right94 patchVnode(oldStartVnode, newEndVnode)95 const oldEndNext = nodeOps.nextSibling(oldEndVnode.elm)96 nodeOps.insertBefore(parentElm, oldStartVnode.elm, oldEndNext)97 oldStartVnode = oldCh[++oldStartIdx]98 newEndVnode = newCh[--newEndIdx]99 } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left100 patchVnode(oldEndVnode, newStartVnode)101 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)102 oldEndVnode = oldCh[--oldEndIdx]103 newStartVnode = newCh[++newStartIdx]104 } else {105 // create oldKeyToIdx106 if (isUndef(oldKeyToIdx)) { oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) }107 108 const idxInOld = oldKeyToIdx[newStartVnode.key]109 if (isDef(idxInOld) && sameVnode(newStartVnode, oldCh[idxInOld])) {110 const vnodeToMove = oldCh[idxInOld]111 patchVnode(vnodeToMove, newStartVnode)112 oldCh[idxInOld] = undefined113 nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)114 newStartVnode = newCh[++newStartIdx]115 } else { // New element116 const elm = createElm(newStartVnode)117 nodeOps.insertBefore(parentElm, elm, oldStartVnode.elm)118 newStartVnode = newCh[++newStartIdx]119 }120 }121 }122 123 if (oldStartIdx > oldEndIdx) {124 const before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm125 addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)126 } else if (newStartIdx > newEndIdx) {127 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)128 }129}130/**131 * patchVnode 假设了 sameVnode(oldVnode, vnode) === true132 * 事实上也是如此133 */134function patchVnode (oldVnode, vnode) {135 if (oldVnode === vnode) { return }136 137 const elm = vnode.elm = oldVnode.elm138 139 if (isUndef(vnode.text)) {140 const oldCh = oldVnode.children141 const ch = vnode.children142 updateChildren(elm, oldCh, ch)143 } else if (oldVnode.text !== vnode.text) {144 nodeOps.setTextContent(elm, vnode.text)145 }146}147export default function patch (oldVnode, vnode) {148 149 if (isUndef(oldVnode) && isUndef(vnode)) { return }150 if (isUndef(oldVnode)) { createElm(vnode); return }151 const oldElm = oldVnode.elm152 const parent = nodeOps.parentNode(oldElm)153 if (isUndef(vnode)) { removeVnodes(parent, [oldVnode], 0, 0); return }154 if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode); return }155 else {156 const newElm = createElm(vnode)157 nodeOps.insertBefore(parent, newElm, nodeOps.nextSibling(oldElm))158 removeVnodes(parent, [oldVnode], 0, 0)159 return160 }...

Full Screen

Full Screen

patchVNode.js

Source:patchVNode.js Github

copy

Full Screen

1import createElement from './createElement.js'2import sameVNode from './sameVNode.js'3import createKeyToOldIdx from './createKeyToOldIdx.js'4export default function patchVNode(oldVNode,newVNode){5 newVNode.elm = oldVNode.elm6 if(newVNode===oldVNode){7 return8 }else if(newVNode.text&&(newVNode.children===undefined||newVNode.children.length===0)){9 if(newVNode.text!==oldVNode.text)10 oldVNode.elm.innerText = newVNode.text11 }else if(oldVNode.children===undefined||oldVNode.children.length===0){12 oldVNode.elm.innerText = ''13 for(let d of newVNode.children){14 const node = createElement(d)15 oldVNode.elm.appendChild(node)16 }17 }else{18 newVNode.elm = oldVNode.elm19 let startIndex = 020 let endIndex = oldVNode.children.length-121 let newStartIndex = 022 let newEndIndex = newVNode.children.length-123 let oldKeyToIdx , idxInOld24 while(startIndex<=endIndex&&newStartIndex<=newEndIndex){25 if(oldVNode.children[startIndex]===undefined){26 startIndex++27 }else if(oldVNode.children[endIndex]===undefined){28 endIndex--29 }else if(sameVNode(oldVNode.children[startIndex],newVNode.children[newStartIndex])){30 patchVNode(oldVNode.children[startIndex],newVNode.children[newStartIndex])31 startIndex++32 newStartIndex++33 }else if(sameVNode(oldVNode.children[endIndex],newVNode.children[newEndIndex])){34 patchVNode(oldVNode.children[endIndex],newVNode.children[newEndIndex])35 endIndex --36 newEndIndex -- 37 }else if(sameVNode(oldVNode.children[startIndex],newVNode.children[newEndIndex])){38 patchVnode(oldVNode.children[startIndex], newVNode.children[newEndIndex])39 oldVNode.elm.insertBefore(oldVNode.children[startIndex], oldVNode.children[endIndex].nextSibling)40 startIndex++41 newEndIndex--42 }else if(sameVNode(oldVNode.children[endIndex],newVNode.children[newStartIndex])){43 patchVnode(oldVNode.children[endIndex], newVNode.children[newStartIndex])44 oldVNode.elm.insertBefore(oldVNode.children[endIndex], oldVNode.children[startIndex])45 newStartIndex++46 endIndex-- 47 }else{48 if(!oldKeyToIdx){49 oldKeyToIdx = createKeyToOldIdx(oldVNode.children,startIndex,endIndex)50 }51 idxInOld =newVNode.children[newStartIndex].key ? oldKeyToIdx[newVNode.children[newStartIndex].key]52 : findIdxInOld(newVNode.children[newStartIndex], oldCh, startIndex, endIndex)53 if (!idxInOld) { 54 const node = createElement(newVNode.children[newStartIndex])55 oldVNode.elm.insertBefore(node, oldVNode.children[startIndex].elm)56 } else {57 let vnodeToMove = oldVNode.children[idxInOld]58 if (sameVNode(oldVNode.children[idxInOld], newVNode.children[newStartIndex])) {59 patchVNode(oldVNode.children[idxInOld], newVNode.children[newStartIndex])60 oldCh[idxInOld] = undefined61 oldVNode.elm.insertBefore(oldVNode.children[i].elm, oldVNode.children[startIndex].elm)62 } else {63 const node = createElement(newVNode.children[newStartIndex])64 oldVNode.elm.insertBefore(node, oldVNode.children[startIndex].elm)65 }66 }67 newStartIndex++68 }69 }70 if(startIndex>endIndex){71 for(;newStartIndex<=newEndIndex;newStartIndex++){72 const node = createElement(newVNode.children[newStartIndex])73 oldVNode.elm.appendChild(node)74 }75 }else if(newStartIndex>newEndIndex){76 for(;startIndex<=endIndex;startIndex++){77 if(oldVNode.children[startIndex])78 oldVNode.elm.removeChild(oldVNode.children[startIndex].elm)79 }80 }81 }...

Full Screen

Full Screen

patchChildren.js

Source:patchChildren.js Github

copy

Full Screen

...30 if (ch1[oldStartIndex] == undefined) {31 oldStartIndex++;32 } else if (ch1[oldEndIndex] == undefined) {33 oldEndIndex--;34 } else if (sameVnode(ch2[newStartIndex], ch1[oldStartIndex])) {35 patchVnode(ch2[newStartIndex], ch1[oldStartIndex]);36 newStartIndex++;37 oldStartIndex++;38 } else if (sameVnode(ch2[newEndIndex], ch1[oldEndIndex])) {39 patchVnode(ch2[newEndIndex], ch1[oldEndIndex]);40 newEndIndex--;41 oldEndIndex--;42 } else if (sameVnode(ch2[newEndIndex], ch1[oldStartIndex])) {43 patchVnode(ch2[newEndIndex], ch1[oldStartIndex]);44 insertAfter(parent, ch1[oldStartIndex].elm, ch1[oldEndIndex].elm);45 newEndIndex--;46 oldStartIndex++;47 } else if (sameVnode(ch2[newStartIndex], ch1[oldEndIndex])) {48 patchVnode(ch2[newStartIndex], ch1[oldEndIndex]);49 insertBefore(parent, ch1[oldEndIndex].elm, ch1[oldStartIndex].elm);50 newStartIndex++;51 oldEndIndex--;52 } else {53 let flag = true;54 for (let i = oldStartIndex; i <= oldEndIndex; i++) {55 if (sameVnode(ch2[newStartIndex], ch1[i])) {56 patchVnode(ch2[newStartIndex], ch1[i]);57 insertBefore(parent, ch1[i].elm, ch1[oldStartIndex].elm);58 ch1[i] = undefined;59 flag = false;60 break;61 }62 }63 if (flag) {64 let dom = createElement(ch2[newStartIndex]);65 insertBefore(parent, dom, ch1[oldStartIndex].elm);66 }67 newStartIndex++;68 }69 }...

Full Screen

Full Screen

updateChildren.js

Source:updateChildren.js Github

copy

Full Screen

...13 // 循环终止条件14 while(oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {15 16 // 旧前 和 新前比较 是否相同17 if(sameVnode(oldStartVnode, newStartVnode)) {18 19 oldStartVnode = oldCh[++oldStartIdx];20 newStartVnode = newCh[++newStartIdx];21 } else if(sameVnode(oldEndVnode, newEndVnode)) {22 oldEndVnode = oldCh[--oldEndIdx]23 newEndVnode = newCh[--newEndIdx]24 } else if (sameVnode(oldStartVnode, newEndVnode)) {25 oldStartVnode = oldCh[++oldStartIdx]26 newEndVnode = newCh[--newEndIdx]27 } else if (sameVnode(oldEndVnode, newStartVnode)) {28 oldEndVnode = oldCh[--oldEndIdx]29 newStartVnode = newCh[++newStartIdx]30 } else {31 // 没有找到 利用循环来查找32 }33 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/server/dom.js');2const { sameVnode } = require('playwright/lib/server/dom.js');3const { sameVnode } = require('playwright/lib/server/dom.js');4const { sameVnode } = require('playwright/lib/server/dom.js');5const { sameVnode } = require('playwright/lib/server/dom.js');6const { sameVnode } = require('playwright/lib/server/dom.js');7const { sameVnode } = require('playwright/lib/server/dom.js');8const { sameVnode } = require('playwright/lib/server/dom.js');9const { sameVnode } = require('playwright/lib/server/dom.js');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/server/dom.js');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 const a = await page.$('a');5 const b = await page.$('a');6});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/server/dom.js');2const { parse } = require('playwright/lib/utils/selectorParser.js');3const { ElementHandle } = require('playwright/lib/server/dom.js');4const selector = parse('.foo');5const node = new ElementHandle(page, 'node');6const sameVnodeResult = sameVnode(selector, node);7console.log(sameVnodeResult);8const { sameVnode } = require('playwright/lib/server/dom.js');9const { parse } = require('playwright/lib/utils/selectorParser.js');10const { ElementHandle } = require('playwright/lib/server/dom.js');11const selector = parse('div');12const node = new ElementHandle(page, 'node');13const sameVnodeResult = sameVnode(selector, node);14console.log(sameVnodeResult);15const { sameVnode } = require('playwright/lib/server/dom.js');16const { parse } = require('playwright/lib/utils/selectorParser.js');17const { ElementHandle } = require('playwright/lib/server/dom.js');18const selector = parse('div');19const node = new ElementHandle(page, 'node');20const sameVnodeResult = sameVnode(selector, node);21console.log(sameVnodeResult);22const { sameVnode } = require('playwright/lib/server/dom.js');23const { parse } = require('playwright/lib/utils/selectorParser.js');24const { ElementHandle } = require('playwright/lib/server/dom.js');25const selector = parse('div');26const node = new ElementHandle(page, 'node');27const sameVnodeResult = sameVnode(selector, node);28console.log(sameVnodeResult);29const { sameVnode } = require('playwright/lib/server/dom.js');30const { parse } = require('playwright/lib/utils/selectorParser.js');31const { ElementHandle } = require('playwright/lib/server/dom.js');32const selector = parse('div');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isSameVnode } = require('playwright/lib/server/sameVnode');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/frames');4const { ElementHandleChannel } = require('playwright/lib/channels');5const { isSameVnode } = require('playwright/lib/server/sameVnode');6const { Page } = require('playwright/lib/server/page');7const { ElementHandle } = require('playwright/lib/server/frames');8const { ElementHandleChannel } = require('playwright/lib/channels');9const { isSameVnode } = require('playwright/lib/server/sameVnode');10const { Page } = require('playwright/lib/server/page');11const { ElementHandle } = require('playwright/lib/server/frames');12const { ElementHandleChannel } = require('playwright/lib/channels');13const { isSameVnode } = require('playwright/lib/server/sameVnode');14const { Page } = require('playwright/lib/server/page');15const { ElementHandle } = require('playwright/lib/server/frames');16const { ElementHandleChannel } = require('playwright/lib/channels');17const { isSameVnode } = require('playwright/lib/server/sameVnode');18const { Page } = require('playwright/lib/server/page');19const { ElementHandle } = require('playwright/lib/server/frames');20const { ElementHandleChannel } = require('playwright/lib/channels');21const { isSameVnode } = require('playwright/lib/server/sameVnode');22const { Page } = require('playwright/lib/server/page');23const { ElementHandle } = require('playwright/lib/server/frames');24const { ElementHandleChannel } = require('playwright/lib/channels');25const { isSameVnode } = require('playwright/lib/server/sameVnode');26const { Page } = require('playwright/lib/server/page');27const { ElementHandle } = require('play

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/server/dom.js');2const { parse } = require('playwright/lib/server/common/parser.js');3const { sameVnode } = require('playwright/lib/server/dom.js');4const { parse } = require('playwright/lib/server/common/parser.js');5const doc1 = parse(`6`);7const doc2 = parse(`8`);9const doc3 = parse(`10`);11const doc4 = parse(`12`);13const doc5 = parse(`14`);15const doc6 = parse(`16`);17const doc7 = parse(`18`);19const doc8 = parse(`20`);21const doc9 = parse(`

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/server/dom.js');2const { assert } = require('chai');3const node1 = { nodeName: 'DIV', attributes: { id: 'id1' } };4const node2 = { nodeName: 'DIV', attributes: { id: 'id2' } };5const node3 = { nodeName: 'DIV', attributes: { id: 'id1' } };6assert.equal(sameVnode(node1, node2), false);7assert.equal(sameVnode(node1, node3), true);8[MIT](LICENSE)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { sameVnode } = require('playwright/lib/utils/utils');2const { ElementHandle } = require('playwright/lib/cjs/pw_api/types');3const elementHandle = new ElementHandle();4const elementHandle2 = new ElementHandle();5const res = sameVnode(elementHandle, elementHandle2);6const { sameVnode } = require('playwright/lib/utils/utils');7const { ElementHandle } = require('playwright/lib/cjs/pw_api/types');8const elementHandle = new ElementHandle();9const elementHandle2 = new ElementHandle();10const res = sameVnode(elementHandle, elementHandle2);11[MIT](

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful