diff --git a/apps/docs/tests/verify-search.spec.ts b/apps/docs/tests/verify-search.spec.ts
index fd4b45a..c54321a 100644
--- a/apps/docs/tests/verify-search.spec.ts
+++ b/apps/docs/tests/verify-search.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test.describe('Search Cancel Button Layout', () => {
-  test('should have flexible cancel button on mobile', async ({ page }) => {
+  test('should have flexible cancel button on mobile', async ({ page }, testInfo) => {
     await page.setViewportSize({ width: 375, height: 667 });
     await page.goto('/');
 
@@ -30,10 +30,10 @@ test.describe('Search Cancel Button Layout', () => {
 
     expect(newBox!.width).toBeGreaterThan(originalBox?.width || 0);
 
-    await page.screenshot({ path: 'search-modal-mobile-long-cancel.png' });
+    await page.screenshot({ path: testInfo.outputPath('search-modal-mobile-long-cancel.png') });
   });
 
-  test('should look correct on desktop', async ({ page }) => {
+  test('should look correct on desktop', async ({ page }, testInfo) => {
     await page.setViewportSize({ width: 1280, height: 800 });
     await page.goto('/');
 
@@ -46,6 +46,6 @@ test.describe('Search Cancel Button Layout', () => {
     const cancelButton = page.locator('button[data-close-modal]');
     await expect(cancelButton).toBeHidden(); // Hidden on desktop in original code (md:sl-hidden)
 
-    await page.screenshot({ path: 'search-modal-desktop.png' });
+    await page.screenshot({ path: testInfo.outputPath('search-modal-desktop.png') });
   });
 });