1"use strict";(self.webpackChunkplaywright_dev=self.webpackChunkplaywright_dev||[]).push([["1831"],{96962(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>c,frontMatter:()=>r,contentTitle:()=>o,toc:()=>d,assets:()=>l});var i=JSON.parse('{"id":"events","title":"Events","description":"Introduction","source":"@site/docs/events.mdx","sourceDirName":".","slug":"/events","permalink":"/docs/next/events","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"events","title":"Events"},"sidebar":"docs","previous":{"title":"Evaluating JavaScript","permalink":"/docs/next/evaluating"},"next":{"title":"Extensibility","permalink":"/docs/next/extensibility"}}'),s=n(74848),a=n(28453);n(13554),n(41647),n(83137);let r={id:"events",title:"Events"},o,l={},d=[{value:"Introduction",id:"introduction",level:2},{value:"Waiting for event",id:"waiting-for-event",level:2},{value:"Adding/removing event listener",id:"addingremoving-event-listener",level:2},{value:"Adding one-off listeners",id:"adding-one-off-listeners",level:2}];function p(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h2,{id:"introduction",children:"Introduction"}),"\n",(0,s.jsx)(t.p,{children:"Playwright allows listening to various types of events happening on the web page, such as network requests, creation of child pages, dedicated workers etc. There are several ways to subscribe to such events, such as waiting for events or adding or removing event listeners."}),"\n",(0,s.jsx)(t.h2,{id:"waiting-for-event",children:"Waiting for event"}),"\n",(0,s.jsx)(t.p,{children:"Most of the time, scripts will need to wait for a particular event to happen. Below are some of the typical event awaiting patterns."}),"\n",(0,s.jsxs)(t.p,{children:["Wait for a request with the specified url using ",(0,s.jsx)(t.a,{href:"/docs/next/api/class-page#page-wait-for-request",children:"page.waitForRequest()"}),":"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"// Start waiting for request before goto. Note no await.\nconst requestPromise = page.waitForRequest('**/*logo*.png');\nawait page.goto('https://wikipedia.org');\nconst request = await requestPromise;\nconsole.log(request.url());\n"})}),"\n",(0,s.jsx)(t.p,{children:"Wait for popup window:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"// Start waiting for popup before clicking. Note no await.\nconst popupPromise = page.waitForEvent('popup');\nawait page.getByText('open the popup').click();\nconst popup = await popupPromise;\nawait popup.goto('https://wikipedia.org');\n"})}),"\n",(0,s.jsx)(t.h2,{id:"addingremoving-event-listener",children:"Adding/removing event listener"}),"\n",(0,s.jsx)(t.p,{children:"Sometimes, events happen in random time and instead of waiting for them, they need to be handled. Playwright supports traditional language mechanisms for subscribing and unsubscribing from the events:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"page.on('request', request => console.log(`Request sent: ${request.url()}`));\nconst listener = request => console.log(`Request finished: ${request.url()}`);\npage.on('requestfinished', listener);\nawait page.goto('https://wikipedia.org');\n\npage.off('requestfinished', listener);\nawait page.goto('https://www.openstreetmap.org/');\n"})}),"\n",(0,s.jsx)(t.h2,{id:"adding-one-off-listeners",children:"Adding one-off listeners"}),"\n",(0,s.jsx)(t.p,{children:"If a certain event needs to be handled once, there is a convenience API for that:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"page.once('dialog', dialog => dialog.accept('2021'));\nawait page.evaluate(\"prompt('Enter a number:')\");\n"})})]})}function c(e={}){let{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.