1
1
import { expect } from '@playwright/test' ;
2
- import type { Event as SentryEvent , SpanJSON } from '@sentry/types' ;
2
+ import type { Event as SentryEvent , SpanEnvelope , SpanJSON } from '@sentry/types' ;
3
3
4
4
import { sentryTest } from '../../../../utils/fixtures' ;
5
5
import {
6
6
getFirstSentryEnvelopeRequest ,
7
7
getMultipleSentryEnvelopeRequests ,
8
+ properFullEnvelopeRequestParser ,
8
9
shouldSkipTracingTest ,
9
10
} from '../../../../utils/helpers' ;
10
11
@@ -28,9 +29,12 @@ sentryTest('should capture an INP click event span.', async ({ browserName, getL
28
29
await page . goto ( url ) ;
29
30
await getFirstSentryEnvelopeRequest < SentryEvent > ( page ) ; // wait for page load
30
31
31
- const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests < SpanJSON > ( page , 1 , {
32
- envelopeType : 'span' ,
33
- } ) ;
32
+ const spanEnvelopePromise = getMultipleSentryEnvelopeRequests < SpanEnvelope > (
33
+ page ,
34
+ 1 ,
35
+ { envelopeType : 'span' } ,
36
+ properFullEnvelopeRequestParser ,
37
+ ) ;
34
38
35
39
await page . locator ( '[data-test-id=normal-button]' ) . click ( ) ;
36
40
await page . locator ( '.clicked[data-test-id=normal-button]' ) . isVisible ( ) ;
@@ -43,14 +47,53 @@ sentryTest('should capture an INP click event span.', async ({ browserName, getL
43
47
} ) ;
44
48
45
49
// Get the INP span envelope
46
- const spanEnvelopes = await spanEnvelopesPromise ;
47
-
48
- expect ( spanEnvelopes ) . toHaveLength ( 1 ) ;
49
- expect ( spanEnvelopes [ 0 ] . op ) . toBe ( 'ui.interaction.click' ) ;
50
- expect ( spanEnvelopes [ 0 ] . description ) . toBe ( 'body > NormalButton' ) ;
51
- expect ( spanEnvelopes [ 0 ] . exclusive_time ) . toBeGreaterThan ( 0 ) ;
52
- expect ( spanEnvelopes [ 0 ] . measurements ?. inp . value ) . toBeGreaterThan ( 0 ) ;
53
- expect ( spanEnvelopes [ 0 ] . measurements ?. inp . unit ) . toBe ( 'millisecond' ) ;
50
+ const spanEnvelope = ( await spanEnvelopePromise ) [ 0 ] ;
51
+
52
+ const spanEnvelopeHeaders = spanEnvelope [ 0 ] ;
53
+ const spanEnvelopeItem = spanEnvelope [ 1 ] [ 0 ] [ 1 ] ;
54
+
55
+ const traceId = spanEnvelopeHeaders . trace ! . trace_id ;
56
+ expect ( traceId ) . toMatch ( / [ a - f 0 - 9 ] { 32 } / ) ;
57
+
58
+ expect ( spanEnvelopeHeaders ) . toEqual ( {
59
+ sent_at : expect . any ( String ) ,
60
+ trace : {
61
+ environment : 'production' ,
62
+ public_key : 'public' ,
63
+ sample_rate : '1' ,
64
+ sampled : 'true' ,
65
+ trace_id : traceId ,
66
+ } ,
67
+ } ) ;
68
+
69
+ const inpValue = spanEnvelopeItem . measurements ?. inp . value ;
70
+ expect ( inpValue ) . toBeGreaterThan ( 0 ) ;
71
+
72
+ expect ( spanEnvelopeItem ) . toEqual ( {
73
+ data : {
74
+ 'sentry.exclusive_time' : inpValue ,
75
+ 'sentry.op' : 'ui.interaction.click' ,
76
+ 'sentry.origin' : 'manual' ,
77
+ 'sentry.sample_rate' : 1 ,
78
+ 'sentry.source' : 'custom' ,
79
+ } ,
80
+ measurements : {
81
+ inp : {
82
+ unit : 'millisecond' ,
83
+ value : inpValue ,
84
+ } ,
85
+ } ,
86
+ description : 'body > NormalButton' ,
87
+ exclusive_time : inpValue ,
88
+ op : 'ui.interaction.click' ,
89
+ origin : 'manual' ,
90
+ is_segment : true ,
91
+ segment_id : spanEnvelopeItem . span_id ,
92
+ span_id : expect . stringMatching ( / [ a - f 0 - 9 ] { 16 } / ) ,
93
+ start_timestamp : expect . any ( Number ) ,
94
+ timestamp : expect . any ( Number ) ,
95
+ trace_id : traceId ,
96
+ } ) ;
54
97
} ) ;
55
98
56
99
sentryTest (
@@ -85,7 +128,7 @@ sentryTest(
85
128
86
129
await page . waitForTimeout ( 500 ) ;
87
130
88
- const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests < SpanJSON > ( page , 1 , {
131
+ const spanPromise = getMultipleSentryEnvelopeRequests < SpanJSON > ( page , 1 , {
89
132
envelopeType : 'span' ,
90
133
} ) ;
91
134
@@ -95,13 +138,12 @@ sentryTest(
95
138
} ) ;
96
139
97
140
// Get the INP span envelope
98
- const spanEnvelopes = await spanEnvelopesPromise ;
99
-
100
- expect ( spanEnvelopes ) . toHaveLength ( 1 ) ;
101
- expect ( spanEnvelopes [ 0 ] . op ) . toBe ( 'ui.interaction.click' ) ;
102
- expect ( spanEnvelopes [ 0 ] . description ) . toBe ( 'body > SlowButton' ) ;
103
- expect ( spanEnvelopes [ 0 ] . exclusive_time ) . toBeGreaterThan ( 400 ) ;
104
- expect ( spanEnvelopes [ 0 ] . measurements ?. inp . value ) . toBeGreaterThan ( 400 ) ;
105
- expect ( spanEnvelopes [ 0 ] . measurements ?. inp . unit ) . toBe ( 'millisecond' ) ;
141
+ const span = ( await spanPromise ) [ 0 ] ;
142
+
143
+ expect ( span . op ) . toBe ( 'ui.interaction.click' ) ;
144
+ expect ( span . description ) . toBe ( 'body > SlowButton' ) ;
145
+ expect ( span . exclusive_time ) . toBeGreaterThan ( 400 ) ;
146
+ expect ( span . measurements ?. inp . value ) . toBeGreaterThan ( 400 ) ;
147
+ expect ( span . measurements ?. inp . unit ) . toBe ( 'millisecond' ) ;
106
148
} ,
107
149
) ;
0 commit comments