Address suggestions from review.

Summary:
- Build test scenarios using `template`, `initialization` and `subject`
- Use TypeScript in tests.
- Remove test server, use local file paths.

Author: onurtemizkan

packages/browser/test/e2e/.eslintrc

@@ -0,0 +1,20 @@
+module.exports = {
+  ecmaFeatures: {
+    '1modules': true,
+    spread: true,
+    restParams: true,
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  rules: {
+    'no-unused-vars': 2,
+    'no-undef': 2,
+  },
+  parserOptions: {
+    sourceType: 'module',
+  },
+  extends: ['../../.eslintrc.js'],
+};

packages/browser/test/e2e/.eslintrc.js

@@ -14,10 +14,9 @@
   },
   "scripts": {
     "postinstall": "playwright install --with-deps",
-    "pretest": "yarn install && webpack",
-    "test": "playwright test ./test --browser=all",
-    "posttest": "rimraf dist",
-    "dev": "webpack-dev-server"
+    "pretest": "yarn install",
+    "test": "playwright test ./test --browser='all'",
+    "posttest": "rimraf dist"
   },
   "dependencies": {
     "@babel/core": "^7.15.5",
@@ -26,6 +25,9 @@
     "@sentry/browser": "file:../..",
     "babel-loader": "^8.2.2",
     "express": "^4.17.1",
+    "html-webpack-plugin": "^5.5.0",
+    "ts-loader": "^9.2.6",
+    "ts-node": "^10.4.0",
     "webpack": "^5.52.0",
     "webpack-cli": "^4.8.0"
   },
@@ -37,5 +39,8 @@
     "@sentry/tracing": "file:../../../tracing",
     "@sentry/types": "file:../../../types",
     "@sentry/utils": "file:../../../utils"
+  },
+  "devDependencies": {
+    "handlebars-loader": "^1.7.1"
   }
 }

packages/browser/test/e2e/package.json

@@ -0,0 +1,8 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  retries: 2,
+  timeout: 12000,
+  workers: 3,
+};
+export default config;

packages/browser/test/e2e/playwright.config.js

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "no-unused-vars": 0,
+    "no-undef": 0
+  }
+}

packages/browser/test/e2e/playwright.config.ts

@@ -1,6 +1,8 @@
-const Sentry = require('@sentry/browser');
-const { normalize } = require('@sentry/utils');
+import * as Sentry from '@sentry/browser';
+import { normalize } from '@sentry/utils';
+
 window.Sentry = Sentry;
+window.events = [];
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
@@ -18,3 +20,10 @@ Sentry.init({
     return breadcrumb;
   },
 });
+
+const scope = Sentry.getCurrentHub().getScope();
+
+scope.addEventProcessor(function(event) {
+  window.events.push(event);
+  return event;
+});

packages/browser/test/e2e/scenarios/.eslintrc

@@ -0,0 +1,15 @@
+const clickHandler = function() {};
+
+// mousemove event shouldnt clobber subsequent "breadcrumbed" events (see #724)
+document.querySelector('.a').addEventListener('mousemove', clickHandler);
+
+document.querySelector('.a').addEventListener('click', clickHandler);
+document.querySelector('.b').addEventListener('click', clickHandler);
+document.querySelector('.c').addEventListener('click', clickHandler);
+
+// click <input/>
+const click = new MouseEvent('click');
+const input = document.querySelector('.a'); // leaf node
+input.dispatchEvent(click);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/src/index.js renamed to packages/browser/test/e2e/scenarios/initializations/default.js

@@ -0,0 +1,14 @@
+// add an event listener to the input. we want to make sure that
+// our breadcrumbs still work even if the page has an event listener
+// on an element that cancels event bubbling
+const input = document.getElementsByTagName('input')[0];
+const clickHandler = function(evt) {
+  evt.stopPropagation(); // don't bubble
+};
+input.addEventListener('click', clickHandler);
+
+// click <input/>
+const click = new MouseEvent('click');
+input.dispatchEvent(click);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/click_event_tree_listeners.js

@@ -0,0 +1,10 @@
+// click <input/>
+const click = new MouseEvent('click');
+
+const input = document.getElementsByTagName('input')[0];
+
+// TODO: This next line wasn't required for the old tests.
+input.addEventListener('click');
+input.dispatchEvent(click);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/click_event_with_handler.js

@@ -0,0 +1,11 @@
+window.handleEventCalled = false;
+
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('click', {
+  handleEvent: function() {
+    window.handleEventCalled = true;
+  },
+});
+input.dispatchEvent(new MouseEvent('click'));
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/click_event_without_handler.js

@@ -0,0 +1,12 @@
+// click <input/>
+const click = new MouseEvent('click');
+function kaboom() {
+  throw new Error('lol');
+}
+Object.defineProperty(click, 'target', { get: kaboom });
+
+const input = document.querySelector('.a'); // leaf node
+input.addEventListener('click');
+input.dispatchEvent(click);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/click_handleEvent.js

@@ -0,0 +1,11 @@
+// keypress <input/> twice
+const keypress1 = new KeyboardEvent('keypress');
+const keypress2 = new KeyboardEvent('keypress');
+
+const div = document.querySelector('[contenteditable]');
+div.addEventListener('keypress');
+
+div.dispatchEvent(keypress1);
+div.dispatchEvent(keypress2);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/click_target_throws.js

@@ -0,0 +1,9 @@
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('build', function(evt) {
+  evt.stopPropagation();
+});
+
+const customEvent = new CustomEvent('build', { detail: 1 });
+input.dispatchEvent(customEvent);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/contenteditable_consecutive_keypress.js

@@ -0,0 +1,7 @@
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('build', undefined);
+
+const customEvent = new CustomEvent('build', { detail: 1 });
+input.dispatchEvent(customEvent);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/custom_event_basic.js

@@ -0,0 +1,6 @@
+const input = document.getElementsByTagName('input')[0];
+const clickHandler = function() {};
+input.addEventListener('click', clickHandler);
+const click = new MouseEvent('click');
+input.dispatchEvent(click);
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/custom_event_handler_no_callback.js

@@ -0,0 +1,11 @@
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('click', undefined);
+input.addEventListener('keypress', undefined);
+
+const click = new MouseEvent('click');
+input.dispatchEvent(click);
+
+const keypress = new KeyboardEvent('keypress');
+input.dispatchEvent(keypress);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/dom_event_name.js

@@ -0,0 +1,8 @@
+fetch(123).then(
+  function() {
+    Sentry.captureMessage('test');
+  },
+  function() {
+    Sentry.captureMessage('test');
+  },
+);

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/dom_handler_no_callback.js

@@ -0,0 +1,10 @@
+fetch('/base/subjects/example.json', {
+  method: 'GET',
+}).then(
+  function() {
+    Sentry.captureMessage('test');
+  },
+  function() {
+    Sentry.captureMessage('test');
+  },
+);

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/fetch_arbitrary_type_argument.js

@@ -0,0 +1,8 @@
+fetch(new Request('/base/subjects/example.json')).then(
+  function() {
+    Sentry.captureMessage('test');
+  },
+  function() {
+    Sentry.captureMessage('test');
+  },
+);

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/fetch_basic.js

@@ -0,0 +1,7 @@
+// keypress <input/>
+const keypress = new KeyboardEvent('keypress');
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('keypress');
+input.dispatchEvent(keypress);
+
+undefined(); // throw exception

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/fetch_request_object.js

@@ -0,0 +1,16 @@
+// 1st keypress <input/>
+const keypress1 = new KeyboardEvent('keypress');
+// click <input/>
+const click = new MouseEvent('click');
+// 2nd keypress
+const keypress2 = new KeyboardEvent('keypress');
+
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('keypress');
+input.addEventListener('click');
+
+input.dispatchEvent(keypress1);
+input.dispatchEvent(click);
+input.dispatchEvent(keypress2);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/flush_keypress_error.js

@@ -0,0 +1,11 @@
+// keypress <input/> twice
+const keypress1 = new KeyboardEvent('keypress');
+const keypress2 = new KeyboardEvent('keypress');
+
+const input = document.getElementsByTagName('input')[0];
+input.addEventListener('keypress');
+
+input.dispatchEvent(keypress1);
+input.dispatchEvent(keypress2);
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/flush_keypress_input_event.js

@@ -0,0 +1,11 @@
+const input = document.getElementsByTagName('input')[0];
+
+const clickHandler = function() {};
+input.addEventListener('click', clickHandler);
+const keypressHandler = function() {};
+input.addEventListener('keypress', keypressHandler);
+
+input.dispatchEvent(new MouseEvent('click'));
+input.dispatchEvent(new KeyboardEvent('keypress'));
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/input_consecutive_keypresses.js

@@ -0,0 +1,11 @@
+const input = document.querySelector('#foo-form input');
+const div = document.querySelector('#foo-form div');
+
+const clickHandler = function() {};
+input.addEventListener('click', clickHandler);
+div.addEventListener('click', clickHandler);
+
+input.dispatchEvent(new MouseEvent('click'));
+div.dispatchEvent(new MouseEvent('click'));
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/multiple_breadcrumbs_different_types.js

@@ -0,0 +1,15 @@
+const input = document.getElementsByTagName('input')[0];
+
+const clickHandler = function() {};
+input.addEventListener('click', clickHandler);
+const keypressHandler = function() {};
+input.addEventListener('keypress', keypressHandler);
+
+input.dispatchEvent(new MouseEvent('click'));
+input.dispatchEvent(new MouseEvent('click'));
+input.dispatchEvent(new MouseEvent('click'));
+input.dispatchEvent(new KeyboardEvent('keypress'));
+input.dispatchEvent(new KeyboardEvent('keypress'));
+input.dispatchEvent(new KeyboardEvent('keypress'));
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/multiple_breadcrumbs_switching_target.js

@@ -0,0 +1,9 @@
+history.pushState({}, '', '/foo');
+history.pushState({}, '', '/bar?a=1#fragment');
+history.pushState({}, '', {}); // pushState calls toString on non-string args
+history.pushState({}, '', null); // does nothing / no-op
+// can't call history.back() because it will change url of parent document
+// (e.g. document running mocha) ... instead just "emulate" a back button
+// press by calling replaceState
+history.replaceState({}, '', '/bar?a=1#fragment');
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/multiple_breadcrumbs_switching_type.js

@@ -0,0 +1,20 @@
+const input = document.getElementsByTagName('input')[0];
+
+const clickHandler = function() {};
+const otherClickHandler = function() {};
+input.addEventListener('click', clickHandler);
+input.addEventListener('click', otherClickHandler);
+input.removeEventListener('click', clickHandler);
+input.removeEventListener('click', otherClickHandler);
+
+const keypressHandler = function() {};
+const otherKeypressHandler = function() {};
+input.addEventListener('keypress', keypressHandler);
+input.addEventListener('keypress', otherKeypressHandler);
+input.removeEventListener('keypress', keypressHandler);
+input.removeEventListener('keypress', otherKeypressHandler);
+
+input.dispatchEvent(new MouseEvent('click'));
+input.dispatchEvent(new KeyboardEvent('keypress'));
+
+Sentry.captureMessage('test');

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/record_history_push_replace_state.js

@@ -0,0 +1,9 @@
+import { waitForXHR } from '../../../utils/browserHelpers.ts';
+
+const xhr = new XMLHttpRequest();
+xhr.open('POST', '/base/subjects/example.json');
+xhr.send('{"foo":"bar"}');
+
+waitForXHR(xhr, function() {
+  Sentry.captureMessage('test');
+});

packages/browser/test/e2e/scenarios/subjects/breadcrumbs/remove_breadcrumb_on_detach.js

@@ -0,0 +1,10 @@
+import { waitForXHR } from '../../../utils/browserHelpers.ts';
+
+const xhr = new XMLHttpRequest();
+xhr.open('GET', '/base/subjects/example.json');
+xhr.onreadystatechange = function() {};
+xhr.send();
+
+waitForXHR(xhr, function() {
+  Sentry.captureMessage('test');
+});