Created two mock jsons and mock api

fixtures/fruits-id.json

@@ -0,0 +1,70 @@
+[
+  {
+    "name": "Banana",
+    "id": 1
+  },
+  {
+    "name": "Orange",
+    "id": 2
+  },
+  {
+    "name": "Strawberry",
+    "id": 3
+  },
+  {
+    "name": "Pear",
+    "id": 4
+  },
+  {
+    "name": "Tomato",
+    "id": 5
+  },
+  {
+    "name": "Apple",
+    "id": 6
+  },
+  {
+    "name": "Pineapple",
+    "id": 10
+  },
+  {
+    "name": "Raspberry",
+    "id": 23
+  },
+  {
+    "name": "Watermelon",
+    "id": 25
+  },
+  {
+    "name": "Lemon",
+    "id": 26
+  },
+  {
+    "name": "Mango",
+    "id": 27
+  },
+  {
+    "name": "Blueberry",
+    "id": 33
+  },
+  {
+    "name": "Melon",
+    "id": 41
+  },
+  {
+    "name": "Lime",
+    "id": 44
+  },
+  {
+    "name": "Blackberry",
+    "id": 64
+  },
+  {
+    "name": "Kiwi",
+    "id": 66
+  },
+  {
+    "name": "Passionfruit",
+    "id": 70
+  }
+]

fixtures/fruits-name.json

@@ -0,0 +1,70 @@
+[
+  {
+    "name": "Apple",
+    "id": 6
+  },
+  {
+    "name": "Banana",
+    "id": 1
+  },
+  {
+    "name": "Blackberry",
+    "id": 64
+  },
+  {
+    "name": "Blueberry",
+    "id": 33
+  },
+  {
+    "name": "Kiwi",
+    "id": 66
+  },
+  {
+    "name": "Lemon",
+    "id": 26
+  },
+  {
+    "name": "Lime",
+    "id": 44
+  },
+  {
+    "name": "Mango",
+    "id": 27
+  },
+  {
+    "name": "Melon",
+    "id": 41
+  },
+  {
+    "name": "Orange",
+    "id": 2
+  },
+  {
+    "name": "Passionfruit",
+    "id": 70
+  },
+  {
+    "name": "Pear",
+    "id": 4
+  },
+  {
+    "name": "Pineapple",
+    "id": 10
+  },
+  {
+    "name": "Raspberry",
+    "id": 23
+  },
+  {
+    "name": "Strawberry",
+    "id": 3
+  },
+  {
+    "name": "Tomato",
+    "id": 5
+  },
+  {
+    "name": "Watermelon",
+    "id": 25
+  }
+]

fixtures/page-object-fixture.ts

@@ -1,10 +1,12 @@
 import { test as base } from '@playwright/test';
 import { HomePage } from '../pages/homePage';
 import { ArticlePage } from '../pages/articlePage';
+import { MockApiPage } from '../pages/mockApiPage';
 
 export type FrameworkFixtures = {
     homePage: HomePage;
     articlePage: ArticlePage;
+    mockApiPage: MockApiPage;
 };
 
 export const test = base.extend<FrameworkFixtures>({
@@ -15,6 +17,10 @@ export const test = base.extend<FrameworkFixtures>({
   articlePage: async ({ page }, use) => {
     await use(new ArticlePage(page));
   },
+
+  mockApiPage: async ({ page }, use) => {
+    await use(new MockApiPage(page));
+  }
 });
 
 export { expect } from '@playwright/test';

pages/mockApiPage.ts

@@ -0,0 +1,21 @@
+import { Page, Locator } from '@playwright/test';
+
+export class MockApiPage {
+  readonly page: Page;
+  readonly listItem: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.listItem = page.locator('li');
+  }
+
+  async navigate(): Promise<void> {
+    await this.page.goto('https://demo.playwright.dev/api-mocking/');
+  }
+
+  async getAllListItems(): Promise<string[]> {
+    const items = await this.listItem.allTextContents();
+    // Trim whitespace and filter out empty items
+    return items.map(t => t?.trim() ?? '').filter(Boolean);
+  }
+}

tests/mockApi.test.ts

@@ -0,0 +1,18 @@
+import { test as setup } from '../fixtures/test-options';
+import { expect } from '@playwright/test';
+import fruitData from '../fixtures/fruits-id.json';
+
+setup.describe('Mock API Tests Demo', () => {
+  setup('Mock API Functions', async ({ mockApiPage, page }) => {
+    await setup.step('Navigate to mock API page', async () => {
+      await page.route('**/api/v1/fruits', async (route) => {
+        await route.fulfill({ json: fruitData });
+      });
+      await mockApiPage.navigate();
+
+      // Verify that the first item is 'Banana' matching the mocked data
+      const items = await mockApiPage.getAllListItems();
+      await expect(items[0]).toBe('Banana');
+    });
+  });
+});

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true
+  }
+}