sentry-javascript/dev-packages/browser-integration-tests/suites/replay/slowClick/template.html at e5bbdb016976fdc0116063c4b3a13924307fce61 · getsentry/sentry-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <button id="mutationButton">Trigger mutation</button>
    <div id="mutationDiv">Trigger mutation</div>
    <button id="next-question-button" data-testid="next-question-button">Next question</button>
    <button id="mutationButtonImmediately">Trigger mutation immediately</button>
    <button
      id="mutationButtonInline"
      onclick="() => (document.getElementById('out').innerHTML += 'mutationButtonInline clicked<br>')"
    >
      Trigger mutation immediately
    </button>
    <button id="mutationButtonLate">Trigger mutation late</button>
    <button id="consoleLogButton">Trigger console log</button>
    <button id="scrollButton">Trigger scroll</button>
    <button id="scrollLateButton">Trigger scroll late</button>
    <button id="mutationIgnoreButton" class="ignore-class">Trigger scroll late</button>
    <button id="mouseDownButton">Trigger mutation on mouse down</button>
    <button id="windowOpenButton">Window open</button>

    <a href="#" id="link">Link</a>
    <a href="#" target="_blank" id="linkExternal">Link external</a>
    <a href="" download id="linkDownload">Link download</a>
    <input type="button" id="inputButton" value="Input button" />
    <input type="submit" id="inputSubmit" value="Input submit" />
    <input type="text" id="inputText" />
    <input type="file" id="inputFile" />

    <h1 id="h1">Heading</h1>

    <div id="out" style="min-height: 1000px"></div>

    <h1 id="h2">Bottom</h1>

    <script>
      document.getElementById('mutationButton').addEventListener('click', () => {
        setTimeout(() => {
          document.getElementById('out').innerHTML += 'mutationButton clicked<br>';
        }, 3001);
      });
      document.getElementById('mutationIgnoreButton').addEventListener('click', () => {
        setTimeout(() => {
          document.getElementById('out').innerHTML += 'mutationIgnoreButton clicked<br>';
        }, 3001);
      });
      document.getElementById('mutationDiv').addEventListener('click', () => {
        setTimeout(() => {
          document.getElementById('out').innerHTML += 'mutationDiv clicked<br>';
        }, 3001);
      });
      document.getElementById('mutationButtonLate').addEventListener('click', () => {
        setTimeout(() => {
          document.getElementById('out').innerHTML += 'mutationButtonLate clicked<br>';
        }, 3501);
      });
      document.getElementById('mutationButtonImmediately').addEventListener('click', () => {
        document.getElementById('out').innerHTML += 'mutationButtonImmediately clicked<br>';
      });
      document.getElementById('scrollButton').addEventListener('click', () => {
        document.getElementById('h2').scrollIntoView({ behavior: 'smooth' });
      });
      document.getElementById('scrollLateButton').addEventListener('click', () => {
        setTimeout(() => {
          document.getElementById('h2').scrollIntoView({ behavior: 'smooth' });
        }, 3001);
      });
      document.getElementById('consoleLogButton').addEventListener('click', () => {
        setTimeout(() => {
          console.log('DONE');
        }, 3001);
      });
      document.getElementById('mouseDownButton').addEventListener('mousedown', () => {
        document.getElementById('out').innerHTML += 'mutationButton clicked<br>';
      });
      document.getElementById('windowOpenButton').addEventListener('click', () => {
        window.open('https://github.com/', '_blank');
      });

      // Do nothing on these elements
      document
        .querySelectorAll('#link,#linkExternal,#linkDownload,#inputButton,#inputSubmit,#inputText')
        .forEach(link => {
          link.addEventListener('click', e => {
            e.preventDefault();
          });
        });
    </script>
  </body>
</html>