diff --git a/tests/front.spec.js b/tests/front.spec.js
new file mode 100644
index 0000000..6740cbb
--- /dev/null
+++ b/tests/front.spec.js
@@ -0,0 +1,64 @@
+import { test,expect } from '@playwright/test'
+
+test('Title Page',async({page}) =>{
+    await page.goto('http://localhost:5173/')
+    await expect(page).toHaveTitle(/Vite App/)
+})
+
+test('Navigation between pages', async ({ page }) => {
+  // Aller à la page d'accueil
+  await page.goto('http://localhost:5173/');
+
+  // Vérifier que le lien "Canvas" est visible et cliquable
+  const canvasLink = page.locator('text=Canvas');
+  await expect(canvasLink).toBeVisible();
+  await canvasLink.click();
+
+  // Vérifier que l'URL a changé pour la page Canvas
+  await expect(page).toHaveURL(/canvas/);
+
+  // Vérifier que le lien "Home" est visible et cliquable
+  const homeLink = page.locator('text=Home');
+  await expect(homeLink).toBeVisible();
+  await homeLink.click();
+
+  // Vérifier que l'URL est revenue à la page d'accueil
+  await expect(page).toHaveURL(/\//);
+});
+
+test('Page Canvas ', async ({ page }) => {
+  // Aller à la page Canvas
+  await page.goto('http://localhost:5173/canvas');
+
+  // Vérifier que le titre de la page est visible
+  const pageTitle = page.locator('text=Page Canvas');
+  await expect(pageTitle).toBeVisible();
+
+  // Vérifier que la grille d'éléments est visible
+  const canvasGrid = page.locator('.canvas');
+  await expect(canvasGrid).toBeVisible();
+
+  // Vérifier que plusieurs éléments sont présents dans la grille
+  //const canvasItems = canvasGrid.locator('.CanvasItem');
+  //await expect(canvasItems).toHaveCount(9); // On suppose qu'il y a 9 éléments
+});
+
+//test('Contact dropdown menu works', async ({ page }) => {
+  // Aller à la page Canvas
+  //await page.goto('http://localhost:5173/canvas');
+
+  // Vérifier que le bouton "Contact" est visible
+  //const contactButton = page.locator('button', { hasText: 'Contact' });
+  //await expect(contactButton).toBeVisible();
+
+  // Cliquer sur le bouton "Contact" pour ouvrir le menu déroulant
+  //await contactButton.click();
+
+  // Vérifier que le menu déroulant est visible
+  //const dropdownMenu = page.locator('.contact-dropdown');
+  //await expect(dropdownMenu).toBeVisible();
+
+  // Vérifier que le menu contient des options
+  //const dropdownOptions = dropdownMenu.locator('button');
+  //await expect(dropdownOptions).toHaveCountGreaterThan(0);
+//});
\ No newline at end of file