How to use triggerEvent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

on.spec.js

Source:on.spec.js Github

copy

Full Screen

...18 el,19 template: '<div v-on:click="foo"></​div>',20 methods: { foo: spy }21 })22 triggerEvent(vm.$el, 'click')23 expect(spy.calls.count()).toBe(1)24 const args = spy.calls.allArgs()25 const event = args[0] && args[0][0] || {}26 expect(event.type).toBe('click')27 })28 it('should bind event to a inline statement', () => {29 vm = new Vue({30 el,31 template: '<div v-on:click="foo(1,2,3,$event)"></​div>',32 methods: { foo: spy }33 })34 triggerEvent(vm.$el, 'click')35 expect(spy.calls.count()).toBe(1)36 const args = spy.calls.allArgs()37 const firstArgs = args[0]38 expect(firstArgs.length).toBe(4)39 expect(firstArgs[0]).toBe(1)40 expect(firstArgs[1]).toBe(2)41 expect(firstArgs[2]).toBe(3)42 expect(firstArgs[3].type).toBe('click')43 })44 it('should support inline function expression', () => {45 const spy = jasmine.createSpy()46 vm = new Vue({47 el,48 template: `<div class="test" @click="function (e) { log(e.target.className) }"></​div>`,49 methods: {50 log: spy51 }52 }).$mount()53 triggerEvent(vm.$el, 'click')54 expect(spy).toHaveBeenCalledWith('test')55 })56 it('should support shorthand', () => {57 vm = new Vue({58 el,59 template: '<a href="#test" @click.prevent="foo"></​a>',60 methods: { foo: spy }61 })62 triggerEvent(vm.$el, 'click')63 expect(spy.calls.count()).toBe(1)64 })65 it('should support stop propagation', () => {66 vm = new Vue({67 el,68 template: `69 <div @click.stop="foo"></​div>70 `,71 methods: { foo: spy }72 })73 const hash = window.location.hash74 triggerEvent(vm.$el, 'click')75 expect(window.location.hash).toBe(hash)76 })77 it('should support prevent default', () => {78 vm = new Vue({79 el,80 template: `81 <input type="checkbox" ref="input" @click.prevent="foo">82 `,83 methods: {84 foo ($event) {85 spy($event.defaultPrevented)86 }87 }88 })89 vm.$refs.input.checked = false90 triggerEvent(vm.$refs.input, 'click')91 expect(spy).toHaveBeenCalledWith(true)92 })93 it('should support capture', () => {94 const callOrder = []95 vm = new Vue({96 el,97 template: `98 <div @click.capture="foo">99 <div @click="bar"></​div>100 </​div>101 `,102 methods: {103 foo () { callOrder.push(1) },104 bar () { callOrder.push(2) }105 }106 })107 triggerEvent(vm.$el.firstChild, 'click')108 expect(callOrder.toString()).toBe('1,2')109 })110 it('should support once', () => {111 vm = new Vue({112 el,113 template: `114 <div @click.once="foo">115 </​div>116 `,117 methods: { foo: spy }118 })119 triggerEvent(vm.$el, 'click')120 expect(spy.calls.count()).toBe(1)121 triggerEvent(vm.$el, 'click')122 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger123 })124 /​/​ #4655125 it('should handle .once on multiple elements properly', () => {126 vm = new Vue({127 el,128 template: `129 <div>130 <button ref="one" @click.once="foo">one</​button>131 <button ref="two" @click.once="foo">two</​button>132 </​div>133 `,134 methods: { foo: spy }135 })136 triggerEvent(vm.$refs.one, 'click')137 expect(spy.calls.count()).toBe(1)138 triggerEvent(vm.$refs.one, 'click')139 expect(spy.calls.count()).toBe(1)140 triggerEvent(vm.$refs.two, 'click')141 expect(spy.calls.count()).toBe(2)142 triggerEvent(vm.$refs.one, 'click')143 triggerEvent(vm.$refs.two, 'click')144 expect(spy.calls.count()).toBe(2)145 })146 it('should support capture and once', () => {147 const callOrder = []148 vm = new Vue({149 el,150 template: `151 <div @click.capture.once="foo">152 <div @click="bar"></​div>153 </​div>154 `,155 methods: {156 foo () { callOrder.push(1) },157 bar () { callOrder.push(2) }158 }159 })160 triggerEvent(vm.$el.firstChild, 'click')161 expect(callOrder.toString()).toBe('1,2')162 triggerEvent(vm.$el.firstChild, 'click')163 expect(callOrder.toString()).toBe('1,2,2')164 })165 /​/​ #4846166 it('should support once and other modifiers', () => {167 vm = new Vue({168 el,169 template: `<div @click.once.self="foo"><span/​></​div>`,170 methods: { foo: spy }171 })172 triggerEvent(vm.$el.firstChild, 'click')173 expect(spy).not.toHaveBeenCalled()174 triggerEvent(vm.$el, 'click')175 expect(spy).toHaveBeenCalled()176 triggerEvent(vm.$el, 'click')177 expect(spy.calls.count()).toBe(1)178 })179 it('should support keyCode', () => {180 vm = new Vue({181 el,182 template: `<input @keyup.enter="foo">`,183 methods: { foo: spy }184 })185 triggerEvent(vm.$el, 'keyup', e => {186 e.keyCode = 13187 })188 expect(spy).toHaveBeenCalled()189 })190 it('should support automatic key name inference', () => {191 vm = new Vue({192 el,193 template: `<input @keyup.arrow-right="foo">`,194 methods: { foo: spy }195 })196 triggerEvent(vm.$el, 'keyup', e => {197 e.key = 'ArrowRight'198 })199 expect(spy).toHaveBeenCalled()200 })201 /​/​ ctrl, shift, alt, meta202 it('should support system modifers', () => {203 vm = new Vue({204 el,205 template: `206 <div>207 <input ref="ctrl" @keyup.ctrl="foo">208 <input ref="shift" @keyup.shift="foo">209 <input ref="alt" @keyup.alt="foo">210 <input ref="meta" @keyup.meta="foo">211 </​div>212 `,213 methods: { foo: spy }214 })215 triggerEvent(vm.$refs.ctrl, 'keyup')216 expect(spy.calls.count()).toBe(0)217 triggerEvent(vm.$refs.ctrl, 'keyup', e => { e.ctrlKey = true })218 expect(spy.calls.count()).toBe(1)219 triggerEvent(vm.$refs.shift, 'keyup')220 expect(spy.calls.count()).toBe(1)221 triggerEvent(vm.$refs.shift, 'keyup', e => { e.shiftKey = true })222 expect(spy.calls.count()).toBe(2)223 triggerEvent(vm.$refs.alt, 'keyup')224 expect(spy.calls.count()).toBe(2)225 triggerEvent(vm.$refs.alt, 'keyup', e => { e.altKey = true })226 expect(spy.calls.count()).toBe(3)227 triggerEvent(vm.$refs.meta, 'keyup')228 expect(spy.calls.count()).toBe(3)229 triggerEvent(vm.$refs.meta, 'keyup', e => { e.metaKey = true })230 expect(spy.calls.count()).toBe(4)231 })232 it('should support exact modifier', () => {233 vm = new Vue({234 el,235 template: `236 <div>237 <input ref="ctrl" @keyup.exact="foo">238 </​div>239 `,240 methods: { foo: spy }241 })242 triggerEvent(vm.$refs.ctrl, 'keyup')243 expect(spy.calls.count()).toBe(1)244 triggerEvent(vm.$refs.ctrl, 'keyup', e => {245 e.ctrlKey = true246 })247 expect(spy.calls.count()).toBe(1)248 /​/​ should not trigger if has other system modifiers249 triggerEvent(vm.$refs.ctrl, 'keyup', e => {250 e.ctrlKey = true251 e.altKey = true252 })253 expect(spy.calls.count()).toBe(1)254 })255 it('should support system modifiers with exact', () => {256 vm = new Vue({257 el,258 template: `259 <div>260 <input ref="ctrl" @keyup.ctrl.exact="foo">261 </​div>262 `,263 methods: { foo: spy }264 })265 triggerEvent(vm.$refs.ctrl, 'keyup')266 expect(spy.calls.count()).toBe(0)267 triggerEvent(vm.$refs.ctrl, 'keyup', e => {268 e.ctrlKey = true269 })270 expect(spy.calls.count()).toBe(1)271 /​/​ should not trigger if has other system modifiers272 triggerEvent(vm.$refs.ctrl, 'keyup', e => {273 e.ctrlKey = true274 e.altKey = true275 })276 expect(spy.calls.count()).toBe(1)277 })278 it('should support number keyCode', () => {279 vm = new Vue({280 el,281 template: `<input @keyup.13="foo">`,282 methods: { foo: spy }283 })284 triggerEvent(vm.$el, 'keyup', e => {285 e.keyCode = 13286 })287 expect(spy).toHaveBeenCalled()288 })289 it('should support mouse modifier', () => {290 const left = 0291 const middle = 1292 const right = 2293 const spyLeft = jasmine.createSpy()294 const spyMiddle = jasmine.createSpy()295 const spyRight = jasmine.createSpy()296 vm = new Vue({297 el,298 template: `299 <div>300 <div ref="left" @mousedown.left="foo">left</​div>301 <div ref="right" @mousedown.right="foo1">right</​div>302 <div ref="middle" @mousedown.middle="foo2">right</​div>303 </​div>304 `,305 methods: {306 foo: spyLeft,307 foo1: spyRight,308 foo2: spyMiddle309 }310 })311 triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = right })312 triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = middle })313 expect(spyLeft).not.toHaveBeenCalled()314 triggerEvent(vm.$refs.left, 'mousedown', e => { e.button = left })315 expect(spyLeft).toHaveBeenCalled()316 triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = left })317 triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = middle })318 expect(spyRight).not.toHaveBeenCalled()319 triggerEvent(vm.$refs.right, 'mousedown', e => { e.button = right })320 expect(spyRight).toHaveBeenCalled()321 triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = left })322 triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = right })323 expect(spyMiddle).not.toHaveBeenCalled()324 triggerEvent(vm.$refs.middle, 'mousedown', e => { e.button = middle })325 expect(spyMiddle).toHaveBeenCalled()326 })327 it('should support KeyboardEvent.key for built in aliases', () => {328 vm = new Vue({329 el,330 template: `331 <div>332 <input ref="enter" @keyup.enter="foo">333 <input ref="space" @keyup.space="foo">334 <input ref="esc" @keyup.esc="foo">335 <input ref="left" @keyup.left="foo">336 <input ref="delete" @keyup.delete="foo">337 </​div>338 `,339 methods: { foo: spy }340 })341 triggerEvent(vm.$refs.enter, 'keyup', e => { e.key = 'Enter' })342 expect(spy.calls.count()).toBe(1)343 triggerEvent(vm.$refs.space, 'keyup', e => { e.key = ' ' })344 expect(spy.calls.count()).toBe(2)345 triggerEvent(vm.$refs.esc, 'keyup', e => { e.key = 'Escape' })346 expect(spy.calls.count()).toBe(3)347 triggerEvent(vm.$refs.left, 'keyup', e => { e.key = 'ArrowLeft' })348 expect(spy.calls.count()).toBe(4)349 triggerEvent(vm.$refs.delete, 'keyup', e => { e.key = 'Backspace' })350 expect(spy.calls.count()).toBe(5)351 triggerEvent(vm.$refs.delete, 'keyup', e => { e.key = 'Delete' })352 expect(spy.calls.count()).toBe(6)353 })354 it('should support custom keyCode', () => {355 Vue.config.keyCodes.test = 1356 vm = new Vue({357 el,358 template: `<input @keyup.test="foo">`,359 methods: { foo: spy }360 })361 triggerEvent(vm.$el, 'keyup', e => {362 e.keyCode = 1363 })364 expect(spy).toHaveBeenCalled()365 Vue.config.keyCodes = Object.create(null)366 })367 it('should override built-in keyCode', () => {368 Vue.config.keyCodes.up = [1, 87]369 vm = new Vue({370 el,371 template: `<input @keyup.up="foo" @keyup.down="foo">`,372 methods: { foo: spy }373 })374 triggerEvent(vm.$el, 'keyup', e => {375 e.keyCode = 87376 })377 expect(spy).toHaveBeenCalled()378 triggerEvent(vm.$el, 'keyup', e => {379 e.keyCode = 1380 })381 expect(spy).toHaveBeenCalledTimes(2)382 /​/​ should not affect built-in down keycode383 triggerEvent(vm.$el, 'keyup', e => {384 e.keyCode = 40385 })386 expect(spy).toHaveBeenCalledTimes(3)387 Vue.config.keyCodes = Object.create(null)388 })389 it('should bind to a child component', () => {390 vm = new Vue({391 el,392 template: '<bar @custom="foo"></​bar>',393 methods: { foo: spy },394 components: {395 bar: {396 template: '<span>Hello</​span>'397 }398 }399 })400 vm.$children[0].$emit('custom', 'foo', 'bar')401 expect(spy).toHaveBeenCalledWith('foo', 'bar')402 })403 it('should be able to bind native events for a child component', () => {404 vm = new Vue({405 el,406 template: '<bar @click.native="foo"></​bar>',407 methods: { foo: spy },408 components: {409 bar: {410 template: '<span>Hello</​span>'411 }412 }413 })414 vm.$children[0].$emit('click')415 expect(spy).not.toHaveBeenCalled()416 triggerEvent(vm.$children[0].$el, 'click')417 expect(spy).toHaveBeenCalled()418 })419 it('should throw a warning if native modifier is used on native HTML element', () => {420 vm = new Vue({421 el,422 template: `423 <button @click.native="foo"></​button>424 `,425 methods: { foo: spy },426 })427 triggerEvent(vm.$el, 'click')428 expect(`The .native modifier for v-on is only valid on components but it was used on <button>.`).toHaveBeenWarned()429 expect(spy.calls.count()).toBe(0)430 })431 it('.once modifier should work with child components', () => {432 vm = new Vue({433 el,434 template: '<bar @custom.once="foo"></​bar>',435 methods: { foo: spy },436 components: {437 bar: {438 template: '<span>Hello</​span>'439 }440 }441 })442 vm.$children[0].$emit('custom')443 expect(spy.calls.count()).toBe(1)444 vm.$children[0].$emit('custom')445 expect(spy.calls.count()).toBe(1) /​/​ should not be called again446 })447 it('remove listener', done => {448 const spy2 = jasmine.createSpy('remove listener')449 vm = new Vue({450 el,451 methods: { foo: spy, bar: spy2 },452 data: {453 ok: true454 },455 render (h) {456 return this.ok457 ? h('input', { on: { click: this.foo }})458 : h('input', { on: { input: this.bar }})459 }460 })461 triggerEvent(vm.$el, 'click')462 expect(spy.calls.count()).toBe(1)463 expect(spy2.calls.count()).toBe(0)464 vm.ok = false465 waitForUpdate(() => {466 triggerEvent(vm.$el, 'click')467 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger468 triggerEvent(vm.$el, 'input')469 expect(spy2.calls.count()).toBe(1)470 }).then(done)471 })472 it('remove capturing listener', done => {473 const spy2 = jasmine.createSpy('remove listener')474 vm = new Vue({475 el,476 methods: { foo: spy, bar: spy2, stopped (ev) { ev.stopPropagation() } },477 data: {478 ok: true479 },480 render (h) {481 return this.ok482 ? h('div', { on: { '!click': this.foo }}, [h('div', { on: { click: this.stopped }})])483 : h('div', { on: { mouseOver: this.bar }}, [h('div')])484 }485 })486 triggerEvent(vm.$el.firstChild, 'click')487 expect(spy.calls.count()).toBe(1)488 expect(spy2.calls.count()).toBe(0)489 vm.ok = false490 waitForUpdate(() => {491 triggerEvent(vm.$el.firstChild, 'click')492 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger493 triggerEvent(vm.$el, 'mouseOver')494 expect(spy2.calls.count()).toBe(1)495 }).then(done)496 })497 it('remove once listener', done => {498 const spy2 = jasmine.createSpy('remove listener')499 vm = new Vue({500 el,501 methods: { foo: spy, bar: spy2 },502 data: {503 ok: true504 },505 render (h) {506 return this.ok507 ? h('input', { on: { '~click': this.foo }})508 : h('input', { on: { input: this.bar }})509 }510 })511 triggerEvent(vm.$el, 'click')512 expect(spy.calls.count()).toBe(1)513 triggerEvent(vm.$el, 'click')514 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger515 expect(spy2.calls.count()).toBe(0)516 vm.ok = false517 waitForUpdate(() => {518 triggerEvent(vm.$el, 'click')519 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger520 triggerEvent(vm.$el, 'input')521 expect(spy2.calls.count()).toBe(1)522 }).then(done)523 })524 it('remove capturing and once listener', done => {525 const spy2 = jasmine.createSpy('remove listener')526 vm = new Vue({527 el,528 methods: { foo: spy, bar: spy2, stopped (ev) { ev.stopPropagation() } },529 data: {530 ok: true531 },532 render (h) {533 return this.ok534 ? h('div', { on: { '~!click': this.foo }}, [h('div', { on: { click: this.stopped }})])535 : h('div', { on: { mouseOver: this.bar }}, [h('div')])536 }537 })538 triggerEvent(vm.$el.firstChild, 'click')539 expect(spy.calls.count()).toBe(1)540 triggerEvent(vm.$el.firstChild, 'click')541 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger542 expect(spy2.calls.count()).toBe(0)543 vm.ok = false544 waitForUpdate(() => {545 triggerEvent(vm.$el.firstChild, 'click')546 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger547 triggerEvent(vm.$el, 'mouseOver')548 expect(spy2.calls.count()).toBe(1)549 }).then(done)550 })551 it('remove listener on child component', done => {552 const spy2 = jasmine.createSpy('remove listener')553 vm = new Vue({554 el,555 methods: { foo: spy, bar: spy2 },556 data: {557 ok: true558 },559 components: {560 test: {561 template: '<div></​div>'562 }563 },564 render (h) {565 return this.ok566 ? h('test', { on: { foo: this.foo }})567 : h('test', { on: { bar: this.bar }})568 }569 })570 vm.$children[0].$emit('foo')571 expect(spy.calls.count()).toBe(1)572 expect(spy2.calls.count()).toBe(0)573 vm.ok = false574 waitForUpdate(() => {575 vm.$children[0].$emit('foo')576 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger577 vm.$children[0].$emit('bar')578 expect(spy2.calls.count()).toBe(1)579 }).then(done)580 })581 it('warn missing handlers', () => {582 vm = new Vue({583 el,584 data: { none: null },585 template: `<div @click="none"></​div>`586 })587 expect(`Invalid handler for event "click": got null`).toHaveBeenWarned()588 expect(() => {589 triggerEvent(vm.$el, 'click')590 }).not.toThrow()591 })592 /​/​ Github Issue #5046593 it('should support keyboard modifier for direction keys', () => {594 const spyLeft = jasmine.createSpy()595 const spyRight = jasmine.createSpy()596 const spyUp = jasmine.createSpy()597 const spyDown = jasmine.createSpy()598 vm = new Vue({599 el,600 template: `601 <div>602 <input ref="left" @keydown.left="foo"></​input>603 <input ref="right" @keydown.right="foo1"></​input>604 <input ref="up" @keydown.up="foo2"></​input>605 <input ref="down" @keydown.down="foo3"></​input>606 </​div>607 `,608 methods: {609 foo: spyLeft,610 foo1: spyRight,611 foo2: spyUp,612 foo3: spyDown613 }614 })615 triggerEvent(vm.$refs.left, 'keydown', e => { e.keyCode = 37 })616 triggerEvent(vm.$refs.left, 'keydown', e => { e.keyCode = 39 })617 triggerEvent(vm.$refs.right, 'keydown', e => { e.keyCode = 39 })618 triggerEvent(vm.$refs.right, 'keydown', e => { e.keyCode = 38 })619 triggerEvent(vm.$refs.up, 'keydown', e => { e.keyCode = 38 })620 triggerEvent(vm.$refs.up, 'keydown', e => { e.keyCode = 37 })621 triggerEvent(vm.$refs.down, 'keydown', e => { e.keyCode = 40 })622 triggerEvent(vm.$refs.down, 'keydown', e => { e.keyCode = 39 })623 expect(spyLeft.calls.count()).toBe(1)624 expect(spyRight.calls.count()).toBe(1)625 expect(spyUp.calls.count()).toBe(1)626 expect(spyDown.calls.count()).toBe(1)627 })628 /​/​ This test case should only run when the test browser supports passive.629 if (supportsPassive) {630 it('should support passive', () => {631 vm = new Vue({632 el,633 template: `634 <div>635 <input type="checkbox" ref="normal" @click="foo"/​>636 <input type="checkbox" ref="passive" @click.passive="foo"/​>637 <input type="checkbox" ref="exclusive" @click.prevent.passive/​>638 </​div>639 `,640 methods: {641 foo (e) {642 e.preventDefault()643 }644 }645 })646 vm.$refs.normal.checked = false647 vm.$refs.passive.checked = false648 vm.$refs.exclusive.checked = false649 vm.$refs.normal.click()650 vm.$refs.passive.click()651 vm.$refs.exclusive.click()652 expect(vm.$refs.normal.checked).toBe(false)653 expect(vm.$refs.passive.checked).toBe(true)654 expect(vm.$refs.exclusive.checked).toBe(true)655 expect('passive and prevent can\'t be used together. Passive handler can\'t prevent default event.').toHaveBeenWarned()656 })657 }658 /​/​ GitHub Issues #5146659 it('should only prevent when match keycode', () => {660 let prevented = false661 vm = new Vue({662 el,663 template: `664 <input ref="input" @keydown.enter.prevent="foo">665 `,666 methods: {667 foo ($event) {668 prevented = $event.defaultPrevented669 }670 }671 })672 triggerEvent(vm.$refs.input, 'keydown', e => { e.keyCode = 32 })673 expect(prevented).toBe(false)674 triggerEvent(vm.$refs.input, 'keydown', e => { e.keyCode = 13 })675 expect(prevented).toBe(true)676 })677 it('should transform click.right to contextmenu', () => {678 const spy = jasmine.createSpy('click.right')679 const vm = new Vue({680 template: `<div @click.right="foo"></​div>`,681 methods: { foo: spy }682 }).$mount()683 triggerEvent(vm.$el, 'contextmenu')684 expect(spy).toHaveBeenCalled()685 })686 it('should transform click.middle to mouseup', () => {687 const spy = jasmine.createSpy('click.middle')688 vm = new Vue({689 el,690 template: `<div @click.middle="foo"></​div>`,691 methods: { foo: spy }692 })693 triggerEvent(vm.$el, 'mouseup', e => { e.button = 0 })694 expect(spy).not.toHaveBeenCalled()695 triggerEvent(vm.$el, 'mouseup', e => { e.button = 1 })696 expect(spy).toHaveBeenCalled()697 })698 it('object syntax (no argument)', () => {699 const click = jasmine.createSpy('click')700 const mouseup = jasmine.createSpy('mouseup')701 vm = new Vue({702 el,703 template: `<button v-on="listeners">foo</​button>`,704 created () {705 this.listeners = {706 click,707 mouseup708 }709 }710 })711 triggerEvent(vm.$el, 'click')712 expect(click.calls.count()).toBe(1)713 expect(mouseup.calls.count()).toBe(0)714 triggerEvent(vm.$el, 'mouseup')715 expect(click.calls.count()).toBe(1)716 expect(mouseup.calls.count()).toBe(1)717 })718 it('object syntax (no argument, mixed with normal listeners)', () => {719 const click1 = jasmine.createSpy('click1')720 const click2 = jasmine.createSpy('click2')721 const mouseup = jasmine.createSpy('mouseup')722 vm = new Vue({723 el,724 template: `<button v-on="listeners" @click="click2">foo</​button>`,725 created () {726 this.listeners = {727 click: click1,728 mouseup729 }730 },731 methods: {732 click2733 }734 })735 triggerEvent(vm.$el, 'click')736 expect(click1.calls.count()).toBe(1)737 expect(click2.calls.count()).toBe(1)738 expect(mouseup.calls.count()).toBe(0)739 triggerEvent(vm.$el, 'mouseup')740 expect(click1.calls.count()).toBe(1)741 expect(click2.calls.count()).toBe(1)742 expect(mouseup.calls.count()).toBe(1)743 })744 it('object syntax (usage in HOC, mixed with native listeners)', () => {745 const click = jasmine.createSpy('click')746 const mouseup = jasmine.createSpy('mouseup')747 const mousedown = jasmine.createSpy('mousedown')748 vm = new Vue({749 el,750 template: `751 <foo-button752 @click="click"753 @mousedown="mousedown"754 @mouseup.native="mouseup">755 </​foo-button>756 `,757 methods: {758 click,759 mouseup,760 mousedown761 },762 components: {763 fooButton: {764 template: `765 <button v-on="$listeners"></​button>766 `767 }768 }769 })770 triggerEvent(vm.$el, 'click')771 expect(click.calls.count()).toBe(1)772 expect(mouseup.calls.count()).toBe(0)773 expect(mousedown.calls.count()).toBe(0)774 triggerEvent(vm.$el, 'mouseup')775 expect(click.calls.count()).toBe(1)776 expect(mouseup.calls.count()).toBe(1)777 expect(mousedown.calls.count()).toBe(0)778 triggerEvent(vm.$el, 'mousedown')779 expect(click.calls.count()).toBe(1)780 expect(mouseup.calls.count()).toBe(1)781 expect(mousedown.calls.count()).toBe(1)782 })783 /​/​ #6805 (v-on="object" bind order problem)784 it('object syntax (no argument): should fire after high-priority listeners', done => {785 const MyCheckbox = {786 template: '<input type="checkbox" v-model="model" v-on="$listeners">',787 props: {788 value: false789 },790 computed: {791 model: {792 get () {793 return this.value794 },795 set (val) {796 this.$emit('input', val)797 }798 }799 }800 }801 vm = new Vue({802 el,803 template: `804 <div>805 <my-checkbox v-model="check" @change="change"></​my-checkbox>806 </​div>807 `,808 components: { MyCheckbox },809 data: {810 check: false811 },812 methods: {813 change () {814 expect(this.check).toBe(true)815 done()816 }817 }818 })819 vm.$el.querySelector('input').click()820 })821 it('warn object syntax with modifier', () => {822 new Vue({823 template: `<button v-on.self="{}"></​button>`824 }).$mount()825 expect(`v-on without argument does not support modifiers`).toHaveBeenWarned()826 })827 it('warn object syntax with non-object value', () => {828 new Vue({829 template: `<button v-on="123"></​button>`830 }).$mount()831 expect(`v-on without argument expects an Object value`).toHaveBeenWarned()832 })833 it('should correctly remove once listener', done => {834 const vm = new Vue({835 template: `836 <div>837 <span v-if="ok" @click.once="foo">838 a839 </​span>840 <span v-else a="a">841 b842 </​span>843 </​div>844 `,845 data: {846 ok: true847 },848 methods: {849 foo: spy850 }851 }).$mount()852 vm.ok = false853 waitForUpdate(() => {854 triggerEvent(vm.$el.childNodes[0], 'click')855 expect(spy.calls.count()).toBe(0)856 }).then(done)857 })858 /​/​ #7628859 it('handler should return the return value of inline function invocation', () => {860 let value861 new Vue({862 template: `<test @foo="bar()"></​test>`,863 methods: {864 bar() {865 return 1866 }867 },868 components: {869 test: {870 created() {871 value = this.$listeners.foo()872 },873 render(h) {874 return h('div')875 }876 }877 }878 }).$mount()879 expect(value).toBe(1)880 })881 describe('dynamic arguments', () => {882 it('basic', done => {883 const spy = jasmine.createSpy()884 const vm = new Vue({885 template: `<div v-on:[key]="spy"></​div>`,886 data: {887 key: 'click'888 },889 methods: {890 spy891 }892 }).$mount()893 triggerEvent(vm.$el, 'click')894 expect(spy.calls.count()).toBe(1)895 vm.key = 'mouseup'896 waitForUpdate(() => {897 triggerEvent(vm.$el, 'click')898 expect(spy.calls.count()).toBe(1)899 triggerEvent(vm.$el, 'mouseup')900 expect(spy.calls.count()).toBe(2)901 /​/​ explicit null value902 vm.key = null903 }).then(() => {904 triggerEvent(vm.$el, 'click')905 expect(spy.calls.count()).toBe(2)906 triggerEvent(vm.$el, 'mouseup')907 expect(spy.calls.count()).toBe(2)908 }).then(done)909 })910 it('shorthand', done => {911 const spy = jasmine.createSpy()912 const vm = new Vue({913 template: `<div @[key]="spy"></​div>`,914 data: {915 key: 'click'916 },917 methods: {918 spy919 }920 }).$mount()921 triggerEvent(vm.$el, 'click')922 expect(spy.calls.count()).toBe(1)923 vm.key = 'mouseup'924 waitForUpdate(() => {925 triggerEvent(vm.$el, 'click')926 expect(spy.calls.count()).toBe(1)927 triggerEvent(vm.$el, 'mouseup')928 expect(spy.calls.count()).toBe(2)929 }).then(done)930 })931 it('with .middle modifier', () => {932 const spy = jasmine.createSpy()933 const vm = new Vue({934 template: `<div @[key].middle="spy"></​div>`,935 data: {936 key: 'click'937 },938 methods: {939 spy940 }941 }).$mount()942 triggerEvent(vm.$el, 'mouseup', e => { e.button = 0 })943 expect(spy).not.toHaveBeenCalled()944 triggerEvent(vm.$el, 'mouseup', e => { e.button = 1 })945 expect(spy).toHaveBeenCalled()946 })947 it('with .right modifier', () => {948 const spy = jasmine.createSpy()949 const vm = new Vue({950 template: `<div @[key].right="spy"></​div>`,951 data: {952 key: 'click'953 },954 methods: {955 spy956 }957 }).$mount()958 triggerEvent(vm.$el, 'contextmenu')959 expect(spy).toHaveBeenCalled()960 })961 it('with .capture modifier', () => {962 const callOrder = []963 const vm = new Vue({964 template: `965 <div @[key].capture="foo">966 <div @[key]="bar"></​div>967 </​div>968 `,969 data: {970 key: 'click'971 },972 methods: {973 foo () { callOrder.push(1) },974 bar () { callOrder.push(2) }975 }976 }).$mount()977 triggerEvent(vm.$el.firstChild, 'click')978 expect(callOrder.toString()).toBe('1,2')979 })980 it('with .once modifier', () => {981 const vm = new Vue({982 template: `<div @[key].once="foo"></​div>`,983 data: { key: 'click' },984 methods: { foo: spy }985 }).$mount()986 triggerEvent(vm.$el, 'click')987 expect(spy.calls.count()).toBe(1)988 triggerEvent(vm.$el, 'click')989 expect(spy.calls.count()).toBe(1) /​/​ should no longer trigger990 })991 })...

Full Screen

Full Screen

mouseMove.js

Source:mouseMove.js Github

copy

Full Screen

1import triggerEvent from './​triggerEvent';2export function moveX(target, src, to, y = 25, noMouseUp = false) {3 const delta = src > to ? -1 : 1;4 triggerEvent(target, 'mousedown', {5 clientX: src,6 clientY: y,7 offset: {8 left: 1,9 top: 110 }11 });12 triggerEvent(target, 'mousemove', {13 clientX: src + delta,14 clientY: y15 });16 var dragging = document.querySelector('.ui-sortable-dragging');17 if (!dragging) {18 return;19 }20 triggerEvent(dragging, 'mousemove', {21 clientX: to,22 clientY: y23 });24 triggerEvent(dragging, 'mousemove', {25 clientX: to + delta,26 clientY: y27 });28 !noMouseUp && triggerEvent(target, 'mouseup', {29 clientX: to + delta,30 clientY: y31 });32}33export function moveY(target, src, to, x = 25, noMouseUp = false) {34 const delta = src > to ? -1 : 1;35 triggerEvent(target, 'mousedown', {36 clientX: x,37 clientY: src,38 offset: {39 left: 1,40 top: 141 }42 });43 triggerEvent(target, 'mousemove', {44 clientY: src + (-delta),45 clientX: x46 });47 triggerEvent(target, 'mousemove', {48 clientY: src + (-delta),49 clientX: x50 });51 var dragging = document.querySelector('.ui-sortable-dragging');52 if (!dragging) {53 return;54 }55 triggerEvent(dragging, 'mousemove', {56 clientX: x,57 clientY: to58 });59 triggerEvent(dragging, 'mousemove', {60 clientX: x,61 clientY: to + delta62 });63 !noMouseUp && triggerEvent(target, 'mouseup', {64 clientX: x,65 clientY: to + delta66 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text="I agree"');7 await page.click('input[name="q"]');8 await page.keyboard.type('Playwright');9 await page.keyboard.press('Enter');10 await page.waitForSelector('text="Playwright - Google Search"');11 await page.click('text="Playwright - Google Search"');12 await page.waitForSelector('text="Playwright"');13 await page.click('text="Playwright"');14 await page.waitForSelector('text="Playwright"');15 await page.click('text="Playwright"');16 await page.waitForSelector('text="Playwright"');17 await page.click('text="Playwright"');18 await page.waitForSelector('text="Playwright"');19 await page.click('text="Playwright"');20 await page.waitForSelector('text="Playwright"');21 await page.click('text="Playwright"');22 await page.waitForSelector('text="Playwright"');23 await page.click('text="Playwright"');24 await page.waitForSelector('text="Playwright"');25 await page.click('text="Playwright"');26 await page.waitForSelector('text="Playwright"');27 await page.click('text="Playwright"');28 await page.waitForSelector('text="Playwright"');29 await page.click('text="Playwright"');30 await page.waitForSelector('text="Playwright"');31 await page.click('text="Playwright"');32 await page.waitForSelector('text="Playwright"');33 await page.click('text="Playwright"');34 await page.waitForSelector('text="Playwright"');35 await page.click('text="Playwright"');36 await page.screenshot({ path: `test.png` });37 await browser.close();38})();

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 page = await browser.newPage();5 await page.waitForSelector('text=Get started');6 const element = await page.$('text=Get started');7 await element.evaluate(element => element.dispatchEvent(new Event('hover', { bubbles: true })));8 await page.screenshot({ path: 'hover.png' });9 await browser.close();10})();11- [Playwright Internal API](

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 page = await browser.newPage();5 await page.waitForSelector('input[name="q"]');6 await page.fill('input[name="q"]', 'Playwright');7 await page.keyboard.press('Enter');8 await page.waitForSelector('text=Playwright');9 await page.click('text=Playwright');10 await page.waitForSelector('text=Playwright is a Node library to automate');11 await page.click('text=Pla

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const fs = require('fs');3(async () => {4 const browser = await chromium.launch({5 });6 const context = await browser.newContext();7 const page = await context.newPage();8 await page.fill('input[name="q"]', 'Playwright');9 await page.keyboard.press('Enter');10 await page.waitForSelector('text=Playwright is an open-source Node.js library to automate Chromium, Firefox and WebKit with a single API.');11 await page.click('text=Playwright is an open-source Node.js library to automate Chromium, Firefox and WebKit with a single API.');12 await page.waitForSelector('text=Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');13 await page.click('text=Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');14 await page.waitForSelector('text=Playwright is an open-source Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');15 await page.click('text=Playwright is an open-source Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');16 await page.waitForSelector('text=Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');17 await page.click('text=Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.');18 await page.waitForSelector('text=Playwright is an open-source Node.js library to automate Chromium, Firefox and WebKit with a single API.');19 await page.click('text=Playwright is an open-source Node.js library to automate Chromium,

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium, webkit, devices } = require('playwright');2const iPhone11 = devices['iPhone 11 Pro'];3(async () => {4 const browser = await chromium.launch({headless: false, slowMo: 500});5 const page = await browser.newPage();6 await page.click('text=Accept & continue');7 await page.click('input#sb_form_q');8 await page.type('input#sb_form_q', 'Playwright');9 await page.click('input#sb_form_go');10 await page.waitForSelector('text=Playwright');11 await page.click('text=Playwright');12 await page.waitForSelector('text=Playwright is a Node.js library to automate');13 await page.click('text=Playwright is a Node.js library to automate');14 await page.waitForSelector('text=Playwright is a Node.js library to automate');15 await page.click('text=Playwright is a Node.js library to automate');16 await page.waitForSelector('text=Playwright is a Node.js library to automate');17 await page.click('text=Playwright is a Node.js library to automate');18 await page.waitForSelector('text=Playwright is a Node.js library to automate');19 await page.click('text=Playwright is a Node.js library to automate');20 await page.waitForSelector('text=Playwright is a Node.js library to automate');21 await page.click('text=Playwright is a Node.js library to automate');22 await page.waitForSelector('text=Playwright is a Node.js library to automate');23 await page.click('text=Playwright is a Node.js library to automate');24 await page.waitForSelector('text=Playwright is a Node.js library to automate');25 await page.click('text=Playwright is a Node.js library to automate');26 await page.waitForSelector('text=Playwright is a Node.js library to automate');27 await page.click('text=Playwright is a Node.js library to automate');28 await page.waitForSelector('text=Playwright is a Node.js library to automate');29 await page.click('text=Playwright is a Node.js library to automate');30 await page.waitForSelector('text=Playwright is a Node.js library to automate');31 await page.click('text=Playwright is a Node.js library to automate');32 await browser.close();33})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { test, expect } = require('@playwright/​test');2test('test', async ({ page }) => {3 await page.evaluate(() => {4 const event = new Event('keydown');5 event.key = 'Enter';6 document.querySelector('input[name="q"]').dispatchEvent(event);7 });8});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { triggerEvent } = require('@playwright/​test/​lib/​server/​chromium/​crNetworkManager');2await triggerEvent('request', {3 headers: {},4 request: {5 headers: {},6 },7 response: {8 headers: {},9 timing: {10 },11 securityDetails: {12 },13 },14});

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