Best JavaScript code snippet using playwright-internal
testUtils.spec.jsx
Source: testUtils.spec.jsx
...66 container.innerHTML = '';67 });68 describe('isVNode', () => {69 it('should return true for VNodes', () => {70 expect(isVNode(createElement('div'))).toBe(true);71 expect(isVNode(createElement(CreateClassComponent))).toBe(true);72 expect(isVNode(createElement(ExtendClassComponent))).toBe(true);73 expect(isVNode(createElement(FunctionalComponent))).toBe(true);74 expect(isVNode(<CreateClassComponent />)).toBe(true);75 expect(isVNode(<ExtendClassComponent />)).toBe(true);76 expect(isVNode(<FunctionalComponent />)).toBe(true);77 expect(isVNode(<div />)).toBe(true);78 });79 it('should return false for non-VNodes', () => {80 expect(isVNode(CreateClassComponent)).toBe(false);81 expect(isVNode(ExtendClassComponent)).toBe(false);82 expect(isVNode(FunctionalComponent)).toBe(false);83 expect(isVNode(createDOMElement('div'))).toBe(false);84 expect(isVNode('foo')).toBe(false);85 expect(isVNode({})).toBe(false);86 expect(isVNode([])).toBe(false);87 expect(isVNode(10)).toBe(false);88 expect(isVNode(undefined)).toBe(false);89 expect(isVNode(null)).toBe(false);90 });91 });92 describe('isComponentVNodeOfType', () => {93 it('Should return true if Component is same', () => {94 class Foobar extends Component {95 render() {96 return <div>1</div>;97 }98 }99 expect(isComponentVNodeOfType(<Foobar />, Foobar)).toBe(true);100 expect(isComponentVNodeOfType(<div />, Foobar)).toBe(false);101 });102 });103 describe('isVNodeOfType', () => {104 it('should return true for VNodes with a specified type', () => {105 expect(isVNodeOfType(createElement('div'), 'div')).toBe(true);106 expect(isVNodeOfType(createElement(FunctionalComponent), FunctionalComponent)).toBe(true);107 expect(isVNodeOfType(createElement(CreateClassComponent), CreateClassComponent)).toBe(true);108 expect(isVNodeOfType(createElement(ExtendClassComponent), ExtendClassComponent)).toBe(true);109 });110 it('should return false for VNodes with a specified type', () => {111 expect(isVNodeOfType(createElement('div'), 'h1')).toBe(false);112 expect(isVNodeOfType(createElement(FunctionalComponent), CreateClassComponent)).toBe(false);113 expect(isVNodeOfType(createElement(CreateClassComponent), ExtendClassComponent)).toBe(false);114 expect(isVNodeOfType(createElement(ExtendClassComponent), FunctionalComponent)).toBe(false);115 });116 });117 describe('isDOMVNode', () => {118 it('should return true for VNodes of type string', () => {119 expect(isDOMVNode(createElement('div'))).toBe(true);120 expect(isDOMVNode(createElement('h1'))).toBe(true);121 expect(isDOMVNode(createElement('p'))).toBe(true);122 });123 it('should return false for VNodes of type function or class', () => {124 expect(isDOMVNode(createElement(CreateClassComponent))).toBe(false);125 expect(isDOMVNode(createElement(ExtendClassComponent))).toBe(false);126 expect(isDOMVNode(createElement(FunctionalComponent))).toBe(false);127 });128 });129 describe('isDOMVNodeOfType', () => {130 it('should return true for VNodes of specific string type', () => {131 expect(isDOMVNodeOfType(createElement('div'), 'div')).toBe(true);132 expect(isDOMVNodeOfType(createElement('h1'), 'h1')).toBe(true);133 expect(isDOMVNodeOfType(createElement('p'), 'p')).toBe(true);134 });135 it('should return false for VNodes of incorrect type', () => {136 expect(isDOMVNodeOfType(createElement('div'), 'foo')).toBe(false);137 expect(isDOMVNodeOfType(createElement('div'), {})).toBe(false);138 expect(isDOMVNodeOfType(createElement('div'), [])).toBe(false);139 expect(isDOMVNodeOfType(createElement('div'), 10)).toBe(false);140 expect(isDOMVNodeOfType(createElement('div'), undefined)).toBe(false);141 expect(isDOMVNodeOfType(createElement('div'), null)).toBe(false);142 });143 });144 describe('isFunctionalVNode', () => {145 it('should return true for VNodes of stateless function type', () => {146 expect(isFunctionalVNode(createElement(FunctionalComponent))).toBe(true);147 });148 it('should return false for VNodes of incorrect type', () => {149 expect(isFunctionalVNode(createElement(CreateClassComponent))).toBe(false);150 expect(isFunctionalVNode(createElement(ExtendClassComponent))).toBe(false);151 expect(isFunctionalVNode(createElement('div'))).toBe(false);152 });153 });154 describe('isFunctionalVNodeOfType', () => {155 it('should return true for VNodes of specific stateless function type', () => {156 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), FunctionalComponent)).toBe(true);157 });158 it('should return false for VNodes of incorrect type', () => {159 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), AnotherFunctionalComponent)).toBe(false);160 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), CreateClassComponent)).toBe(false);161 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), ExtendClassComponent)).toBe(false);162 });163 });164 describe('isClassVNode', () => {165 it('should return true for VNodes of class type', () => {166 expect(isClassVNode(createElement(CreateClassComponent))).toBe(true);167 expect(isClassVNode(createElement(ExtendClassComponent))).toBe(true);168 });169 it('should return false for VNodes of incorrect type', () => {170 expect(isClassVNode(createElement(FunctionalComponent))).toBe(false);171 expect(isClassVNode(createElement('div'))).toBe(false);172 });173 });174 describe('isClassVNodeOfType', () => {175 it('should return true for VNodes of specific class type', () => {176 expect(isClassVNodeOfType(createElement(CreateClassComponent), CreateClassComponent)).toBe(true);177 expect(isClassVNodeOfType(createElement(ExtendClassComponent), ExtendClassComponent)).toBe(true);178 });179 it('should return false for VNodes of incorrect type', () => {180 expect(isClassVNodeOfType(createElement(CreateClassComponent), AnotherCreateClassComponent)).toBe(false);181 expect(isClassVNodeOfType(createElement(CreateClassComponent), AnotherExtendClassComponent)).toBe(false);182 expect(isClassVNodeOfType(createElement(CreateClassComponent), FunctionalComponent)).toBe(false);183 expect(isClassVNodeOfType(createElement(ExtendClassComponent), AnotherCreateClassComponent)).toBe(false);184 expect(isClassVNodeOfType(createElement(ExtendClassComponent), AnotherExtendClassComponent)).toBe(false);185 expect(isClassVNodeOfType(createElement(ExtendClassComponent), FunctionalComponent)).toBe(false);186 });187 });188 describe('isDOMElement', () => {189 it('should return true for DOMElements', () => {190 expect(isDOMElement(createDOMElement('div'))).toBe(true);191 expect(isDOMElement(createDOMElement('h1'))).toBe(true);192 expect(isDOMElement(createDOMElement('p'))).toBe(true);193 });194 it('should return false for non-DOMElements', () => {195 expect(isDOMElement(createElement(CreateClassComponent))).toBe(false);196 expect(isDOMElement(createElement(ExtendClassComponent))).toBe(false);197 expect(isDOMElement(createElement(FunctionalComponent))).toBe(false);198 expect(isDOMElement(createElement('div'))).toBe(false);199 expect(isDOMElement(CreateClassComponent)).toBe(false);200 expect(isDOMElement(ExtendClassComponent)).toBe(false);201 expect(isDOMElement(FunctionalComponent)).toBe(false);202 expect(isDOMElement('div')).toBe(false);203 expect(isDOMElement(undefined)).toBe(false);204 expect(isDOMElement(null)).toBe(false);205 expect(isDOMElement({})).toBe(false);206 expect(isDOMElement([])).toBe(false);207 expect(isDOMElement(10)).toBe(false);208 });209 });210 describe('isDOMElementOfType', () => {211 it('should return true for DOMElements of specific type', () => {212 expect(isDOMElementOfType(createDOMElement('div'), 'div')).toBe(true);213 expect(isDOMElementOfType(createDOMElement('div'), 'DIV')).toBe(true);214 expect(isDOMElementOfType(createDOMElement('h1'), 'h1')).toBe(true);215 expect(isDOMElementOfType(createDOMElement('h1'), 'H1')).toBe(true);216 expect(isDOMElementOfType(createDOMElement('p'), 'p')).toBe(true);217 expect(isDOMElementOfType(createDOMElement('p'), 'P')).toBe(true);218 });219 it('should return false for DOMElements of incorrect type', () => {220 expect(isDOMElementOfType(createDOMElement('div'), 'foo')).toBe(false);221 expect(isDOMElementOfType(createDOMElement('div'), {})).toBe(false);222 expect(isDOMElementOfType(createDOMElement('div'), [])).toBe(false);223 expect(isDOMElementOfType(createDOMElement('div'), 10)).toBe(false);224 expect(isDOMElementOfType(createDOMElement('div'), undefined)).toBe(false);225 expect(isDOMElementOfType(createDOMElement('div'), null)).toBe(false);226 });227 });228 describe('isRenderedClassComponent', () => {229 const DOMVNode = createElement('div');230 const functionalVNode = createElement(FunctionalComponent);231 const createClassVNode = createElement(CreateClassComponent);232 const extendClassVNode = createElement(ExtendClassComponent);233 it('should return true for rendered Class Components', () => {234 expect(isRenderedClassComponent(renderIntoContainer(createClassVNode))).toBe(true);235 expect(isRenderedClassComponent(renderIntoContainer(extendClassVNode))).toBe(true);236 });237 it('should return false for non-rendered Class Components', () => {238 expect(isRenderedClassComponent(createClassVNode)).toBe(false);239 expect(isRenderedClassComponent(extendClassVNode)).toBe(false);240 expect(isRenderedClassComponent(renderIntoContainer(functionalVNode))).toBe(false);241 expect(isRenderedClassComponent(renderIntoContainer(DOMVNode))).toBe(false);242 });243 });244 describe('isRenderedClassComponentOfType', () => {245 const createClassVNode = createElement(CreateClassComponent);246 const extendClassVNode = createElement(ExtendClassComponent);247 it('should return true for rendered Class Components of specific type', () => {248 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), CreateClassComponent)).toBe(true);249 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), ExtendClassComponent)).toBe(true);250 });251 it('should return false for rendered Class Components of incorrect type', () => {252 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), AnotherCreateClassComponent)).toBe(false);253 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), ExtendClassComponent)).toBe(false);254 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), FunctionalComponent)).toBe(false);255 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), 'div')).toBe(false);256 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), AnotherExtendClassComponent)).toBe(false);257 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), CreateClassComponent)).toBe(false);258 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), FunctionalComponent)).toBe(false);259 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), 'div')).toBe(false);260 });261 });262 describe('findAllInRenderedTree', () => {263 let tree1;264 beforeEach(() => {265 tree1 = (266 <section className="outer">267 <FunctionalComponent />268 </section>269 );270 render(tree1, container);271 });272 it('should call predicate for each VNode instance in a rendered tree', () => {273 const spy = jasmine.createSpy('spy');274 expect(spy).not.toHaveBeenCalled();275 findAllInRenderedTree(tree1, (args) => {276 spy(args.type);277 });278 // 0: section279 // 1: FunctionalComponent280 // 2: div281 expect(spy).toHaveBeenCalledTimes(3);282 expect(spy).toHaveBeenCalledWith('section');283 expect(spy).toHaveBeenCalledWith(FunctionalComponent);284 expect(spy).toHaveBeenCalledWith('div');285 });286 it('should call predicate in the correct order', () => {287 const types = [];288 findAllInRenderedTree(tree1, ({ type }) => types.push(type));289 expect(types).toEqual(['section', FunctionalComponent, 'div']);290 });291 it('should work with interpolated text', () => {292 const predicate = jasmine.createSpy('spy');293 const Hello = ({ who }) => <div>Hello, {who}!</div>;294 const tree = <Hello who="world" />;295 render(tree, container);296 expect(predicate).not.toHaveBeenCalled();297 findAllInRenderedTree(tree, predicate);298 expect(predicate).toHaveBeenCalledTimes(5);299 });300 it('should work without class wrappers', () => {301 const predicate = jasmine.createSpy('spy');302 const Hello = ({ who }) => <div>Hello, {who}!</div>;303 const treeWithText = <Hello who="world" />;304 render(treeWithText, container);305 expect(predicate).not.toHaveBeenCalled();306 findAllInRenderedTree(treeWithText, predicate);307 expect(predicate).toHaveBeenCalledTimes(5);308 });309 });310 describe('findAllInVNodeTree', () => {311 const tree2 = (312 <section className="outer">313 <FunctionalComponent />314 </section>315 );316 it('should throw an error when not passed a VNode', () => {317 const errorRegex = /findAllInVNodeTree/;318 const predicate = (vNode) => {319 return true;320 };321 const testValue = (value) => {322 expect(() => {323 findAllInVNodeTree(value, predicate);324 }).toThrowError();325 };326 testValue(render(<div />, container));327 testValue(CreateClassComponent);328 testValue(ExtendClassComponent);329 testValue(FunctionalComponent);330 testValue(createDOMElement('div'));331 testValue(undefined);332 testValue(null);333 testValue('foo');334 testValue({});335 testValue([]);336 testValue(10);337 });338 it('should call predicate for each VNode instance in an non-rendered tree', () => {339 const predicate = jasmine.createSpy('spy');340 findAllInVNodeTree(tree2, (args) => {341 predicate(args.type);342 });343 // 0: section344 // 1: FunctionalComponent345 expect(predicate).toHaveBeenCalledTimes(2);346 expect(predicate).toHaveBeenCalledWith('section');347 expect(predicate).toHaveBeenCalledWith(FunctionalComponent);348 });349 it('should call predicate in the correct order', () => {350 const types = [];351 findAllInVNodeTree(tree2, ({ type }) => types.push(type));352 expect(types).toEqual(['section', FunctionalComponent]);353 });354 });355 describe('scryRenderedDOMElementsWithClass', () => {356 const tree3 = renderIntoContainer(357 <div className="level-1 one">358 <div className="level-2 one">359 <div className="level-3 one" />360 </div>361 <div className="level-2 two">362 <span className="level-3 two" />363 </div>364 </div>365 );366 it('should return an array of matched DOM elements', () => {367 const result1 = scryRenderedDOMElementsWithClass(tree3, 'one');368 expect(result1 instanceof Array).toBeTruthy();369 expect(result1.length).toBe(3);370 result1.forEach((result) => {371 expect(result.tagName).toBe('DIV');372 });373 const result2 = scryRenderedDOMElementsWithClass(tree3, 'two');374 expect(result2 instanceof Array).toBeTruthy();375 expect(result2.length).toBe(2);376 expect(result2[0].tagName).toBe('DIV');377 expect(result2[1].tagName).toBe('SPAN');378 const result3 = scryRenderedDOMElementsWithClass(tree3, 'three');379 expect(result3 instanceof Array).toBeTruthy();380 expect(result3.length).toBe(0);381 });382 it('should accept a space separated string of class names', () => {383 const result1 = scryRenderedDOMElementsWithClass(tree3, 'level-2');384 expect(result1 instanceof Array).toBeTruthy();385 expect(result1.length).toBe(2);386 const result2 = scryRenderedDOMElementsWithClass(tree3, 'level-2 one');387 expect(result2 instanceof Array).toBeTruthy();388 expect(result2.length).toBe(1);389 });390 it('should accept an array of class names', () => {391 const result = scryRenderedDOMElementsWithClass(tree3, ['level-2', 'one']);392 expect(result instanceof Array).toBeTruthy();393 expect(result.length).toBe(1);394 });395 });396 describe('scryRenderedDOMElementsWithTag', () => {397 const tree4 = renderIntoContainer(398 <div>399 <header>400 <h1>Hello</h1>401 </header>402 <section>403 <h1>Hello Again</h1>404 <p>Paragraph 1</p>405 <p>Paragraph 2</p>406 <p>Paragraph 3</p>407 </section>408 </div>409 );410 it('should return an array of matched DOM elements', () => {411 const testValue = (tagName, length, instance) => {412 const result = scryRenderedDOMElementsWithTag(tree4, tagName);413 expect(result instanceof Array).toBeTruthy();414 expect(result.length).toBe(length);415 result.forEach((item) => {416 expect(item.tagName).toBe(tagName.toUpperCase());417 });418 };419 testValue('div', 1);420 testValue('h1', 2);421 testValue('p', 3);422 testValue('span', 0);423 });424 });425 describe('scryRenderedVNodesWithType', () => {426 const tree5 = renderIntoContainer(427 <div>428 <FunctionalComponent />429 <FunctionalComponent />430 <CreateClassComponent />431 <CreateClassComponent />432 <ExtendClassComponent />433 <ExtendClassComponent />434 </div>435 );436 it('should return an array of matched VNodes', () => {437 const testValue = (type, length) => {438 const result = scryRenderedVNodesWithType(tree5, type);439 expect(result instanceof Array).toBeTruthy();440 expect(result.length).toBe(length);441 result.forEach((item) => {442 expect(item instanceof Object).toBeTruthy();443 expect(Object.keys(item).sort()).toEqual(VNodeKeys);444 expect(isVNode(item)).toBe(true);445 });446 };447 testValue('p', 0);448 testValue('div', 7); // Outer div + each rendered component div449 testValue(FunctionalComponent, 2);450 testValue(CreateClassComponent, 2);451 testValue(ExtendClassComponent, 2);452 testValue(AnotherFunctionalComponent, 0);453 });454 });455 describe('scryVNodesWithType', () => {456 const tree6 = (457 <div>458 <FunctionalComponent />459 <FunctionalComponent />460 <CreateClassComponent />461 <CreateClassComponent />462 <ExtendClassComponent />463 <ExtendClassComponent />464 </div>465 );466 it('should return an array of matched VNodes', () => {467 const testValue = (type, length) => {468 const result = scryVNodesWithType(tree6, type);469 expect(result instanceof Array).toBeTruthy();470 expect(result.length).toBe(length);471 result.forEach((item) => {472 expect(item instanceof Object).toBeTruthy();473 expect(Object.keys(item).sort()).toEqual(VNodeKeys);474 expect(isVNode(item)).toBe(true);475 });476 };477 testValue('p', 0);478 testValue('div', 1); // Just the outer div479 testValue(FunctionalComponent, 2);480 testValue(CreateClassComponent, 2);481 testValue(ExtendClassComponent, 2);482 testValue(AnotherFunctionalComponent, 0);483 });484 });485 describe('findRenderedDOMElementWithClass', () => {486 const tree7 = renderIntoContainer(487 <div className="level-1 one">488 <div className="level-2 one">489 <div className="level-3 one" />490 </div>491 <div className="level-2 two">492 <span className="level-3 two" />493 </div>494 </div>495 );496 it('should throw an error when more than one result is found #1', () => {497 const errorRegex = /Did not find exactly one match/;498 const testValue = (classNames) => {499 expect(() => {500 findRenderedDOMElementWithClass(tree7, classNames);501 }).toThrowError();502 };503 testValue('level-2');504 testValue('level-3');505 });506 it('should return a matched DOM element', () => {507 const testValue = (classNames, instance) => {508 const result = findRenderedDOMElementWithClass(tree7, classNames);509 const arrOfClassName = classNames.split(' ');510 for (let i = 0; i < arrOfClassName.length; i++) {511 expect(result.classList.contains(arrOfClassName[i])).toBe(true);512 }513 };514 testValue('level-1');515 testValue('level-2 one');516 testValue('level-3 two');517 });518 it('should be able to handle null elements', () => {519 const NoOp = () => null;520 const Broken = () => (521 <div className="dummy">522 <NoOp />523 </div>524 );525 const renderedTree = renderIntoContainer(<Broken />);526 const dummy = findRenderedDOMElementWithClass(renderedTree, 'dummy');527 expect(dummy.className).toBe('dummy');528 });529 });530 describe('findRenderedDOMElementWithTag', () => {531 const tree8 = renderIntoContainer(532 <div>533 <header>534 <h1>Head1</h1>535 <span>Hello</span>536 </header>537 <section>538 <h1>Hello Again</h1>539 <p>Paragraph 1</p>540 <p>Paragraph 2</p>541 <p>Paragraph 3</p>542 <a>test</a>543 </section>544 </div>545 );546 it('should throw an error when more than one result is found #2', () => {547 const errorRegex = /Did not find exactly one match/;548 const testValue = (tagName) => {549 expect(() => {550 findRenderedDOMElementWithTag(tree8, tagName);551 }).toThrowError();552 };553 testValue('h1');554 testValue('p');555 });556 it('should return a matched DOM element', () => {557 const testValue = (tagName, instance) => {558 const result = findRenderedDOMElementWithTag(tree8, tagName);559 expect(result.tagName).toBe(tagName.toUpperCase());560 };561 testValue('div');562 testValue('span');563 testValue('a');564 });565 });566 describe('findRenderedVNodeWithType', () => {567 const tree9 = renderIntoContainer(568 <div>569 <h1>Hello</h1>570 <FunctionalComponent />571 <FunctionalComponent />572 <CreateClassComponent />573 <ExtendClassComponent />574 </div>575 );576 it('should throw an error when more than one result is found #3', () => {577 const errorRegex = /Did not find exactly one match/;578 const testValue = (type) => {579 expect(() => {580 findRenderedVNodeWithType(tree9, type);581 }).toThrowError();582 };583 testValue('div');584 testValue(FunctionalComponent);585 });586 it('should return a matched VNode #1', () => {587 const testValue = (type) => {588 const result = findRenderedVNodeWithType(tree9, type);589 expect(result instanceof Object).toBeTruthy();590 expect(Object.keys(result).sort()).toEqual(VNodeKeys);591 expect(isVNode(result)).toBe(true);592 expect(result.type).toBe(type);593 };594 testValue('h1');595 testValue(CreateClassComponent);596 testValue(ExtendClassComponent);597 });598 });599 describe('findVNodeWithType', () => {600 const tree10 = (601 <div>602 <div>603 <h1>Hello</h1>604 </div>605 <FunctionalComponent />606 <FunctionalComponent />607 <CreateClassComponent />608 <ExtendClassComponent />609 </div>610 );611 it('should throw an error when more than one result is found #4', () => {612 const errorRegex = /Did not find exactly one match/;613 const testValue = (type) => {614 expect(() => {615 findVNodeWithType(tree10, type);616 }).toThrowError();617 };618 testValue('div');619 testValue(FunctionalComponent);620 });621 it('should return a matched VNode #2', () => {622 const testValue = (type) => {623 const result = findVNodeWithType(tree10, type);624 expect(result instanceof Object).toBeTruthy();625 expect(Object.keys(result).sort()).toEqual(VNodeKeys);626 expect(isVNode(result)).toBe(true);627 expect(result.type).toBe(type);628 };629 testValue('h1');630 testValue(CreateClassComponent);631 testValue(ExtendClassComponent);632 });633 });...
props-util.js
Source: props-util.js
...26 if (Array.isArray(child)) {27 res.push(...flattenChildren(child, filterEmpty));28 } else if (child && child.type === Fragment) {29 res.push(...flattenChildren(child.children, filterEmpty));30 } else if (child && isVNode(child)) {31 if (filterEmpty && !isEmptyElement(child)) {32 res.push(child);33 } else if (!filterEmpty) {34 res.push(child);35 }36 } else if (isValid(child)) {37 res.push(child);38 }39 });40 return res;41};42export const getSlot = (self, name = 'default', options = {}) => {43 if (isVNode(self)) {44 if (self.type === Fragment) {45 return name === 'default' ? flattenChildren(self.children) : [];46 } else if (self.children && self.children[name]) {47 return flattenChildren(self.children[name](options));48 } else {49 return [];50 }51 } else {52 let res = self.$slots[name] && self.$slots[name](options);53 return flattenChildren(res);54 }55};56export const getAllChildren = ele => {57 let componentOptions = ele.componentOptions || {};58 if (ele.$vnode) {59 componentOptions = ele.$vnode.componentOptions || {};60 }61 return ele.children || componentOptions.children || [];62};63export const getOptionProps = instance => {64 const res = {};65 if (instance.$ && instance.$.vnode) {66 const props = instance.$.vnode.props || {};67 Object.keys(instance.$props).forEach(k => {68 const v = instance.$props[k];69 const hyphenateKey = hyphenate(k);70 if (v !== undefined || hyphenateKey in props) {71 res[k] = v; // ç´æ¥å $props[k]72 }73 });74 } else if (isVNode(instance) && typeof instance.type === 'object') {75 const originProps = instance.props || {};76 const props = {};77 Object.keys(originProps).forEach(key => {78 props[camelize(key)] = originProps[key];79 });80 const options = instance.type.props || {};81 Object.keys(options).forEach(k => {82 const v = resolvePropValue(options, props, k, props[k]);83 if (v !== undefined || k in props) {84 res[k] = v;85 }86 });87 }88 return res;89};90export const getComponent = (instance, prop = 'default', options = instance, execute = true) => {91 let com = undefined;92 if (instance.$) {93 const temp = instance[prop];94 if (temp !== undefined) {95 return typeof temp === 'function' && execute ? temp(options) : temp;96 } else {97 com = instance.$slots[prop];98 com = execute && com ? com(options) : com;99 }100 } else if (isVNode(instance)) {101 const temp = instance.props && instance.props[prop];102 if (temp !== undefined && instance.props !== null) {103 return typeof temp === 'function' && execute ? temp(options) : temp;104 } else if (instance.type === Fragment) {105 com = instance.children;106 } else if (instance.children && instance.children[prop]) {107 com = instance.children[prop];108 com = execute && com ? com(options) : com;109 }110 }111 if (Array.isArray(com)) {112 com = flattenChildren(com);113 com = com.length === 1 ? com[0] : com;114 com = com.length === 0 ? undefined : com;115 }116 return com;117};118export function getStyle(ele, camel) {119 const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};120 let style = props.style || {};121 if (typeof style === 'string') {122 style = parseStyleText(style, camel);123 } else if (camel && style) {124 // 驼峰å125 const res = {};126 Object.keys(style).forEach(k => (res[camelize(k)] = style[k]));127 return res;128 }129 return style;130}131export function filterEmpty(children = []) {132 const res = []133 children.forEach(child => {...
index.js
Source: index.js
...18 info(options) {19 Object.assign(this.vm,defaultOptions , options,{20 type:'info'21 });22 if (isVNode(this.vm.msg)) {23 this.vm.$slots.default = [this.vm.msg];24 this.vm.msg = null;25 } else {26 delete this.vm.$slots.default;27 }28 this.idList.push(this.vm._uid);29 document.body.appendChild(this.vm.$el);30 document.body.classList.toggle('hidden');31 return this.vm.confirm();32 }33 warning(options) {34 Object.assign(this.vm,defaultOptions , options,{35 type:'warning'36 });37 if (isVNode(this.vm.msg)) {38 this.vm.$slots.default = [this.vm.msg];39 this.vm.msg = null;40 } else {41 delete this.vm.$slots.default;42 }43 this.idList.push(this.vm._uid);44 document.body.appendChild(this.vm.$el);45 document.body.classList.toggle('hidden');46 return this.vm.confirm();47 }48 confirm(options) {49 debugger;50 /**51 * å®ä¾åç»ä»¶52 * **/53 //const vm = new VueComponent().$mount();54 //å并ææé项55 Object.assign(this.vm,defaultOptions , options,{56 type:'confirm'57 });58 //å¦ææ¯èædomèç¹çè¯é»è®¤å°ä¿¡æ¯å¤å¶ç»æ槽59 if (isVNode(this.vm.msg)) {60 this.vm.$slots.default = [this.vm.msg];61 this.vm.msg = null;62 } else {63 delete this.vm.$slots.default;64 }65 this.idList.push(this.vm._uid);66 document.body.appendChild(this.vm.$el);67 document.body.classList.toggle('hidden');68 //è°ç¨confirmæ¹æ³69 return this.vm.confirm();70 }71 error(options) {72 Object.assign(this.vm,defaultOptions , options,{73 type:'error'74 });75 if (isVNode(this.vm.msg)) {76 this.vm.$slots.default = [this.vm.msg];77 this.vm.msg = null;78 } else {79 delete this.vm.$slots.default;80 }81 this.idList.push(this.vm._uid);82 document.body.appendChild(this.vm.$el);83 document.body.classList.toggle('hidden');84 return this.vm.confirm();85 }86 alert(options) {87 Object.assign(this.vm,defaultOptions , options,{88 type:'alert'89 });90 if (isVNode(this.vm.msg)) {91 this.vm.$slots.default = [this.vm.msg];92 this.vm.msg = null;93 } else {94 delete this.vm.$slots.default;95 }96 this.idList.push(this.vm._uid);97 document.body.appendChild(this.vm.$el);98 document.body.classList.toggle('hidden');99 return this.vm.confirm();100 }101 close() {102 setTimeout(() => {103 document.body.removeChild(document.querySelector(`[data-id='${this.idList.pop()}']`));104 document.body.classList.toggle('hidden');...
main.js
Source: main.js
...18 };19 instance = new NotificationConstructor({20 data: options21 });22 if (isVNode(options.message)) {23 instance.$slots.default = [options.message];24 options.message = 'REPLACED_BY_VNODE';25 }26 instance.id = id;27 instance.$mount();28 document.body.appendChild(instance.$el);29 instance.visible = true;30 instance.dom = instance.$el;31 instance.dom.style.zIndex = PopupManager.nextZIndex();32 let verticalOffset = options.offset || 0;33 instances.filter(item => item.position === position).forEach(item => {34 verticalOffset += item.$el.offsetHeight + 16;35 });36 verticalOffset += 16;37 instance.verticalOffset = verticalOffset;38 instances.push(instance);39 return instance;40};41['success', 'warning', 'info', 'error'].forEach(type => {42 Notification[type] = options => {43 if (typeof options === 'string' || isVNode(options)) {44 options = {45 message: options46 };47 }48 options.type = type;49 return Notification(options);50 };51});52Notification.close = function(id, userOnClose) {53 let index = -1;54 const len = instances.length;55 const instance = instances.filter((instance, i) => {56 if (instance.id === id) {57 index = i;...
render.js
Source: render.js
...19export function _patch(lastVNode, nextVNode) {20 if (!isInvalid(lastVNode)) {21 if (isDOM(lastVNode)) {22 render(nextVNode, lastVNode);23 } else if (isVNode(lastVNode) && isVNode(nextVNode)) {24 if (lastVNode.dom) {25 patch(lastVNode, nextVNode);26 if (lastVNode.parentVNode) {27 assign(lastVNode, nextVNode);28 }29 } else {30 throwError('patch error vNode');31 }32 }33 return nextVNode;34 }35}36export function render(vNode, parentDom) {37 if (document.body === parentDom) {38 warning('you cannot render() to the "document.body". Use an empty element as a container instead.');39 }40 const lastVnode = parentDom.__NeactRootNode;41 if (!lastVnode) {42 if (!isInvalid(vNode) && isVNode(vNode)) {43 mount(vNode, parentDom, null, {});44 parentDom.__NeactRootNode = vNode;45 return vNode._instance || vNode.dom;46 } else {47 throwError('isInvalid VNode');48 }49 } else {50 if (isInvalid(vNode)) {51 unmount(lastVnode, parentDom);52 parentDom.__NeactRootNode = null;53 delete parentDom.__NeactRootNode;54 } else if (isVNode(vNode)) {55 patch(lastVnode, vNode);56 parentDom.__NeactRootNode = vNode;57 return vNode._instance || vNode.dom;58 } else {59 throwError('isInvalid VNode');60 }61 }62}63export function unmountComponentAtNode(dom) {64 if (dom.__NeactRootNode) {65 unmount(dom.__NeactRootNode, dom);66 delete dom.__NeactRootNode;67 }68}69export function findDOMNode(vNode) {70 if (!isInvalid(isVNode)) {71 if (isVNode(vNode)) {72 return vNode.dom;73 } else if (vNode._vNode) {74 return vNode._vNode.dom;75 }76 }77 return null;...
vdom.js
Source: vdom.js
...3var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };4exports.isVNode = isVNode;5exports.getFirstComponentChild = getFirstComponentChild;6var _util = require('element-ui/lib/utils/util');7function isVNode(node) {8 return node !== null && (typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object' && (0, _util.hasOwn)(node, 'componentOptions');9};10function getFirstComponentChild(children) {11 return children && children.filter(function (c) {12 return c && c.tag;13 })[0];...
patch.js
Source: patch.js
1import vnode from './vnode';2import createElement from './createElement';3export default function patch(oldVnode, newVnode){4 if(!isVnode(oldVnode)){5 oldVnode = vnode(oldVnode.tagName.toLowerCase(),{},[],undefined, oldVnode);6 }7 if(sameVnode(oldVnode, newVnode)){8 console.log('ç²¾ç»æ¯è¾')9 }else{10 console.log()11 }12}13function isVnode(vnode){14 if(vnode.sel != '' || vnode.sel == undefined){15 return false;16 }17 return true;18}19function sameVnode(v1, v2){20 return v1.key === v2.key && v1.sel === v2.sel;...
Using AI Code Generation
1const { isVNode } = require('playwright/lib/server/dom.js');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 vNode = await page.evaluateHandle(() => document.querySelector('h1'));8 console.log(isVNode(vNode));9 await browser.close();10})();11const vNode = await page.evaluateHandle(() => document.querySelector('h1'));12const vNode = await page.evaluateHandle(document.querySelector('h1'));13The getUniqueSelector() method can be used as follows:14const vNode = await page.evaluateHandle(() => document.querySelector('h1'));15const uniqueSelector = vNode.getUniqueSelector();16console.log(uniq
Using AI Code Generation
1const { isVNode } = 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 element = await page.$('text=Get started');8 const isElement = isVNode(element);9 console.log(isElement);10 await browser.close();11})();
Using AI Code Generation
1const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');2const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');3const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');4const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');5const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');6const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');7const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');8const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');9const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');10const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');11const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');12const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');13const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');14const { isVNode } = require('playwright/lib/server/supplements/recorder/playwrightInternal');15const { isVNode } = require
Using AI Code Generation
1import { isVNode } from 'playwright/lib/server/frames';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 element = await page.$('text=Get started');8 const isVNode = await page.evaluate(element => element.isVNode, element);9 console.log(isVNode);10 await browser.close();11})();
Using AI Code Generation
1const { isVNode } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3const assert = require('assert').strict;4(async () => {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const input = await page.$('input[name="q"]');9 assert.ok(isVNode(input), 'isVNode(input) is true');10 await browser.close();11})();12The assert.strict.strict() method is used
Using AI Code Generation
1const { isVNode } = require('playwright/lib/server/dom.js');2const { html } = require('playwright/lib/utils/structuredClone.js');3const { isVNode } = require('playwright/lib/server/dom.js');4const { html } = require('playwright/lib/utils/structuredClone.js');5const vNode = html`<div>Test</div>`;6const notVNode = {};7const { isVNode } = require('playwright/lib/server/dom.js');8const { html } = require('playwright/lib/utils/structuredClone.js');9const vNode = html`<div>Test</div>`;10const notVNode = {};11const { isVNode } = require('playwright/lib/server/dom.js');12const { html } = require('playwright/lib/utils/structuredClone.js');13const vNode = html`<div>Test</div>`;14const notVNode = {};15const { isVNode } = require('playwright/lib/server/dom.js');16const { html } = require('playwright/lib/utils/structuredClone.js');17const vNode = html`<div>Test</div>`;18const notVNode = {};19const { isVNode } = require('playwright/lib/server/dom.js');20const { html } = require('playwright/lib/utils/structuredClone.js');21const vNode = html`<div>Test</div>`;22const notVNode = {};23const { isVNode } = require('playwright/lib/server/dom.js');24const { html } = require('playwright/lib/utils/structuredClone.js');25const vNode = html`<div>Test</div>`;26console.log(isVNode(vNode));
Jest + Playwright - Test callbacks of event-based DOM library
firefox browser does not start in playwright
Is it possible to get the selector from a locator object in playwright?
How to run a list of test suites in a single file concurrently in jest?
Running Playwright in Azure Function
firefox browser does not start in playwright
This question is quite close to a "need more focus" question. But let's try to give it some focus:
Does Playwright has access to the cPicker object on the page? Does it has access to the window object?
Yes, you can access both cPicker and the window object inside an evaluate call.
Should I trigger the events from the HTML file itself, and in the callbacks, print in the DOM the result, in some dummy-element, and then infer from that dummy element text that the callbacks fired?
Exactly, or you can assign values to a javascript variable:
const cPicker = new ColorPicker({
onClickOutside(e){
},
onInput(color){
window['color'] = color;
},
onChange(color){
window['result'] = color;
}
})
And then
it('Should call all callbacks with correct arguments', async() => {
await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})
// Wait until the next frame
await page.evaluate(() => new Promise(requestAnimationFrame))
// Act
// Assert
const result = await page.evaluate(() => window['color']);
// Check the value
})
Check out the latest blogs from LambdaTest on this topic:
Native apps are developed specifically for one platform. Hence they are fast and deliver superior performance. They can be downloaded from various app stores and are not accessible through browsers.
One of the essential parts when performing automated UI testing, whether using Selenium or another framework, is identifying the correct web elements the tests will interact with. However, if the web elements are not located correctly, you might get NoSuchElementException in Selenium. This would cause a false negative result because we won’t get to the actual functionality check. Instead, our test will fail simply because it failed to interact with the correct element.
Smartphones have changed the way humans interact with technology. Be it travel, fitness, lifestyle, video games, or even services, it’s all just a few touches away (quite literally so). We only need to look at the growing throngs of smartphone or tablet users vs. desktop users to grasp this reality.
As part of one of my consulting efforts, I worked with a mid-sized company that was looking to move toward a more agile manner of developing software. As with any shift in work style, there is some bewilderment and, for some, considerable anxiety. People are being challenged to leave their comfort zones and embrace a continuously changing, dynamic working environment. And, dare I say it, testing may be the most ‘disturbed’ of the software roles in agile development.
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.
Get 100 minutes of automation test minutes FREE!!