diff --git a/app/page.browser.tsx b/app/page.browser.tsx
index 912e5df..6186010 100644
--- a/app/page.browser.tsx
+++ b/app/page.browser.tsx
@@ -6,9 +6,12 @@ describe('Main app page (vitest browser mode)', () => {
   test('renders header', async () => {
     const screen = await render(<HomePage />);
 
-    await expect
-      .element(screen.getByRole('heading', { name: 'Welcome to this sample app' }))
-      .toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Welcome to this sample app' })).toBeInTheDocument();
+
+    // if you needed retrying, you could do this:
+    // await expect
+    //   .element(screen.getByRole('heading', { name: 'Welcome to this sample app' }))
+    //   .toBeInTheDocument();
   });
 
   describe('counter', () => {
@@ -18,17 +21,21 @@ describe('Main app page (vitest browser mode)', () => {
       const decrementButton = screen.getByText('-');
       const counterDisplay = screen.getByTestId('counter-display');
 
-      await expect.element(counterDisplay).toHaveTextContent('0');
+      expect(counterDisplay).toHaveTextContent('0');
+      // or:
+      // await expect.element(counterDisplay).toHaveTextContent('0');
 
       await incrementButton.click();
 
-      await expect.element(counterDisplay).toHaveTextContent('1');
+      expect(counterDisplay).toHaveTextContent('1');
+      // or:
+      //await expect.element(counterDisplay).toHaveTextContent('1');
 
       await decrementButton.click();
-      await expect.element(counterDisplay).toHaveTextContent('0');
+      expect(counterDisplay).toHaveTextContent('0');
 
       await decrementButton.click();
-      await expect.element(counterDisplay).toHaveTextContent('-1');
+      expect(counterDisplay).toHaveTextContent('-1');
     });
   });
 
@@ -43,25 +50,25 @@ describe('Main app page (vitest browser mode)', () => {
 
       const totalItems = screen.getByText('Total items', { exact: false });
 
-      await expect.element(totalItems).toHaveTextContent('Total items: 1');
+      expect(totalItems).toHaveTextContent('Total items: 1');
 
       await input.fill('dog');
       await addButton.click();
 
-      await expect.element(totalItems).toHaveTextContent('Total items: 2');
+      expect(totalItems).toHaveTextContent('Total items: 2');
 
       const firstRow = screen.getByTestId('item-0');
-      await expect.element(firstRow).toHaveTextContent('cat');
+      expect(firstRow).toHaveTextContent('cat');
 
       // no need to call within(firstRow) in Browser mode - you can query directly on the object
       const removeCatButton = firstRow.getByRole('button');
-      await expect.element(removeCatButton).toHaveTextContent('Remove');
+      expect(removeCatButton).toHaveTextContent('Remove');
 
-      await expect.element(screen.getByText('cat', { exact: false })).toBeInTheDocument();
+      expect(screen.getByText('cat', { exact: false })).toBeInTheDocument();
 
       await removeCatButton.click();
 
-      await expect.element(screen.getByText('cat', { exact: false })).not.toBeInTheDocument();
+      expect(screen.getByText('cat', { exact: false })).not.toBeInTheDocument();
     });
   });
 
@@ -77,34 +84,36 @@ describe('Main app page (vitest browser mode)', () => {
       const toggleContent2 = screen.getByTestId('toggle-content-2');
 
       // it starts off visible:
-      await expect.element(toggleButton).toHaveTextContent('Hide Content');
-      await expect.element(toggleContent1).toBeInTheDocument();
-      await expect.element(toggleContent1).toBeVisible();
-      await expect.element(toggleContent2).toBeInTheDocument();
-      await expect.element(toggleContent2).toBeVisible();
+      expect(toggleButton).toHaveTextContent('Hide Content');
+      expect(toggleContent1).toBeInTheDocument();
+      expect(toggleContent1).toBeVisible();
+      expect(toggleContent2).toBeInTheDocument();
+      expect(toggleContent2).toBeVisible();
 
       // Click to hide
       await toggleButton.click();
 
-      await expect.element(toggleButton).toHaveTextContent('Show Content');
+      expect(toggleButton).toHaveTextContent('Show Content');
+
+      // check the contet is not visible:
+      expect(screen.getByTestId('toggle-content-1')).not.toBeInTheDocument();
 
-      await expect.element(screen.getByTestId('toggle-content-1').query()).toBeNull();
       // the second content div should still be in the dom
       // but hidden with css... we can test that the hidden class is there
       // and in browser mode, we can actually test visibility properly
-      await expect.element(toggleContent2).toHaveClass('hidden');
-      await expect.element(toggleContent2).toBeInTheDocument();
+      expect(toggleContent2).toHaveClass('hidden');
+      expect(toggleContent2).toBeInTheDocument();
 
       // BTW this only works as the `hidden` class name from tailwind is added, and in vitest.browser.setup.ts
       // we include the css! without it, there is no display:none style applied.
-      await expect.element(toggleContent2).not.toBeVisible(); // ✅ this works in browser mode!
+      expect(toggleContent2).not.toBeVisible(); // ✅ this works in browser mode!
 
       // Click to show again
       await toggleButton.click();
 
-      await expect.element(toggleButton).toHaveTextContent('Hide Content');
-      await expect.element(screen.getByTestId('toggle-content-1')).toBeInTheDocument();
-      await expect.element(toggleContent2).not.toHaveClass('hidden');
+      expect(toggleButton).toHaveTextContent('Hide Content');
+      expect(screen.getByTestId('toggle-content-1')).toBeInTheDocument();
+      expect(toggleContent2).not.toHaveClass('hidden');
     });
   });
 });
diff --git a/app/self-contained-test.browser.tsx b/app/self-contained-test.browser.tsx
index 6be5683..0df9fb5 100644
--- a/app/self-contained-test.browser.tsx
+++ b/app/self-contained-test.browser.tsx
@@ -24,12 +24,12 @@ const CounterComponent = (): React.ReactElement => {
 it('should let you increment ', async () => {
   render(<CounterComponent />);
 
-  // everything is promise based:
-  await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 0');
+  expect(page.getByRole('heading')).toHaveTextContent('Count: 0');
 
   // get an element, then call .click() on it directly:
-  const button = await page.getByRole('button');
+  const button = page.getByRole('button');
   await button.click();
 
-  await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 1');
+  expect(page.getByRole('heading')).toHaveTextContent('Count: 1');
+  // await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 1');
 });
diff --git a/package.json b/package.json
index a781e4f..aa70651 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser": "^4.0.13",
     "@vitest/browser-playwright": "^4.0.13",
     "@vitest/ui": "^4.0.13",
     "eslint": "^9",
diff --git a/yarn.lock b/yarn.lock
index 4ae225a..502d48a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1351,7 +1351,7 @@
     "@vitest/mocker" "4.0.14"
     tinyrainbow "^3.0.3"
 
-"@vitest/browser@4.0.14", "@vitest/browser@^4.0.13":
+"@vitest/browser@4.0.14":
   version "4.0.14"
   resolved "https://registry.yarnpkg.com/@vitest/browser/-/browser-4.0.14.tgz#12b577e027ff09cbcc3c9395f44ae7df73543b3b"
   integrity sha512-vO0uqR8SnPTd8ykp14yaIuUyMZ9HEBYuoZrVdUp7RrEp76VEnkrX9fDkGnK0NyBdfWXB6cqp7BmqVekd8yKHFQ==