diff --git a/package.json b/package.json
index a949c44e..a66e9a9a 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,9 @@
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "test": "npm run test:unit",
     "tests": "vitest --config ./tests/vitest.config.js",
-    "test:unit": "npm run tests --project unit",
+    "test:browser": "npm run tests --project browser",
     "test:integration": "npm run tests --project integration",
+    "test:unit": "npm run tests --project unit",
     "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write",
     "build": ""
   },
@@ -63,6 +64,8 @@
     "@nuxt/test-utils": "3.21.0",
     "@pinia/testing": "1.0.3",
     "@vitejs/plugin-vue": "5.2.4",
+    "@vitest/browser-playwright": "4.0.16",
+    "@vitest/browser-preview": "4.0.16",
     "@vue/test-utils": "2.4.6",
     "eslint": "9.26.0",
     "eslint-plugin-import": "2.31.0",
@@ -79,9 +82,10 @@
     "unplugin-auto-import": "20.0.0",
     "vite": "6.3.5",
     "vite-plugin-vuetify": "2.1.1",
-    "vitest": "4.0.15",
+    "vitest": "4.0.16",
+    "vitest-browser-vue": "2.0.1",
     "vitest-environment-nuxt": "1.0.1",
-    "vitest-indexeddb": "^0.0.1"
+    "vitest-indexeddb": "0.0.1"
   },
   "peerDependencies": {
     "electron": "36.4.0"
diff --git a/tests/browser/Viewer/Options/ColorPicke.test.js b/tests/browser/Viewer/Options/ColorPicke.test.js
new file mode 100644
index 00000000..1725a3d8
--- /dev/null
+++ b/tests/browser/Viewer/Options/ColorPicke.test.js
@@ -0,0 +1,14 @@
+import { expect, test } from "vitest"
+import { render } from "vitest-browser-vue"
+
+import ColorPicker from "@/components/Viewer/Options/ColorPicker"
+import { vuetify } from "../../../utils"
+
+test("Graphic test for ColorPicker", async () => {
+  const component = await render(ColorPicker, {
+    global: {
+      plugins: [vuetify],
+    },
+  })
+  await expect(component.container).toMatchScreenshot()
+})
diff --git a/tests/browser/Viewer/Options/VisibilitySwitch.test.js b/tests/browser/Viewer/Options/VisibilitySwitch.test.js
new file mode 100644
index 00000000..f62c36f4
--- /dev/null
+++ b/tests/browser/Viewer/Options/VisibilitySwitch.test.js
@@ -0,0 +1,14 @@
+import { expect, test } from "vitest"
+import { render } from "vitest-browser-vue"
+
+import VisibilitySwitch from "@/components/Viewer/Options/VisibilitySwitch"
+import { vuetify } from "../../../utils"
+
+test("Graphic test for VisibilitySwitch", async () => {
+  const component = await render(VisibilitySwitch, {
+    global: {
+      plugins: [vuetify],
+    },
+  })
+  await expect(component.container).toMatchScreenshot("VisibilitySwitch")
+})
diff --git a/tests/browser/Viewer/Options/__screenshots__/ColorPicke.test.js/Graphic-test-for-ColorPicker-1-chromium-linux.png b/tests/browser/Viewer/Options/__screenshots__/ColorPicke.test.js/Graphic-test-for-ColorPicker-1-chromium-linux.png
new file mode 100644
index 00000000..f2e50a6c
Binary files /dev/null and b/tests/browser/Viewer/Options/__screenshots__/ColorPicke.test.js/Graphic-test-for-ColorPicker-1-chromium-linux.png differ
diff --git a/tests/browser/Viewer/Options/__screenshots__/VisibilitySwitch.test.js/VisibilitySwitch-chromium-linux.png b/tests/browser/Viewer/Options/__screenshots__/VisibilitySwitch.test.js/VisibilitySwitch-chromium-linux.png
new file mode 100644
index 00000000..6d9cff3e
Binary files /dev/null and b/tests/browser/Viewer/Options/__screenshots__/VisibilitySwitch.test.js/VisibilitySwitch-chromium-linux.png differ
diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
index bf97850f..bd3a3ef5 100644
--- a/tests/integration/microservices/back/requirements.txt
+++ b/tests/integration/microservices/back/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==6.*,>=6.3.3
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index 9e1c222f..4d097394 100644
--- a/tests/integration/microservices/viewer/requirements.txt
+++ b/tests/integration/microservices/viewer/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.15.6
diff --git a/tests/unit/components/FileSelector.nuxt.test.js b/tests/unit/components/FileSelector.nuxt.test.js
index 88afde3a..e0b00406 100644
--- a/tests/unit/components/FileSelector.nuxt.test.js
+++ b/tests/unit/components/FileSelector.nuxt.test.js
@@ -10,6 +10,7 @@ import { setupActivePinia, vuetify } from "@ogw_tests/utils"
 import FileSelector from "@ogw_front/components/FileSelector"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
+import { vuetify } from "../../utils"
 
 const EXPECTED_LENGTH = 1
 const FIRST_INDEX = 0
diff --git a/tests/unit/components/Step.nuxt.test.js b/tests/unit/components/Step.nuxt.test.js
index 7c892f15..5b4e1a0c 100644
--- a/tests/unit/components/Step.nuxt.test.js
+++ b/tests/unit/components/Step.nuxt.test.js
@@ -2,7 +2,6 @@ import { computed, reactive, ref, shallowRef } from "vue"
 import { describe, expect, test } from "vitest"
 import ResizeObserver from "resize-observer-polyfill"
 import { mount } from "@vue/test-utils"
-
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
 import Step from "@ogw_front/components/Step"
 
diff --git a/tests/vitest.config.js b/tests/vitest.config.js
index 18fe9c8d..4e86de66 100644
--- a/tests/vitest.config.js
+++ b/tests/vitest.config.js
@@ -1,8 +1,11 @@
-import { defineConfig } from "vitest/config"
-import { defineVitestProject } from "@nuxt/test-utils/config"
 import { fileURLToPath } from "node:url"
 import path from "node:path"
 
+import { defineConfig } from "vitest/config"
+import { defineVitestProject } from "@nuxt/test-utils/config"
+import { playwright } from "@vitest/browser-playwright"
+// import vue from "@vitejs/plugin-vue"
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const RETRIES = 3
@@ -21,6 +24,21 @@ export default defineConfig({
     globals: false,
     setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
     projects: [
+      await defineVitestProject({
+        // plugins: [vue()],
+        test: {
+          name: "browser",
+          include: ["tests/browser/**/*.test.js"],
+          setupFiles: ["vitest-browser-vue"],
+          browser: {
+            enabled: true,
+            // headless: true,
+            provider: playwright(),
+            instances: [{ browser: "chromium" }],
+          },
+          retry: globalRetry,
+        },
+      }),
       await defineVitestProject({
         test: {
           name: "unit",