diff --git a/WebExample/playwright.config.ts b/WebExample/playwright.config.ts
index f788ec73..e6ad296a 100644
--- a/WebExample/playwright.config.ts
+++ b/WebExample/playwright.config.ts
@@ -1,11 +1,12 @@
 import {defineConfig, devices} from '@playwright/test';
+import * as TEST_CONST from '../testConstants';
 
 export default defineConfig({
   testDir: './tests',
   preserveOutput: 'never',
   webServer: {
     command: 'yarn web',
-    url: 'http://localhost:19006',
+    url: TEST_CONST.LOCAL_URL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
     stderr: 'pipe',
diff --git a/WebExample/tests/input.spec.ts b/WebExample/tests/input.spec.ts
index 0e291929..489e133f 100644
--- a/WebExample/tests/input.spec.ts
+++ b/WebExample/tests/input.spec.ts
@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test';
 import type {Page} from '@playwright/test';
-import * as CONSTANTS from '../../constants';
+import * as TEST_CONST from '../../testConstants';
 
 const setupInput = async (page: Page, mode: 'clear' | 'reset') => {
   const inputLocator = await page.locator(`div#MarkdownInput_Example`);
@@ -10,20 +10,20 @@ const setupInput = async (page: Page, mode: 'clear' | 'reset') => {
 };
 
 test.beforeEach(async ({page}) => {
-  await page.goto('http://localhost:19006/', {waitUntil: 'load'});
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
 });
 
 test.describe('standard input behaviour', () => {
   test('standard input results', async ({page}) => {
     const inputLocator = await setupInput(page, 'clear');
 
-    await inputLocator.pressSequentially(CONSTANTS.EXAMPLE_CONTENT);
+    await inputLocator.pressSequentially(TEST_CONST.EXAMPLE_CONTENT);
     const value = await inputLocator.innerText();
-    expect(value).toEqual(CONSTANTS.EXAMPLE_CONTENT);
+    expect(value).toEqual(TEST_CONST.EXAMPLE_CONTENT);
   });
 
   test('fast type cursor position', async ({page}) => {
-    const EXAMPLE_LONG_CONTENT = CONSTANTS.EXAMPLE_CONTENT.repeat(3);
+    const EXAMPLE_LONG_CONTENT = TEST_CONST.EXAMPLE_CONTENT.repeat(3);
 
     const inputLocator = await setupInput(page, 'clear');
 
diff --git a/WebExample/tests/styles.spec.ts b/WebExample/tests/styles.spec.ts
index 9e292ed2..29e7af72 100644
--- a/WebExample/tests/styles.spec.ts
+++ b/WebExample/tests/styles.spec.ts
@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test';
 import type {Page} from '@playwright/test';
-import * as CONSTANTS from '../../constants';
+import * as TEST_CONST from '../../testConstants';
 
 const setupInput = async (page: Page) => {
   const inputLocator = await page.locator(`div#MarkdownInput_Example`);
@@ -23,45 +23,45 @@ const testMarkdownContentStyle = async ({styleName, style, page}: {styleName: st
 };
 
 test.beforeEach(async ({page}) => {
-  await page.goto('http://localhost:19006/', {waitUntil: 'load'});
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
   await page.click('[data-testid="reset"]');
 });
 
 test.describe('markdown content styling', () => {
   test('bold', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'bold', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.bold.style, page});
+    await testMarkdownContentStyle({styleName: 'bold', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.style, page});
   });
 
   test('link', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'link', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.link.style, page});
+    await testMarkdownContentStyle({styleName: 'link', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.link.style, page});
   });
 
   test('title', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'title', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.title.style, page});
+    await testMarkdownContentStyle({styleName: 'title', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.title.style, page});
   });
 
   test('code', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'code', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.code.style, page});
+    await testMarkdownContentStyle({styleName: 'code', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.code.style, page});
   });
 
   test('codeBlock', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'codeBlock', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.codeBlock.style, page});
+    await testMarkdownContentStyle({styleName: 'codeBlock', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.codeBlock.style, page});
   });
 
   test('hereMention', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'here', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.here.style, page});
+    await testMarkdownContentStyle({styleName: 'here', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.here.style, page});
   });
 
   test('mentionUser', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'mentionUser', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.mentionUser.style, page});
+    await testMarkdownContentStyle({styleName: 'mentionUser', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.mentionUser.style, page});
   });
 
   test('roomMention', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'roomMention', style: CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.roomMention.style, page});
+    await testMarkdownContentStyle({styleName: 'roomMention', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.roomMention.style, page});
   });
 
   test('blockquote', async ({page, browserName}) => {
-    const blockquoteStyle = CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.blockquote.style;
+    const blockquoteStyle = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.blockquote.style;
     // Firefox border properties are serialized slightly differently
     const browserStyle = browserName === 'firefox' ? blockquoteStyle.replace(' border-left-style: solid', ' border-left: 6px solid gray') : blockquoteStyle;
 
diff --git a/WebExample/tests/textManipulation.spec.ts b/WebExample/tests/textManipulation.spec.ts
index 37978124..399667dc 100644
--- a/WebExample/tests/textManipulation.spec.ts
+++ b/WebExample/tests/textManipulation.spec.ts
@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test';
 import type {Locator, Page} from '@playwright/test';
-import * as CONSTANTS from '../../constants';
+import * as TEST_CONST from '../../testConstants';
 
 const setupInput = async (page: Page, mode: 'clear' | 'reset') => {
   const inputLocator = await page.locator(`div#MarkdownInput_Example`);
@@ -18,14 +18,14 @@ const pasteContent = async ({text, page, inputLocator}: {text: string; page: Pag
 };
 
 test.beforeEach(async ({page, context, browserName}) => {
-  await page.goto('http://localhost:19006/', {waitUntil: 'load'});
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
   if (browserName === 'chromium') await context.grantPermissions(['clipboard-write', 'clipboard-read']);
 });
 
 test.describe('paste content', () => {
   test('paste', async ({page}) => {
     const PASTE_TEXT = 'bold';
-    const boldStyleDefinition = CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.bold;
+    const boldStyleDefinition = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold;
 
     const inputLocator = await setupInput(page, 'clear');
 
@@ -63,10 +63,10 @@ test.describe('paste content', () => {
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_FIRST);
 
     await inputLocator.press(`${OPERATION_MODIFIER}+v`);
-    await page.waitForTimeout(CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS);
+    await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_SECOND);
     await inputLocator.press(`${OPERATION_MODIFIER}+v`);
-    await page.waitForTimeout(CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS);
+    await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
 
     await inputLocator.press(`${OPERATION_MODIFIER}+z`);
 
@@ -81,11 +81,11 @@ test.describe('paste content', () => {
 
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_FIRST);
     await inputLocator.press(`${OPERATION_MODIFIER}+v`);
-    await page.waitForTimeout(CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS);
+    await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_SECOND);
-    await page.waitForTimeout(CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS);
+    await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
     await inputLocator.press(`${OPERATION_MODIFIER}+v`);
-    await page.waitForTimeout(CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS);
+    await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
 
     await inputLocator.press(`${OPERATION_MODIFIER}+z`);
     await inputLocator.press(`${OPERATION_MODIFIER}+Shift+z`);
@@ -110,13 +110,13 @@ test('select', async ({page}) => {
     return preCaretRange.toString().length;
   });
 
-  expect(cursorPosition).toBe(CONSTANTS.EXAMPLE_CONTENT.length);
+  expect(cursorPosition).toBe(TEST_CONST.EXAMPLE_CONTENT.length);
 });
 
 test('cut content changes', async ({page}) => {
   const INITIAL_CONTENT = 'bold';
-  const WRAPPED_CONTENT = CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT);
-  const EXPECTED_CONTENT = CONSTANTS.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT).slice(0, 3);
+  const WRAPPED_CONTENT = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT);
+  const EXPECTED_CONTENT = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT).slice(0, 3);
 
   const inputLocator = await setupInput(page, 'clear');
   await pasteContent({text: WRAPPED_CONTENT, page, inputLocator});
diff --git a/WebExample/tsconfig.json b/WebExample/tsconfig.json
index 72043f5b..a1d289f6 100644
--- a/WebExample/tsconfig.json
+++ b/WebExample/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["App.tsx", "**/*.ts", "../constants.ts"],
+  "include": ["App.tsx", "**/*.ts", "../testConstants.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
index c8aa5f3c..94d3dcd1 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -4,7 +4,7 @@ import {Button, Platform, StyleSheet, Text, View} from 'react-native';
 
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
 import type {TextInput} from 'react-native';
-import * as CONSTANTS from '../../constants';
+import * as TEST_CONST from '../../testConstants';
 
 function isWeb() {
   return Platform.OS === 'web';
@@ -59,7 +59,7 @@ function getRandomColor() {
 }
 
 export default function App() {
-  const [value, setValue] = React.useState(CONSTANTS.EXAMPLE_CONTENT);
+  const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
   const [markdownStyle, setMarkdownStyle] = React.useState({});
   const [selection, setSelection] = React.useState({start: 0, end: 0});
 
@@ -100,6 +100,7 @@ export default function App() {
         placeholder="Type here..."
         onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
         selection={selection}
+        id={TEST_CONST.INPUT_ID}
       />
       {/* <Text>TextInput singleline</Text>
       <TextInput
@@ -141,7 +142,7 @@ export default function App() {
         testID="reset"
         title="Reset"
         onPress={() => {
-          setValue(CONSTANTS.EXAMPLE_CONTENT);
+          setValue(TEST_CONST.EXAMPLE_CONTENT);
           setMarkdownStyle({});
         }}
       />
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
index 1e5a0f25..e04f690a 100644
--- a/src/MarkdownTextInput.web.tsx
+++ b/src/MarkdownTextInput.web.tsx
@@ -161,6 +161,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       value,
       autoFocus = false,
       onContentSizeChange,
+      id,
     },
     ref,
   ) => {
@@ -601,7 +602,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
-        id="MarkdownInput_Example"
+        id={id}
         ref={setRef}
         contentEditable={!disabled}
         style={inputStyles}
diff --git a/src/web/InputHistory.ts b/src/web/InputHistory.ts
index 8447d7de..4a5c893c 100644
--- a/src/web/InputHistory.ts
+++ b/src/web/InputHistory.ts
@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../constants';
+import * as TEST_CONST from '../../testConstants';
 
 type HistoryItem = {
   text: string;
@@ -18,7 +18,7 @@ export default class InputHistory {
 
   debounceTime: number;
 
-  constructor(depth: number, debounceTime = CONSTANTS.INPUT_HISTORY_DEBOUNCE_TIME_MS) {
+  constructor(depth: number, debounceTime = TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS) {
     this.depth = depth;
     this.history = [];
     this.historyIndex = 0;
diff --git a/constants.ts b/testConstants.ts
similarity index 100%
rename from constants.ts
rename to testConstants.ts
diff --git a/tsconfig.json b/tsconfig.json
index b850718c..f0a6530f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,6 @@
     "verbatimModuleSyntax": true,
     "typeRoots": ["node_modules/@types"]
   },
-  "include": ["src/**/*", "types/global.d.ts", "constants.ts"],
+  "include": ["src/**/*", "types/global.d.ts", "testConstants.ts"],
   "exclude": ["**/node_modules/**/*", "parser/**/*", "**/lib/**/*", "example/src/**/*", "WebExample/**/*"]
 }