diff --git a/frontend/src/pages/Dashboard/Statistic.tsx b/frontend/src/pages/Dashboard/Statistic.tsx
index c073fa2..900c156 100644
--- a/frontend/src/pages/Dashboard/Statistic.tsx
+++ b/frontend/src/pages/Dashboard/Statistic.tsx
@@ -93,7 +93,7 @@ const Statistic: React.FC = () => {
         </div>
 
         {/* Recommendation Card */}
-        <div className="mt-6">
+        <div className="mt-6" id="alert-container">
           <Alert
             indoor_temp={indoorWeatherData?.avg_indoor_temp}
             outdoor_temp={outdoorWeatherData?.avg_outdoor_temp}
diff --git a/frontend/tests/test-camera.spec.ts b/frontend/tests/test-camera.spec.ts
new file mode 100644
index 0000000..84dc59f
--- /dev/null
+++ b/frontend/tests/test-camera.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+  await page.getByRole('link', { name: 'Camera' }).click();
+  await page.getByRole('combobox').selectOption('2');
+  await page.getByRole('button', { name: 'Start Connection' }).click();
+  await page.waitForSelector('text=Loading...');
+  const loadingText = await page.$('text=Loading...');
+  expect(loadingText).not.toBeNull();
+
+  // await page.waitForSelector('text=Loading...', { state: 'hidden' });
+  // const hiddenLoadingText = await page.$('text=Loading...');
+  // expect(hiddenLoadingText).toBeNull();
+
+  await page.waitForSelector('canvas');
+  const canvas = await page.$('canvas');
+  expect(canvas).not.toBeNull();
+});
diff --git a/frontend/tests/test-prediction.spec.ts b/frontend/tests/test-prediction.spec.ts
new file mode 100644
index 0000000..1005516
--- /dev/null
+++ b/frontend/tests/test-prediction.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+
+  // Check if elements with specific text exist on the page
+  const outdoorTempElement = await page
+    .locator('span')
+    .getByText(/^Outdoor Temperature$/)
+    .first();
+  const outdoorHumidityElement = await page
+    .locator('span')
+    .getByText(/^Outdoor Humidity$/)
+    .first();
+  const outdoorPM25Element = await page
+    .locator('span')
+    .getByText(/^Outdoor PM2.5$/)
+    .first();
+  const outdoorPM10Element = await page
+    .locator('span')
+    .getByText(/^Outdoor PM10$/)
+    .first();
+  const indoorTempElement = await page
+    .locator('span')
+    .getByText(/^Indoor Temperature$/)
+    .first();
+  const indoorLightElement = await page
+    .locator('span')
+    .getByText(/^Indoor Light$/)
+    .first();
+
+  expect(outdoorTempElement).not.toBeNull();
+  expect(outdoorHumidityElement).not.toBeNull();
+  expect(outdoorPM25Element).not.toBeNull();
+  expect(outdoorPM10Element).not.toBeNull();
+  expect(indoorTempElement).not.toBeNull();
+  expect(indoorLightElement).not.toBeNull();
+});
diff --git a/frontend/tests/test-recommend.spec.ts b/frontend/tests/test-recommend.spec.ts
new file mode 100644
index 0000000..5ef946c
--- /dev/null
+++ b/frontend/tests/test-recommend.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+
+  const alertContainer = await page.waitForSelector('#alert-container');
+  expect(alertContainer).not.toBeNull();
+});
diff --git a/frontend/tests/test-snapshot.spec.ts b/frontend/tests/test-snapshot.spec.ts
new file mode 100644
index 0000000..d4ac36c
--- /dev/null
+++ b/frontend/tests/test-snapshot.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+  await page.getByRole('link', { name: 'Snapshot' }).click();
+  await page.getByRole('button', { name: 'Today' }).click();
+  const image = await page.waitForSelector('img');
+
+  expect(image).not.toBeNull();
+});