diff --git a/packages/tasks-common/tasks-common.client.js b/packages/tasks-common/tasks-common.client.js
index ecc2cf2..d6543be 100644
--- a/packages/tasks-common/tasks-common.client.js
+++ b/packages/tasks-common/tasks-common.client.js
@@ -55,7 +55,7 @@ const App = () => {
         <div style={{ display: 'flex' }}>
           <button className="add-task" onClick={onAddClick} style={{ margin: 4 }}>Add task</button>
           <button className="remove-task" onClick={onRemoveClick} style={{ margin: 4 }}>Remove task</button>
-          <button className="remove-all-tasks" onClick={onRemoveAllClick} style={{ margin: 4 }}>Remove all task</button>
+          <button className="remove-all-tasks" onClick={onRemoveAllClick} style={{ margin: 4 }}>Remove all tasks</button>
         </div>
         {reactive ? <AppReactive tasks={tasks} setTasks={setTasks} /> : <AppNonReactive tasks={tasks} setTasks={setTasks} fetchTasks={fetchTasks} />}
       </div>
diff --git a/playwright.config.ts b/playwright.config.ts
index 4a501ea..54ea9f5 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -11,6 +11,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  timeout: 260_000,
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -38,15 +39,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
deleted file mode 100644
index 54a906a..0000000
--- a/tests/example.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
-
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
-
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
-});
diff --git a/tests/non-reactive.spec.ts b/tests/non-reactive.spec.ts
new file mode 100644
index 0000000..cbc9923
--- /dev/null
+++ b/tests/non-reactive.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+import { addAndRemoveTasks } from './test-helpers';
+
+const taskCount = parseFloat(process.env.TASK_COUNT || 500);
+
+test('non-reactive', async ({ page }) => {
+  await addAndRemoveTasks({ page, reactive: false, taskCount});
+});
diff --git a/tests/reactive.spec.ts b/tests/reactive.spec.ts
new file mode 100644
index 0000000..3e451e0
--- /dev/null
+++ b/tests/reactive.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+import { addAndRemoveTasks } from './test-helpers';
+
+const taskCount = parseFloat(process.env.TASK_COUNT || 500);
+
+test('reactive', async ({ page }) => {
+  await addAndRemoveTasks({ page, reactive: true, taskCount });
+});
diff --git a/tests/test-helpers.js b/tests/test-helpers.js
new file mode 100644
index 0000000..e8692aa
--- /dev/null
+++ b/tests/test-helpers.js
@@ -0,0 +1,22 @@
+export const addAndRemoveTasks = async ({ page, reactive, taskCount }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByLabel(reactive ? 'Reactive' : 'No Reactive', { exact: true }).check();
+
+  await page.getByRole('button', { name: 'Remove all tasks' }).click();
+
+  const tasks = Array.from({ length: taskCount });
+  let addedNum = 1;
+  for await (const _addTask of tasks) {
+    await page.getByRole('button', { name: 'Add task' }).click();
+    await page.waitForSelector(`text="New Task ${addedNum}"`, { state: 'visible' });
+    addedNum += 1;
+  }
+  let removedNum = 1;
+  for await (const _removeTask of tasks) {
+    await page.getByRole('button', { name: 'Remove task' }).click();
+    await page.waitForSelector(`text="New Task ${removedNum}"`, { state: 'detached' });
+    removedNum += 1;
+  }
+
+  await page.getByRole('button', { name: 'Remove all tasks' }).click();
+};