diff --git a/package-lock.json b/package-lock.json
index 0d88cce..11b2ac9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "eslint-plugin-react": "^7.33.2",
         "jsdom": "^22.1.0",
         "msw": "^1.2.1",
+        "playwright-msw": "^2.2.1",
         "prettier": "^3.0.3",
         "vite": "^4.4.11",
         "vitest": "^0.34.6"
@@ -5305,6 +5306,23 @@
         "node": ">=16"
       }
     },
+    "node_modules/playwright-msw": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/playwright-msw/-/playwright-msw-2.2.1.tgz",
+      "integrity": "sha512-LjT68LWqzJX8boy4KbnPp5ACLf7WDpt6RUem0tQQcQKys+45KNlluzBx8HEl1HNiCBYV/XZw1aI1aD2giKXWRg==",
+      "dev": true,
+      "dependencies": {
+        "@mswjs/cookies": "^0.2.2",
+        "strict-event-emitter": "^0.4.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@playwright/test": ">=1.20.0",
+        "msw": ">=0.47.3"
+      }
+    },
     "node_modules/playwright/node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
diff --git a/package.json b/package.json
index 8cc4684..96b9cda 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "eslint-plugin-react": "^7.33.2",
     "jsdom": "^22.1.0",
     "msw": "^1.2.1",
+    "playwright-msw": "^2.2.1",
     "prettier": "^3.0.3",
     "vite": "^4.4.11",
     "vitest": "^0.34.6"
diff --git a/src/mocks/index.ts b/src/mocks/index.ts
index 47adbba..d160b60 100644
--- a/src/mocks/index.ts
+++ b/src/mocks/index.ts
@@ -1,3 +1,3 @@
 export { server } from './server';
-export { url } from './handlers';
+export { url, handlers } from './handlers';
 export * from './data';
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
index 822dc66..191b5d0 100644
--- a/tests/home.spec.ts
+++ b/tests/home.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './msw-fixture';
+import { posts } from '@/mocks/data';
 
 test.describe('Home page', () => {
   test('has title', async ({ page }) => {
@@ -15,10 +16,8 @@ test.describe('Home page', () => {
   });
 
   test('has a link to a post', async ({ page }) => {
-    // TODO: use mocked data rather than external API
-    const name =
-      'sunt aut facere repellat provident occaecati excepturi optio reprehenderit';
-    const length = 100;
+    const postsData = posts();
+    const name = postsData[0].title;
 
     await page.goto('/');
 
@@ -27,7 +26,7 @@ test.describe('Home page', () => {
       name,
     });
 
-    await expect(list.getByRole('link')).toHaveCount(length);
+    await expect(list.getByRole('link')).toHaveCount(postsData.length);
     await expect(thePost).toBeInViewport();
 
     await thePost.click();
diff --git a/tests/msw-fixture.ts b/tests/msw-fixture.ts
new file mode 100644
index 0000000..2dcfbe8
--- /dev/null
+++ b/tests/msw-fixture.ts
@@ -0,0 +1,9 @@
+import { test as base } from '@playwright/test';
+import type { MockServiceWorker } from 'playwright-msw';
+import { createWorkerFixture } from 'playwright-msw';
+import { handlers } from '../src/mocks/handlers';
+export { expect } from '@playwright/test';
+
+export const test = base.extend<{
+  worker: MockServiceWorker;
+}>({ worker: createWorkerFixture(handlers) });