How to use addVnodes method in Playwright Internal

Best JavaScript code snippet using playwright-internal

2.diff.js

Source:2.diff.js Github

copy

Full Screen

...39 insert(parentElm, nodeOps.createTextNode(vnode.text), refElm);40 }41}42/​/​ addVnodes 用来批量调用 createElm 新建节点。43function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx) {44 for (; startIdx <= endIdx; ++startIdx) {45 createElm(vnodes[startIdx], parentElm, refElm);46 }47}48/​/​ removeNode 用来移除一个节点。49function removeNode(el) {50 const parent = nodeOps.parentNode(el);51 if (parent) {52 nodeOps.removeChild(parent, el);53 }54}55/​/​ removeVnodes 会批量调用 removeNode 移除节点。56function removeVnodes(parentElm, vnodes, startIdx, endIdx) {57 for (; startIdx <= endIdx; ++startIdx) {58 const ch = vnodes[startIdx];59 if (ch) {60 removeNode(ch.elm);61 }62 }63}64/​/​ diff 算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式65/​/​ 所以时间复杂度只有 O(n)，是一种相当高效的算法66function patch(oldVnode, vnode, parentElm) {67 if (!oldVnode) {68 /​/​ 没有老节点，插入新节点69 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);70 } else if (!vnode) {71 /​/​ 没有新节点，删除老节点72 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);73 } else {74 /​/​ 如果是同一个节点，patchVnode75 if (sameVnode(oldVNode, vnode)) {76 patchVnode(oldVNode, vnode);77 } else {78 /​/​ 不是一个节点，删除老节点，新增新节点79 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);80 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);81 }82 }83}84/​/​ 什么情况下两个 VNode 会属于 sameVnode （相同的节点）呢？85function sameVnode() {86 return (87 a.key === b.key &&88 a.tag === b.tag &&89 a.isComment === b.isComment &&90 !!a.data === !!b.data &&91 sameInputType(a, b)92 );93}94function sameInputType(a, b) {95 if (a.tag !== "input") return true;96 let i;97 const typeA = (i = a.data) && (i = i.attrs) && i.type;98 const typeB = (i = b.data) && (i = i.attrs) && i.type;99 return typeA === typeB;100}101/​**102 * 核心方法103 * @param {*} oldVnode104 * @param {*} vnode105 * @returns106 */​107function patchVnode(oldVnode, vnode) {108 /​/​ 新老 VNode 节点相同的情况下，就不需要做任何改变了，直接 return 掉109 if (oldVnode === vnode) {110 return;111 }112 /​/​ 在当新老 VNode 节点都是 isStatic（静态的），并且 key 相同时，113 /​/​ 只要将 componentInstance 与 elm 从老 VNode 节点“拿过来”即可。114 /​/​ 这里的 isStatic 也就是前面提到过的「编译」的时候会将静态节点标记出来，这样就可以跳过比对的过程。115 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {116 vnode.elm = oldVnode.elm;117 vnode.componentInstance = oldVnode.componentInstance;118 return;119 }120 const elm = (vnode.elm = oldVnode.elm);121 const oldCh = oldVnode.children;122 const ch = vnode.children;123 /​/​ 当新 VNode 节点是文本节点的时候，直接用 setTextContent 来设置 text124 if (vnode.text) {125 nodeOps.setTextContent(elm, vnode.text);126 } else {127 /​/​ oldCh 与 ch 都存在且不相同时，使用 updateChildren 函数来更新子节点128 if (oldCh && ch && oldCh !== ch) {129 updateChildren(elm, oldCh, ch);130 } else if (ch) {131 /​/​ 如果只有 ch 存在的时候132 /​/​ 如果老节点是文本节点则先将节点的文本清除133 if (oldVnode.text) nodeOps.setTextContent(elm, "");134 /​/​ 然后将 ch 批量插入到节点elm下。135 addVnodes(elm, null, ch, 0, ch.length - 1);136 } else if (oldCh) {137 /​/​ 同理当只有 oldch 存在时，说明需要将老节点通过 removeVnodes 全部清除138 removeVnodes(elm, oldCh, 0, oldCh.length - 1);139 } else if (oldVnode.text) {140 /​/​ 最后一种情况是当只有老节点是文本节点的时候，清除其节点文本内容。141 nodeOps.setTextContent(elm, "");142 }143 }144}145function updateChildren(parentElm, oldCh, newCh) {146 let oldStartIdx = 0;147 let newStartIdx = 0;148 let oldEndIdx = oldCh.length - 1;149 let oldStartVnode = oldCh[0];150 let oldEndVnode = oldCh[oldEndIdx];151 let newEndIdx = newCh.length - 1;152 let newStartVnode = newCh[0];153 let newEndVnode = newCh[newEndIdx];154 let oldKeyToIdx, idxInOld, elmToMove, refElm;155 /​/​ while 循环，在这过程中，oldStartIdx、newStartIdx、oldEndIdx 以及 newEndIdx 会逐渐向中间靠拢156 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {157 if (!oldStartVnode) {158 oldStartVnode = oldCh[++oldStartIdx];159 } else if (!oldEndVnode) {160 oldEndVnode = oldCh[--oldEndIdx];161 } else if (sameVnode(oldStartVnode, newStartVnode)) {162 patchVnode(oldStartVnode, newStartVnode);163 oldStartVnode = oldCh[++oldStartIdx];164 newStartVnode = newCh[++newStartIdx];165 } else if (sameVnode(oldEndVnode, newEndVnode)) {166 patchVnode(oldEndVnode, newEndVnode);167 oldEndVnode = oldCh[--oldEndIdx];168 newEndVnode = newCh[--newEndIdx];169 } else if (sameVnode(oldStartVnode, newEndVnode)) {170 patchVnode(oldStartVnode, newEndVnode);171 nodeOps.insertBefore(172 parentElm,173 oldStartVnode.elm,174 nodeOps.nextSibling(oldEndVnode.elm)175 );176 oldStartVnode = oldCh[++oldStartIdx];177 newEndVnode = newCh[--newEndIdx];178 } else if (sameVnode(oldEndVnode, newStartVnode)) {179 patchVnode(oldEndVnode, newStartVnode);180 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);181 oldEndVnode = oldCh[--oldEndIdx];182 newStartVnode = newCh[++newStartIdx];183 } else {184 let elmToMove = oldCh[idxInOld];185 if (!oldKeyToIdx)186 oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);187 idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;188 /​/​ 当前newStartVnode在old还未遍历完的项目中，是否存在189 if (!idxInOld) {190 createElm(newStartVnode, parentElm);191 newStartVnode = newCh[++newStartIdx];192 } else {193 elmToMove = oldCh[idxInOld];194 if (sameVnode(elmToMove, newStartVnode)) {195 patchVnode(elmToMove, newStartVnode);196 oldCh[idxInOld] = undefined;197 nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);198 newStartVnode = newCh[++newStartIdx];199 } else {200 createElm(newStartVnode, parentElm);201 newStartVnode = newCh[++newStartIdx];202 }203 }204 }205 }206 /​/​ 当 while 循环结束以后，如果 oldStartIdx > oldEndIdx，说明老节点比对完了207 /​/​ 但是新节点还有多的，需要将新节点插入到真实 DOM 中去，调用 addVnodes 将这些节点插入即可208 if (oldStartIdx > oldEndIdx) {209 refElm = newCh[newEndIdx + 1] ? newCh[newEndIdx + 1].elm : null;210 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);211 } else if (newStartIdx > newEndIdx) {212 /​/​ 如果满足 newStartIdx > newEndIdx 条件，说明新节点比对完了，老节点还有多213 /​/​ 将这些无用的老节点通过 removeVnodes 批量删除即可。214 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);215 }216}217function createKeyToOldIdx(children, beginIdx, endIdx) {218 let i, key;219 const map = {};220 for (i = beginIdx; i <= endIdx; ++i) {221 key = children[i].key;222 if (isDef(key)) map[key] = i;223 }224 return map;...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1/​/​ 入口， 进行diffpatch2function patch(oldVNode, vnode, parentElm) {3 /​/​ 不存在旧的node，将新的node直接插入父节点4 if (!oldVnode) {5 addVnodes(parentElm, null, vnode, 0, vnode.length - 1)6 } else if (!vnode) { /​/​ 不存在新的node，移除就的节点7 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1)8 } else {9 /​/​ 存在切相同 10 if (sameVnode(oldVNode, vnode)) {11 patchVnode(oldVNode, vnode)12 } else {13 /​/​ 存在不同，将新节点替换久节点14 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1)15 addVnodes(parentElm, null, vnode, 0, vnode.length - 1)16 }17 }18}19/​/​ 相同节点的比较20function patchVnode(oldVnode, vnode) {21 /​/​ 完成相同，直接返回22 if (oldVnode === vnode) {23 return24 }25 /​/​ 静态的节点，直接替换26 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {27 vnode.elm = oldVnode.elm28 vnode.componentInstance = oldVnode.componentInstance29 return30 }31 /​/​ 判断子节点32 const elm = vnode.elm = oldVnode.elm33 const oldCh = oldVnode.children34 const ch = vnode.children35 /​/​ 是文本节点，直接替换36 if (vnode.text) {37 nodeOps.setTextContent(elm, vnode.text)38 } else {39 if (oldCh && ch) { /​/​同时存在40 if (oldCh !== ch) { /​/​ 不相同，更新子节点41 updateChildren(elm, oldCh, ch)42 }43 } else if (ch) { 44 if (oldVnode.text) nodeOps.setTextContent(elm, '')45 addVnodes(elm, null, ch, 0, ch.length - 1)46 } else if (oldCh) {47 removeVnodes(elm, oldCh, 0, oldCh.length - 1)48 } else if (oldVnode.text) {49 nodeOps.setTextContent(elm, '')50 }51 }52}53/​/​ 判断input的类型54function sameInputType(a, b) {55 if (a.tag !== 'input') return true56 let i57 const typeA = (i = a.data) && (i = i.attrs) && i.type58 const typeB = (i = b.data) && (i = i.attrs) && i.type59 return typeA === typeB60}61/​/​ 判断相同的node62function sameVnode() {63 return (64 a.key === b.key &&65 a.tag === b.tag &&66 a.isComment === b.isComment &&67 !!a.data === !!b.data &&68 sameInputType(a, b)69 )70}71/​/​ 将el插入到parent中72function insert(parent, elm, ref) {73 if (parent) {74 /​/​ 如果是ref 75 if (ref) {76 if (ref.parentNode === parent) {77 nodeOps.insertBefore(parent, elm, ref)78 }79 } else {80 nodeOps.appendChild(parent, elm)81 }82 }83}84/​/​ 创建元素85function createElm(vnode, parentElm, refElm) {86 if (vnode.tag) {87 insert(parentElm, nodeOps.createElement(vnode.tag), refElm)88 } else {89 insert(parentElm, nodeOps.createTextNode(vnode.text), refElm)90 }91}92/​/​ 批量添加node93function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx) {94 for (; startIdx <= endIdx; ++startIdx) {95 createElm(vnodes[startIdx], parentElm, refElm)96 }97}98/​/​ 移除node99function removeNode(el) {100 const parent = nodeOps.parentNode(el)101 if (parent) {102 nodeOps.removeChild(parent, el)103 }104}105/​/​ 批量移除node106function removeVnodes(parentElm, vnodes, startIdx, endIdx) {107 for (; startIdx <= endIdx; ++startIdx) {108 const ch = vnodes[startIdx]109 if (ch) {110 removeNode(ch.elm)111 }112 }113}114/​/​ 将key map 转变成数组115function createKeyToOldIdx(children, beginIdx, endIdx) {116 let i, key117 const map = {}118 for (i = beginIdx; i <= endIdx; ++i) {119 key = children[i].key120 if (isDef(key)) map[key] = i121 }122 return map123}124/​/​ 更新子节点125function updateChildren(parentElm, oldCh, newCh) {126 let oldStartIdx = 0 /​/​ 旧节点开始127 let newStartIdx = 0 /​/​ 128 let oldEndIdx = oldCh.length - 1129 let oldStartVnode = oldCh[0]130 let oldEndVnode = oldCh[oldEndIdx] /​/​ 旧节点的node， 与index同步131 let newEndIdx = newCh.length - 1132 let newStartVnode = newCh[0]133 let newEndVnode = newCh[newEndIdx]134 let oldKeyToIdx, idxInOld, elmToMove, refElm135 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {136 /​/​ 旧节点不存在，直接替换137 if (!oldStartVnode) {138 oldStartVnode = oldCh[++oldStartIdx]139 } else if (!oldEndVnode) {140 oldEndVnode = oldCh[--oldEndIdx]141 } else if (sameVnode(oldStartVnode, newStartVnode)) { /​/​ 新旧相同的四种情况142 patchVnode(oldStartVnode, newStartVnode)143 oldStartVnode = oldCh[++oldStartIdx]144 newStartVnode = newCh[++newStartIdx]145 } else if (sameVnode(oldEndVnode, newEndVnode)) {146 patchVnode(oldEndVnode, newEndVnode)147 oldEndVnode = oldCh[--oldEndIdx]148 newEndVnode = newCh[--newEndIdx]149 } else if (sameVnode(oldStartVnode, newEndVnode)) {150 patchVnode(oldStartVnode, newEndVnode)151 nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))152 oldStartVnode = oldCh[++oldStartIdx]153 newEndVnode = newCh[--newEndIdx]154 } else if (sameVnode(oldEndVnode, newStartVnode)) {155 patchVnode(oldEndVnode, newStartVnode)156 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)157 oldEndVnode = oldCh[--oldEndIdx]158 newStartVnode = newCh[++newStartIdx]159 } else { /​/​新旧不相同160 let elmToMove = oldCh[idxInOld]161 if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) /​/​ 把旧节点的key转成数组，方便查找162 idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null 163 if (!idxInOld) { /​/​ 存在和新node相同的key164 createElm(newStartVnode, parentElm)165 newStartVnode = newCh[++newStartIdx]166 } else {167 elmToMove = oldCh[idxInOld]168 if (sameVnode(elmToMove, newStartVnode)) { /​/​ 完全相同，直接替换169 patchVnode(elmToMove, newStartVnode)170 oldCh[idxInOld] = undefined /​/​ 防止重复171 nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)172 newStartVnode = newCh[++newStartIdx]173 } else { /​/​不相同，创建新node， 插入174 createElm(newStartVnode, parentElm)175 newStartVnode = newCh[++newStartIdx]176 }177 }178 }179 }180 if (oldStartIdx > oldEndIdx) { /​/​ 新node多，直接插入181 refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null182 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx)183 } else if (newStartIdx > newEndIdx) { /​/​ 旧node多直接删除184 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)185 }186}187/​/​ 封装多平台node api188const nodeOps = {189 /​/​ 文本节点设置文本190 setTextContent() {191 },192 parentNode() {193 },194 removeChild() {195 },196 nextSibling() {...

Full Screen

Full Screen

diff_patch.js

Source:diff_patch.js Github

copy

Full Screen

...37}38{39 function patch (oldVnode, vnode, parentElm) {40 if (!oldVnode) {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);146 } else if (newStartIdx > newEndIdx) {147 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);148 }149 }...

Full Screen

Full Screen

2018-10-30-vue-diff.js

Source:2018-10-30-vue-diff.js Github

copy

Full Screen

1function patch (oldVNode, vnode, parentElm) {2 if (!oldVnode) {3 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);4 } else if (!vnode) {5 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);6 } else {7 if (sameVnode(oldVNode, vnode)) {8 patchVnode(oldVNode, vnode);9 } else {10 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);11 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);12 }13 }14}15function patchVnode (oldVnode, vnode) {16 if (oldVnode === vnode) {17 return;18 }19 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {20 vnode.elm = oldVnode.elm;21 vnode.componentInstance = oldVnode.componentInstance;22 return;23 }24 const elm = vnode.elm = oldVnode.elm;25 const oldCh = oldVnode.children;26 const ch = vnode.children;27 if (vnode.text) {28 nodeOps.setTextContent(elm, vnode.text);29 } else {30 if (oldCh && ch && (oldCh !== ch)) {31 updateChildren(elm, oldCh, ch);32 } else if (ch) {33 if (oldVnode.text) nodeOps.setTextContent(elm, '');34 addVnodes(elm, null, ch, 0, ch.length - 1);35 } else if (oldCh) {36 removeVnodes(elm, oldCh, 0, oldCh.length - 1)37 } else if (oldVnode.text) {38 nodeOps.setTextContent(elm, '')39 }40 }41}42function sameInputType (a, b) {43 if (a.tag !== 'input') return true44 let i45 const typeA = (i = a.data) && (i = i.attrs) && i.type46 const typeB = (i = b.data) && (i = i.attrs) && i.type47 return typeA === typeB48}49function sameVnode () {50 return (51 a.key === b.key &&52 a.tag === b.tag &&53 a.isComment === b.isComment &&54 !!a.data === !!b.data &&55 sameInputType(a, b)56 )57}58function insert (parent, elm, ref) {59 if (parent) {60 if (ref) {61 if (ref.parentNode === parent) {62 nodeOps.insertBefore(parent, elm, ref);63 }64 } else {65 nodeOps.appendChild(parent, elm)66 }67 }68}69function createElm (vnode, parentElm, refElm) {70 if (vnode.tag) {71 insert(parentElm, nodeOps.createElement(vnode.tag), refElm);72 } else {73 insert(parentElm, nodeOps.createTextNode(vnode.text), refElm);74 }75}76function addVnodes (parentElm, refElm, vnodes, startIdx, endIdx) {77 for (; startIdx <= endIdx; ++startIdx) {78 createElm(vnodes[startIdx], parentElm, refElm);79 }80}81function removeNode (el) {82 const parent = nodeOps.parentNode(el);83 if (parent) {84 nodeOps.removeChild(parent, el);85 }86}87function removeVnodes (parentElm, vnodes, startIdx, endIdx) {88 for (; startIdx <= endIdx; ++startIdx) {89 const ch = vnodes[startIdx]90 if (ch) {91 removeNode(ch.elm);92 }93 }94}95function createKeyToOldIdx (children, beginIdx, endIdx) {96 let i, key97 const map = {}98 for (i = beginIdx; i <= endIdx; ++i) {99 key = children[i].key100 if (isDef(key)) map[key] = i101 }102 return map103}104function updateChildren (parentElm, oldCh, newCh) {105 let oldStartIdx = 0;106 let newStartIdx = 0;107 let oldEndIdx = oldCh.length - 1;108 let oldStartVnode = oldCh[0];109 let oldEndVnode = oldCh[oldEndIdx];110 let newEndIdx = newCh.length - 1;111 let newStartVnode = newCh[0];112 let newEndVnode = newCh[newEndIdx];113 114 let oldKeyToIdx, idxInOld, elmToMove, refElm;115 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {116 if (!oldStartVnode) {117 oldStartVnode = oldCh[++oldStartIdx];118 } else if (!oldEndVnode) {119 oldEndVnode = oldCh[--oldEndIdx];120 } else if (sameVnode(oldStartVnode, newStartVnode)) {121 patchVnode(oldStartVnode, newStartVnode);122 oldStartVnode = oldCh[++oldStartIdx];123 newStartVnode = newCh[++newStartIdx];124 } else if (sameVnode(oldEndVnode, newEndVnode)) {125 patchVnode(oldEndVnode, newEndVnode);126 oldEndVnode = oldCh[--oldEndIdx];127 newEndVnode = newCh[--newEndIdx];128 } else if (sameVnode(oldStartVnode, newEndVnode)) {129 patchVnode(oldStartVnode, newEndVnode);130 nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm));131 oldStartVnode = oldCh[++oldStartIdx];132 newEndVnode = newCh[--newEndIdx];133 } else if (sameVnode(oldEndVnode, newStartVnode)) {134 patchVnode(oldEndVnode, newStartVnode);135 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);136 oldEndVnode = oldCh[--oldEndIdx];137 newStartVnode = newCh[++newStartIdx];138 } else {139 let elmToMove = oldCh[idxInOld];140 if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);141 idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;142 if (!idxInOld) {143 createElm(newStartVnode, parentElm);144 newStartVnode = newCh[++newStartIdx];145 } else {146 elmToMove = oldCh[idxInOld];147 if (sameVnode(elmToMove, newStartVnode)) {148 patchVnode(elmToMove, newStartVnode);149 oldCh[idxInOld] = undefined;150 nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);151 newStartVnode = newCh[++newStartIdx];152 } else {153 createElm(newStartVnode, parentElm);154 newStartVnode = newCh[++newStartIdx];155 }156 }157 }158 }159 if (oldStartIdx > oldEndIdx) {160 refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null;161 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);162 } else if (newStartIdx > newEndIdx) {163 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);164 }165}166const nodeOps = {167 setTextContent () {168 169 },170 parentNode () {171 },172 removeChild () {173 },174 nextSibling () {175 },...

Full Screen

Full Screen

《数据状态更新时的差异 diff 及 patch 机制》.js

Source:《数据状态更新时的差异 diff 及 patch 机制》.js Github

copy

Full Screen

1function patch(oldVNode, vnode, parentElm) {2 if (!oldVnode) {3 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);4 } else if (!vnode) {5 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);6 } else {7 if (sameVnode(oldVNode, vnode)) {8 patchVnode(oldVNode, vnode);9 } else {10 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);11 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);12 }13 }14}15function patchVnode(oldVnode, vnode) {16 if (oldVnode === vnode) {17 return;18 }19 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {20 vnode.elm = oldVnode.elm;21 vnode.componentInstance = oldVnode.componentInstance;22 return;23 }24 const elm = vnode.elm = oldVnode.elm;25 const oldCh = oldVnode.children;26 const ch = vnode.children;27 if (vnode.text) {28 nodeOps.setTextContent(elm, vnode.text);29 } else {30 if (oldCh && ch && (oldCh !== ch)) {31 updateChildren(elm, oldCh, ch);32 } else if (ch) {33 if (oldVnode.text) nodeOps.setTextContent(elm, '');34 addVnodes(elm, null, ch, 0, ch.length - 1);35 } else if (oldCh) {36 removeVnodes(elm, oldCh, 0, oldCh.length - 1)37 } else if (oldVnode.text) {38 nodeOps.setTextContent(elm, '')39 }40 }41}42function sameInputType(a, b) {43 if (a.tag !== 'input') return true44 let i45 const typeA = (i = a.data) && (i = i.attrs) && i.type46 const typeB = (i = b.data) && (i = i.attrs) && i.type47 return typeA === typeB48}49function sameVnode() {50 return (51 a.key === b.key &&52 a.tag === b.tag &&53 a.isComment === b.isComment &&54 !!a.data === !!b.data &&55 sameInputType(a, b)56 )57}58function insert(parent, elm, ref) {59 if (parent) {60 if (ref) {61 if (ref.parentNode === parent) {62 nodeOps.insertBefore(parent, elm, ref);63 }64 } else {65 nodeOps.appendChild(parent, elm)66 }67 }68}69function createElm(vnode, parentElm, refElm) {70 if (vnode.tag) {71 insert(parentElm, nodeOps.createElement(vnode.tag), refElm);72 } else {73 insert(parentElm, nodeOps.createTextNode(vnode.text), refElm);74 }75}76function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx) {77 for (; startIdx <= endIdx; ++startIdx) {78 createElm(vnodes[startIdx], parentElm, refElm);79 }80}81function removeNode(el) {82 const parent = nodeOps.parentNode(el);83 if (parent) {84 nodeOps.removeChild(parent, el);85 }86}87function removeVnodes(parentElm, vnodes, startIdx, endIdx) {88 for (; startIdx <= endIdx; ++startIdx) {89 const ch = vnodes[startIdx]90 if (ch) {91 removeNode(ch.elm);92 }93 }94}95function createKeyToOldIdx(children, beginIdx, endIdx) {96 let i, key97 const map = {}98 for (i = beginIdx; i <= endIdx; ++i) {99 key = children[i].key100 if (isDef(key)) map[key] = i101 }102 return map103}104function updateChildren(parentElm, oldCh, newCh) {105 let oldStartIdx = 0;106 let newStartIdx = 0;107 let oldEndIdx = oldCh.length - 1;108 let oldStartVnode = oldCh[0];109 let oldEndVnode = oldCh[oldEndIdx];110 let newEndIdx = newCh.length - 1;111 let newStartVnode = newCh[0];112 let newEndVnode = newCh[newEndIdx];113 let oldKeyToIdx, idxInOld, elmToMove, refElm;114 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {115 if (!oldStartVnode) {116 oldStartVnode = oldCh[++oldStartIdx];117 } else if (!oldEndVnode) {118 oldEndVnode = oldCh[--oldEndIdx];119 } else if (sameVnode(oldStartVnode, newStartVnode)) {120 patchVnode(oldStartVnode, newStartVnode);121 oldStartVnode = oldCh[++oldStartIdx];122 newStartVnode = newCh[++newStartIdx];123 } else if (sameVnode(oldEndVnode, newEndVnode)) {124 patchVnode(oldEndVnode, newEndVnode);125 oldEndVnode = oldCh[--oldEndIdx];126 newEndVnode = newCh[--newEndIdx];127 } else if (sameVnode(oldStartVnode, newEndVnode)) {128 patchVnode(oldStartVnode, newEndVnode);129 nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm));130 oldStartVnode = oldCh[++oldStartIdx];131 newEndVnode = newCh[--newEndIdx];132 } else if (sameVnode(oldEndVnode, newStartVnode)) {133 patchVnode(oldEndVnode, newStartVnode);134 nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);135 oldEndVnode = oldCh[--oldEndIdx];136 newStartVnode = newCh[++newStartIdx];137 } else {138 let elmToMove = oldCh[idxInOld];139 if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);140 idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;141 if (!idxInOld) {142 createElm(newStartVnode, parentElm);143 newStartVnode = newCh[++newStartIdx];144 } else {145 elmToMove = oldCh[idxInOld];146 if (sameVnode(elmToMove, newStartVnode)) {147 patchVnode(elmToMove, newStartVnode);148 oldCh[idxInOld] = undefined;149 nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);150 newStartVnode = newCh[++newStartIdx];151 } else {152 createElm(newStartVnode, parentElm);153 newStartVnode = newCh[++newStartIdx];154 }155 }156 }157 }158 if (oldStartIdx > oldEndIdx) {159 refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null;160 addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);161 } else if (newStartIdx > newEndIdx) {162 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);163 }164}165const nodeOps = {166 setTextContent() {167 },168 parentNode() {169 },170 removeChild() {171 },172 nextSibling() {173 },174 insertBefore() {...

Full Screen

Full Screen

vapi.js

Source:vapi.js Github

copy

Full Screen

...36 } else {37 insert(parentElm, nodeOps.createElm(vnode.text), refElm)38 }39}40function addVnodes(parentElm, refElm, vnodes, startIdx, endIdx) {41 for (; startIdx <= endIdx; ++startIdx) {42 createElm(vnodes[startIdx], parentElm, refElm);43 }44}45function removeNode(el) {46 const parent = nodeOps.parentNode(el)47 if (parent) {48 nodeOps.removeChild(parent, el)49 }50}51function removeVnodes (parentElm, vnodes, startIdx, endIdx) {52 for (; startIdx <= endIdx; ++startIdx) {53 const ch = vnodes[startIdx]54 if (ch) {55 removeNode(ch.elm);56 }57 }58}59function patch(oldVnode, vnode, parentElm) {60 if (!oldVnode) {61 addVnodes(parentElm, null, vnode, 0, vnode.length - 1)62 } else if (!vnode) {63 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1)64 } else {65 if (sameVnode(oldVnode, vnode)) {66 patchVnode(oldVnode, vnode)67 } else {68 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1)69 addVnodes(parentElm, null, vnode, 0, vnode.length - 1)70 }71 }72}73function sameVnode(a, b) {74 return (75 a.key === b.key &&76 a.tag === b.tag &&77 a.isComment === b.isComment &&78 (!!a.data) === (!!b.data) &&79 sameInputType(a, b)80 )81}82function sameInputType(a, b) {83 if (a.tag !== 'input') return true84 let i85 const typeA = (i = a.data) && (i = i.attrs) && i.type86 const typeB = (i = b.data) && (i = i.attrs) && i.type87 return typeA === typeB88}89function patchVnode(oldVnode, vnode) {90 if (oldVnode === vnode) {91 return92 }93 if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {94 vnode.elm = oldVnode.elm;95 vnode.componentInstance = oldVnode.componentInstance;96 return;97 }98 const elm = vnode.elm = oldVnode.elm;99 const oldCh = oldVnode.children;100 const ch = vnode.children;101 if (vnode.text) {102 nodeOps.setTextContent(elm, vnode.text);103 } else {104 if (oldCh && ch && (oldCh !== ch)) {105 updateChildren(elm, oldCh, ch);106 } else if (ch) {107 if (oldVnode.text) nodeOps.setTextContent(elm, '');108 addVnodes(elm, null, ch, 0, ch.length - 1);109 } else if (oldCh) {110 removeVnodes(elm, oldCh, 0, oldCh.length - 1)111 } else if (oldVnode.text) {112 nodeOps.setTextContent(elm, '')113 }114 }...

Full Screen

Full Screen

patch.js

Source:patch.js Github

copy

Full Screen

2 * patch 算法 同层比较3 */​4function patch (oldVnode, vnode, parentElm) {5 if (!oldVnode) {6 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);7 } else if (!vnode) {8 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);9 } else {10 if (sameVnode(oldVNode, vnode)) {11 patchVnode(oldVNode, vnode);12 } else {13 removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);14 addVnodes(parentElm, null, vnode, 0, vnode.length - 1);15 }16 }17}18function addVnodes (parentElm, refElm, vnodes, startIdx, endIdx) {19 for (; startIdx <= endIdx; ++startIdx) {20 createElm(vnodes[startIdx], parentElm, refElm);21 }22}23function createElm (vnode, parentElm, refElm) {24 if (vnode.tag) {25 insert(parentElm, nodeOps.createElement(vnode.tag), refElm);26 } else {27 insert(parentElm, nodeOps.createTextNode(vnode.text), refElm);28 }29}30function removeVnodes (parentElm, vnodes, startIdx, endIdx) {31 for (; startIdx <= endIdx; ++startIdx) {32 const ch = vnodes[startIdx]33 if (ch) {34 removeNode(ch.elm);35 }36 }37}38function removeNode (el) {39 const parent = nodeOps.parentNode(el);40 if (parent) {41 nodeOps.removeChild(parent, el);42 }43}44function sameVnode () {45 return (46 a.key === b.key &&47 a.tag === b.tag &&48 a.isComment === b.isComment &&49 (!!a.data) === (!!b.data) &&50 sameInputType(a, b)51 )52}53function sameInputType (a, b) {54 if (a.tag !== 'input') return true55 let i56 const typeA = (i = a.data) && (i = i.attrs) && i.type57 const typeB = (i = b.data) && (i = i.attrs) && i.type58 return typeA === typeB59}60function 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 }...

Full Screen

Full Screen

1.js

Source:1.js Github

copy

Full Screen

...3}4const patch = function (olds, news, parentElm) {5 /​/​ 旧节点不在了，需要重新创建所有节点6 if (!olds) {7 addVnodes(parentElm, null, news, 0, news.length - 1)8 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 await page.addScriptTag({ content: `window.addVnodes = window.__playwright__internal__addVnodes` });7 const vnodes = await page.evaluate(() => {8 const div = document.createElement('div');9 div.innerHTML = `<div id="foo">foo</​div><div id="bar">bar</​div>`;10 return addVnodes(div.firstChild, div.lastChild);11 });12 console.log(vnodes);13 await browser.close();14})();15[ { nodeType: 1,16 attributes: { id: 'foo' },17 childNodes: [ [Object] ] },18 { nodeType: 1,19 attributes: { id: 'bar' },20 childNodes: [ [Object] ] } ]

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 await page.goto(

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { addVnodes } = require('playwright/​lib/​server/​dom.js');2const { ElementHandle } = require('playwright/​lib/​server/​dom.js');3const { JSHandle } = require('playwright/​lib/​server/​jsHandle.js');4const { ChannelOwner } = require('playwright/​lib/​server/​channelOwner.js');5const dummyNode = {6 attributes: { 'data-test': 'dummyNode' },7};8const dummyParentNode = {9 attributes: { 'data-test': 'dummyParentNode' },10};11const dummyDocument = {12};13const dummyFrame = {14};15const dummyContext = {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const { addVNode } = require('playwright/​lib/​server/​dom.js');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 await addVNode(page, {8 attributes: { id: 'my-id' },9 childNodes: [{ nodeName: '#text', nodeValue: 'Hello World' }],10 });11 await page.screenshot({ path: 'example.png' });12 await browser.close();13})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');2const vnodes = addVnodes(1, 2, 3, 4);3console.log(vnodes);4const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');5const vnodes = addVnodes(1, 2, 3, 4);6console.log(vnodes);7const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');8const vnodes = addVnodes(1, 2, 3, 4);9console.log(vnodes);10const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');11const vnodes = addVnodes(1, 2, 3, 4);12console.log(vnodes);13const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');14const vnodes = addVnodes(1, 2, 3, 4);15console.log(vnodes);16const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');17const vnodes = addVnodes(1, 2, 3, 4);18console.log(vnodes);19const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');20const vnodes = addVnodes(1, 2, 3, 4);21console.log(vnodes);22const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder/​recorderSupplement');23const vnodes = addVnodes(1, 2, 3, 4);24console.log(vnodes);25const { addVnodes } = require('playwright/​lib/​server/​supplements/​recorder

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {addVnodes} = require('playwright/​lib/​server/​dom.js');2const {addVnodes} = require('playwright/​lib/​server/​dom.js');3addVnodes(document.body, 0, [4 {5 'attributes': {6 'style': 'color: red;',7 },8 {9 },10 },11]);12const {addVnodes} = require('playwright/​lib/​server/​dom.js');13addVnodes(document.body, 0, [14 {15 'attributes': {16 'style': 'color: red;',17 },18 {19 },20 },21]);22const {addVnodes} = require('playwright/​lib/​server/​dom.js');23addVnodes(document.body, 0, [24 {25 'attributes': {26 'style': 'color: red;',27 },28 {29 },30 },31]);32const {addVnodes} = require('playwright/​lib/​server/​dom.js');33addVnodes(document.body, 0, [34 {35 'attributes': {36 'style': 'color: red;',37 },38 {39 },40 },41]);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { addVnodes } = require('@playwright/​test/​lib/​server/​domSnapshot');2const { vnodes } = require('./​vnodes');3addVnodes(vnodes);4const { createVNode } = require('@playwright/​test/​lib/​server/​domSnapshot');5const { toVNodes } = require('@playwright/​test/​lib/​server/​domSnapshot/​types');6const vnodes = toVNodes(document.body, createVNode);7module.exports = {8};9const { test, expect } = require('@playwright/​test');10test('test', async ({ page }) => {11 await page.waitForSelector('text=Get started');12 await expect(page).toMatchSnapshot();13});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { addVnodes } = require('playwright/​lib/​server/​chromium/​crPage');2const { vnodes, vnodesToSet } = require('./​vnodes');3addVnodes(vnodes, vnodesToSet);4const { VNode } = require('playwright/​lib/​server/​dom/​vnode');5const { VNodeElement } = require('playwright/​lib/​server/​dom/​vnodeElement');6const { VNodeText } = require('playwright/​lib/​server/​dom/​vnodeText');7const { VNodeDocument } = require('playwright/​lib/​server/​dom/​vnodeDocument');8const { VNodeDocumentType } = require('playwright/​lib/​server/​dom/​vnodeDocumentType');9const { VNodeDocumentFragment } = require('playwright/​lib/​server/​dom/​vnodeDocumentFragment');10const { VNodeShadowRoot } = require('playwright/​lib/​server/​dom/​vnodeShadowRoot');11const vnodes = {};12const vnodesToSet = [];13const vNodeDocument = new VNodeDocument();14vnodes['vNodeDocument'] = vNodeDocument;15vnodesToSet.push(vNodeDocument);16const vNodeDocumentType = new VNodeDocumentType();17vnodes['vNodeDocumentType'] = vNodeDocumentType;18vnodesToSet.push(vNodeDocumentType);19const vNodeDocumentFragment = new VNodeDocumentFragment();20vnodes['vNodeDocumentFragment'] = vNodeDocumentFragment;21vnodesToSet.push(vNodeDocumentFragment);22const vNodeShadowRoot = new VNodeShadowRoot();23vnodes['vNodeShadowRoot'] = vNodeShadowRoot;24vnodesToSet.push(vNodeShadowRoot);25const vNodeText = new VNodeText();26vnodes['vNodeText'] = vNodeText;27vnodesToSet.push(vNodeText);28const vNodeElement = new VNodeElement();29vNodeElement.nodeName = 'div';30vNodeElement.nodeType = 1;31vNodeElement.shadowRoot = vNodeShadowRoot;32vNodeElement.shadowRootId = 'shadowRootId';33vNodeElement.shadowRootOwnerId = 'shadowRootOwnerId';34vNodeElement.shadowRootType = 'closed';35vNodeElement.children = [vNodeText];36vNodeElement.attributes = { 'id': 'id', 'class': 'class' };37vNodeElement.boundingRect = { x: 1, y: 1, width: 1, height:

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