diff --git a/package.json b/package.json
index 7c0f2606..38a694b3 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,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": ""
   },
@@ -13,6 +14,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",
     "electron": "36.4.0",
     "eslint": "9.26.0",
@@ -30,7 +33,8 @@
     "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"
   },
   "overrides": {
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 b09aef7a..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==5.*,>=5.14.3rc1
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index 147e1750..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.13.2
diff --git a/tests/unit/components/CrsSelector.nuxt.test.js b/tests/unit/components/CrsSelector.nuxt.test.js
index a66c0a3f..7e665c33 100644
--- a/tests/unit/components/CrsSelector.nuxt.test.js
+++ b/tests/unit/components/CrsSelector.nuxt.test.js
@@ -1,25 +1,17 @@
-import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
-
+import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { describe, expect, test, vi } from "vitest"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-
 import CrsSelector from "@ogw_front/components/CrsSelector"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
+import { vuetify } from "../../utils"
+
 const crs_selector_schema =
   schemas.opengeodeweb_back.geographic_coordinate_systems
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("CrsSelector", () => {
   const pinia = createTestingPinia({
     stubActions: false,
diff --git a/tests/unit/components/ExtensionSelector.nuxt.test.js b/tests/unit/components/ExtensionSelector.nuxt.test.js
index b176b831..702dec5b 100644
--- a/tests/unit/components/ExtensionSelector.nuxt.test.js
+++ b/tests/unit/components/ExtensionSelector.nuxt.test.js
@@ -1,25 +1,16 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
+import * as components from "vuetify/components"
 
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import ExtensionSelector from "@ogw_front/components/ExtensionSelector"
-
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import { vuetify } from "../../utils"
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("ExtensionSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,
diff --git a/tests/unit/components/FeedBack/ErrorsBanner.nuxt.test.js b/tests/unit/components/FeedBack/ErrorsBanner.nuxt.test.js
index 3d849589..30a56b3b 100644
--- a/tests/unit/components/FeedBack/ErrorsBanner.nuxt.test.js
+++ b/tests/unit/components/FeedBack/ErrorsBanner.nuxt.test.js
@@ -1,18 +1,11 @@
 import { describe, expect, test, vi } from "vitest"
 import { mount } from "@vue/test-utils"
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { createTestingPinia } from "@pinia/testing"
 import { setActivePinia } from "pinia"
 
 import FeedBackErrorBanner from "@ogw_front/components/FeedBack/ErrorBanner"
 import { useFeedbackStore } from "@ogw_front/stores/feedback"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("FeedBackErrorBanner", async () => {
   ;(test(`Test reload`, async () => {
diff --git a/tests/unit/components/FeedBack/Snackers.nuxt.test.js b/tests/unit/components/FeedBack/Snackers.nuxt.test.js
index 8d6674cc..4a609a7c 100644
--- a/tests/unit/components/FeedBack/Snackers.nuxt.test.js
+++ b/tests/unit/components/FeedBack/Snackers.nuxt.test.js
@@ -2,20 +2,13 @@
 vi.stubGlobal("visualViewport", new EventTarget())
 import { describe, expect, test, vi } from "vitest"
 import { mount } from "@vue/test-utils"
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import FeedBackSnackers from "@ogw_front/components/FeedBack/Snackers"
 import { useFeedbackStore } from "@ogw_front/stores/feedback"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("FeedBackSnackers", async () => {
   test(`Test delete error`, async () => {
diff --git a/tests/unit/components/FileSelector.nuxt.test.js b/tests/unit/components/FileSelector.nuxt.test.js
index 2db643fe..d143b105 100644
--- a/tests/unit/components/FileSelector.nuxt.test.js
+++ b/tests/unit/components/FileSelector.nuxt.test.js
@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
@@ -14,15 +11,11 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 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 allowed_files_schema = schemas.opengeodeweb_back.allowed_files
 const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("FileSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,
diff --git a/tests/unit/components/FileUploader.nuxt.test.js b/tests/unit/components/FileUploader.nuxt.test.js
index 830be419..586faf83 100644
--- a/tests/unit/components/FileUploader.nuxt.test.js
+++ b/tests/unit/components/FileUploader.nuxt.test.js
@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
@@ -13,12 +10,9 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
-const upload_file_schema = schemas.opengeodeweb_back.upload_file
+import { vuetify } from "../../utils"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
 describe("FileUploader", async () => {
   const pinia = createTestingPinia({
diff --git a/tests/unit/components/Inspector/InspectionButton.nuxt.test.js b/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
index d320dc40..7150517d 100644
--- a/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
+++ b/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
@@ -1,22 +1,16 @@
 import { describe, expect, test, vi } from "vitest"
-import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
+import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import InspectorInspectionButton from "@ogw_front/components/Inspector/InspectionButton"
 import { useGeodeStore } from "@ogw_front/stores/geode"
-const schema = schemas.opengeodeweb_back.inspect_file
+import { vuetify } from "../../../utils"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+const schema = schemas.opengeodeweb_back.inspect_file
 
 describe("Inspector/InspectionButton", async () => {
   const pinia = createTestingPinia({
diff --git a/tests/unit/components/Inspector/ResultPanel.nuxt.test.js b/tests/unit/components/Inspector/ResultPanel.nuxt.test.js
index fac72a56..a93c1470 100644
--- a/tests/unit/components/Inspector/ResultPanel.nuxt.test.js
+++ b/tests/unit/components/Inspector/ResultPanel.nuxt.test.js
@@ -1,16 +1,8 @@
 import { describe, expect, test } from "vitest"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
 
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import InspectorResultPanel from "@ogw_front/components/Inspector/ResultPanel"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("Inspector/ResultPanel", async () => {
   test(`Test with issues`, async () => {
diff --git a/tests/unit/components/Launcher.nuxt.test.js b/tests/unit/components/Launcher.nuxt.test.js
index bb9067cb..22667e95 100644
--- a/tests/unit/components/Launcher.nuxt.test.js
+++ b/tests/unit/components/Launcher.nuxt.test.js
@@ -1,22 +1,13 @@
 import { describe, expect, test, vi } from "vitest"
 import { flushPromises } from "@vue/test-utils"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import Launcher from "@ogw_front/components/Launcher"
 
 import { useInfraStore } from "@ogw_front/stores/infra"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 // Mock navigator.locks API
 const mockLockRequest = vi.fn().mockImplementation(async (name, callback) => {
diff --git a/tests/unit/components/MissingFilesSelector.nuxt.test.js b/tests/unit/components/MissingFilesSelector.nuxt.test.js
index 977eeaef..37cc5700 100644
--- a/tests/unit/components/MissingFilesSelector.nuxt.test.js
+++ b/tests/unit/components/MissingFilesSelector.nuxt.test.js
@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
@@ -14,14 +11,11 @@ import MissingFilesSelector from "@ogw_front/components/MissingFilesSelector"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
+import { vuetify } from "../../utils"
+
 const missing_files_schema = schemas.opengeodeweb_back.missing_files
 const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("MissingFilesSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,
diff --git a/tests/unit/components/ObjectSelector.nuxt.test.js b/tests/unit/components/ObjectSelector.nuxt.test.js
index ed7fddc8..aa052472 100644
--- a/tests/unit/components/ObjectSelector.nuxt.test.js
+++ b/tests/unit/components/ObjectSelector.nuxt.test.js
@@ -1,26 +1,17 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
-
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import { vuetify } from "../../utils"
 
 const allowed_objects = schemas.opengeodeweb_back.allowed_objects
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("ObjectSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,
diff --git a/tests/unit/components/PackagesVersions.nuxt.test.js b/tests/unit/components/PackagesVersions.nuxt.test.js
index 0189afac..55e57977 100644
--- a/tests/unit/components/PackagesVersions.nuxt.test.js
+++ b/tests/unit/components/PackagesVersions.nuxt.test.js
@@ -1,20 +1,11 @@
 import { describe, expect, test, vi } from "vitest"
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import PackagesVersions from "@ogw_front/components/PackagesVersions"
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 describe("PackagesVersions", async () => {
   test(`Mount`, async () => {
diff --git a/tests/unit/components/Step.nuxt.test.js b/tests/unit/components/Step.nuxt.test.js
index 569543ea..738ccb30 100644
--- a/tests/unit/components/Step.nuxt.test.js
+++ b/tests/unit/components/Step.nuxt.test.js
@@ -1,17 +1,9 @@
 import { describe, expect, test } from "vitest"
 import { mount } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import Step from "@ogw_front/components/Step"
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 global.ResizeObserver = require("resize-observer-polyfill")
 
diff --git a/tests/unit/components/Stepper.nuxt.test.js b/tests/unit/components/Stepper.nuxt.test.js
index 5b855db4..5faead4e 100644
--- a/tests/unit/components/Stepper.nuxt.test.js
+++ b/tests/unit/components/Stepper.nuxt.test.js
@@ -1,18 +1,10 @@
 import { describe, expect, test } from "vitest"
 import { mountSuspended } from "@vue/test-utils"
 
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import Stepper from "@ogw_front/components/Stepper"
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 global.ResizeObserver = require("resize-observer-polyfill")
 
diff --git a/tests/unit/components/Wrapper.nuxt.test.js b/tests/unit/components/Wrapper.nuxt.test.js
index 0456e320..77b65ed5 100644
--- a/tests/unit/components/Wrapper.nuxt.test.js
+++ b/tests/unit/components/Wrapper.nuxt.test.js
@@ -1,17 +1,9 @@
 import { describe, expect, test } from "vitest"
 // import { mountSuspended } from "@nuxt/test-utils/runtime"
 
-// import { createVuetify } from "vuetify"
-// import * as components from "vuetify/components"
-// import * as directives from "vuetify/directives"
-
 // // import Wrapper from "@ogw_front/components/Wrapper"
 // import ObjectSelector from "@ogw_front/components/ObjectSelector"
-
-// const vuetify = createVuetify({
-//   components,
-//   directives,
-// })
+// import { vuetify } from "../../utils"
 
 // global.ResizeObserver = require("resize-observer-polyfill")
 
diff --git a/tests/utils.js b/tests/utils.js
new file mode 100644
index 00000000..7d35ce8e
--- /dev/null
+++ b/tests/utils.js
@@ -0,0 +1,6 @@
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+const vuetify = createVuetify({ components, directives })
+
+export { vuetify }
diff --git a/tests/vitest.config.js b/tests/vitest.config.js
index 7b165e25..e0878d5c 100644
--- a/tests/vitest.config.js
+++ b/tests/vitest.config.js
@@ -1,11 +1,28 @@
 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 globalRetry = process.env.CI ? 3 : 0
 
 export default defineConfig({
   test: {
     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",