diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 8bb6fea80..d0ed66328 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -1,12 +1,16 @@
 module.exports = {
   root: true,
+
   env: {
     node: true,
   },
+
   extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier'],
+
   parserOptions: {
     parser: '@babel/eslint-parser',
   },
+
   rules: {
     'no-unused-vars': 'off',
     'no-undef': 'off',
@@ -22,4 +26,16 @@ module.exports = {
     'vue/no-template-shadow': 'off',
     'vue/component-definition-name-casing': 'off',
   },
+
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
 };
diff --git a/web/.gitignore b/web/.gitignore
index a0dddc6fb..ef5750fa5 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /dist
+coverage
+cypress
 
 # local env files
 .env.local
diff --git a/web/cypress.config.js b/web/cypress.config.js
new file mode 100644
index 000000000..bb002f166
--- /dev/null
+++ b/web/cypress.config.js
@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'tests/e2e/**/**/*.cy.{js,jsx,ts,tsx}',
+  },
+});
diff --git a/web/jest.config.js b/web/jest.config.js
new file mode 100644
index 000000000..67fb08f97
--- /dev/null
+++ b/web/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  collectCoverage: true,
+  collectCoverageFrom: ['/src/**/*.vue'],
+  transformIgnorePatterns: ['!node_modules/'],
+};
diff --git a/web/package.json b/web/package.json
index e024a5869..8d48d2a1f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,6 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e --mode e2e",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -54,16 +56,23 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-e2e-cypress": "^5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "^1.3.3",
+    "@vue/vue2-jest": "^27.0.0",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^9.1.0",
+    "cypress": "^12.3.0",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.7.0",
     "husky": "^8.0.1",
+    "jest": "^27.0.5",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
@@ -72,11 +81,10 @@
     "vue-template-compiler": "^2.6.11",
     "webpack-chain": "^6.5.1"
   },
-  "resolutions": {
-    "error-stack-parser": "2.1.4",
-    "@pixi/graphics-smooth": "0.0.30",
-    "pixi.js": "7.0.3"
-  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -85,8 +93,9 @@
   "lint-staged": {
     "**/*.{vue,js,jsx,ts,tsx}": "npm run prettier:write"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+  "resolutions": {
+    "error-stack-parser": "2.1.4",
+    "@pixi/graphics-smooth": "0.0.30",
+    "pixi.js": "7.0.3"
+  }
 }
diff --git a/web/src/App.vue b/web/src/App.vue
index cd9a80c1d..9caeeaf4d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -6,6 +6,7 @@
       <nav
         v-if="!$route.meta.includeGISAIDLogo"
         class="navbar navbar-expand-lg navbar-dark w-100 bg-grey__lighter nav-hero"
+        data-cy="navigation"
       >
         <router-link
           v-if="!$route.meta.hideNavigation"
@@ -47,6 +48,7 @@
           aria-controls="navbarNav"
           aria-expanded="false"
           aria-label="Toggle navigation"
+          data-cy="navigation-toggle-button"
         >
           <span class="navbar-toggler-icon" />
         </button>
@@ -55,9 +57,9 @@
           id="navbarNav"
           class="collapse navbar-collapse"
         >
-          <ul class="navbar-nav nav-link">
+          <ul class="navbar-nav nav-link" data-cy="nav-link">
             <!-- EPIDEMIOLOGY -->
-            <li class="dropdown px-3 nav-link">
+            <li class="dropdown px-3 nav-link" data-cy="nav-epidemiology">
               <div
                 id="dropdownMenuButtonCasesDeaths"
                 class="dropdown-toggle"
@@ -66,12 +68,14 @@
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
+                data-cy="case-deaths"
               >
                 Cases &amp; Deaths
               </div>
               <div
                 class="dropdown-menu dropdown-menu-dark"
                 aria-labelledby="dropdownMenuButtonCasesDeaths"
+                data-cy="epidemiology-dropdown"
               >
                 <router-link
                   data-toggle="collapse"
@@ -81,6 +85,7 @@
                   :to="{
                     name: 'Epidemiology',
                   }"
+                  data-cy="item-epidemiology"
                 >
                   Compare locations over time
                 </router-link>
@@ -92,6 +97,7 @@
                   :to="{
                     name: 'Maps',
                   }"
+                  data-cy="item-maps"
                 >
                   Explore interactive maps
                 </router-link>
@@ -104,6 +110,7 @@
                   :to="{
                     name: 'Compare',
                   }"
+                  data-cy="item-compare"
                 >
                   Find similar locations
                 </router-link>
@@ -116,6 +123,7 @@
                   :to="{
                     name: 'Regions',
                   }"
+                  data-cy="item-regions"
                 >
                   Explore regions
                 </router-link>
@@ -126,6 +134,7 @@
                   class="nav-link"
                   to="/data"
                   :class="{ active: $route.name === 'Data' }"
+                  data-cy="item-access-datatable"
                 >
                   Access data tables
                 </router-link>
@@ -133,7 +142,7 @@
             </li>
 
             <!-- Genomics -->
-            <li class="dropdown px-3 nav-link">
+            <li class="dropdown px-3 nav-link" data-cy="nav-genomics">
               <div
                 id="dropdownMenuButtonVariants"
                 class="dropdown-toggle"
@@ -142,12 +151,14 @@
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
+                data-cy="variants"
               >
                 Variants
               </div>
               <div
                 class="dropdown-menu dropdown-menu-dark p-1"
                 aria-labelledby="dropdownMenuButtonVariants"
+                data-cy="genomics-dropdown"
               >
                 <router-link
                   data-toggle="collapse"
@@ -155,6 +166,7 @@
                   class="nav-link"
                   :to="{ name: 'SituationReports' }"
                   :class="{ active: $route.name === 'SituationReports' }"
+                  data-cy="item-situation-reports"
                 >
                   Lineage | Mutation Tracker
                 </router-link>
@@ -164,6 +176,7 @@
                   class="nav-link"
                   :to="{ name: 'LocationReports' }"
                   :class="{ active: $route.name === 'LocationReports' }"
+                  data-cy="item-location-reports"
                 >
                   Location Tracker
                 </router-link>
@@ -175,6 +188,7 @@
                   :class="{
                     active: $route.name === 'SituationReportComparison',
                   }"
+                  data-cy="item-situation-report-comparison"
                 >
                   Lineage Comparison
                 </router-link>
@@ -184,6 +198,7 @@
                   class="nav-link"
                   :to="{ name: 'SituationReportCaveats' }"
                   :class="{ active: $route.name === 'SituationReportCaveats' }"
+                  data-cy="item-interpreting-reports"
                 >
                   Interpreting Reports
                 </router-link>
@@ -191,7 +206,7 @@
             </li>
 
             <!-- RESOURCES -->
-            <li class="dropdown px-3 nav-link">
+            <li class="dropdown px-3 nav-link" data-cy="nav-resources">
               <div
                 id="dropdownMenuButtonResearchLibrary"
                 class="dropdown-toggle"
@@ -200,12 +215,14 @@
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
+                data-cy="research-library"
               >
                 Research Library
               </div>
               <div
                 class="dropdown-menu dropdown-menu-dark p-1"
                 aria-labelledby="dropdownMenuButtonResearchLibrary"
+                data-cy="resources-dropdown"
               >
                 <router-link
                   data-toggle="collapse"
@@ -213,6 +230,7 @@
                   class="nav-link"
                   to="/resources"
                   :class="{ active: $route.name === 'Resources' }"
+                  data-cy="item-find-research"
                 >
                   Find research
                 </router-link>
@@ -222,6 +240,7 @@
                   class="nav-link"
                   :to="{ name: 'Sources', hash: '#resources' }"
                   :class="{ active: $route.name === 'Sources' }"
+                  data-cy="item-download-metadata"
                 >
                   Download metadata
                 </router-link>
@@ -231,6 +250,7 @@
                   class="nav-link"
                   to="/schema"
                   :class="{ active: $route.name === 'Schema' }"
+                  data-cy="item-schema"
                 >
                   View &amp; adapt schema
                 </router-link>
@@ -238,12 +258,18 @@
             </li>
 
             <!-- API -->
-            <li class="nav-item">
-              <a class="nav-link" href="https://api.outbreak.info/">API</a>
+            <li class="nav-item" data-cy="nav-api">
+              <a
+                class="nav-link"
+                href="https://api.outbreak.info/"
+                data-cy="item-outbreak-api"
+              >
+                API
+              </a>
             </li>
 
             <!-- ABOUT -->
-            <li class="dropdown px-3 nav-link">
+            <li class="dropdown px-3 nav-link" data-cy="nav-about">
               <div
                 id="dropdownMenuButtonAbout"
                 class="dropdown-toggle"
@@ -252,12 +278,14 @@
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
+                data-cy="outbreak-about"
               >
                 About
               </div>
               <div
                 class="dropdown-menu dropdown-menu-dark p-1"
                 aria-labelledby="dropdownMenuButtonAbout"
+                data-cy="about-dropdown"
               >
                 <router-link
                   data-toggle="collapse"
@@ -265,6 +293,7 @@
                   class="nav-link"
                   to="/about"
                   :class="{ active: $route.name === 'About' }"
+                  data-cy="item-about"
                 >
                   About
                 </router-link>
@@ -274,16 +303,24 @@
                   class="nav-link"
                   to="/sources"
                   :class="{ active: $route.name === 'Sources' }"
+                  data-cy="item-data-sources"
                 >
                   Data sources
                 </router-link>
-                <a class="nav-link" href="https://blog.outbreak.info">Blog</a>
+                <a
+                  class="nav-link"
+                  href="https://blog.outbreak.info"
+                  data-cy="item-blog"
+                >
+                  Blog
+                </a>
                 <router-link
                   data-toggle="collapse"
                   data-target=".navbar-collapse"
                   class="nav-link"
                   to="/faq"
                   :class="{ active: $route.name === 'Faq' }"
+                  data-cy="item-faq"
                 >
                   FAQ
                 </router-link>
@@ -293,6 +330,7 @@
                   class="nav-link"
                   to="/latest"
                   :class="{ active: $route.name === 'Latest' }"
+                  data-cy="item-latest-changes"
                 >
                   Latest changes
                 </router-link>
@@ -302,6 +340,7 @@
                   class="nav-link"
                   :class="{ active: $route.name === 'Citation' }"
                   :to="{ name: 'Citation' }"
+                  data-cy="item-cite"
                 >
                   How to cite
                 </router-link>
@@ -312,6 +351,7 @@
                   class="nav-link"
                   :class="{ active: $route.name === 'Press' }"
                   :to="{ name: 'Press' }"
+                  data-cy="item-media"
                 >
                   In the media
                 </router-link>
@@ -325,10 +365,16 @@
     <section
       id="notices"
       class="bg-highlight py-2 px-3 text-light text-center fa-sm"
+      data-cy="notice-section"
     >
-      <b class="mr-1">
+      <b class="mr-1" data-cy="notice-text">
         The outbreak.info
-        <a href="https://api.outbreak.info/" class="text-light" target="_blank">
+        <a
+          href="https://api.outbreak.info/"
+          class="text-light"
+          target="_blank"
+          data-cy="outbreak-api"
+        >
           API
         </a>
 
@@ -338,6 +384,7 @@
           class="text-light"
           target="_blank"
           aria-label="outbreak-info-github"
+          data-cy="r-package"
         >
           R package
         </a>
@@ -366,12 +413,18 @@
       <div
         id="footer-sitemap"
         class="bg-main__darker w-100 d-flex justify-content-between text-left text-muted row border-bottom navbar-dark m-0 px-3 pb-3 pt-4"
+        data-cy="footer"
       >
         <!-- epi group -->
-        <div class="text-light px-4 footer-section">
-          <div class="navbar-footer-title">COVID-19 Cases &amp; Deaths</div>
-          <ul class="navbar-nav navbar-footer">
-            <li class="nav-item px-0 py-1">
+        <div
+          class="text-light px-4 footer-section"
+          data-cy="footer-section-epi"
+        >
+          <div class="navbar-footer-title" data-cy="epi-title">
+            COVID-19 Cases &amp; Deaths
+          </div>
+          <ul class="navbar-nav navbar-footer" data-cy="footer-nav-epi">
+            <li class="nav-item px-0 py-1" data-cy="epi-group-epidemiology">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
@@ -380,11 +433,12 @@
                 :to="{
                   name: 'Epidemiology',
                 }"
+                data-cy="footer-item-epidemiology"
               >
                 Compare locations over time
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="epi-group-maps">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
@@ -393,11 +447,12 @@
                 :to="{
                   name: 'Maps',
                 }"
+                data-cy="footer-item-maps"
               >
                 Explore interactive maps
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="epi-group-compare">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
@@ -406,11 +461,12 @@
                 :to="{
                   name: 'Compare',
                 }"
+                data-cy="footer-item-compare"
               >
                 Find similar locations
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="epi-group-regions">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
@@ -419,17 +475,19 @@
                 :to="{
                   name: 'Regions',
                 }"
+                data-cy="footer-item-regions"
               >
                 Explore regions
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="epi-group-datatable">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/data"
                 :class="{ active: $route.name === 'Data' }"
+                data-cy="footer-item-datatable"
               >
                 Access data tables
               </router-link>
@@ -438,49 +496,70 @@
         </div>
 
         <!-- genomics group -->
-        <div class="text-light px-4 footer-section">
-          <div class="navbar-footer-title">Variants</div>
-          <ul class="navbar-nav navbar-footer">
-            <li class="nav-item px-0 py-1">
+        <div
+          class="text-light px-4 footer-section"
+          data-cy="footer-section-genomics"
+        >
+          <div class="navbar-footer-title" data-cy="genomics-title">
+            Variants
+          </div>
+          <ul class="navbar-nav navbar-footer" data-cy="footer-nav-genomics">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="genomics-group-situation-reports"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 :to="{ name: 'SituationReports' }"
                 :class="{ active: $route.name === 'SituationReports' }"
+                data-cy="footer-item-situation-reports"
               >
                 Lineage | Mutation Tracker
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="genomics-group-location-reports"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 :to="{ name: 'LocationReports' }"
                 :class="{ active: $route.name === 'LocationReports' }"
+                data-cy="footer-item-location-reports"
               >
                 Location Tracker
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="genomics-group-lineage-compare"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 :to="{ name: 'SituationReportComparison' }"
                 :class="{ active: $route.name === 'SituationReportComparison' }"
+                data-cy="footer-item-lineage-comparison"
               >
                 Lineage Comparison
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="genomics-group-interpreting-reports"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 :to="{ name: 'SituationReportCaveats' }"
                 :class="{ active: $route.name === 'SituationReportCaveats' }"
+                data-cy="footer-item-interpreting-reports"
               >
                 Interpreting Reports
               </router-link>
@@ -489,38 +568,52 @@
         </div>
 
         <!-- resources group -->
-        <div class="text-light px-4 footer-section">
-          <div class="navbar-footer-title">Research Library</div>
-          <ul class="navbar-nav navbar-footer">
-            <li class="nav-item px-0 py-1">
+        <div
+          class="text-light px-4 footer-section"
+          data-cy="footer-section-resources"
+        >
+          <div class="navbar-footer-title" data-cy="resources-title">
+            Research Library
+          </div>
+          <ul class="navbar-nav navbar-footer" data-cy="footer-nav-resources">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="resources-group-find-research"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/resources"
                 :class="{ active: $route.name === 'Resources' }"
+                data-cy="footer-item-find-research"
               >
                 Find research
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li
+              class="nav-item px-0 py-1"
+              data-cy="resources-group-download-metadata"
+            >
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 :to="{ name: 'Sources', hash: '#resources' }"
                 :class="{ active: $route.name === 'Sources' }"
+                data-cy="footer-item-download-metadata"
               >
                 Download metadata
               </router-link>
             </li>
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="resources-group-schema">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/schema"
                 :class="{ active: $route.name === 'Schema' }"
+                data-cy="footer-item-schema"
               >
                 View &amp; adapt schema
               </router-link>
@@ -529,63 +622,80 @@
         </div>
 
         <!-- about group -->
-        <div class="text-light px-4 footer-section">
-          <div class="navbar-footer-title">About</div>
-          <ul class="navbar-nav navbar-footer">
-            <li class="nav-item px-0 py-1">
+        <div
+          class="text-light px-4 footer-section"
+          data-cy="footer-section-about"
+        >
+          <div class="navbar-footer-title" data-cy="about-title">About</div>
+          <ul class="navbar-nav navbar-footer" data-cy="footer-nav-about">
+            <li class="nav-item px-0 py-1" data-cy="about-group-about-us">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/about"
                 :class="{ active: $route.name === 'About' }"
+                data-cy="footer-item-about-us"
               >
                 About us
               </router-link>
             </li>
 
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="about-group-data-sources">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/sources"
                 :class="{ active: $route.name === 'Sources' }"
+                data-cy="footer-item-data-sources"
               >
                 Data sources
               </router-link>
             </li>
 
-            <li class="nav-item px-0 py-1">
-              <a class="nav-link p-0" href="https://blog.outbreak.info">Blog</a>
+            <li class="nav-item px-0 py-1" data-cy="about-group-blog">
+              <a
+                class="nav-link p-0"
+                href="https://blog.outbreak.info"
+                data-cy="footer-item-blog"
+              >
+                Blog
+              </a>
             </li>
 
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="about-group-faq">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/faq"
                 :class="{ active: $route.name === 'FAQ' }"
+                data-cy="footer-item-faq"
               >
                 FAQ
               </router-link>
             </li>
 
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="about-group-latest-changes">
               <router-link
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
                 class="nav-link p-0"
                 to="/latest"
                 :class="{ active: $route.name === 'Latest' }"
+                data-cy="footer-item-latest-changes"
               >
                 Latest changes
               </router-link>
             </li>
 
-            <li class="nav-item px-0 py-1">
-              <router-link class="nav-link p-0" :to="{ name: 'Citation' }">
+            <li class="nav-item px-0 py-1" data-cy="about-group-cite">
+              <router-link
+                class="nav-link p-0"
+                :to="{ name: 'Citation' }"
+                data-cy="footer-item-cite"
+              >
                 How to cite
               </router-link>
             </li>
@@ -594,8 +704,12 @@
             <router-link class="nav-link p-0" :to="{ name: 'Videos' }">Video demos</router-link>
           </li> -->
 
-            <li class="nav-item px-0 py-1">
-              <router-link class="nav-link p-0" :to="{ name: 'Press' }">
+            <li class="nav-item px-0 py-1" data-cy="about-group-media">
+              <router-link
+                class="nav-link p-0"
+                :to="{ name: 'Press' }"
+                data-cy="footer-item-media"
+              >
                 In the media
               </router-link>
             </li>
@@ -603,30 +717,37 @@
         </div>
 
         <!-- contact us group -->
-        <div class="text-light px-4 footer-section">
-          <div class="navbar-footer-title">Contact us</div>
-          <ul class="navbar-nav navbar-footer">
-            <li class="nav-item px-0 py-1">
+        <div
+          class="text-light px-4 footer-section"
+          data-cy="footer-section-contact-us"
+        >
+          <div class="navbar-footer-title" data-cy="contact-us-title">
+            Contact us
+          </div>
+          <ul class="navbar-nav navbar-footer" data-cy="footer-nav-contact-us">
+            <li class="nav-item px-0 py-1" data-cy="contact-us-help">
               <a
                 href="mailto:help@outbreak.info"
                 target="_blank"
                 class="nav-link p-0"
+                data-cy="item-help-link"
               >
                 help@outbreak.info
               </a>
             </li>
 
-            <li class="nav-item px-0 py-1">
+            <li class="nav-item px-0 py-1" data-cy="contact-us-submit-issue">
               <a
                 class="nav-link p-0"
                 href="https://github.com/outbreak-info/outbreak.info/issues"
                 rel="noreferrer"
                 target="_blank"
+                data-cy="item-submit-issue-github"
               >
                 Submit an issue on Github
               </a>
             </li>
-            <EmailSubscription :isFooter="true" />
+            <EmailSubscription :isFooter="true" data-cy="email-subscription" />
           </ul>
         </div>
       </div>
@@ -637,47 +758,66 @@
       <div
         id="terms"
         class="row m-0 d-flex justify-content-center align-items-center py-1"
+        data-cy="footer-section-bottom"
       >
-        <div class="d-flex text-light x-small">
-          <ul class="m-0">
-            <li class="d-inline m-3">
-              <router-link class="text-light" :to="{ name: 'Citation' }">
+        <div class="d-flex text-light x-small" data-cy="bottom-wrapper">
+          <ul class="m-0" data-cy="footer-nav-terms">
+            <li class="d-inline m-3" data-cy="bottom-cite">
+              <router-link
+                class="text-light"
+                :to="{ name: 'Citation' }"
+                data-cy="bottom-item-cite"
+              >
                 How to Cite
               </router-link>
             </li>
-            <li class="d-inline m-3">
+            <li class="d-inline m-3" data-cy="bottom-github">
               <a
                 href="https://github.com/outbreak-info"
                 target="_blank"
                 class="text-light"
+                data-cy="bottom-item-github"
               >
                 GitHub
 
                 <font-awesome-icon :icon="['fab', 'github']" class="mx-1" />
               </a>
             </li>
-            <li class="d-inline m-3">
-              <router-link class="text-light" to="/privacy">
+            <li class="d-inline m-3" data-cy="bottom-privacy">
+              <router-link
+                class="text-light"
+                to="/privacy"
+                data-cy="bottom-item-privacy"
+              >
                 Privacy Policy
               </router-link>
             </li>
-            <li class="d-inline m-3">
-              <router-link class="text-light" to="/terms">Terms</router-link>
+            <li class="d-inline m-3" data-cy="bottom-terms">
+              <router-link
+                class="text-light"
+                to="/terms"
+                data-cy="bottom-item-terms"
+              >
+                Terms
+              </router-link>
             </li>
-            <li class="d-inline m-3">
+            <li class="d-inline m-3" data-cy="bottom-copyright">
               All content copyright
               <a
                 href="https://scripps.edu/faculty/hughes"
                 target="_blank"
                 rel="noreferrer"
                 class="mx-1 white-underline"
+                data-cy="bottom-item-hughes"
               >
                 Hughes lab
               </a>
               &copy;
               <span v-text="year" />
             </li>
-            <li class="d-inline m-3">All rights reserved</li>
+            <li class="d-inline m-3" data-cy="bottom-reserved">
+              All rights reserved
+            </li>
           </ul>
         </div>
       </div>
diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 4dbb4135d..97a08a79a 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -7,6 +7,7 @@
       <div
         class="floating-label align-left"
         :class="[selected.length === 0 ? 'empty' : 'filled']"
+        data-cy="autocomplete-input-label"
       >
         select locations
       </div>
@@ -18,6 +19,7 @@
           :class="{ 'to-add': item.addable, 'all-selected': isSelectAll }"
           :style="{ background: item.lightColor }"
           @click="updateChip(item)"
+          data-cy="location-item-chip"
         >
           {{ item.label }}
           <font-awesome-icon
@@ -25,6 +27,7 @@
             class="remove-btn"
             :icon="['far', 'times-circle']"
             :style="{ color: item.darkColor }"
+            data-cy="location-item-chip-icon"
           />
         </button>
         <input
@@ -38,6 +41,7 @@
           @keydown.delete="onBackspace"
           @keydown.ctrl.65="onSelectAll"
           @keydown.meta.65="onSelectAll"
+          data-cy="autocomplete-input"
         />
       </div>
     </div>
diff --git a/web/src/components/Logos.vue b/web/src/components/Logos.vue
index e528d3137..73cb48ba9 100644
--- a/web/src/components/Logos.vue
+++ b/web/src/components/Logos.vue
@@ -1,47 +1,92 @@
 <template>
-  <div class="bg-grey">
-    <div class="row m-0 d-flex justify-content-center align-items-center">
+  <div class="bg-grey" data-cy="footer-logos">
+    <div
+      class="row m-0 d-flex justify-content-center align-items-center"
+      data-cy="footer-logos-wrapper"
+    >
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="http://sulab.org/" rel="noreferrer" target="_blank">
-          <img src="@/assets/sulab-logo.png" class="w-100" alt="SuLab" />
+        <a
+          href="http://sulab.org/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-sulab"
+        >
+          <img
+            src="@/assets/sulab-logo.png"
+            class="w-100"
+            alt="SuLab"
+            data-cy="sulab-image"
+          />
         </a>
       </div>
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="http://wulab.io/" rel="noreferrer" target="_blank">
-          <img src="@/assets/wu-logo.png" class="w-100" alt="WuLab" />
+        <a
+          href="http://wulab.io/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-wulab"
+        >
+          <img
+            src="@/assets/wu-logo.png"
+            class="w-100"
+            alt="WuLab"
+            data-cy="wulab-image"
+          />
         </a>
       </div>
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="https://andersen-lab.com/" rel="noreferrer" target="_blank">
+        <a
+          href="https://andersen-lab.com/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-andersen-lab"
+        >
           <img
             src="@/assets/anderson-logo.png"
             class="w-100"
             alt="Anderson Lab"
+            data-cy="andersen-lab-image"
           />
         </a>
       </div>
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="https://www.scripps.edu/" rel="noreferrer" target="_blank">
+        <a
+          href="https://www.scripps.edu/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-scripps"
+        >
           <img
             src="@/assets/scripps-logo.png"
             class="w-100"
             alt="Scripps Research"
+            data-cy="scripps-image"
           />
         </a>
       </div>
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="https://cvisb.org/" rel="noreferrer" target="_blank">
-          <img src="@/assets/cvisb-logo.png" class="w-100" alt="CVISB" />
+        <a
+          href="https://cvisb.org/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-cvisb"
+        >
+          <img
+            src="@/assets/cvisb-logo.png"
+            class="w-100"
+            alt="CVISB"
+            data-cy="cvisb-image"
+          />
         </a>
       </div>
       <div
@@ -51,18 +96,30 @@
           href="https://globalhealth.scripps.edu/"
           rel="noreferrer"
           target="_blank"
+          data-cy="footer-logo-global-health"
         >
-          <img src="@/assets/global-logo.png" class="w-100" alt="SDCGH" />
+          <img
+            src="@/assets/global-logo.png"
+            class="w-100"
+            alt="SDCGH"
+            data-cy="global-health-image"
+          />
         </a>
       </div>
       <div
         class="col-sm-2 d-flex justify-content-center align-items-center picBox"
       >
-        <a href="https://searchcovid.info/" rel="noreferrer" target="_blank">
+        <a
+          href="https://searchcovid.info/"
+          rel="noreferrer"
+          target="_blank"
+          data-cy="footer-logo-searchcovid"
+        >
           <img
             src="@/assets/search-logo.png"
             class="w-100"
             alt="SEARCH Alliance"
+            data-cy="searchcovid-image"
           />
         </a>
       </div>
@@ -88,8 +145,14 @@
               href="https://www.niaid.nih.gov/"
               rel="noreferrer"
               target="_blank"
+              data-cy="footer-logo-niaid"
             >
-              <img src="@/assets/niaid.png" class="w-100" alt="NIAID" />
+              <img
+                src="@/assets/niaid.png"
+                class="w-100"
+                alt="NIAID"
+                data-cy="niaid-image"
+              />
             </a>
           </div>
           <div
@@ -99,8 +162,14 @@
               href="https://ctsa.ncats.nih.gov/cd2h/"
               rel="noreferrer"
               target="_blank"
+              data-cy="footer-logo-cd2h"
             >
-              <img src="@/assets/cd2h.png" class="w-100" alt="CD2H" />
+              <img
+                src="@/assets/cd2h.png"
+                class="w-100"
+                alt="CD2H"
+                data-cy="cd2h-image"
+              />
             </a>
           </div>
         </div>
diff --git a/web/src/components/SearchBar.vue b/web/src/components/SearchBar.vue
index ccca8e3e0..8d92078f8 100644
--- a/web/src/components/SearchBar.vue
+++ b/web/src/components/SearchBar.vue
@@ -22,11 +22,13 @@
         @keydown.delete="onBackspace"
         @keydown.ctrl.65="onSelectAll"
         @keydown.meta.65="onSelectAll"
+        data-cy="search-bar"
       />
       <ul
         v-show="isOpen"
         id="autocomplete-results"
         class="autocomplete-results bg-dark text-light"
+        data-cy="search-bar-dropdown"
       >
         <li v-if="isLoading" class="loading">Loading results...</li>
         <li
@@ -36,6 +38,7 @@
           @click="setResult(result)"
           class="autocomplete-result"
           :class="{ 'is-active': i === arrowCounter }"
+          data-cy="search-options"
         >
           {{ result.label }}
         </li>
diff --git a/web/src/components/TypeaheadSelect.vue b/web/src/components/TypeaheadSelect.vue
index 000f2a65d..1d7fcbae9 100644
--- a/web/src/components/TypeaheadSelect.vue
+++ b/web/src/components/TypeaheadSelect.vue
@@ -11,11 +11,13 @@
         @keydown.down="down"
         @keydown.up="up"
         @input="debounceSearch"
+        data-cy="type-head-select-input"
       />
       <div
         class="dropdown-menu overflow-auto"
         :class="{ show: isOpen }"
         style="width: 100%"
+        data-cy="type-head-select-dropdown"
       >
         <a
           v-for="(suggestion, idx) in matches"
@@ -23,6 +25,7 @@
           class="dropdown-item"
           :class="{ active: isActive(idx) }"
           @click="suggestionClick(idx)"
+          data-cy="type-head-select-dropdown-item"
         >
           {{ suggestion[labelVariable] }}
           <span v-if="suggestion.total_count">
diff --git a/web/src/components/VariantForm.vue b/web/src/components/VariantForm.vue
index d75958826..5e765806a 100644
--- a/web/src/components/VariantForm.vue
+++ b/web/src/components/VariantForm.vue
@@ -2,7 +2,10 @@
   <div>
     <div class="row d-flex align-items-center">
       <div class="col-sm-12 col-md-9 mt-1 mb-4">
-        <div class="d-flex align-items-center mb-1 circle-header">
+        <div
+          class="d-flex align-items-center mb-1 circle-header"
+          data-cy="variant-form-1"
+        >
           <div class="mr-3" :class="[minimalistic ? 'circle-sm' : 'circle']">
             1
           </div>
@@ -26,6 +29,7 @@
               type="radio"
               :value="opt"
               class="mr-2"
+              data-cy="{`variant-type-${oIdx}`}"
             />
             <label :for="opt.id">{{ opt.label }}</label>
           </div>
@@ -39,6 +43,7 @@
           <div
             v-if="selectedType"
             class="d-flex align-items-center circle-header"
+            data-cy="selected-type"
           >
             <div class="mr-3" :class="[minimalistic ? 'circle-sm' : 'circle']">
               2
@@ -147,6 +152,7 @@
     <div
       v-if="formValid && selectedType"
       class="d-flex align-items-center circle-header"
+      data-cy="selected-lineage"
     >
       <div class="mr-3" :class="[minimalistic ? 'circle-sm' : 'circle']">
         {{ selectedType.id === 'variant' ? 4 : 3 }}
diff --git a/web/src/js/stats.js b/web/src/js/stats.js
index d40badf0c..bd0812834 100644
--- a/web/src/js/stats.js
+++ b/web/src/js/stats.js
@@ -1,4 +1,4 @@
-import { sum } from 'd3-array';
+import { quantile, sum } from 'd3-array';
 import { timeDay } from 'd3-time';
 import { timeParse } from 'd3-time-format';
 
@@ -62,8 +62,8 @@ export const calcPrevalence = (
 };
 
 export const calcCI = (x, n) => {
-  const upper = quantile(0.975, x + 0.5, n - x + 0.5);
-  const lower = quantile(0.025, x + 0.5, n - x + 0.5);
+  const upper = quantile([0.975], x + 0.5);
+  const lower = quantile([0.025], x + 0.5);
   const est = x / n;
 
   return {
diff --git a/web/src/views/Epi.vue b/web/src/views/Epi.vue
index 86b91d10d..4d5df39a8 100644
--- a/web/src/views/Epi.vue
+++ b/web/src/views/Epi.vue
@@ -51,7 +51,11 @@
     >
       <label v-if="variableObj.percapita !== false" class="b-contain m-auto">
         <span>normalize to population</span>
-        <input v-model="isPerCapita" type="checkbox" />
+        <input
+          v-model="isPerCapita"
+          type="checkbox"
+          data-cy="normalize-population-checkbox"
+        />
         <div class="b-input" />
       </label>
       <label
@@ -73,12 +77,17 @@
     </div>
 
     <!-- title / drop down variable selector -->
-    <h4 v-if="location" class="plot-title pt-5 pb-3">
+    <h4
+      v-if="location"
+      class="plot-title pt-5 pb-3"
+      data-cy="epi-title-dropdown-variable-selector"
+    >
       Number of COVID-19
       <select
         v-model="variableObj"
         class="select-dropdown select-width"
         @change="changeVariable"
+        data-cy="epi-select-cases"
       >
         <option
           v-for="option in variableOptions"
@@ -88,18 +97,30 @@
           {{ option.label }}
         </option>
       </select>
-      <span v-if="locationName">in {{ locationName }}</span>
-      <span v-if="isPerCapita && variableObj.percapita !== false">
+      <span v-if="locationName" data-cy="epi-location-label">
+        in {{ locationName }}
+      </span>
+      <span
+        v-if="isPerCapita && variableObj.percapita !== false"
+        data-cy="epi-normalized-population-text"
+      >
         per 100,000 residents
       </span>
     </h4>
 
     <template v-else>
       <template v-if="!nolocation">
-        <h4 class="plot-title pt-5 pb-3 text-highlight">
+        <h4
+          class="plot-title pt-5 pb-3 text-highlight"
+          data-cy="epi-no-location-title"
+        >
           Please select a location
         </h4>
-        <button class="btn btn-main-outline" @click="lookupLocation">
+        <button
+          class="btn btn-main-outline"
+          @click="lookupLocation"
+          data-cy="epi-nearest-location-btn"
+        >
           Find nearest location
         </button>
       </template>
@@ -120,6 +141,7 @@
       <div
         v-if="data$ && data$[0] && variable.includes('Increase')"
         class="d-flex flex-column align-items-center"
+        data-cy="bar-graph-group"
       >
         <div
           id="bar-group"
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 03034a346..1b93bdcde 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -11,8 +11,9 @@
               src="@/assets/logo-full-white-01.svg"
               alt="Outbreak.info"
               class="w-20"
+              data-cy="home-page-logo"
             />
-            <p class="text-light my-1 mx-3">
+            <p class="text-light my-1 mx-3" data-cy="home-page-title">
               an open-source database of SARS-CoV-2 variant data, COVID-19
               epidemiology data, and published research
             </p>
@@ -31,13 +32,20 @@
           class="col-sm-12 col-md-4 px-5 py-3 d-flex flex-column justify-content-between epi-intro"
         >
           <div class="mb-3">
-            <router-link :to="{ name: 'Epidemiology' }" class="text-light">
-              <h3 class="my-3">COVID-19 Cases &amp; Deaths</h3>
+            <router-link
+              :to="{ name: 'Epidemiology' }"
+              class="text-light"
+              data-cy="search-epidemiology"
+            >
+              <h3 class="my-3" data-cy="search-epi-title">
+                COVID-19 Cases &amp; Deaths
+              </h3>
             </router-link>
 
             <div
               id="sBar-text"
               class="form-text d-block mb-3 text-light-highlight line-height-1"
+              data-cy="search-epi-description"
             >
               View COVID-19 trends by region, country, state/province, U.S.
               metropolitan area, or U.S. county
@@ -57,6 +65,7 @@
                 <router-link
                   :to="{ name: 'Epidemiology', query: { location: 'BRA' } }"
                   class="text-light"
+                  data-cy="epi-brazil"
                 >
                   Brazil
 
@@ -71,6 +80,7 @@
                     query: { location: 'USA_US-CA' },
                   }"
                   class="text-light"
+                  data-cy="epi-california"
                 >
                   California
 
@@ -84,6 +94,7 @@
                   query: { location: 'USA_US-KS-28140' },
                 }"
                 class="text-light"
+                data-cy="epi-kansas"
               >
                 Kansas City metro area
 
@@ -104,8 +115,9 @@
               <router-link
                 :to="{ name: 'SituationReports' }"
                 class="text-light"
+                data-cy="search-variant"
               >
-                <h3 class="my-3">Variants</h3>
+                <h3 class="my-3" data-cy="search-variant-title">Variants</h3>
               </router-link>
               <small class="ml-2">
                 enabled by data from
@@ -126,6 +138,7 @@
             <div
               id="resourceBar-text"
               class="form-text d-block text-light-highlight line-height-1"
+              data-cy="search-variant-description"
             >
               Explore SARS-CoV-2 lineage, variant, and mutation situation
               reports
@@ -229,6 +242,7 @@
                 <router-link
                   :to="{ name: 'LocationReport', query: { loc: 'USA' } }"
                   class="text-light"
+                  data-cy="genomics-us"
                 >
                   USA
 
@@ -277,13 +291,20 @@
           class="col-sm-12 col-md-4 px-5 py-3 d-flex flex-column justify-content-between resources-intro"
         >
           <div class="mb-3">
-            <router-link :to="{ name: 'Resource Summary' }" class="text-light">
-              <h3 class="my-3">Research Library</h3>
+            <router-link
+              :to="{ name: 'Resource Summary' }"
+              class="text-light"
+              data-cy="search-resources"
+            >
+              <h3 class="my-3" data-cy="search-resources-title">
+                Research Library
+              </h3>
             </router-link>
 
             <div
               id="resourceBar-text"
               class="form-text d-block mb-3 text-light-highlight line-height-1"
+              data-cy="search-resources-description"
             >
               Find COVID-19 and SARS-CoV-2 publications, clinical trials,
               datasets, protocols, and more
@@ -391,15 +412,26 @@
         class="btn btn-main-outline m-4"
         data-toggle="collapse"
         href="#collapsedFeatures"
+        data-cy="toggle-summary-btn"
       >
         What can I do with outbreak.info?
       </button>
-      <router-link :to="{ name: 'Sources' }" class="no-underline m-4">
-        <button class="btn btn-main-outline">Where do we get our data?</button>
+      <router-link
+        :to="{ name: 'Sources' }"
+        class="no-underline m-4"
+        data-cy="btn-sources"
+      >
+        <button class="btn btn-main-outline" data-cy="btn-sources-text">
+          Where do we get our data?
+        </button>
       </router-link>
 
-      <router-link :to="{ name: 'Latest' }" class="no-underline m-4">
-        <button class="btn btn-main-outline">
+      <router-link
+        :to="{ name: 'Latest' }"
+        class="no-underline m-4"
+        data-cy="btn-latest"
+      >
+        <button class="btn btn-main-outline" data-cy="btn-latest-text">
           What's new at outbreak.info?
         </button>
       </router-link>
@@ -407,13 +439,18 @@
       <router-link
         :to="{ name: 'About', hash: '#jobs' }"
         class="no-underline m-4"
+        data-cy="btn-about-job"
       >
-        <button class="btn btn-main">We're hiring!</button>
+        <button class="btn btn-main" data-cy="btn-job-text">
+          We're hiring!
+        </button>
       </router-link>
     </div>
 
     <div id="collapsedFeatures" class="collapse">
-      <h1 class="text-center">What can I do with outbreak.info?</h1>
+      <h1 class="text-center" data-cy="summary-title">
+        What can I do with outbreak.info?
+      </h1>
 
       <!-- EPI EXAMPLES -->
       <section id="epi-examples" class="container my-3">
diff --git a/web/src/views/Maps.vue b/web/src/views/Maps.vue
index 1f721ecae..7edb53ab9 100644
--- a/web/src/views/Maps.vue
+++ b/web/src/views/Maps.vue
@@ -23,6 +23,7 @@
               date: selectedDate,
             },
           }"
+          data-cy="map-all-country-btn"
         >
           All countries
         </router-link>
@@ -40,6 +41,7 @@
                 date: selectedDate,
               },
             }"
+            data-cy="map-us-states-btn"
           >
             U.S. States
           </router-link>
@@ -57,6 +59,7 @@
                   date: selectedDate,
                 },
               }"
+              data-cy="map-us-metro-btn"
             >
               U.S. Metro Areas
             </router-link>
@@ -73,6 +76,7 @@
                   date: selectedDate,
                 },
               }"
+              data-cy="map-us-counties-btn"
             >
               U.S. Counties
             </router-link>
@@ -92,7 +96,11 @@
       >
         <!-- variable options -->
         <div class="row d-flex align-items-center">
-          <select v-model="selectedVariable" class="select-dropdown">
+          <select
+            v-model="selectedVariable"
+            class="select-dropdown"
+            data-cy="select-variable-dropdown"
+          >
             <option
               v-for="option in variableOptions"
               :key="option.value"
diff --git a/web/src/views/SituationReports.vue b/web/src/views/SituationReports.vue
index a81fcf444..a4185fb1c 100644
--- a/web/src/views/SituationReports.vue
+++ b/web/src/views/SituationReports.vue
@@ -1,8 +1,13 @@
 <template>
   <div>
     <div class="bg-main__darker mutation-banner border-top py-4">
-      <h1 class="m-0 text-grey">SARS-CoV-2 (hCoV-19) Mutation Reports</h1>
-      <h2 class="m-0 mutation-header font-weight-bold">
+      <h1 class="m-0 text-grey" data-cy="situation-reports-text">
+        SARS-CoV-2 (hCoV-19) Mutation Reports
+      </h1>
+      <h2
+        class="m-0 mutation-header font-weight-bold"
+        data-cy="situation-reports-page-title"
+      >
         Lineage
         <span class="mx-2">|</span>
         Mutation Tracker
@@ -78,12 +83,20 @@
             <div class="d-flex flex-wrap">
               View:
               <div class="d-flex flex-wrap flex-column">
-                <router-link class="mx-3 mb-1" :to="{ hash: '#voc' }">
+                <router-link
+                  class="mx-3 mb-1"
+                  :to="{ hash: '#voc' }"
+                  data-cy="custom-report-voc"
+                >
                   Variants of Concern
                 </router-link>
 
                 <div class="d-flex flex-column mx-3 mb-1">
-                  <router-link :to="{ hash: '#voi' }" class="">
+                  <router-link
+                    :to="{ hash: '#voi' }"
+                    class=""
+                    data-cy="custom-report-voi"
+                  >
                     Variants of Interest
                   </router-link>
                   <div class="text-muted text-size-xs mt-n1">
@@ -94,7 +107,11 @@
 
               <div class="d-flex flex-wrap flex-column mx-3">
                 <div class="d-flex flex-column mx-3 mb-1">
-                  <router-link :to="{ hash: '#previous-voc' }" class="">
+                  <router-link
+                    :to="{ hash: '#previous-voc' }"
+                    class=""
+                    data-cy="custom-report-previous-voc"
+                  >
                     Previous Variants of Concern
                   </router-link>
                   <div class="text-muted text-size-xs mt-n1">
@@ -103,7 +120,11 @@
                 </div>
 
                 <div class="d-flex flex-column mx-3 mb-1">
-                  <router-link :to="{ hash: '#de-escalated' }" class="">
+                  <router-link
+                    :to="{ hash: '#de-escalated' }"
+                    class=""
+                    data-cy="custom-report-de-escalated"
+                  >
                     De-escalated Variants
                   </router-link>
                   <div class="text-muted text-size-xs mt-n1">
@@ -113,11 +134,19 @@
               </div>
 
               <div class="d-flex flex-wrap flex-column mx-3">
-                <router-link class="mx-3 mb-1" :to="{ hash: '#moc' }">
+                <router-link
+                  class="mx-3 mb-1"
+                  :to="{ hash: '#moc' }"
+                  data-cy="custom-report-moc"
+                >
                   Mutations of Concern
                 </router-link>
 
-                <router-link class="mx-3 mb-1" :to="{ hash: '#moi' }">
+                <router-link
+                  class="mx-3 mb-1"
+                  :to="{ hash: '#moi' }"
+                  data-cy="custom-report-moi"
+                >
                   Mutations of Interest
                 </router-link>
               </div>
@@ -220,12 +249,17 @@
                   data-toggle="collapse"
                   href="#custom-report"
                   aria-expanded="false"
+                  data-cy="custom-report-collapse"
                 >
                   Select my own lineage and/or mutation(s)
                 </div>
               </div>
 
-              <section id="custom-report" class="collapse text-left">
+              <section
+                id="custom-report"
+                class="collapse text-left"
+                data-cy="custom-report-collapse-panel"
+              >
                 <CustomReportForm />
               </section>
             </div>
diff --git a/web/tests/e2e/fixtures/example.json b/web/tests/e2e/fixtures/example.json
new file mode 100644
index 000000000..02e425437
--- /dev/null
+++ b/web/tests/e2e/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/web/tests/e2e/specs/epidemiology/compare.cy.js b/web/tests/e2e/specs/epidemiology/compare.cy.js
new file mode 100644
index 000000000..3c4e06b95
--- /dev/null
+++ b/web/tests/e2e/specs/epidemiology/compare.cy.js
@@ -0,0 +1,18 @@
+describe('Find similar locations (e2e)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('find similar locations workflow test', () => {
+    cy.get('[data-cy=nav-epidemiology]').find('[data-cy=case-deaths]').click();
+    cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+    cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+      expect($el1).to.have.length(1);
+      cy.get('[data-cy=item-compare]')
+        .should('be.visible')
+        .and('have.text', ' Find similar locations ')
+        .click();
+      cy.wait(1000);
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/epidemiology/datatable.cy.js b/web/tests/e2e/specs/epidemiology/datatable.cy.js
new file mode 100644
index 000000000..44bb1becc
--- /dev/null
+++ b/web/tests/e2e/specs/epidemiology/datatable.cy.js
@@ -0,0 +1,18 @@
+describe('Access data tables (e2e)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('access data tables workflow test', () => {
+    cy.get('[data-cy=nav-epidemiology]').find('[data-cy=case-deaths]').click();
+    cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+    cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+      expect($el1).to.have.length(1);
+      cy.get('[data-cy=item-access-datatable]')
+        .should('be.visible')
+        .and('have.text', ' Access data tables ')
+        .click();
+      cy.wait(1000);
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/epidemiology/epi.cy.js b/web/tests/e2e/specs/epidemiology/epi.cy.js
new file mode 100644
index 000000000..4cc10cf8e
--- /dev/null
+++ b/web/tests/e2e/specs/epidemiology/epi.cy.js
@@ -0,0 +1,45 @@
+describe('Compare locations over time test (e2e)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('workflow test', () => {
+    cy.get('[data-cy=nav-epidemiology]').find('[data-cy=case-deaths]').click();
+    cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+    cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+      expect($el1).to.have.length(1);
+      cy.get('[data-cy=item-epidemiology]')
+        .should('be.visible')
+        .and('have.text', ' Compare locations over time ')
+        .click();
+      cy.get('[data-cy=epi-no-location-title]')
+        .should('be.visible')
+        .and('have.text', ' Please select a location ');
+      cy.get('[data-cy=epi-nearest-location-btn]')
+        .should('be.visible')
+        .and('have.text', ' Find nearest location ');
+      cy.get('[data-cy=autocomplete-input-label]')
+        .should('be.visible')
+        .and('have.text', ' select locations ');
+
+      cy.get('[data-cy=autocomplete-input]').type('United', { delay: 500 });
+      cy.contains('United Kingdom').click();
+      cy.wait(8000);
+
+      cy.get('[data-cy=location-item-chip]')
+        .should('be.visible')
+        .and('have.text', ' United Kingdom ');
+      cy.get('[data-cy=location-item-chip-icon]').should('be.visible');
+
+      cy.get('[data-cy=epi-select-cases]').should('be.visible');
+      cy.get('[data-cy=epi-location-label]')
+        .should('be.visible')
+        .and('have.text', ' in United Kingdom ');
+
+      cy.get('[data-cy=normalize-population-checkbox]').check({ force: true });
+      cy.wait(5000);
+
+      cy.get('[data-cy=bar-graph-group]').should('be.visible');
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/epidemiology/maps.cy.js b/web/tests/e2e/specs/epidemiology/maps.cy.js
new file mode 100644
index 000000000..3fc730fc6
--- /dev/null
+++ b/web/tests/e2e/specs/epidemiology/maps.cy.js
@@ -0,0 +1,29 @@
+describe('Explore interactive maps (e2e)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('interactive map workflow test', () => {
+    cy.get('[data-cy=nav-epidemiology]').find('[data-cy=case-deaths]').click();
+    cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+    cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+      expect($el1).to.have.length(1);
+      cy.get('[data-cy=item-maps]')
+        .should('be.visible')
+        .and('have.text', ' Explore interactive maps ')
+        .click();
+      cy.wait(1000);
+      cy.get('[data-cy=map-all-country-btn]').should('be.visible');
+      cy.get('[data-cy=map-us-states-btn]').should('be.visible');
+      cy.get('[data-cy=map-us-metro-btn]').should('be.visible');
+      cy.get('[data-cy=map-us-counties-btn]').should('be.visible');
+
+      // test select variable dropdown
+      cy.get('[data-cy=select-variable-dropdown]')
+        .should('be.visible')
+        .select('total cases per capita')
+        .invoke('text')
+        .should('include', 'total cases per capita');
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/epidemiology/regions.cy.js b/web/tests/e2e/specs/epidemiology/regions.cy.js
new file mode 100644
index 000000000..05c1ee8d0
--- /dev/null
+++ b/web/tests/e2e/specs/epidemiology/regions.cy.js
@@ -0,0 +1,18 @@
+describe('Explore regions (e2e test)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('explore regions workflow test', () => {
+    cy.get('[data-cy=nav-epidemiology]').find('[data-cy=case-deaths]').click();
+    cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+    cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+      expect($el1).to.have.length(1);
+      cy.get('[data-cy=item-regions]')
+        .should('be.visible')
+        .and('have.text', ' Explore regions ')
+        .click();
+      cy.wait(1000);
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/home/footer.cy.js b/web/tests/e2e/specs/home/footer.cy.js
new file mode 100644
index 000000000..5a38d200c
--- /dev/null
+++ b/web/tests/e2e/specs/home/footer.cy.js
@@ -0,0 +1,375 @@
+describe('test footer flow', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('there should be footer navigation items', () => {
+    cy.get('[data-cy=footer]')
+      .should('be.visible')
+      .and('have.class', 'bg-main__darker')
+      .and('have.id', 'footer-sitemap');
+
+    // section epidemiology
+    cy.get('[data-cy=footer-section-epi]')
+      .should('be.visible')
+      .and('have.class', 'footer-section');
+    cy.get('[data-cy=epi-title]')
+      .should('be.visible')
+      .and('have.class', 'navbar-footer-title')
+      .and('have.text', ' COVID-19 Cases & Deaths ');
+    cy.get('[data-cy=footer-nav-epi]')
+      .should('be.visible')
+      .and('have.class', 'navbar-nav');
+
+    cy.get('[data-cy=epi-group-epidemiology]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-epidemiology]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Compare locations over time ')
+      .and('have.attr', 'href')
+      .and('include', '/epidemiology');
+
+    cy.get('[data-cy=epi-group-maps]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-maps]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Explore interactive maps ')
+      .and('have.attr', 'href')
+      .and('include', '/maps');
+
+    cy.get('[data-cy=epi-group-compare]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-compare]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Find similar locations ')
+      .and('have.attr', 'href')
+      .and('include', '/compare');
+
+    cy.get('[data-cy=epi-group-regions]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-regions]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Explore regions ')
+      .and('have.attr', 'href')
+      .and('include', '/regions');
+
+    cy.get('[data-cy=epi-group-datatable]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-datatable]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Access data tables ')
+      .and('have.attr', 'href')
+      .and('include', '/data');
+
+    // section genomics
+    cy.get('[data-cy=footer-section-genomics]')
+      .should('be.visible')
+      .and('have.class', 'footer-section');
+    cy.get('[data-cy=genomics-title]')
+      .should('be.visible')
+      .and('have.class', 'navbar-footer-title')
+      .and('have.text', ' Variants ');
+    cy.get('[data-cy=footer-nav-genomics]')
+      .should('be.visible')
+      .and('have.class', 'navbar-nav');
+
+    cy.get('[data-cy=genomics-group-situation-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-situation-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Lineage | Mutation Tracker ')
+      .and('have.attr', 'href')
+      .and('include', '/situation-reports');
+
+    cy.get('[data-cy=genomics-group-location-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-location-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Location Tracker ')
+      .and('have.attr', 'href')
+      .and('include', '/location-reports');
+
+    cy.get('[data-cy=genomics-group-lineage-compare]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-lineage-comparison]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Lineage Comparison ')
+      .and('have.attr', 'href')
+      .and('include', '/compare-lineages');
+
+    cy.get('[data-cy=genomics-group-interpreting-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-interpreting-reports]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Interpreting Reports ')
+      .and('have.attr', 'href')
+      .and('include', '/situation-reports/caveats');
+
+    // section resources
+    cy.get('[data-cy=footer-section-resources]')
+      .should('be.visible')
+      .and('have.class', 'footer-section');
+    cy.get('[data-cy=resources-title]')
+      .should('be.visible')
+      .and('have.class', 'navbar-footer-title')
+      .and('have.text', ' Research Library ');
+    cy.get('[data-cy=footer-nav-resources]')
+      .should('be.visible')
+      .and('have.class', 'navbar-nav');
+
+    cy.get('[data-cy=resources-group-find-research]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-find-research]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Find research ')
+      .and('have.attr', 'href')
+      .and('include', '/resources');
+
+    cy.get('[data-cy=resources-group-download-metadata]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-download-metadata]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Download metadata ')
+      .and('have.attr', 'href')
+      .and('include', '/sources#resources');
+
+    cy.get('[data-cy=resources-group-schema]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-schema]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' View & adapt schema ')
+      .and('have.attr', 'href')
+      .and('include', '/schema');
+
+    // section about
+    cy.get('[data-cy=footer-section-about]')
+      .should('be.visible')
+      .and('have.class', 'footer-section');
+    cy.get('[data-cy=about-title]')
+      .should('be.visible')
+      .and('have.class', 'navbar-footer-title')
+      .and('have.text', 'About');
+    cy.get('[data-cy=footer-nav-about]')
+      .should('be.visible')
+      .and('have.class', 'navbar-nav');
+
+    cy.get('[data-cy=about-group-about-us]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-about-us]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' About us ')
+      .and('have.attr', 'href')
+      .and('include', '/about');
+
+    cy.get('[data-cy=about-group-data-sources]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-data-sources]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Data sources ')
+      .and('have.attr', 'href')
+      .and('include', '/sources');
+
+    cy.get('[data-cy=about-group-blog')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-blog]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Blog ')
+      .and('have.attr', 'href')
+      .and('include', 'blog.outbreak.info');
+
+    cy.get('[data-cy=about-group-faq]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-faq]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' FAQ ')
+      .and('have.attr', 'href')
+      .and('include', '/faq');
+
+    cy.get('[data-cy=about-group-latest-changes]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-latest-changes]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Latest changes ')
+      .and('have.attr', 'href')
+      .and('include', '/latest');
+
+    cy.get('[data-cy=about-group-cite]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-cite]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' How to cite ')
+      .and('have.attr', 'href')
+      .and('include', '/citation');
+
+    cy.get('[data-cy=about-group-media]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=footer-item-media]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' In the media ')
+      .and('have.attr', 'href')
+      .and('include', '/press');
+  });
+
+  it('footer contact us test', () => {
+    // section contact us
+    cy.get('[data-cy=footer-section-contact-us]')
+      .should('be.visible')
+      .and('have.class', 'footer-section');
+    cy.get('[data-cy=contact-us-title]')
+      .should('be.visible')
+      .and('have.class', 'navbar-footer-title')
+      .and('have.text', ' Contact us ');
+    cy.get('[data-cy=footer-nav-contact-us]')
+      .should('be.visible')
+      .and('have.class', 'navbar-nav');
+
+    cy.get('[data-cy=contact-us-help]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=item-help-link]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' help@outbreak.info ')
+      .and('have.attr', 'href')
+      .and('include', 'help@outbreak.info');
+
+    cy.get('[data-cy=contact-us-submit-issue]')
+      .should('be.visible')
+      .and('have.class', 'nav-item');
+    cy.get('[data-cy=item-submit-issue-github]')
+      .should('be.visible')
+      .and('have.class', 'nav-link')
+      .and('have.text', ' Submit an issue on Github ')
+      .and('have.attr', 'href')
+      .and('include', 'github.com/outbreak-info/outbreak.info/issues');
+
+    //TODO: email subscription test
+    cy.get('[data-cy=email-subscription]').should('be.visible');
+  });
+
+  it('footer logos test', () => {
+    // footer logos
+    cy.get('[data-cy=footer-logos]').should('be.visible');
+    cy.get('[data-cy=footer-logo-sulab]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'http://sulab.org/');
+    cy.get('[data-cy=sulab-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-wulab]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'http://wulab.io/');
+    cy.get('[data-cy=wulab-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-andersen-lab]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://andersen-lab.com/');
+    cy.get('[data-cy=andersen-lab-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-scripps]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://www.scripps.edu/');
+    cy.get('[data-cy=scripps-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-cvisb]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://cvisb.org/');
+    cy.get('[data-cy=cvisb-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-global-health]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://globalhealth.scripps.edu/');
+    cy.get('[data-cy=global-health-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-searchcovid]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://searchcovid.info/');
+    cy.get('[data-cy=searchcovid-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-niaid]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://www.niaid.nih.gov/');
+    cy.get('[data-cy=niaid-image]')
+      .should('be.visible')
+      .and('have.attr', 'src');
+    cy.get('[data-cy=footer-logo-cd2h]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://ctsa.ncats.nih.gov/cd2h/');
+    cy.get('[data-cy=cd2h-image]').should('be.visible').and('have.attr', 'src');
+  });
+
+  it('footer terms test', () => {
+    // bottom of footer; terms
+    cy.get('[data-cy=bottom-item-cite]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/citation');
+    cy.get('[data-cy=bottom-item-github]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', 'https://github.com/outbreak-info');
+    cy.get('[data-cy=bottom-item-privacy]')
+      .should('be.visible')
+      .and('have.text', ' Privacy Policy ')
+      .and('have.attr', 'href')
+      .and('include', '/privacy');
+    cy.get('[data-cy=bottom-item-terms]')
+      .should('be.visible')
+      .and('have.text', ' Terms ')
+      .and('have.attr', 'href')
+      .and('include', '/terms');
+  });
+});
diff --git a/web/tests/e2e/specs/home/header.cy.js b/web/tests/e2e/specs/home/header.cy.js
new file mode 100644
index 000000000..eed8cc8f1
--- /dev/null
+++ b/web/tests/e2e/specs/home/header.cy.js
@@ -0,0 +1,184 @@
+describe('header test (e2e)', () => {
+  it('navigation test', () => {
+    cy.visit('/');
+    cy.get('[data-cy=navigation]').should('be.visible');
+    cy.get('[data-cy=nav-link]').then(($el) => {
+      expect($el).to.have.length(1);
+      const navEpidemiologySelector = cy.get('[data-cy=nav-epidemiology]');
+      const navGenomicsSelector = cy.get('[data-cy=nav-genomics]');
+      const navResourceSelector = cy.get('[data-cy=nav-resources]');
+      const navApiSelector = cy.get('[data-cy=nav-api]');
+      const navAboutSelector = cy.get('[data-cy=nav-about]');
+      navEpidemiologySelector.should('have.length', 1);
+      navGenomicsSelector.should('have.length', 1);
+      navResourceSelector.should('have.length', 1);
+      navApiSelector.should('have.length', 1);
+      navAboutSelector.should('have.length', 1);
+
+      // Epidemiology
+      cy.get('[data-cy=nav-epidemiology]')
+        .find('[data-cy=case-deaths]')
+        .click();
+      cy.get('[data-cy=epidemiology-dropdown]').should('be.visible');
+      cy.get('[data-cy=epidemiology-dropdown]').then(($el1) => {
+        expect($el1).to.have.length(1);
+        cy.get('[data-cy=item-epidemiology]')
+          .should('have.length', 1)
+          .and('have.text', ' Compare locations over time ')
+          .and('have.attr', 'href')
+          .and('include', '/epidemiology');
+        cy.get('[data-cy=item-maps]')
+          .should('have.length', 1)
+          .and('have.text', ' Explore interactive maps ')
+          .and('have.attr', 'href')
+          .and('include', '/maps');
+        cy.get('[data-cy=item-compare]')
+          .should('have.length', 1)
+          .and('have.text', ' Find similar locations ')
+          .and('have.attr', 'href')
+          .and('include', '/compare');
+        cy.get('[data-cy=item-regions]')
+          .should('have.length', 1)
+          .and('have.text', ' Explore regions ')
+          .and('have.attr', 'href')
+          .and('include', '/regions');
+        cy.get('[data-cy=item-access-datatable]')
+          .should('have.length', 1)
+          .and('have.text', ' Access data tables ')
+          .and('have.attr', 'href')
+          .and('include', '/data');
+      });
+
+      // Genomics
+      cy.get('[data-cy=nav-genomics]').find('[data-cy=variants]').click();
+      cy.get('[data-cy=genomics-dropdown]').should('be.visible');
+      cy.get('[data-cy=genomics-dropdown]').then(($el2) => {
+        expect($el2).to.have.length(1);
+        cy.get('[data-cy=item-situation-reports]')
+          .should('have.length', 1)
+          .and('have.text', ' Lineage | Mutation Tracker ')
+          .and('have.attr', 'href')
+          .and('include', '/situation-reports');
+        cy.get('[data-cy=item-location-reports]')
+          .should('have.length', 1)
+          .and('have.text', ' Location Tracker ')
+          .and('have.attr', 'href')
+          .and('include', '/location-reports');
+        cy.get('[data-cy=item-situation-report-comparison]')
+          .should('have.length', 1)
+          .and('have.text', ' Lineage Comparison ')
+          .and('have.attr', 'href')
+          .and('include', '/compare-lineages');
+        cy.get('[data-cy=item-interpreting-reports]')
+          .should('have.length', 1)
+          .and('have.text', ' Interpreting Reports ')
+          .and('have.attr', 'href')
+          .and('include', '/situation-reports/caveats');
+      });
+
+      // Resources
+      cy.get('[data-cy=nav-resources]')
+        .find('[data-cy=research-library]')
+        .click();
+      cy.get('[data-cy=resources-dropdown]').should('be.visible');
+      cy.get('[data-cy=resources-dropdown]').then(($el3) => {
+        expect($el3).to.have.length(1);
+        cy.get('[data-cy=item-find-research]')
+          .should('have.length', 1)
+          .and('have.text', ' Find research ')
+          .and('have.attr', 'href')
+          .and('include', '/resources');
+        cy.get('[data-cy=item-download-metadata]')
+          .should('have.length', 1)
+          .and('have.text', ' Download metadata ')
+          .and('have.attr', 'href')
+          .and('include', '/sources#resources');
+        cy.get('[data-cy=item-schema]')
+          .should('have.length', 1)
+          .and('have.text', ' View & adapt schema ')
+          .and('have.attr', 'href')
+          .and('include', '/schema');
+      });
+
+      // API
+      cy.get('[data-cy=nav-api]').then(($el4) => {
+        expect($el4).to.have.length(1);
+        cy.get('[data-cy=item-outbreak-api]')
+          .should('have.class', 'nav-link')
+          .and('have.text', ' API ')
+          .and('have.attr', 'href')
+          .and('include', 'api.outbreak.info');
+      });
+
+      // About
+      cy.get('[data-cy=nav-about]').find('[data-cy=outbreak-about]').click();
+      cy.get('[data-cy=about-dropdown]').should('be.visible');
+      cy.get('[data-cy=about-dropdown]').then(($el5) => {
+        expect($el5).to.have.length(1);
+
+        cy.get('[data-cy=item-about]')
+          .should('have.length', 1)
+          .and('have.text', ' About ')
+          .and('have.attr', 'href')
+          .and('include', '/about');
+
+        cy.get('[data-cy=item-data-sources]')
+          .should('have.length', 1)
+          .and('have.text', ' Data sources ')
+          .and('have.attr', 'href')
+          .and('include', '/sources');
+
+        cy.get('[data-cy=item-blog]')
+          .should('have.length', 1)
+          .and('have.text', ' Blog ')
+          .and('have.attr', 'href')
+          .and('include', 'blog.outbreak.info');
+
+        cy.get('[data-cy=item-faq]')
+          .should('have.length', 1)
+          .and('have.text', ' FAQ ')
+          .and('have.attr', 'href')
+          .and('include', '/faq');
+
+        cy.get('[data-cy=item-latest-changes]')
+          .should('have.length', 1)
+          .and('have.text', ' Latest changes ')
+          .and('have.attr', 'href')
+          .and('include', '/latest');
+
+        cy.get('[data-cy=item-cite]')
+          .should('have.length', 1)
+          .and('have.text', ' How to cite ')
+          .and('have.attr', 'href')
+          .and('include', '/citation');
+
+        cy.get('[data-cy=item-media]')
+          .should('have.length', 1)
+          .and('have.text', ' In the media ')
+          .and('have.attr', 'href')
+          .and('include', '/press');
+      });
+    });
+  });
+
+  it('notice section test', () => {
+    cy.visit('/');
+    cy.get('[data-cy=notice-section]')
+      .should('be.visible')
+      .contains(
+        'Access all SARS-CoV-2 variant data, Research Library metadata',
+      );
+    cy.get('[data-cy=notice-text]').then(($el) => {
+      expect($el.text()).to.contain('The outbreak.info');
+      expect($el.text()).to.contain('is now live!');
+      cy.get('[data-cy=outbreak-api]')
+        .should('have.class', 'text-light')
+        .and('have.attr', 'href')
+        .and('include', 'api.outbreak.info');
+      cy.get('[data-cy=r-package]')
+        .should('have.class', 'text-light')
+        .and('have.attr', 'href')
+        .and('include', 'outbreak-info.github.io/R-outbreak-info');
+    });
+  });
+});
diff --git a/web/tests/e2e/specs/home/home.cy.js b/web/tests/e2e/specs/home/home.cy.js
new file mode 100644
index 000000000..3ab4ce63a
--- /dev/null
+++ b/web/tests/e2e/specs/home/home.cy.js
@@ -0,0 +1,146 @@
+describe('Home page test', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should open home page', () => {
+    const homepageText =
+      ' an open-source database of SARS-CoV-2 variant data, COVID-19 epidemiology data, and published research ';
+    cy.get('[data-cy=home-page-title]').should('have.text', homepageText);
+    cy.get('[data-cy=home-page-logo]').should('be.visible');
+  });
+
+  it('search bar section should be displayed', () => {
+    cy.get('[data-cy=search-epidemiology]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/epidemiology');
+    cy.get('[data-cy=search-epi-title]')
+      .should('be.visible')
+      .and('have.text', ' COVID-19 Cases & Deaths ');
+    cy.get('[data-cy=search-epi-description]')
+      .should('be.visible')
+      .and(
+        'have.text',
+        ' View COVID-19 trends by region, country, state/province, U.S. metropolitan area, or U.S. county ',
+      );
+
+    cy.get('[data-cy=search-variant]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/situation-reports');
+    cy.get('[data-cy=search-variant-title]')
+      .should('be.visible')
+      .and('have.text', 'Variants');
+    cy.get('[data-cy=search-variant-description]')
+      .should('be.visible')
+      .and(
+        'have.text',
+        ' Explore SARS-CoV-2 lineage, variant, and mutation situation reports ',
+      );
+
+    cy.get('[data-cy=search-resources]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/resources');
+    cy.get('[data-cy=search-resources-title]')
+      .should('be.visible')
+      .and('have.text', ' Research Library ');
+    cy.get('[data-cy=search-resources-description]')
+      .should('be.visible')
+      .and(
+        'have.text',
+        ' Find COVID-19 and SARS-CoV-2 publications, clinical trials, datasets, protocols, and more ',
+      );
+  });
+
+  it('should open covid-19 trend chart by typing location in searchbar', () => {
+    cy.get('[data-cy=search-bar]')
+      .should('be.visible')
+      .and('have.class', 'form-control');
+    cy.get('[data-cy=search-bar]').type('California', { delay: 1000 });
+    cy.get('[data-cy=search-bar-dropdown]').should('be.visible');
+    cy.get('[data-cy=search-bar-dropdown]')
+      .eq(0)
+      .invoke('val')
+      .then((val) => {
+        cy.get('[data-cy=search-options]')
+          .contains('California')
+          .then(($el) => {
+            $el.click();
+          });
+      });
+  });
+
+  it('it should open covid chart by clicking hint locations', () => {
+    cy.get('[data-cy=epi-california]')
+      .should('be.visible')
+      .and('have.text', ' California ')
+      .click();
+    cy.url().should('include', '/epidemiology?location=USA_US-CA');
+    cy.wait(5000);
+    cy.go(-1);
+    cy.get('[data-cy=epi-brazil]')
+      .should('be.visible')
+      .and('have.text', ' Brazil ')
+      .click();
+    cy.url().should('include', '/epidemiology?location=BRA');
+    cy.wait(5000);
+    cy.go(-1);
+    cy.get('[data-cy=epi-kansas]')
+      .should('be.visible')
+      .and('have.text', ' Kansas City metro area ')
+      .click();
+    cy.url().should('include', '/epidemiology?location=USA_US-KS-28140');
+    cy.wait(5000);
+    cy.go(-1);
+    cy.get('[data-cy=genomics-us]')
+      .should('be.visible')
+      .and('have.text', ' USA ')
+      .click();
+    cy.url().should('include', '/location-reports?loc=USA');
+  });
+
+  it('toggle button: What can I do with outbreak.info and next buttons', () => {
+    cy.get('[data-cy=toggle-summary-btn]')
+      .should('be.visible')
+      .and('have.text', ' What can I do with outbreak.info? ')
+      .click();
+    cy.get('[data-cy=summary-title]')
+      .should('be.visible')
+      .and('have.text', ' What can I do with outbreak.info? ');
+    cy.get('[data-cy=btn-sources]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/sources');
+    cy.get('[data-cy=btn-sources-text]')
+      .should('be.visible')
+      .and('have.text', ' Where do we get our data? ')
+      .click();
+    cy.url().should('include', '/sources');
+    cy.wait(3000);
+    cy.go(-1);
+    cy.get('[data-cy=btn-latest]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/latest');
+    cy.get('[data-cy=btn-latest-text]')
+      .should('be.visible')
+      .and('have.text', " What's new at outbreak.info? ")
+      .click();
+    cy.url().should('include', '/latest');
+    cy.wait(3000);
+    cy.go(-1);
+    cy.get('[data-cy=btn-about-job]')
+      .should('be.visible')
+      .and('have.attr', 'href')
+      .and('include', '/about#jobs');
+    cy.get('[data-cy=btn-job-text]')
+      .should('be.visible')
+      .and('have.text', " We're hiring! ")
+      .click();
+    cy.url().should('include', '/about#jobs');
+    cy.wait(3000);
+    cy.go(-1);
+  });
+});
diff --git a/web/tests/e2e/specs/variants/situation-report.cy.js b/web/tests/e2e/specs/variants/situation-report.cy.js
new file mode 100644
index 000000000..a4c67baa7
--- /dev/null
+++ b/web/tests/e2e/specs/variants/situation-report.cy.js
@@ -0,0 +1,75 @@
+describe('situation report test (e2e)', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('situation report workflow', () => {
+    cy.get('[data-cy=nav-genomics]').find('[data-cy=variants]').click();
+    cy.get('[data-cy=genomics-dropdown]').should('be.visible');
+    cy.get('[data-cy=genomics-dropdown]').then(($el2) => {
+      expect($el2).to.have.length(1);
+      cy.get('[data-cy=item-situation-reports]')
+        .should('have.length', 1)
+        .and('have.text', ' Lineage | Mutation Tracker ')
+        .click();
+      cy.wait(2000);
+      cy.get('[data-cy=situation-reports-text]')
+        .should('be.visible')
+        .and('have.text', ' SARS-CoV-2 (hCoV-19) Mutation Reports ');
+      cy.get('[data-cy=situation-reports-page-title]')
+        .should('be.visible')
+        .and('have.class', 'mutation-header')
+        .and('include.text', 'Mutation Tracker');
+
+      // There should be custom reports category
+      cy.get('[data-cy=custom-report-voc]')
+        .should('be.visible')
+        .and('include.text', 'Variants of Concern');
+      cy.get('[data-cy=custom-report-voi]')
+        .should('be.visible')
+        .and('include.text', 'Variants of Interest');
+      cy.get('[data-cy=custom-report-previous-voc]')
+        .should('be.visible')
+        .and('include.text', 'Previous Variants of Concern');
+      cy.get('[data-cy=custom-report-de-escalated]')
+        .should('be.visible')
+        .and('include.text', 'De-escalated Variants');
+      cy.get('[data-cy=custom-report-moc]')
+        .should('be.visible')
+        .and('include.text', 'Mutations of Concern');
+      cy.get('[data-cy=custom-report-moi]')
+        .should('be.visible')
+        .and('include.text', 'Mutations of Interest');
+
+      // Select my own lineage and/or mutation(s) toggle button
+      cy.get('[data-cy=custom-report-collapse]')
+        .should('be.visible')
+        .and('include.text', 'Select my own lineage and/or mutation(s)')
+        .click();
+      cy.get('[data-cy=custom-report-collapse-panel]').should('be.visible');
+
+      cy.get('[data-cy=variant-form-1]')
+        .should('be.visible')
+        .and('include.text', 'Choose variant type');
+      cy.get('#pango').check({ force: true });
+      cy.get('[data-cy=selected-type]')
+        .should('be.visible')
+        .and('include.text', '2  Select PANGO lineage');
+      cy.get('[data-cy=type-head-select-input]')
+        .should('be.visible')
+        .type('BA', { delay: 500 });
+      cy.get('[data-cy=type-head-select-dropdown]').should('be.visible');
+      cy.get('[data-cy=type-head-select-dropdown]')
+        .eq(0)
+        .invoke('val')
+        .then((val) => {
+          cy.get('[data-cy=type-head-select-dropdown-item]')
+            .contains('BA.2')
+            .click();
+        });
+      cy.get('[data-cy=selected-lineage]')
+        .should('be.visible')
+        .and('include.text', 'Add BA.2 lineage');
+    });
+  });
+});
diff --git a/web/tests/e2e/support/command.js b/web/tests/e2e/support/command.js
new file mode 100644
index 000000000..119ab03f7
--- /dev/null
+++ b/web/tests/e2e/support/command.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/web/tests/e2e/support/e2e.js b/web/tests/e2e/support/e2e.js
new file mode 100644
index 000000000..5df9c0186
--- /dev/null
+++ b/web/tests/e2e/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/web/tests/unit/components/Warning.spec.js b/web/tests/unit/components/Warning.spec.js
new file mode 100644
index 000000000..38bdb0853
--- /dev/null
+++ b/web/tests/unit/components/Warning.spec.js
@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
+import Warning from '@/components/Warning';
+
+library.add(faExclamationCircle);
+
+describe('Warning', () => {
+  it('make sure component is rendered', () => {
+    const textProp = 'This is test';
+    const wrapper = mount(Warning, {
+      stubs: { FontAwesomeIcon },
+      propsData: {
+        text: textProp,
+        align_left: true,
+        animate: false,
+      },
+    });
+    expect(wrapper.props().text).toBe(textProp);
+    expect(wrapper.props().align_left).toBe(true);
+    expect(wrapper.props().animate).toBe(false);
+    expect(wrapper.text()).toContain(textProp);
+  });
+});
diff --git a/web/tests/unit/js/citationConverter.spec.js b/web/tests/unit/js/citationConverter.spec.js
new file mode 100644
index 000000000..eec57f6f8
--- /dev/null
+++ b/web/tests/unit/js/citationConverter.spec.js
@@ -0,0 +1,67 @@
+import { formatRIS } from '@/js/citationConverter';
+
+describe('CitationConverter test', () => {
+  const mockData = {
+    '@context': {
+      outbreak: 'https://discovery.biothings.io/view/outbreak/',
+      schema: 'http://schema.org/',
+    },
+    '@type': 'Publication',
+    _id: 'pmid35460221',
+    author: [
+      {
+        '@type': 'outbreak:Person',
+        familyName: 'Sookaromdee',
+        givenName: 'Pathum',
+        name: 'Pathum Sookaromdee',
+      },
+      {
+        '@type': 'outbreak:Person',
+        familyName: 'Wiwanitkit',
+        givenName: 'Viroj',
+        name: 'Viroj Wiwanitkit',
+      },
+    ],
+    curatedBy: {
+      '@type': 'schema:WebSite',
+      curationDate: '2022-08-06',
+      name: 'litcovid',
+      url: 'https://www.ncbi.nlm.nih.gov/research/coronavirus/publication/35460221',
+    },
+    date: '2022-08-05',
+    dateCompleted: '2022-08-05',
+    dateCreated: '2022-04-24',
+    dateModified: '2022-08-05',
+    datePublished: '2022-08-04',
+    doi: '10.1093/ajcp/aqac050',
+    identifier: '35460221',
+    issueNumber: '1943-7722',
+    journalAbbreviation: 'Am J Clin Pathol',
+    journalName: 'American journal of clinical pathology',
+    name: 'Lymphohistiocytic Myocarditis and Moderna mRNA-1273 Vaccine.',
+    pmid: '35460221',
+    publicationType: ['Journal Article'],
+    url: 'https://www.doi.org/10.1093/ajcp/aqac050',
+    volumeNumber: '158',
+  };
+  const resultMock =
+    'TY  - JOUR\n' +
+    'A1  - Pathum Sookaromdee\n' +
+    'A1  - Viroj Wiwanitkit\n' +
+    'AN  - 35460221\n' +
+    'DA  - 2022-08-04\n' +
+    'DO  - 10.1093/ajcp/aqac050\n' +
+    'IS  - 1943-7722\n' +
+    'JO  - American journal of clinical pathology\n' +
+    'JA  - 1943-7722\n' +
+    'L2  - https://www.doi.org/10.1093/ajcp/aqac050\n' +
+    'UR  - https://www.ncbi.nlm.nih.gov/research/coronavirus/publication/35460221\n' +
+    'TI  - Lymphohistiocytic Myocarditis and Moderna mRNA-1273 Vaccine.\n' +
+    'VL  - 158\n' +
+    'ER  - ';
+
+  it('should return proper data with converted format with give data', () => {
+    const result = formatRIS(mockData);
+    expect(result).toEqual(resultMock);
+  });
+});
diff --git a/web/tests/unit/js/stats.spec.js b/web/tests/unit/js/stats.spec.js
new file mode 100644
index 000000000..d945e7f80
--- /dev/null
+++ b/web/tests/unit/js/stats.spec.js
@@ -0,0 +1,12 @@
+import { calcCI } from '@/js/stats';
+
+describe('Stats js helper', () => {
+  it('should return calc result', () => {
+    const result = calcCI(2, 10);
+    expect(result).toEqual({
+      est: 0.2,
+      lower: 0.025,
+      upper: 0.975,
+    });
+  });
+});
diff --git a/web/tests/unit/router/router.spec.js b/web/tests/unit/router/router.spec.js
new file mode 100644
index 000000000..c76395aba
--- /dev/null
+++ b/web/tests/unit/router/router.spec.js
@@ -0,0 +1,24 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import router from '@/router';
+import App from '@/App';
+import Home from '@/views/Home';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+beforeAll(() => {
+  jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  jest.spyOn(console, 'debug').mockImplementation(jest.fn());
+});
+
+describe('Router testing', () => {
+  it('render home page', async () => {
+    const wrapper = mount(App, {
+      localVue,
+      router,
+    });
+    await router.push('/');
+    expect(wrapper.findComponent(Home).exists()).toBe(true);
+  });
+});
diff --git a/web/tests/unit/vuex/admin/mutations.spec.js b/web/tests/unit/vuex/admin/mutations.spec.js
new file mode 100644
index 000000000..d86b5716b
--- /dev/null
+++ b/web/tests/unit/vuex/admin/mutations.spec.js
@@ -0,0 +1,18 @@
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import store from '../../../../src/store';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('admin mutations test', () => {
+  it('setLoading: change loading state', () => {
+    store.commit('admin/setLoading', true);
+    expect(store.state.admin.loading).toEqual(true);
+  });
+
+  it('setReportLoading: change reportLoading state', () => {
+    store.commit('admin/setReportLoading', true);
+    expect(store.state.admin.reportloading).toEqual(true);
+  });
+});
diff --git a/web/tests/unit/vuex/colors/getters.spec.js b/web/tests/unit/vuex/colors/getters.spec.js
new file mode 100644
index 000000000..7c047a0fb
--- /dev/null
+++ b/web/tests/unit/vuex/colors/getters.spec.js
@@ -0,0 +1,47 @@
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import store from '../../../../src/store';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('colors getters', () => {
+  it('getLightColor', () => {
+    const payload = ['US'];
+    store.commit('colors/setLocations', payload);
+    const result = store.getters['colors/getLightColor']('GBR');
+    expect(result).not.toEqual(null);
+    expect(typeof result).toEqual('object');
+  });
+
+  it('getDarkColor', () => {
+    const payload = ['US'];
+    store.commit('colors/setLocations', payload);
+    const result = store.getters['colors/getDarkColor']('GBR');
+    expect(result).not.toEqual(null);
+    expect(typeof result).toEqual('object');
+  });
+
+  it('getRegionColor', () => {
+    const result = store.getters['colors/getRegionColor']('North America');
+    expect(result).toEqual('#f28e2c');
+  });
+
+  it('getRegionColorFromLocation', () => {
+    const result =
+      store.getters['colors/getRegionColorFromLocation']('North America');
+    expect(result).not.toEqual(null);
+    expect(result).toEqual('#f28e2c');
+  });
+
+  it('getRegionColorPalette', () => {
+    store.commit('colors/setLocations', []);
+    const result = store.getters['colors/getRegionColorPalette'](
+      'North America',
+      2,
+      1,
+    );
+    expect(result).not.toEqual(null);
+    expect(typeof result).toEqual('object');
+  });
+});
diff --git a/web/tests/unit/vuex/colors/mutations.spec.js b/web/tests/unit/vuex/colors/mutations.spec.js
new file mode 100644
index 000000000..f8fef750d
--- /dev/null
+++ b/web/tests/unit/vuex/colors/mutations.spec.js
@@ -0,0 +1,15 @@
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import store from '../../../../src/store';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('colors mutations', () => {
+  it('should change state with payload', () => {
+    const payload = ['US'];
+    store.commit('colors/setLocations', payload);
+    expect(store.state.colors.epiLocations).toEqual(payload);
+    expect(store.state.colors.locationScale).not.toEqual(null);
+  });
+});
diff --git a/web/tests/unit/vuex/geo/mutations.spec.js b/web/tests/unit/vuex/geo/mutations.spec.js
new file mode 100644
index 000000000..8821ad580
--- /dev/null
+++ b/web/tests/unit/vuex/geo/mutations.spec.js
@@ -0,0 +1,29 @@
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import store from '../../../../src/store';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('geo mutations', () => {
+  it('setRegionToolTip', () => {
+    const payload = {
+      region: 'North America',
+      display: true,
+      displayMore: true,
+      currentCases: null,
+      x: 1,
+      y: 1,
+    };
+
+    store.commit('geo/setRegionTooltip', payload);
+    expect(store.state.geo.regionDict[2]).toEqual({
+      display: true,
+      displayMore: true,
+      region: 'North America',
+      currentCases: null,
+      x: 1,
+      y: 1,
+    });
+  });
+});
diff --git a/web/vue.config.js b/web/vue.config.js
index 79dcd8932..3a1163612 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -9,54 +9,54 @@
 process.env.VUE_APP_VERSION = require('./package.json').version;
 
 APP_DESCRIPTION =
-    'Outbreak.info explores COVID-19 and SARS-CoV-2 data with variant surveillance reports, data on cases and deaths, and a searchable research library.';
+  'Outbreak.info explores COVID-19 and SARS-CoV-2 data with variant surveillance reports, data on cases and deaths, and a searchable research library.';
 APP_TITLE = 'outbreak.info SARS-CoV-2 data explorer';
 
 module.exports = {
-    css: {
-        loaderOptions: {
-            sass: {
-                prependData: `@import "@/styles/_global.scss";`,
-            },
-        },
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `@import "@/styles/_global.scss";`,
+      },
     },
-    chainWebpack: (config) => {
-        const version = process.env.VUE_APP_VERSION;
-        config.output
-            .filename(`js/[name].[hash:8].${version}.js`)
-            .chunkFilename(`js/[name].[chunkhash:8].${version}.js`);
+  },
+  chainWebpack: (config) => {
+    const version = process.env.VUE_APP_VERSION;
+    config.output
+      .filename(`js/[name].[hash:8].${version}.js`)
+      .chunkFilename(`js/[name].[chunkhash:8].${version}.js`);
+  },
+  configureWebpack: {
+    // plugins,
+    optimization: {
+      splitChunks: {
+        chunks: 'async',
+        minSize: 10000,
+        maxSize: 250000,
+      },
     },
-    configureWebpack: {
-        // plugins,
-        optimization: {
-            splitChunks: {
-                chunks: 'async',
-                minSize: 10000,
-                maxSize: 250000
-            }
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
         },
-        module: {
-            rules: [
-                {
-                    test: /\.mjs$/,
-                    include: /node_modules/,
-                    type: "javascript/auto"
-                },
-                {
-                    test: /\.js$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "babel-loader",
-                    },
-                },
-                {
-                    test: /\.xml$/i,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "raw-loader"
-                    }
-                },
-            ]
-        }
-    }
+        {
+          test: /\.xml$/i,
+          exclude: /node_modules/,
+          use: {
+            loader: 'raw-loader',
+          },
+        },
+      ],
+    },
+  },
 };