diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js
new file mode 100644
index 000000000000..a4bddcff1b21
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+ dsn: 'https://public@dsn.ingest.sentry.io/1337',
+ integrations: [new Integrations.BrowserTracing({ idleTimeout: 9000 })],
+ tracesSampleRate: 1,
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js
new file mode 100644
index 000000000000..5355521f1655
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js
@@ -0,0 +1,11 @@
+document.getElementById('go-background').addEventListener('click', () => {
+ Object.defineProperty(document, 'hidden', { value: true, writable: true });
+ const ev = document.createEvent('Event');
+ ev.initEvent('visibilitychange');
+ document.dispatchEvent(ev);
+});
+
+document.getElementById('start-transaction').addEventListener('click', () => {
+ window.transaction = Sentry.startTransaction({ name: 'test-transaction' });
+ Sentry.getCurrentHub().configureScope(scope => scope.setSpan(window.transaction));
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.hbs b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.hbs
new file mode 100644
index 000000000000..4dbbc15044dc
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.hbs
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts
new file mode 100644
index 000000000000..513fea8f5ba5
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts
@@ -0,0 +1,39 @@
+import { expect, JSHandle } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+async function getPropertyValue(handle: JSHandle, prop: string) {
+ return (await handle.getProperty(prop))?.jsonValue();
+}
+
+sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
+ const url = await getLocalTestPath({ testDir: __dirname });
+
+ const pageloadTransaction = await getSentryTransactionRequest(page, url);
+ expect(pageloadTransaction).toBeDefined();
+
+ await page.click('#start-transaction');
+ const transactionHandle = await page.evaluateHandle('window.transaction');
+
+ const id_before = await getPropertyValue(transactionHandle, 'span_id');
+ const name_before = await getPropertyValue(transactionHandle, 'name');
+ const status_before = await getPropertyValue(transactionHandle, 'status');
+ const tags_before = await getPropertyValue(transactionHandle, 'tags');
+
+ expect(name_before).toBe('test-transaction');
+ expect(status_before).toBeUndefined();
+ expect(tags_before).toStrictEqual({});
+
+ await page.click('#go-background');
+
+ const id_after = await getPropertyValue(transactionHandle, 'span_id');
+ const name_after = await getPropertyValue(transactionHandle, 'name');
+ const status_after = await getPropertyValue(transactionHandle, 'status');
+ const tags_after = await getPropertyValue(transactionHandle, 'tags');
+
+ expect(id_before).toBe(id_after);
+ expect(name_after).toBe(name_before);
+ expect(status_after).toBe('cancelled');
+ expect(tags_after).toStrictEqual({ finishReason: 'documentHidden', visibilitychange: 'document.hidden' });
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/subject.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/subject.js
new file mode 100644
index 000000000000..7aa69584f070
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/subject.js
@@ -0,0 +1,6 @@
+document.getElementById('go-background').addEventListener('click', () => {
+ Object.defineProperty(document, 'hidden', { value: true, writable: true });
+ const ev = document.createEvent('Event');
+ ev.initEvent('visibilitychange');
+ document.dispatchEvent(ev);
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.hbs b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.hbs
new file mode 100644
index 000000000000..1171fc0676c3
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.hbs
@@ -0,0 +1,10 @@
+
+
+
+
+
+ ]
+
+
+
+
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts
new file mode 100644
index 000000000000..d33af7a0ba03
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts
@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should finish pageload transaction when the page goes background', async ({ getLocalTestPath, page }) => {
+ const url = await getLocalTestPath({ testDir: __dirname });
+
+ await page.goto(url);
+
+ page.click('#go-background');
+
+ const pageloadTransaction = await getSentryTransactionRequest(page);
+
+ expect(pageloadTransaction.contexts?.trace.op).toBe('pageload');
+ expect(pageloadTransaction.contexts?.trace.status).toBe('cancelled');
+ expect(pageloadTransaction.contexts?.trace.tags).toMatchObject({
+ visibilitychange: 'document.hidden',
+ finishReason: 'documentHidden',
+ });
+});