diff --git a/examples/tutorials/todo-starter/.eslintrc.cjs b/examples/tutorials/todo-starter/.eslintrc.cjs
@@ -1,44 +1,33 @@
 module.exports = {
   parserOptions: {
-    ecmaVersion: 2022
+    ecmaVersion: 2022,
   },
   env: {
     node: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-strongly-recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:vue/vue3-strongly-recommended'],
   rules: {
-    'key-spacing': [
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    semi: ['error', 'always'],
+    'vue/html-closing-bracket-newline': [
       'error',
       {
-        'align': {
-          'afterColon'  : true,
-          'beforeColon' : true,
-          'on'          : 'colon'
-        }
-      }
+        multiline: 'never',
+        singleline: 'never',
+      },
     ],
-    'quotes': [
+    'vue/max-attributes-per-line': [
       'error',
-      'single',
-      { 'allowTemplateLiterals': true }
-    ],
-    'semi'                             : ['error', 'always'],
-    'vue/html-closing-bracket-newline' : ['error', {
-      'multiline'  : 'never',
-      'singleline' : 'never'
-    }],
-    'vue/max-attributes-per-line': ['error', {
-      'multiline': {
-        'max': 4
-      },
-      'singleline': {
-        'max': 4
+      {
+        multiline: {
+          max: 4,
+        },
+        singleline: {
+          max: 4,
+        },
       },
-    }],
-    'vue/static-class-names-order' : 'error',
-    'indent'                       : ['error', 2]
-  }
-};
+    ],
+    'vue/static-class-names-order': 'error',
+    indent: ['error', 2],
+  },
+};
diff --git a/examples/tutorials/todo-starter/package.json b/examples/tutorials/todo-starter/package.json
@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:browser": "start-server-and-test dev http://localhost:5173 test"
   },
   "dependencies": {
     "@headlessui/vue": "1.7.4",

diff --git a/examples/tutorials/todo-starter/playwright.config.js b/examples/tutorials/todo-starter/playwright.config.js
@@ -0,0 +1,3 @@
+import defaultPlaywrightConfig from '../../util/default-playwright-config';
+
+export default defaultPlaywrightConfig;
diff --git a/examples/tutorials/todo-starter/todo.spec.js b/examples/tutorials/todo-starter/todo.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from 'playwright/test';
+
+test('Vue app renders successfully', async ({ page }) => {
+  await page.goto(' http://localhost:5173/');
+
+  const appElement = await page.$('#app');
+  expect(appElement).toBeTruthy();
+
+  const title = await page.textContent('h2');
+  expect(title).toContain('Todo List');
+});
diff --git a/examples/util/default-playwright-config.js b/examples/util/default-playwright-config.js
@@ -0,0 +1,49 @@
+const { devices } = require('playwright/test');
+
+module.exports = {
+  timeout: 20000,
+  use: {
+    browserName: 'chromium',
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+  },
+  reporter: [['html'], ['dot']],
+  testDir: './',
+  testMatch: '**/*.spec.js',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+    {
+      name: 'Microsoft Edge',
+      use: {
+        ...devices['Desktop Edge'],
+        channel: 'msedge',
+      },
+    },
+    {
+      name: 'Google Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+      },
+    },
+  ],
+};
diff --git a/package.json b/package.json
@@ -13,17 +13,16 @@
     "start:widget": "pnpm --filter web5-quickstart-widgets start",
     "build": "node extract-snippets && pnpm --filter site run build",
     "clear": "pnpm --filter site run clear",
-    "test": "node extract-snippets && pnpm vitest run --config vite.config.ts",
-    "test:watch": "node extract-snippets && pnpm vitest --config vite.config.ts --watch"
+    "test": "node extract-snippets && pnpm vitest run --config vite.config.ts && pnpm test:browser",
+    "test:watch": "node extract-snippets && pnpm vitest --config vite.config.ts --watch",
+    "test:browser": "pnpm -r test:browser"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@web5/api": "0.8.2",
     "font-awesome": "^4.7.0",
-    "googleapis": "^128.0.0",
-    "moment": "^2.29.4",
     "node-fetch": "^3.3.2",
     "react-fontawesome": "^1.7.1",
     "react-markdown": "^8.0.7",
@@ -34,6 +33,8 @@
     "@vitest/browser": "0.33.0",
     "@vitest/coverage-istanbul": "0.33.0",
     "fake-indexeddb": "4.0.2",
+    "playwright": "^1.39.0",
+    "start-server-and-test": "^2.0.2",
     "vitest": "0.33.0",
     "webdriverio": "8.13.13"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
     testTimeout: 40000,
     hookTimeout: 40000,
     teardownTimeout: 40000,
-    exclude: [...configDefaults.exclude, "apps/**"],
+    exclude: [...configDefaults.exclude, "apps/**", "**/*.spec.{js,ts,jsx,tsx}"],
     //TODO: Investigate coverage options later for output files
     // coverage: {
     //   provider: 'istanbul',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import defaultPlaywrightConfig from '../../util/default-playwright-config';

		export default defaultPlaywrightConfig;