browser: implement page.on('requestfinished') event handler (#5486)

Author: pkalsi97

examples/browser/pageon-requestfinished.js

@@ -0,0 +1,41 @@
+import { browser } from 'k6/browser'
+
+export const options = {
+	scenarios: {
+		ui: {
+			executor: 'shared-iterations',
+			options: {
+				browser: {
+					type: 'chromium',
+				},
+			},
+		},
+	},
+}
+
+export default async function () {
+	const page = await browser.newPage()
+
+	// Track all completed requests
+	const finishedRequests = []
+
+	page.on('requestfinished', request => {
+		finishedRequests.push({
+			url: request.url(),
+			method: request.method(),
+			resourceType: request.resourceType(),
+		})
+
+		console.log(`✓ Request finished: ${request.method()} ${request.url()}`)
+	})
+
+	await page.goto('https://quickpizza.grafana.com/', { waitUntil: 'networkidle' })
+
+	console.log(`Total requests completed: ${finishedRequests.length}`)
+
+	// Log all API requests
+	const apiRequests = finishedRequests.filter(r => r.url.includes('/api/'))
+	console.log(`API requests: ${apiRequests.length}`)
+
+	await page.close()
+}

internal/js/modules/k6/browser/browser/page_mapping.go

@@ -738,10 +738,11 @@ func mapPageOn(vu moduleVU, p *common.Page) func(common.PageEventName, sobek.Cal
 			mapp func(vu moduleVU, event common.PageEvent) mapping
 			wait bool // Whether to wait for the handler to complete.
 		}{
-			common.PageEventConsole:  {mapp: mapConsoleMessage},
-			common.PageEventMetric:   {mapp: mapMetricEvent, wait: true},
-			common.PageEventRequest:  {mapp: mapRequestEvent},
-			common.PageEventResponse: {mapp: mapResponseEvent},
+			common.PageEventConsole:         {mapp: mapConsoleMessage},
+			common.PageEventMetric:          {mapp: mapMetricEvent, wait: true},
+			common.PageEventRequest:         {mapp: mapRequestEvent},
+			common.PageEventResponse:        {mapp: mapResponseEvent},
+			common.PageEventRequestFinished: {mapp: mapRequestEvent},
 		}
 		pageEvent, ok := pageEvents[eventName]
 		if !ok {

internal/js/modules/k6/browser/common/network_manager.go

@@ -49,6 +49,7 @@ type eventInterceptor interface {
 	urlTagName(urlTag string, method string) (string, bool)
 	onRequest(request *Request)
 	onResponse(response *Response)
+	onRequestFinished(request *Request)
 }
 
 // NetworkManager manages all frames in HTML document.
@@ -436,6 +437,7 @@ func (m *NetworkManager) onLoadingFinished(event *network.EventLoadingFinished)
 	req.responseEndTiming = float64(event.Timestamp.Time().Unix()-req.timestamp.Unix()) * 1000
 	m.deleteRequestByID(event.RequestID)
 	m.frameManager.requestFinished(req)
+	m.eventInterceptor.onRequestFinished(req)
 
 	// Skip data and blob URLs when emitting metrics, since they're internal to the browser.
 	if isInternalURL(req.url) {

internal/js/modules/k6/browser/common/network_manager_test.go

@@ -223,6 +223,8 @@ func (m *EventInterceptorMock) onRequest(_ *Request) {}
 
 func (m *EventInterceptorMock) onResponse(_ *Response) {}
 
+func (m *EventInterceptorMock) onRequestFinished(_ *Request) {}
+
 func TestNetworkManagerEmitRequestResponseMetricsTimingSkew(t *testing.T) {
 	t.Parallel()
 

internal/js/modules/k6/browser/common/page.go

@@ -48,6 +48,9 @@ const (
 
 	// PageEventResponse represents the page response event.
 	PageEventResponse PageEventName = "response"
+
+	// PageEventRequestFinished represents the page request finished event.
+	PageEventRequestFinished PageEventName = "requestfinished"
 )
 
 // PageEventHandler is a function type that handles a page on event.
@@ -508,6 +511,16 @@ func (p *Page) onResponse(resp *Response) {
 	}
 }
 
+// onRequestFinished calls [PageEventRequestFinished] handlers when a request completes successfully.
+func (p *Page) onRequestFinished(request *Request) {
+	for handle := range p.eventHandlersByName(PageEventRequestFinished) {
+		if err := handle(PageEvent{Request: request}); err != nil {
+			p.logger.Warnf("onRequestFinished", "handler returned an error: %v", err)
+			return
+		}
+	}
+}
+
 func (p *Page) onConsoleAPICalled(event *runtime.EventConsoleAPICalled) {
 	if !p.hasEventHandler(PageEventConsole) {
 		return

internal/js/modules/k6/browser/tests/page_test.go

@@ -2809,6 +2809,115 @@ func TestPageOnResponse(t *testing.T) {
 	}
 }
 
+// TestPageOnRequestFinished tests that the requestfinished event fires when requests complete successfully.
+func TestPageOnRequestFinished(t *testing.T) {
+	t.Parallel()
+
+	tb := newTestBrowser(t, withHTTPServer())
+	tb.withHandler("/home", func(w http.ResponseWriter, _ *http.Request) {
+		_, err := fmt.Fprintf(w, `<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+    <script>fetch('/api', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({name: 'tester'})
+    })</script>
+</body>
+</html>`)
+		require.NoError(t, err)
+	})
+	tb.withHandler("/api", func(w http.ResponseWriter, r *http.Request) {
+		body, err := io.ReadAll(r.Body)
+		require.NoError(t, err)
+		defer require.NoError(t, r.Body.Close())
+
+		var data struct {
+			Name string `json:"name"`
+		}
+		err = json.Unmarshal(body, &data)
+		require.NoError(t, err)
+
+		w.Header().Set("Content-Type", "application/json")
+		_, err = fmt.Fprintf(w, `{"message": "Hello %s!"}`, data.Name)
+		require.NoError(t, err)
+	})
+	tb.withHandler("/style.css", func(w http.ResponseWriter, _ *http.Request) {
+		w.Header().Set("Content-Type", "text/css")
+		_, err := fmt.Fprintf(w, `body { background-color: #f0f0f0; }`)
+		require.NoError(t, err)
+	})
+
+	tb.vu.ActivateVU()
+	tb.vu.StartIteration(t)
+	defer tb.vu.EndIteration(t)
+
+	gv, err := tb.vu.RunAsync(t, `
+		const context = await browser.newContext();
+		const page = await context.newPage();
+
+		var finishedRequests = [];
+		page.on('requestfinished', (request) => {
+			finishedRequests.push({
+				url: request.url(),
+				method: request.method(),
+				resourceType: request.resourceType(),
+				isNavigationRequest: request.isNavigationRequest(),
+			});
+		});
+
+		await page.goto('%s', {waitUntil: 'networkidle'});
+		await page.close();
+		return JSON.stringify(finishedRequests, null, 2);
+	`, tb.url("/home"))
+	require.NoError(t, err)
+
+	got := k6test.ToPromise(t, gv)
+	require.Equal(t, sobek.PromiseStateFulfilled, got.State())
+
+	var finishedRequests []struct {
+		URL                 string `json:"url"`
+		Method              string `json:"method"`
+		ResourceType        string `json:"resourceType"`
+		IsNavigationRequest bool   `json:"isNavigationRequest"`
+	}
+	err = json.Unmarshal([]byte(got.Result().String()), &finishedRequests)
+	require.NoError(t, err)
+
+	// Verify we captured some finished requests
+	require.NotEmpty(t, finishedRequests, "expected to capture at least one finished request")
+
+	var foundHome, foundAPI, foundCSS bool
+	for _, req := range finishedRequests {
+		switch {
+		case strings.HasSuffix(req.URL, "/home"):
+			foundHome = true
+			assert.Equal(t, "GET", req.Method)
+			assert.Equal(t, "Document", req.ResourceType)
+			assert.True(t, req.IsNavigationRequest)
+		case strings.HasSuffix(req.URL, "/api"):
+			foundAPI = true
+			assert.Equal(t, "POST", req.Method)
+			assert.Equal(t, "Fetch", req.ResourceType)
+			assert.False(t, req.IsNavigationRequest)
+		case strings.HasSuffix(req.URL, "/style.css"):
+			foundCSS = true
+			assert.Equal(t, "GET", req.Method)
+			assert.Equal(t, "Stylesheet", req.ResourceType)
+			assert.False(t, req.IsNavigationRequest)
+		}
+	}
+
+	assert.True(t, foundHome, "expected to find /home request in finished requests")
+	assert.True(t, foundAPI, "expected to find /api request in finished requests")
+	assert.True(t, foundCSS, "expected to find /style.css request in finished requests")
+}
+
 func TestPageMustUseNativeJavaScriptObjects(t *testing.T) {
 	t.Parallel()