diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 30d1a644e11a..79ab287c1d58 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -43,7 +43,7 @@ function onDraft(value: boolean) {
 </script>
 
 <template>
-  <div v-if="current" flex flex-col h-full max-h-full overflow-hidden>
+  <div v-if="current" flex flex-col h-full max-h-full overflow-hidden data-testid="file-detail">
     <div>
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :task="current" />
@@ -65,12 +65,14 @@ function onDraft(value: boolean) {
         <button
           tab-button
           :class="{ 'tab-button-active': viewMode == null }"
+          data-testid="btn-report"
           @click="changeViewMode(null)"
         >
           Report
         </button>
         <button
           tab-button
+          data-testid="btn-graph"
           :class="{ 'tab-button-active': viewMode === 'graph' }"
           @click="changeViewMode('graph')"
         >
@@ -79,6 +81,7 @@ function onDraft(value: boolean) {
         <button
           v-if="!isReport"
           tab-button
+          data-testid="btn-code"
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
@@ -86,6 +89,7 @@ function onDraft(value: boolean) {
         </button>
         <button
           tab-button
+          data-testid="btn-console"
           :class="{ 'tab-button-active': viewMode === 'console', 'op20': viewMode !== 'console' && consoleCount === 0 }"
           @click="changeViewMode('console')"
         >
@@ -96,11 +100,11 @@ function onDraft(value: boolean) {
 
     <div flex flex-col flex-1 overflow="hidden">
       <div v-if="hasGraphBeenDisplayed" flex-1>
-        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
+        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" data-testid="graph" />
       </div>
-      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" @draft="onDraft" />
-      <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
-      <ViewReport v-else-if="!viewMode" :file="current" />
+      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" data-testid="editor" @draft="onDraft" />
+      <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" data-testid="console" />
+      <ViewReport v-else-if="!viewMode" :file="current" data-testid="report" />
     </div>
   </div>
 </template>
diff --git a/packages/ui/client/components/Suites.vue b/packages/ui/client/components/Suites.vue
index ca13cc7e3f6a..3ba88b0ca207 100644
--- a/packages/ui/client/components/Suites.vue
+++ b/packages/ui/client/components/Suites.vue
@@ -13,7 +13,7 @@ const updateSnapshot = () => current.value && client.rpc.updateSnapshot(current.
     <TasksList :tasks="current.tasks" :nested="true">
       <template #header>
         <StatusIcon mx-1 :task="current" />
-        <span font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
+        <span data-testid="filenames" font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
         <div class="flex text-lg">
           <IconButton
             v-if="(failedSnapshot && !isReport)"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fba6c3d1cbfc..9760084cdfb0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,20 +110,20 @@ importers:
       vue: latest
       workbox-window: ^6.5.4
     dependencies:
-      '@vueuse/core': 9.10.0_vue@3.2.45
+      '@vueuse/core': 9.10.0_vue@3.2.47
       jiti: 1.16.1
-      vue: 3.2.45
+      vue: 3.2.47
     devDependencies:
       '@iconify-json/carbon': 1.1.13
       '@unocss/reset': 0.48.3
       '@vite-pwa/vitepress': 0.0.4_vite-plugin-pwa@0.14.1
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
       esno: 0.16.3
       fast-glob: 3.2.12
       fs-extra: 10.1.0
       https-localhost: 4.7.1
       unocss: 0.48.3_vite@4.0.0
-      unplugin-vue-components: 0.22.12_vue@3.2.45
+      unplugin-vue-components: 0.22.12_vue@3.2.47
       vite: 4.0.0
       vite-plugin-pwa: 0.14.1_hsd7wmhtxdre4ds2vghqydhvau
       vitepress: 1.0.0-alpha.40
@@ -242,9 +242,9 @@ importers:
       react-dom: 18.0.0_react@18.0.0
     devDependencies:
       '@testing-library/react': 13.3.0_zpnidt7m3osuk7shl3s4oenomq
-      '@types/node': 18.11.18
-      '@types/react': 18.0.27
-      '@vitejs/plugin-react': 3.0.1
+      '@types/node': 18.13.0
+      '@types/react': 18.0.28
+      '@vitejs/plugin-react': 3.1.0
       jsdom: 21.1.0
       typescript: 4.8.4
       vitest: link:../../packages/vitest
@@ -292,9 +292,9 @@ importers:
     devDependencies:
       '@types/react': 17.0.49
       '@types/react-test-renderer': 17.0.2
-      '@vitejs/plugin-react': 3.0.1_vite@4.0.0
+      '@vitejs/plugin-react': 3.1.0_vite@4.0.0
       '@vitest/ui': link:../../packages/ui
-      happy-dom: 8.1.5
+      happy-dom: 8.2.6
       jsdom: 21.1.0
       react-test-renderer: 17.0.2_react@17.0.2
       vite: 4.0.0
@@ -321,7 +321,7 @@ importers:
       '@types/enzyme': 3.10.12
       '@types/react': 17.0.49
       '@types/react-dom': 17.0.17
-      '@vitejs/plugin-react': 3.0.1_vite@4.0.0
+      '@vitejs/plugin-react': 3.1.0_vite@4.0.0
       '@vitest/ui': link:../../packages/ui
       '@wojtekmaj/enzyme-adapter-react-17': 0.6.7_7ltvq4e2railvf5uya4ffxpe2a
       enzyme: 3.11.0
@@ -503,13 +503,13 @@ importers:
       vitest: workspace:*
       vue: latest
     devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
-      '@vue/test-utils': 2.2.8_vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
+      '@vue/test-utils': 2.2.10_vue@3.2.47
       jsdom: 21.1.0
       vite: 4.0.0
       vite-plugin-ruby: 3.1.2_vite@4.0.0
       vitest: link:../../packages/vitest
-      vue: 3.2.45
+      vue: 3.2.47
 
   examples/solid:
     specifiers:
@@ -559,13 +559,13 @@ importers:
       vitest: workspace:*
       vue: latest
     dependencies:
-      vue: 3.2.45
+      vue: 3.2.47
     devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
-      '@vue/test-utils': 2.0.2_vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
+      '@vue/test-utils': 2.0.2_vue@3.2.47
       jsdom: 21.1.0
       unplugin-auto-import: 0.11.2_vite@4.0.0
-      unplugin-vue-components: 0.22.4_vite@4.0.0+vue@3.2.45
+      unplugin-vue-components: 0.22.4_vite@4.0.0+vue@3.2.47
       vite: 4.0.0
       vitest: link:../../packages/vitest
 
@@ -578,10 +578,10 @@ importers:
       vitest: workspace:*
       vue: latest
     dependencies:
-      vue: 3.2.45
+      vue: 3.2.47
     devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
-      '@vue/test-utils': 2.0.0_vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
+      '@vue/test-utils': 2.0.0_vue@3.2.47
       jsdom: 21.1.0
       vite: 4.0.0
       vitest: link:../../packages/vitest
@@ -596,13 +596,13 @@ importers:
       vitest: workspace:*
       vue: latest
     devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
-      '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.0+vue@3.2.45
-      '@vue/test-utils': 2.2.8_vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
+      '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.0+vue@3.2.47
+      '@vue/test-utils': 2.2.10_vue@3.2.47
       jsdom: 21.1.0
       vite: 4.0.0
       vitest: link:../../packages/vitest
-      vue: 3.2.45
+      vue: 3.2.47
 
   examples/vue2:
     specifiers:
@@ -1072,12 +1072,12 @@ importers:
       vitest: workspace:*
       vue: latest
     devDependencies:
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
-      '@vue/test-utils': 2.2.8_vue@3.2.45
-      happy-dom: 8.1.5
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
+      '@vue/test-utils': 2.2.10_vue@3.2.47
+      happy-dom: 8.2.6
       vite: 4.0.0
       vitest: link:../../packages/vitest
-      vue: 3.2.45
+      vue: 3.2.47
 
   test/css:
     specifiers:
@@ -1129,7 +1129,7 @@ importers:
       vitest: workspace:*
     devDependencies:
       execa: 6.1.0
-      jsdom: 21.0.0
+      jsdom: 21.1.0
       vitest: link:../../packages/vitest
 
   test/global-setup:
@@ -1250,6 +1250,18 @@ importers:
       typescript: 4.8.4
       vue-tsc: 0.40.13_typescript@4.8.4
 
+  test/ui:
+    specifiers:
+      execa: ^6.1.0
+      fs-extra: ^10.1.0
+      playwright-chromium: ^1.27.0
+      vitest: workspace:*
+    devDependencies:
+      execa: 6.1.0
+      fs-extra: 10.1.0
+      playwright-chromium: 1.29.2
+      vitest: link:../../packages/vitest
+
   test/vite-config:
     specifiers:
       pathe: ^1.1.0
@@ -1293,9 +1305,6 @@ packages:
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
-    peerDependenciesMeta:
-      '@algolia/client-search':
-        optional: true
     dependencies:
       '@algolia/autocomplete-shared': 1.7.2
       algoliasearch: 4.14.2
@@ -2119,6 +2128,13 @@ packages:
     dependencies:
       '@babel/types': 7.20.7
 
+  /@babel/parser/7.20.5:
+    resolution: {integrity: sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
+
   /@babel/parser/7.20.7:
     resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
     engines: {node: '>=6.0.0'}
@@ -3651,7 +3667,7 @@ packages:
       '@babel/helper-module-imports': 7.18.6
       '@babel/helper-plugin-utils': 7.20.2
       '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.13
-      '@babel/types': 7.20.7
+      '@babel/types': 7.20.5
     dev: true
 
   /@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.18.13:
@@ -4270,6 +4286,24 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/traverse/7.20.5:
+    resolution: {integrity: sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.20.7
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.20.7
+      '@babel/types': 7.20.7
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/types/7.18.13:
     resolution: {integrity: sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==}
     engines: {node: '>=6.9.0'}
@@ -4278,6 +4312,15 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@babel/types/7.20.5:
+    resolution: {integrity: sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@babel/types/7.20.7:
     resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
     engines: {node: '>=6.9.0'}
@@ -4988,7 +5031,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       '@types/yargs': 15.0.14
       chalk: 4.1.2
     dev: true
@@ -5000,7 +5043,7 @@ packages:
       '@jest/schemas': 29.0.0
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       '@types/yargs': 17.0.12
       chalk: 4.1.2
     dev: true
@@ -5512,7 +5555,7 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       playwright-core: 1.28.0
     dev: true
 
@@ -5688,8 +5731,8 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-replace/5.0.2_rollup@2.79.1:
-    resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
+  /@rollup/plugin-replace/5.0.1_rollup@2.79.1:
+    resolution: {integrity: sha512-Z3MfsJ4CK17BfGrZgvrcp/l6WXoKb0kokULO+zt/7bmcyayokDaQ2K3eDJcRLCTAlp5FPI4/gz9MHAsosz4Rag==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0
@@ -5698,7 +5741,7 @@ packages:
         optional: true
     dependencies:
       '@rollup/pluginutils': 5.0.2_rollup@2.79.1
-      magic-string: 0.27.0
+      magic-string: 0.26.7
       rollup: 2.79.1
     dev: true
 
@@ -7338,7 +7381,7 @@ packages:
   /@types/cheerio/0.22.31:
     resolution: {integrity: sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/codemirror/5.60.6:
@@ -7373,7 +7416,7 @@ packages:
     resolution: {integrity: sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==}
     dependencies:
       '@types/cheerio': 0.22.31
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: true
 
   /@types/eslint-scope/3.7.4:
@@ -7405,33 +7448,33 @@ packages:
     resolution: {integrity: sha512-zdV5odfHf95B4qr6bdpshG4VMm/3xgnPhSJLa3xh75CYr35e34k+4FQli82Q48sPqwHazJGy+6+jl4T+Vw1AMg==}
     dependencies:
       '@types/jsonfile': 6.1.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/glob/7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/glob/8.0.0:
     resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
     dependencies:
       '@types/minimatch': 5.1.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/graceful-fs/4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/hast/2.3.4:
@@ -7492,7 +7535,7 @@ packages:
   /@types/jsdom/20.0.1:
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       '@types/tough-cookie': 4.0.2
       parse5: 7.1.1
     dev: true
@@ -7508,7 +7551,7 @@ packages:
   /@types/jsonfile/6.1.1:
     resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/lodash/4.14.191:
@@ -7542,7 +7585,7 @@ packages:
   /@types/node-fetch/2.6.2:
     resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       form-data: 3.0.1
     dev: true
 
@@ -7558,6 +7601,10 @@ packages:
     resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
     dev: true
 
+  /@types/node/18.13.0:
+    resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
+    dev: true
+
   /@types/node/18.7.13:
     resolution: {integrity: sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==}
     dev: false
@@ -7588,7 +7635,7 @@ packages:
   /@types/prompts/2.4.2:
     resolution: {integrity: sha512-TwNx7qsjvRIUv/BCx583tqF5IINEVjCNqg9ofKHRlSoUHE62WBHrem4B1HGXcIrG511v29d1kJ9a/t2Esz7MIg==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       kleur: 3.0.3
     dev: true
 
@@ -7608,19 +7655,19 @@ packages:
   /@types/react-dom/18.0.6:
     resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: true
 
   /@types/react-dom/18.0.8:
     resolution: {integrity: sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: true
 
   /@types/react-is/17.0.3:
     resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: false
 
   /@types/react-test-renderer/17.0.2:
@@ -7632,7 +7679,7 @@ packages:
   /@types/react-transition-group/4.4.5:
     resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: false
 
   /@types/react/17.0.49:
@@ -7651,8 +7698,8 @@ packages:
       csstype: 3.1.0
     dev: true
 
-  /@types/react/18.0.27:
-    resolution: {integrity: sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==}
+  /@types/react/18.0.28:
+    resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
@@ -7661,7 +7708,7 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/resolve/1.20.2:
@@ -7678,7 +7725,7 @@ packages:
   /@types/set-cookie-parser/2.4.2:
     resolution: {integrity: sha512-fBZgytwhYAUkj/jC/FAV4RQ5EerRup1YQsXQCh8rZfiHkc4UahC192oH0smGwsXol3cL3A5oETuAHeQHmhXM4w==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/sinonjs__fake-timers/8.1.1:
@@ -7765,7 +7812,7 @@ packages:
   /@types/webpack-sources/3.2.0:
     resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       '@types/source-list-map': 0.1.2
       source-map: 0.7.4
     dev: true
@@ -7773,7 +7820,7 @@ packages:
   /@types/webpack/4.41.32:
     resolution: {integrity: sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       '@types/tapable': 1.0.8
       '@types/uglify-js': 3.17.0
       '@types/webpack-sources': 3.2.0
@@ -7784,7 +7831,7 @@ packages:
   /@types/ws/8.5.4:
     resolution: {integrity: sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
 
   /@types/yargs-parser/21.0.0:
@@ -7807,7 +7854,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
     dev: true
     optional: true
 
@@ -8200,11 +8247,11 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-react/3.0.1:
-    resolution: {integrity: sha512-mx+QvYwIbbpOIJw+hypjnW1lAbKDHtWK5ibkF/V1/oMBu8HU/chb+SnqJDAsLq1+7rGqjktCEomMTM5KShzUKQ==}
+  /@vitejs/plugin-react/3.1.0:
+    resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.1.0-beta.0
     dependencies:
       '@babel/core': 7.20.12
       '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.12
@@ -8215,11 +8262,11 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-react/3.0.1_vite@4.0.0:
-    resolution: {integrity: sha512-mx+QvYwIbbpOIJw+hypjnW1lAbKDHtWK5ibkF/V1/oMBu8HU/chb+SnqJDAsLq1+7rGqjktCEomMTM5KShzUKQ==}
+  /@vitejs/plugin-react/3.1.0_vite@4.0.0:
+    resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.1.0-beta.0
     dependencies:
       '@babel/core': 7.20.12
       '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.12
@@ -8238,15 +8285,31 @@ packages:
       vite: ^4.0.0
       vue: ^3.0.0
     dependencies:
-      '@babel/core': 7.20.12
-      '@babel/plugin-transform-typescript': 7.20.2_@babel+core@7.20.12
-      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.12
+      '@babel/core': 7.20.5
+      '@babel/plugin-transform-typescript': 7.20.2_@babel+core@7.20.5
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.5
       vite: 4.0.0
       vue: 3.2.45
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.0+vue@3.2.47:
+    resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.20.5
+      '@babel/plugin-transform-typescript': 7.20.2_@babel+core@7.20.5
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.5
+      vite: 4.0.0
+      vue: 3.2.47
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitejs/plugin-vue/4.0.0_vite@4.0.0+vue@3.2.45:
     resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -8258,6 +8321,17 @@ packages:
       vue: 3.2.45
     dev: true
 
+  /@vitejs/plugin-vue/4.0.0_vite@4.0.0+vue@3.2.47:
+    resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.0.0
+      vue: 3.2.47
+    dev: true
+
   /@vitejs/plugin-vue2/1.1.2_vite@4.0.0+vue@2.7.10:
     resolution: {integrity: sha512-y6OEA+2UdJ0xrEQHodq20v9r3SpS62IOHrgN92JPLvVpNkhcissu7yvD5PXMzMESyazj0XNWGsc8UQk8+mVrjQ==}
     engines: {node: '>=14.6.0'}
@@ -8299,11 +8373,11 @@ packages:
     dependencies:
       '@volar/code-gen': 0.40.13
       '@volar/source-map': 0.40.13
-      '@vue/compiler-core': 3.2.45
-      '@vue/compiler-dom': 3.2.45
-      '@vue/compiler-sfc': 3.2.45
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
       '@vue/reactivity': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': 3.2.47
     dev: true
 
   /@volar/vue-typescript/0.40.13:
@@ -8318,14 +8392,14 @@ packages:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
     dev: true
 
-  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.20.12:
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.20.5:
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
     dependencies:
       '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.12
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.20.12
-      '@babel/types': 7.20.7
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.5
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.20.5
+      '@babel/types': 7.20.5
       '@vue/babel-helper-vue-transform-on': 1.0.2
       camelcase: 6.3.0
       html-tags: 3.2.0
@@ -8350,6 +8424,15 @@ packages:
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       source-map: 0.6.1
+    dev: true
+
+  /@vue/compiler-core/3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
 
   /@vue/compiler-dom/3.2.39:
     resolution: {integrity: sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==}
@@ -8362,6 +8445,13 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.45
       '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/compiler-dom/3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
 
   /@vue/compiler-sfc/2.7.10:
     resolution: {integrity: sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==}
@@ -8373,7 +8463,7 @@ packages:
   /@vue/compiler-sfc/3.2.39:
     resolution: {integrity: sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==}
     dependencies:
-      '@babel/parser': 7.20.7
+      '@babel/parser': 7.20.5
       '@vue/compiler-core': 3.2.39
       '@vue/compiler-dom': 3.2.39
       '@vue/compiler-ssr': 3.2.39
@@ -8397,6 +8487,21 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.19
       source-map: 0.6.1
+    dev: true
+
+  /@vue/compiler-sfc/3.2.47:
+    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/reactivity-transform': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.19
+      source-map: 0.6.1
 
   /@vue/compiler-ssr/3.2.39:
     resolution: {integrity: sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==}
@@ -8409,6 +8514,13 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.2.45
       '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/compiler-ssr/3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
 
   /@vue/devtools-api/6.4.5:
     resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
@@ -8431,6 +8543,16 @@ packages:
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
+    dev: true
+
+  /@vue/reactivity-transform/3.2.47:
+    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
 
   /@vue/reactivity/3.2.38:
     resolution: {integrity: sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==}
@@ -8447,6 +8569,12 @@ packages:
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
       '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/reactivity/3.2.47:
+    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
+    dependencies:
+      '@vue/shared': 3.2.47
 
   /@vue/runtime-core/3.2.39:
     resolution: {integrity: sha512-xKH5XP57JW5JW+8ZG1khBbuLakINTgPuINKL01hStWLTTGFOrM49UfCFXBcFvWmSbci3gmJyLl2EAzCaZWsx8g==}
@@ -8459,6 +8587,13 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.45
       '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/runtime-core/3.2.47:
+    resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
+    dependencies:
+      '@vue/reactivity': 3.2.47
+      '@vue/shared': 3.2.47
 
   /@vue/runtime-dom/3.2.39:
     resolution: {integrity: sha512-4G9AEJP+sLhsqf5wXcyKVWQKUhI+iWfy0hWQgea+CpaTD7BR0KdQzvoQdZhwCY6B3oleSyNLkLAQwm0ya/wNoA==}
@@ -8473,6 +8608,14 @@ packages:
       '@vue/runtime-core': 3.2.45
       '@vue/shared': 3.2.45
       csstype: 2.6.20
+    dev: true
+
+  /@vue/runtime-dom/3.2.47:
+    resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.47
+      '@vue/shared': 3.2.47
+      csstype: 2.6.20
 
   /@vue/server-renderer/3.2.39_vue@3.2.39:
     resolution: {integrity: sha512-1yn9u2YBQWIgytFMjz4f/t0j43awKytTGVptfd3FtBk76t1pd8mxbek0G/DrnjJhd2V7mSTb5qgnxMYt8Z5iSQ==}
@@ -8491,6 +8634,16 @@ packages:
       '@vue/compiler-ssr': 3.2.45
       '@vue/shared': 3.2.45
       vue: 3.2.45
+    dev: true
+
+  /@vue/server-renderer/3.2.47_vue@3.2.47:
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: 3.2.47
 
   /@vue/shared/3.2.38:
     resolution: {integrity: sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==}
@@ -8501,6 +8654,10 @@ packages:
 
   /@vue/shared/3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
+    dev: true
+
+  /@vue/shared/3.2.47:
+    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
 
   /@vue/test-utils/1.3.0_42puyn3dcxirnpdjnosl7pbb6a:
     resolution: {integrity: sha512-Xk2Xiyj2k5dFb8eYUKkcN9PzqZSppTlx7LaQWBbdA8tqh3jHr/KHX2/YLhNFc/xwDrgeLybqd+4ZCPJSGPIqeA==}
@@ -8515,30 +8672,31 @@ packages:
       vue-template-compiler: 2.7.10
     dev: true
 
-  /@vue/test-utils/2.0.0_vue@3.2.45:
+  /@vue/test-utils/2.0.0_vue@3.2.47:
     resolution: {integrity: sha512-zL5kygNq7hONrO1CzaUGprEAklAX+pH8J1MPMCU3Rd2xtSYkZ+PmKU3oEDRg8VAGdL5lNJHzDgrud5amFPtirw==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
-      vue: 3.2.45
+      vue: 3.2.47
     dev: true
 
-  /@vue/test-utils/2.0.2_vue@3.2.45:
+  /@vue/test-utils/2.0.2_vue@3.2.47:
     resolution: {integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:
-      vue: 3.2.45
+      vue: 3.2.47
     dev: true
 
-  /@vue/test-utils/2.2.8_vue@3.2.45:
-    resolution: {integrity: sha512-/R8DKzp41Ip/RqTt1jvOVi5gxby3EwNWiYHNYsG9FAjEvt0gzDvYN55lCKzX7IdnI5zVIOo5tHtts0SLT+JrWw==}
+  /@vue/test-utils/2.2.10_vue@3.2.47:
+    resolution: {integrity: sha512-UPY+VdWST5vYZ/Qhl+sLuJAv596e6kTbrOPgdGY82qd9kGN/MfjzLT5KXlmpChkiCbPP3abZ8XT25u1n5h+mRg==}
     peerDependencies:
-      '@vue/compiler-dom': ^3.0.1
       vue: ^3.0.1
     dependencies:
       js-beautify: 1.14.6
-      vue: 3.2.45
+      vue: 3.2.47
+    optionalDependencies:
+      '@vue/compiler-dom': 3.2.47
     dev: true
 
   /@vueuse/core/8.9.4_vue@3.2.39:
@@ -8569,6 +8727,18 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: true
+
+  /@vueuse/core/9.10.0_vue@3.2.47:
+    resolution: {integrity: sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.10.0
+      '@vueuse/shared': 9.10.0_vue@3.2.47
+      vue-demi: 0.13.11_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
 
   /@vueuse/integrations/8.9.4_axios@0.26.1+vue@3.2.39:
     resolution: {integrity: sha512-Nk7mH0ThTdiuiiuB+1lyC+5ihnywrr+9h9IA4R4Ry8Mli/cZL38zc3qZWIsCVPm66Lr+7kEp3nnHdSxKi7ivrg==}
@@ -8643,6 +8813,15 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: true
+
+  /@vueuse/shared/9.10.0_vue@3.2.47:
+    resolution: {integrity: sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==}
+    dependencies:
+      vue-demi: 0.13.11_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
 
   /@webassemblyjs/ast/1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
@@ -10284,7 +10463,7 @@ packages:
       check-error: 1.0.2
       deep-eql: 4.1.3
       get-func-name: 2.0.0
-      loupe: 2.3.4
+      loupe: 2.3.6
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: false
@@ -13607,8 +13786,8 @@ packages:
       - encoding
     dev: true
 
-  /happy-dom/8.1.5:
-    resolution: {integrity: sha512-/UXAJ2fHTs4H3vy7TS7c9PKFvPyaNialk2Er9NdXfpBKNaCITMOH03rkjHXp5jnJnSmRBa+av8E08PUAaIB1jQ==}
+  /happy-dom/8.2.6:
+    resolution: {integrity: sha512-s53VwyMFpQPEZdN00M82i3tFTzz0T4kBVD4tu8b+im99s1NkLK6tfKGCCl2Jmf3ZWfFCRwS+DV2qkR7S1wmIhQ==}
     dependencies:
       css.escape: 1.5.1
       he: 1.2.0
@@ -14021,8 +14200,8 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /idb/7.1.1:
-    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+  /idb/7.0.2:
+    resolution: {integrity: sha512-jjKrT1EnyZewQ/gCBb/eyiYrhGzws2FeY92Yx8qT9S9GeQAmo4JFVIiWRIfKW/6Ob9A+UDAOW9j9jn58fy2HIg==}
     dev: true
 
   /ieee754/1.2.1:
@@ -14741,7 +14920,7 @@ packages:
     dependencies:
       '@jest/types': 26.6.2
       '@types/graceful-fs': 4.1.5
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       anymatch: 3.1.2
       fb-watchman: 2.0.1
       graceful-fs: 4.2.10
@@ -14809,7 +14988,7 @@ packages:
     resolution: {integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       graceful-fs: 4.2.10
     dev: true
 
@@ -14818,7 +14997,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@jest/types': 26.6.2
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       chalk: 4.1.2
       graceful-fs: 4.2.10
       is-ci: 2.0.0
@@ -14830,7 +15009,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.0.1
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       chalk: 4.1.2
       ci-info: 3.7.0
       graceful-fs: 4.2.10
@@ -14841,7 +15020,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -14850,7 +15029,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 18.13.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -14998,47 +15177,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /jsdom/21.0.0:
-    resolution: {integrity: sha512-AIw+3ZakSUtDYvhwPwWHiZsUi3zHugpMEKlNPaurviseYoBqo0zBd3zqoUi3LPCNtPFlEP8FiW9MqCZdjb2IYA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.8.1
-      acorn-globals: 7.0.1
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.4.2
-      domexception: 4.0.0
-      escodegen: 2.0.0
-      form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
-      parse5: 7.1.1
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.2
-      w3c-xmlserializer: 4.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-      ws: 8.12.0
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /jsdom/21.1.0:
     resolution: {integrity: sha512-m0lzlP7qOtthD918nenK3hdItSd2I+V3W9IrBcB36sqDwG+KnUs66IF5GY7laGWUnlM9vTsD0W1QwSEBYWWcJg==}
     engines: {node: '>=14'}
@@ -15413,7 +15551,7 @@ packages:
     dependencies:
       big.js: 5.2.2
       emojis-list: 3.0.0
-      json5: 2.2.3
+      json5: 2.2.1
     dev: true
 
   /local-pkg/0.4.2:
@@ -15527,12 +15665,6 @@ packages:
     dev: true
     optional: true
 
-  /loupe/2.3.4:
-    resolution: {integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==}
-    dependencies:
-      get-func-name: 2.0.0
-    dev: false
-
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
@@ -16012,7 +16144,7 @@ packages:
     resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
     dependencies:
       acorn: 8.8.1
-      pathe: 1.0.0
+      pathe: 1.1.0
       pkg-types: 1.0.1
       ufo: 1.0.1
 
@@ -17013,9 +17145,6 @@ packages:
     resolution: {integrity: sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==}
     dev: true
 
-  /pathe/1.0.0:
-    resolution: {integrity: sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==}
-
   /pathe/1.1.0:
     resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
 
@@ -17174,12 +17303,27 @@ packages:
       mlly: 1.1.0
       pathe: 1.1.0
 
+  /playwright-chromium/1.29.2:
+    resolution: {integrity: sha512-iylIZpI8pD2ukBY5fQhluCx530bi2w4oUUM0PAfsxBnAYKntdj4bkTlcHuvS23EvabUS++YYi6KCI5uC517nxQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      playwright-core: 1.29.2
+    dev: true
+
   /playwright-core/1.28.0:
     resolution: {integrity: sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
 
+  /playwright-core/1.29.2:
+    resolution: {integrity: sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /playwright/1.28.0:
     resolution: {integrity: sha512-kyOXGc5y1mgi+hgEcCIyE1P1+JumLrxS09nFHo5sdJNzrucxPRAGwM4A2X3u3SDOfdgJqx61yIoR6Av+5plJPg==}
     engines: {node: '>=14'}
@@ -20559,7 +20703,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-components/0.22.12_vue@3.2.45:
+  /unplugin-vue-components/0.22.12_vue@3.2.47:
     resolution: {integrity: sha512-FxyzsuBvMCYPIk+8cgscGBQ345tvwVu+qY5IhE++eorkyvA4Z1TiD/HCiim+Kbqozl10i4K+z+NCa2WO2jexRA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -20579,13 +20723,13 @@ packages:
       minimatch: 5.1.1
       resolve: 1.22.1
       unplugin: 1.0.1
-      vue: 3.2.45
+      vue: 3.2.47
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /unplugin-vue-components/0.22.4_vite@4.0.0+vue@3.2.45:
+  /unplugin-vue-components/0.22.4_vite@4.0.0+vue@3.2.47:
     resolution: {integrity: sha512-2rRZcM9OnJGXnYxQNfaceEYuPeVACcWySIjy8WBwIiN3onr980TmA3XE5pRJFt8zoQrUA+c46oyIq96noLqrEQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -20605,7 +20749,7 @@ packages:
       minimatch: 5.1.0
       resolve: 1.22.1
       unplugin: 0.9.5_vite@4.0.0
-      vue: 3.2.45
+      vue: 3.2.47
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -20885,7 +21029,7 @@ packages:
       vite: ^3.1.0 || ^4.0.0
       workbox-window: ^6.5.4
     dependencies:
-      '@rollup/plugin-replace': 5.0.2_rollup@2.79.1
+      '@rollup/plugin-replace': 5.0.1_rollup@2.79.1
       debug: 4.3.4
       fast-glob: 3.2.12
       pretty-bytes: 6.0.0
@@ -21045,13 +21189,13 @@ packages:
     dependencies:
       '@docsearch/css': 3.3.1
       '@docsearch/js': 3.3.1
-      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45
+      '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.47
       '@vue/devtools-api': 6.4.5
-      '@vueuse/core': 9.10.0_vue@3.2.45
+      '@vueuse/core': 9.10.0_vue@3.2.47
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.12.1
       vite: 4.0.0
-      vue: 3.2.45
+      vue: 3.2.47
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -21116,6 +21260,21 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.45
+    dev: true
+
+  /vue-demi/0.13.11_vue@3.2.47:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
 
   /vue-eslint-parser/9.1.0_eslint@8.31.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
@@ -21194,6 +21353,16 @@ packages:
       '@vue/runtime-dom': 3.2.45
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
+    dev: true
+
+  /vue/3.2.47:
+    resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
+      '@vue/runtime-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47_vue@3.2.47
+      '@vue/shared': 3.2.47
 
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
@@ -21547,7 +21716,7 @@ packages:
   /workbox-background-sync/6.5.4:
     resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==}
     dependencies:
-      idb: 7.1.1
+      idb: 7.0.2
       workbox-core: 6.5.4
     dev: true
 
@@ -21616,7 +21785,7 @@ packages:
   /workbox-expiration/6.5.4:
     resolution: {integrity: sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==}
     dependencies:
-      idb: 7.1.1
+      idb: 7.0.2
       workbox-core: 6.5.4
     dev: true
 
diff --git a/test/ui/.gitignore b/test/ui/.gitignore
new file mode 100644
index 000000000000..ad7fcab32638
--- /dev/null
+++ b/test/ui/.gitignore
@@ -0,0 +1 @@
+fixtures/html
diff --git a/test/ui/fixtures/sample.test.ts b/test/ui/fixtures/sample.test.ts
new file mode 100644
index 000000000000..b4d376c539e5
--- /dev/null
+++ b/test/ui/fixtures/sample.test.ts
@@ -0,0 +1,7 @@
+import { expect, it } from 'vitest'
+
+it('add', () => {
+  // eslint-disable-next-line no-console
+  console.log('log test')
+  expect(1 + 1).toEqual(2)
+})
diff --git a/test/ui/fixtures/vitest.config.ts b/test/ui/fixtures/vitest.config.ts
new file mode 100644
index 000000000000..1b3a79748ed4
--- /dev/null
+++ b/test/ui/fixtures/vitest.config.ts
@@ -0,0 +1,4 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+})
diff --git a/test/ui/globalSetup.ts b/test/ui/globalSetup.ts
new file mode 100644
index 000000000000..3f499e381a9e
--- /dev/null
+++ b/test/ui/globalSetup.ts
@@ -0,0 +1,20 @@
+import os from 'node:os'
+import path from 'node:path'
+import fs from 'fs-extra'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup')
+
+let browserServer: BrowserServer | undefined
+
+export async function setup(): Promise<void> {
+  browserServer = await chromium.launchServer()
+
+  await fs.mkdirp(DIR)
+  await fs.writeFile(path.join(DIR, 'wsEndpoint'), browserServer.wsEndpoint())
+}
+
+export async function teardown(): Promise<void> {
+  await browserServer?.close()
+}
diff --git a/test/ui/package.json b/test/ui/package.json
new file mode 100644
index 000000000000..bb4b0fc734ad
--- /dev/null
+++ b/test/ui/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@vitest/test-ui",
+  "private": true,
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "execa": "^6.1.0",
+    "fs-extra": "^10.1.0",
+    "playwright-chromium": "^1.27.0",
+    "vitest": "workspace:*"
+  }
+}
diff --git a/test/ui/setup.ts b/test/ui/setup.ts
new file mode 100644
index 000000000000..92a2d9c6e96b
--- /dev/null
+++ b/test/ui/setup.ts
@@ -0,0 +1,165 @@
+/* eslint-disable import/no-mutable-exports */
+import path from 'node:path'
+import os from 'node:os'
+import fs from 'fs-extra'
+import fetch from 'node-fetch-native'
+import { chromium } from 'playwright-chromium'
+import type { Browser, Page } from 'playwright-chromium'
+import { expect } from 'vitest'
+import type { ExecaChildProcess } from 'execa'
+import { execaCommand } from 'execa'
+
+export let page!: Page
+export let browser!: Browser
+export const browserErrors: Error[] = []
+export const ports = {
+  ui: 9000,
+  report: 9001,
+}
+
+const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup')
+export const isWindows = process.platform === 'win32'
+
+export function timeout(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(null)
+    }, time)
+  })
+}
+
+export async function withRetry(
+  func: () => Promise<void>,
+): Promise<void> {
+  const maxTries = 300
+  for (let tries = 0; tries < maxTries; tries++) {
+    try {
+      await func()
+      return
+    }
+    catch {}
+    await timeout(50)
+  }
+  await func()
+}
+
+export async function withLoadUrl(url: string): Promise<void> {
+  return withRetry(async () => {
+    const res = await fetch(url)
+    if (!res.ok)
+      throw new Error('url not loaded')
+  })
+}
+
+export async function killProcess(
+  serverProcess: ExecaChildProcess,
+): Promise<void> {
+  if (isWindows) {
+    try {
+      const { execaCommandSync } = await import('execa')
+      execaCommandSync(`taskkill /pid ${serverProcess.pid} /T /F`)
+    }
+    catch (e) {
+      console.error('failed to taskkill:', e)
+    }
+  }
+  else {
+    serverProcess.kill('SIGTERM', { forceKillAfterTimeout: 2000 })
+  }
+}
+
+export async function startChromium() {
+  const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf-8')
+  if (!wsEndpoint)
+    throw new Error('wsEndpoint not found')
+
+  browser = await chromium.connect(wsEndpoint)
+  page = await browser.newPage()
+
+  try {
+    page.on('pageerror', (error) => {
+      browserErrors.push(error)
+    })
+  }
+  catch (e) {
+    await page.close()
+    throw e
+  }
+
+  return async () => {
+    await page?.close()
+    if (browser)
+      await browser.close()
+  }
+}
+
+export async function startServerCommand(root: string, command: string, url: string) {
+  let error: any
+  const exitChromium = await startChromium()
+  const subProcess = execaCommand(command, {
+    cwd: root,
+    env: {
+      ...process.env,
+      CI: 'true',
+      NO_COLOR: 'true',
+    },
+    stdio: 'pipe',
+  })
+
+  subProcess.catch((e) => {
+    error = e
+  })
+
+  const killSubProcess = () => killProcess(subProcess)
+
+  subProcess.stdout?.on('data', (d) => {
+    // eslint-disable-next-line no-console
+    console.log(d.toString())
+  })
+
+  expect(error).not.toBeTruthy()
+
+  async function exit() {
+    try {
+      await killSubProcess()
+      await exitChromium()
+    }
+    catch (e) {
+      console.error(
+          `error while killing process ${command}:`,
+          e,
+      )
+    }
+  }
+
+  try {
+    await withLoadUrl(url)
+    await page.goto(url)
+  }
+  catch (e) {
+    await exit()
+    throw e
+  }
+
+  return exit
+}
+
+/**
+ * Poll a getter until the value it returns includes the expected value.
+ */
+export async function untilUpdated(
+  poll: () => string | Promise<string | null> | null,
+  expected: string,
+): Promise<void> {
+  const maxTries = process.env.CI ? 200 : 50
+  for (let tries = 0; tries < maxTries; tries++) {
+    const actual = (await poll()) ?? ''
+    if (actual.includes(expected) || tries === maxTries - 1) {
+      expect(actual).toMatch(expected)
+      break
+    }
+    else {
+      await timeout(50)
+    }
+  }
+}
diff --git a/test/ui/shim.d.ts b/test/ui/shim.d.ts
new file mode 100644
index 000000000000..fbc5dbe185b9
--- /dev/null
+++ b/test/ui/shim.d.ts
@@ -0,0 +1,4 @@
+declare module 'kill-port' {
+  const kill: (port: number) => Promise<void>
+  export default kill
+}
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
new file mode 100644
index 000000000000..df33bf60dc06
--- /dev/null
+++ b/test/ui/test/html-report.spec.ts
@@ -0,0 +1,58 @@
+import { resolve } from 'node:path'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { execaCommandSync } from 'execa'
+import { browserErrors, page, ports, startServerCommand, untilUpdated } from '../setup'
+
+const root = resolve(__dirname, '../fixtures')
+const port = ports.report
+
+beforeAll(async () => {
+  execaCommandSync('npx vitest run --reporter=html --outputFile=html/index.html', {
+    cwd: root,
+    env: {
+      ...process.env,
+      CI: 'true',
+      NO_COLOR: 'true',
+    },
+  })
+
+  const exit = await startServerCommand(
+    root,
+    `npx vite preview --outDir html --strict-port --base /__vitest__/ --port ${port}`,
+    `http://localhost:${port}/__vitest__/`,
+  )
+
+  return exit
+})
+
+it('dashboard', async () => {
+  await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+})
+
+describe('file detail', async () => {
+  beforeAll(async () => {
+    await page.click('.details-panel span')
+  })
+
+  it('report', async () => {
+    await page.click('[data-testid=btn-report]')
+    await untilUpdated(() => page.textContent('[data-testid=report]'), 'All tests passed in this file')
+    await untilUpdated(() => page.textContent('[data-testid=filenames]'), 'sample.test.ts')
+  })
+
+  it('graph', async () => {
+    await page.click('[data-testid=btn-graph]')
+    expect(page.url()).toMatch('graph')
+    await untilUpdated(() => page.textContent('[data-testid=graph] text'), 'sample.test.ts')
+  })
+
+  it('console', async () => {
+    await page.click('[data-testid=btn-console]')
+    expect(page.url()).toMatch('console')
+    await untilUpdated(() => page.textContent('[data-testid=console] pre'), 'log test')
+  })
+})
+
+it('no error happen', () => {
+  expect(browserErrors.length).toEqual(0)
+})
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
new file mode 100644
index 000000000000..03ab3ac70697
--- /dev/null
+++ b/test/ui/test/ui.spec.ts
@@ -0,0 +1,48 @@
+import { resolve } from 'node:path'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { browserErrors, page, ports, startServerCommand, untilUpdated } from '../setup'
+
+const root = resolve(__dirname, '../fixtures')
+const port = ports.ui
+
+beforeAll(async () => {
+  const exit = await startServerCommand(
+    root,
+    `npx vitest --ui --open false --api.port ${port} --watch --allowOnly`,
+    `http://localhost:${port}/__vitest__/`,
+  )
+
+  return exit
+})
+
+it('dashboard', async () => {
+  await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+})
+
+describe('file detail', async () => {
+  beforeAll(async () => {
+    await page.click('.details-panel span')
+  })
+
+  it('report', async () => {
+    await page.click('[data-testid=btn-report]')
+    await untilUpdated(() => page.textContent('[data-testid=report]'), 'All tests passed in this file')
+    await untilUpdated(() => page.textContent('[data-testid=filenames]'), 'sample.test.ts')
+  })
+
+  it('graph', async () => {
+    await page.click('[data-testid=btn-graph]')
+    expect(page.url()).toMatch('graph')
+    await untilUpdated(() => page.textContent('[data-testid=graph] text'), 'sample.test.ts')
+  })
+
+  it('console', async () => {
+    await page.click('[data-testid=btn-console]')
+    expect(page.url()).toMatch('console')
+    await untilUpdated(() => page.textContent('[data-testid=console] pre'), 'log test')
+  })
+})
+
+it('no error happen', () => {
+  expect(browserErrors.length).toEqual(0)
+})
diff --git a/test/ui/vitest.config.ts b/test/ui/vitest.config.ts
new file mode 100644
index 000000000000..ea8a53212c9f
--- /dev/null
+++ b/test/ui/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    setupFiles: ['./setup.ts'],
+    globalSetup: ['./globalSetup.ts'],
+    exclude: ['node_modules', 'fixtures', 'dist'],
+  },
+})