Skip to content

Commit 89b85ce

Browse files
ptang-nrptang-nr
committed
chore: Add dead-clicks example test page
1 parent bb210df commit 89b85ce

File tree

1 file changed

+254
-0
lines changed

1 file changed

+254
-0
lines changed

‎tests/assets/user-frustrations/instrumented-dead-clicks.html‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2025 New Relic Corporation.
4+
PDX-License-Identifier: Apache-2.0
5+
-->
6+
<html lang="en">
7+
<head>
8+
<title>RUM - Dead Clicks</title>
9+
{init} {config}
10+
<script>
11+
NREUM.init.feature_flags = ['user_frustrations']
12+
NREUM.init.harvest.interval = 5
13+
// disable cookies to help e2e test events are wrapped in generic events instrument phase
14+
NREUM.init.privacy.cookies_enabled = false
15+
localStorage.clear()
16+
</script>
17+
{loader}
18+
<script>
19+
const doNothingFn = function() { console.log('This will never be logged.') }
20+
let clickCount = 0;
21+
22+
function updateClickCount(elemId) {
23+
console.log('No dead click event should be recorded.');
24+
clickCount++;
25+
document.getElementById(elemId).textContent = ''+clickCount;
26+
}
27+
</script>
28+
<style>
29+
a {
30+
color: blue;
31+
cursor: pointer;
32+
text-decoration: underline;
33+
}
34+
.non-interactive-element {
35+
color: red;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<span id="dummy-span"></span> <!-- another element for e2e to click -->
41+
<div id="test-area">
42+
<h1>RUM - Dead Clicks</h1>
43+
<p>This page is used to test dead clicks instrumentation.</p>
44+
<h2>Buttons</h2>
45+
<div>
46+
<p><strong>Click count: <span id="numBtnClicks"></span></strong></p>
47+
<p>Button with a click event handler, added via `addEventListener`.
48+
<button id="test-button-with-listener">Click Me</button>
49+
<script>
50+
document.getElementById('test-button-with-listener').addEventListener('click', () => { updateClickCount('numBtnClicks')});
51+
</script>
52+
</p>
53+
54+
<p>Button with a click event handler, added via `onclick`.
55+
<button id="test-button-with-onclick" onclick="updateClickCount('numBtnClicks')">Click Me</button>
56+
</p>
57+
58+
<p>Button that has a click event handler added, then removed.
59+
<button id="do-nothing-button">Do nothing</button>
60+
<script>
61+
document.getElementById("do-nothing-button").addEventListener("click", doNothingFn)
62+
document.getElementById("do-nothing-button").removeEventListener("click", doNothingFn)
63+
</script>
64+
</p>
65+
66+
<p>Button with no click handler, no forms
67+
<button id="dead-button">Dead button</button>
68+
</p>
69+
70+
<p>Button with listener + span child
71+
<button id="button-with-listener-and-span-child">
72+
<span id="span-inside-button-with-listener">Button</span>
73+
</button>
74+
<script>
75+
document.getElementById('button-with-listener-and-span-child').addEventListener('click', () => { updateClickCount('numBtnClicks')});
76+
</script>
77+
</p>
78+
79+
<p>Dead button + span child =>
80+
<button id="dead-button-with-span-child">
81+
<span id="span-inside-dead-button">Dead button</span>
82+
</button>
83+
</p>
84+
85+
<fieldset>
86+
<legend>Buttons and forms</legend>
87+
<p>Button with a form ancestor
88+
<form id="form-with-button-child">
89+
<input type="checkbox" id="bar1" name="foo" value="bar1" checked />
90+
<label for="bar1">bar</label>
91+
<button id="button-with-form-ancestor">Button w/ form ancestor</button>
92+
</form>
93+
</p>
94+
95+
<p>Button with a related form
96+
<form id="form-with-related-button">
97+
<input type="checkbox" id="bar2" name="foo" value="bar2" checked />
98+
<label for="bar2">bar</label>
99+
</form>
100+
<button id="button-with-related-form" form="form-with-related-button">Button w/ related form</button>
101+
</p>
102+
103+
<p>Button with an invalid form
104+
<form id="form-with-no-valid-button">
105+
<input type="checkbox" id="bar3" name="foo" value="bar3" checked />
106+
<label for="bar3">bar</label>
107+
<button id="button-with-invalid-form" form="does-not-exist">Button w/ non-existent form</button>
108+
</form>
109+
</p>
110+
</fieldset>
111+
112+
<fieldset>
113+
<legend>Buttons and popovers</legend>
114+
<p>Button for a popover
115+
<button id="button-for-popover" popovertarget="popover-target">Toggle popover</button> <!-- default action is "toggle" -->
116+
<button id="button-for-popover-hide" popovertarget="popover-target" popovertargetaction="hide">Hide popover</button>
117+
<button id="button-for-popover-show" popovertarget="popover-target" popovertargetaction="show">Show popover</button>
118+
<div id="popover-target" popover>This is a popover! </div>
119+
</p>
120+
121+
<p>Button for an invalid popover
122+
<button id="button-for-popover-invalid-target" popovertarget="does-not-exist">Button for non-existent popover</button>
123+
<button id="button-for-popover-invalid-command" popovertarget="popover-target" popovertargetaction="foo">Button, popovertargetaction = foo</button>
124+
</p>
125+
</fieldset>
126+
127+
<fieldset>
128+
<legend>Buttons and commands</legend>
129+
<p>Button as a command for a dialog
130+
<button id="button-for-show-modal-command" commandfor="sample-dialog" command="show-modal">Show modal</button>
131+
<button id="button-for-close-already-closed-modal" commandfor="sample-dialog" command="close">Close modal</button> <!-- this will do nothing -->
132+
<button id="button-for-request-close-already-closed-modal" commandfor="sample-dialog" command="request-close">Request to close modal</button> <!-- this will do nothing -->
133+
<button id="button-for-bad-dialog" commandfor="does-not-exist" command="show-modal">Show non-existent modal</button> <!-- this will do nothing -->
134+
<dialog id="sample-dialog" style="border: 1px solid #666; background-color: #ccc;">This is a dialog modal!
135+
<p>
136+
<button id="button-for-show-modal-again-command" commandfor="sample-dialog" command="show-modal">Show modal</button> <!-- this will do nothing -->
137+
<button id="button-for-close-command" commandfor="sample-dialog" command="close">Close modal</button>
138+
<button id="button-for-request-close-command" commandfor="sample-dialog" command="request-close">Request to close modal</button>
139+
<button id="button-for-bad-command" commandfor="sample-dialog" command="do-nothing">Do nothing</button>
140+
</p>
141+
</dialog>
142+
</p>
143+
</fieldset>
144+
145+
</div>
146+
147+
<h2>Input, type = "button"</h2>
148+
<div>
149+
<p><strong>Click count: <span id="numInputBtnClicks"></span></strong></p>
150+
<p>Button with a click event handler, added via `addEventListener`.
151+
<input type="button" id="test-input-button-with-listener" value="Click Me"/>
152+
<script>
153+
document.getElementById('test-input-button-with-listener').addEventListener('click', () => { updateClickCount('numInputBtnClicks')});
154+
</script>
155+
</p>
156+
157+
<p>Button with a click event handler, added via `onclick`.
158+
<input type="button" id="test-input-button-with-onclick" onclick="updateClickCount('numInputBtnClicks')"value = "Click Me"/>
159+
</p>
160+
161+
<p>Button that has a click event handler added, then removed.
162+
<input type="button" id="do-nothing-input-button" value="Do nothing"/>
163+
<script>
164+
document.getElementById("do-nothing-input-button").addEventListener("click", doNothingFn)
165+
document.getElementById("do-nothing-input-button").removeEventListener("click", doNothingFn)
166+
</script>
167+
</p>
168+
169+
<p>Button with no click handler, no forms
170+
<input type="button" id="dead-input-button" value="Dead input button" />
171+
</p>
172+
</div>
173+
174+
<h2>Links</h2>
175+
<div>
176+
<p><strong>Click count: <span id="numLinkClicks"></span></strong></p>
177+
<p>Link with a click event handler, added via `addEventListener`=>
178+
<a id="test-link-with-listener">Link</a>
179+
<script>
180+
document.getElementById('test-link-with-listener').addEventListener('click', () => {
181+
updateClickCount('numLinkClicks');
182+
})
183+
</script>
184+
</p>
185+
186+
<p>Link with a click event handler, added via `onclick` =>
187+
<a id="test-link-with-onclick" onclick="updateClickCount('numLinkClicks')">Link</a>
188+
</p>
189+
190+
<p>Link that has a click event handler added, then removed. =>
191+
<a id="do-nothing-link">Link</a>
192+
<script>
193+
document.getElementById("do-nothing-link").addEventListener("click", doNothingFn)
194+
document.getElementById("do-nothing-link").removeEventListener("click", doNothingFn)
195+
</script>
196+
</p>
197+
198+
<p>Link with href =>
199+
<a id="test-link-with-href" href="https://www.example.com">Go to Example.com</a>
200+
</p>
201+
202+
<p>Dead link => <a id="dead-link">Link</a>
203+
</p>
204+
205+
<p>Link with a click event handler + span child =>
206+
<a id="link-with-listener-and-span-child">
207+
<span id="span-inside-link-with-listener">Link</span>
208+
</a>
209+
<script>
210+
document.getElementById('link-with-listener-and-span-child').addEventListener('click', () => {
211+
updateClickCount('numLinkClicks')
212+
});
213+
</script>
214+
</p>
215+
<p>Dead link + span child =>
216+
<a id="dead-link-with-span-child">
217+
<span id="span-inside-dead-link">Link</span>
218+
</a>
219+
</p>
220+
</div>
221+
222+
<h2>Textboxes</h2>
223+
<div>
224+
<p>
225+
<label for="normal-textbox">Normal textbox =></label>
226+
<input type="text" id="normal-textbox" name="normal-textbox" value="Normal Textbox"/>
227+
</p>
228+
<p>
229+
<label for="readonly-textbox">Readonly textbox =></label>
230+
<input type="text" id="readonly-textbox" name="readonly-textbox" value="Readonly Textbox" readonly/>
231+
</p>
232+
</div>
233+
234+
<h2>Other Elements</h2>
235+
<div>
236+
<p><strong>Click count: <span id="numSpanClicks"></span></strong></p>
237+
<p>Span with a click event handler, added via `addEventListener` =>
238+
<span id="span-with-listener" class="non-interactive-element">Span</span>
239+
<script>
240+
document.getElementById("span-with-listener").addEventListener('click', () => {
241+
updateClickCount('numSpanClicks');
242+
})
243+
</script>
244+
</p>
245+
<p>Span with a click event handler, added via `onclick` =>
246+
<span id="span-with-onclick" onclick="updateClickCount('numSpanClicks')" class="non-interactive-element">Span </span>
247+
</p>
248+
<p>Span with no handlers =>
249+
<span id="do-nothing-span" class="non-interactive-element">Span</span>
250+
</p>
251+
</div>
252+
</div>
253+
</body>
254+
</html>

0 commit comments

Comments
 (0)