test(browser): Simple PoC for end-to-end browser tests using Playwright.

onurtemizkan · web-flow · commit 2bc18238df85 · 2021-09-19T18:25:51.000Z
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -72,12 +72,13 @@
     "fix": "run-s fix:eslint fix:prettier",
     "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
     "fix:eslint": "eslint . --format stylish --fix",
-    "test": "run-s test:unit",
+    "test": "run-s test:unit test:e2e",
     "test:unit": "karma start test/unit/karma.conf.js",
     "test:unit:watch": "karma start test/unit/karma.conf.js --auto-watch --no-single-run",
     "test:integration": "test/integration/run.js",
     "test:integration:watch": "test/integration/run.js --watch",
     "test:integration:checkbrowsers": "node scripts/checkbrowsers.js",
+    "test:e2e": "yarn --cwd ./test/e2e run test",
     "test:package": "node test/package/npm-build.js && rm test/package/tmp.js",
     "size:check": "run-p size:check:es5 size:check:es6",
     "size:check:es5": "cat build/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'",
diff --git a/packages/browser/test/e2e/.eslintrc b/packages/browser/test/e2e/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "ecmaFeatures": {
+    "modules": true,
+    "spread": true,
+    "restParams": true
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "no-unused-vars": 2,
+    "no-undef": 2
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}
diff --git a/packages/browser/test/e2e/index.html b/packages/browser/test/e2e/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Sample Webpack App</title>
+  </head>
+  <body>
+    <!-- For Breadcrumbs Tests -->
+    <form id="foo-form">
+      <input name="foo" placeholder="lol" />
+      <div class="contenteditable" contenteditable="true"></div>
+    </form>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/packages/browser/test/e2e/package.json b/packages/browser/test/e2e/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "sentry-browser-integration-test-app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  },
+  "scripts": {
+    "postinstall": "playwright install --with-deps",
+    "pretest": "yarn install && webpack",
+    "test": "playwright test ./test --browser=all",
+    "posttest": "rimraf dist",
+    "dev": "webpack-dev-server"
+  },
+  "dependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "@playwright/test": "^1.14.1",
+    "@sentry/browser": "file:../..",
+    "babel-loader": "^8.2.2",
+    "express": "^4.17.1",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0"
+  },
+  "resolutions": {
+    "@sentry/core": "file:../../../core",
+    "@sentry/hub": "file:../../../hub",
+    "@sentry/integrations": "file:../../../integrations",
+    "@sentry/minimal": "file:../../../minimal",
+    "@sentry/tracing": "file:../../../tracing",
+    "@sentry/types": "file:../../../types",
+    "@sentry/utils": "file:../../../utils"
+  }
+}
diff --git a/packages/browser/test/e2e/playwright.config.js b/packages/browser/test/e2e/playwright.config.js
@@ -0,0 +1,13 @@
+const config = {
+  // Retries for cases that might be flaky
+  // Even if the test passes the second time, it's reported as flaky
+  // But the suite is considered successful.
+  retries: 2,
+  webServer: {
+    command: 'node server.js',
+    port: 8080,
+    timeout: 120 * 1000,
+  },
+};
+
+module.exports = config;
diff --git a/packages/browser/test/e2e/server.js b/packages/browser/test/e2e/server.js
@@ -0,0 +1,15 @@
+const path = require('path');
+
+const express = require('express');
+
+const app = express();
+const port = process.env.PORT || 8080;
+
+app.use(express.static(path.resolve(__dirname, './dist')));
+
+app.get('/', function(_req, res) {
+  res.sendFile(path.join(__dirname, '/index.html'));
+});
+
+app.listen(port);
+console.log('Server started at http://localhost:' + port);
diff --git a/packages/browser/test/e2e/src/index.js b/packages/browser/test/e2e/src/index.js
@@ -0,0 +1,5 @@
+const Sentry = require('@sentry/browser');
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+});
diff --git a/packages/browser/test/e2e/test/breadcrumbs.test.js b/packages/browser/test/e2e/test/breadcrumbs.test.js
@@ -0,0 +1,71 @@
+const { test, expect } = require('@playwright/test');
+const Sentry = require('@sentry/browser');
+
+const { waitForXHR, getSentryEvent } = require('./utils/helpers');
+
+test.beforeEach(async ({ baseURL, page }) => {
+  await page.goto(baseURL);
+});
+
+test('records breadcrumbs for a simple XHR `GET` request', async ({ page }) => {
+  const eventData = await getSentryEvent(
+    page,
+    () => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', '/base/subjects/example.json');
+      xhr.onreadystatechange = function() {};
+      xhr.send();
+
+      waitForXHR(xhr, function() {
+        Sentry.captureMessage('test');
+      });
+    },
+    { waitForXHR },
+  );
+
+  expect(eventData.breadcrumbs.length).toBe(1);
+  expect(eventData.breadcrumbs[0].category).toBe('xhr');
+  expect(eventData.breadcrumbs[0].type).toBe('http');
+  expect(eventData.breadcrumbs[0].data.method).toBe('GET');
+  expect(eventData.breadcrumbs[0].data.url).toBe('/base/subjects/example.json');
+});
+
+test('records breadcrumbs for a fetch request', async ({ page }) => {
+  const eventData = await getSentryEvent(page, () => {
+    fetch('/base/subjects/example.json', {
+      method: 'GET',
+    }).then(function() {
+      Sentry.captureMessage('test');
+    });
+  });
+
+  expect(eventData.breadcrumbs.length).toBe(1);
+  expect(eventData.breadcrumbs[0].category).toBe('fetch');
+  expect(eventData.breadcrumbs[0].type).toBe('http');
+  expect(eventData.breadcrumbs[0].data.method).toBe('GET');
+  expect(eventData.breadcrumbs[0].data.url).toBe('/base/subjects/example.json');
+});
+
+test('records record a mouse click on element WITH click handler present', async ({ page }) => {
+  const eventData = await getSentryEvent(page, () => {
+    // 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
+
+    var input = document.getElementsByTagName('input')[0];
+    var clickHandler = function(evt) {
+      evt.stopPropagation(); // don't bubble
+    };
+    input.addEventListener('click', clickHandler);
+
+    // click <input/>
+    var click = new MouseEvent('click');
+    input.dispatchEvent(click);
+
+    Sentry.captureMessage('test');
+  });
+
+  expect(eventData.breadcrumbs.length).toBe(1);
+  expect(eventData.breadcrumbs[0].category).toBe('ui.click');
+  expect(eventData.breadcrumbs[0].message).toBe('body > form#foo-form > input[name="foo"]');
+});
diff --git a/packages/browser/test/e2e/test/capture.test.js b/packages/browser/test/e2e/test/capture.test.js
@@ -0,0 +1,37 @@
+const { test, expect } = require('@playwright/test');
+
+const { getSentryEvent } = require('./utils/helpers');
+
+test.beforeEach(async ({ baseURL, page }) => {
+  await page.goto(baseURL);
+});
+
+test('captures manually thrown error', async ({ page }) => {
+  const eventData = await getSentryEvent(page, () => {
+    throw new Error('Sentry Test');
+  });
+
+  expect(eventData.exception.values[0].type).toBe('Error');
+  expect(eventData.exception.values[0].value).toBe('Sentry Test');
+});
+
+test('captures undefined function call', async ({ page, browserName }) => {
+  const eventData = await getSentryEvent(page, () => {
+    // eslint-disable-next-line no-undef
+    undefinedFunction();
+  });
+
+  expect(eventData.exception.values[0].type).toBe('ReferenceError');
+  expect(eventData.exception.values[0].value).toBe(
+    browserName === 'webkit' ? `Can't find variable: undefinedFunction` : 'undefinedFunction is not defined',
+  );
+});
+
+test('captures unhandled promise rejection', async ({ page }) => {
+  const eventData = await getSentryEvent(page, () => {
+    return Promise.reject('Rejected');
+  });
+
+  expect(eventData.exception.values[0].type).toBe('UnhandledRejection');
+  expect(eventData.exception.values[0].value).toBe('Non-Error promise rejection captured with value: Rejected');
+});
diff --git a/packages/browser/test/e2e/test/utils/helpers.js b/packages/browser/test/e2e/test/utils/helpers.js
@@ -0,0 +1,31 @@
+function waitForXHR(xhr, cb) {
+  if (xhr.readyState === 4) {
+    return cb();
+  }
+
+  setTimeout(function() {
+    waitForXHR(xhr, cb);
+  }, 1000 / 60);
+}
+
+async function runInSandbox(page, fn, globals = {}) {
+  for (const [globalName, globalVal] of Object.entries(globals)) {
+    // Only need to pass a function for the PoC, so, we'll probably need to improve this to support other global types.
+    await page.addScriptTag({ content: `var ${globalName} = ${globalVal};` });
+  }
+
+  await page.addScriptTag({ content: `(${fn})();` });
+}
+
+async function getSentryEvent(page, fn, globals) {
+  const request = (
+    await Promise.all([runInSandbox(page, fn, globals), page.waitForRequest(/.*.sentry\.io\/api.*/gm)])
+  )[1];
+  return JSON.parse(request.postData());
+}
+
+module.exports = {
+  waitForXHR,
+  runInSandbox,
+  getSentryEvent,
+};
diff --git a/packages/browser/test/e2e/webpack.config.js b/packages/browser/test/e2e/webpack.config.js
@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'none',
+  entry: path.resolve(__dirname, './src/index.js'),
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['*', '.js'],
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: 'bundle.js',
+  },
+  devServer: {
+    static: {
+      directory: __dirname,
+    },
+  },
+  stats: 'errors-only',
+};
diff --git a/packages/browser/test/e2e/yarn.lock b/packages/browser/test/e2e/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +const Sentry = require('@sentry/browser');
++
 +Sentry.init({
 +  dsn: 'https://[email protected]/1337',
 +});