Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use triggerEvent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

on.spec.js

Source:on.spec.js

...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  })...

mouseMove.js

Source:mouseMove.js

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  });...

Using AI Code Generation

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})();

Using AI Code Generation

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](

Using AI Code Generation

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

Using AI Code Generation

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,

Using AI Code Generation

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})();

Using AI Code Generation

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});

Using AI Code Generation

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});

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.