diff --git a/.circleci/config.yml b/.circleci/config.yml
index a661cd21577e..371c644b134b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -413,7 +413,7 @@ jobs:
           root: .
           paths:
             - sandbox/*/storybook-static
-  test-runner-sandboxes:
+  test-runner-production:
     parameters:
       parallelism:
         type: integer
@@ -434,6 +434,27 @@ jobs:
           template: $(yarn get-template << pipeline.parameters.workflow >> test-runner)
       - store_test_results:
           path: test-results
+  test-runner-dev:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
+    executor:
+      class: large
+      name: sb_playwright
+    parallelism: << parameters.parallelism >>
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running Test Runner in Dev mode
+          command: yarn task --task test-runner-dev --template $(yarn get-template << pipeline.parameters.workflow >> test-runner-dev) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> test-runner-dev)
+      - store_test_results:
+          path: test-results
   chromatic-sandboxes:
     parameters:
       parallelism:
@@ -454,7 +475,7 @@ jobs:
           template: $(yarn get-template << pipeline.parameters.workflow >> chromatic)
       - store_test_results:
           path: test-results
-  e2e-sandboxes:
+  e2e-production:
     parameters:
       parallelism:
         type: integer
@@ -478,6 +499,30 @@ jobs:
       - store_artifacts: # this is where playwright puts more complex stuff
           path: code/playwright-results/
           destination: playwright
+  e2e-dev:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
+    executor:
+      class: medium
+      name: sb_playwright
+    parallelism: << parameters.parallelism >>
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running E2E Tests
+          command: yarn task --task e2e-tests-dev --template $(yarn get-template << pipeline.parameters.workflow >> e2e-tests-dev) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> e2e-tests-dev)
+      - store_test_results:
+          path: test-results
+      - store_artifacts: # this is where playwright puts more complex stuff
+          path: code/playwright-results/
+          destination: playwright
 
 workflows:
   ci:
@@ -500,21 +545,31 @@ workflows:
       - script-unit-tests:
           requires:
             - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
       - create-sandboxes:
           requires:
             - build
       - build-sandboxes:
           requires:
             - create-sandboxes
-      - test-runner-sandboxes:
+      - chromatic-sandboxes:
           requires:
             - build-sandboxes
-      - chromatic-sandboxes:
+      - e2e-production:
           requires:
             - build-sandboxes
-      - e2e-sandboxes:
+      - e2e-dev:
+          requires:
+            - create-sandboxes
+      - test-runner-production:
           requires:
             - build-sandboxes
+      # TODO: reenable once we find out the source of flakyness
+      # - test-runner-dev:
+      #     requires:
+      #       - create-sandboxes
   pr:
     when:
       equal: [pr, << pipeline.parameters.workflow >>]
@@ -553,18 +608,25 @@ workflows:
           parallelism: 9
           requires:
             - create-sandboxes
-      - test-runner-sandboxes:
+      - chromatic-sandboxes:
           parallelism: 9
           requires:
             - build-sandboxes
-      - chromatic-sandboxes:
+      - e2e-production:
           parallelism: 9
           requires:
             - build-sandboxes
-      - e2e-sandboxes:
+      - e2e-dev:
+          requires:
+            - create-sandboxes
+      - test-runner-production:
           parallelism: 9
           requires:
             - build-sandboxes
+      # TODO: reenable once we find out the source of flakyness
+      # - test-runner-dev:
+      #     requires:
+      #       - create-sandboxes
   merged:
     when:
       equal: [merged, << pipeline.parameters.workflow >>]
@@ -603,18 +665,27 @@ workflows:
           parallelism: 18
           requires:
             - create-sandboxes
-      - test-runner-sandboxes:
+      - chromatic-sandboxes:
           parallelism: 18
           requires:
             - build-sandboxes
-      - chromatic-sandboxes:
+      - e2e-production:
           parallelism: 18
           requires:
             - build-sandboxes
-      - e2e-sandboxes:
+      - e2e-dev:
+          parallelism: 4
+          requires:
+            - create-sandboxes
+      - test-runner-production:
           parallelism: 18
           requires:
             - build-sandboxes
+      # TODO: reenable once we find out the source of flakyness
+      # - test-runner-dev:
+      #     parallelism: 4
+      #     requires:
+      #       - create-sandboxes
   daily:
     when:
       equal: [daily, << pipeline.parameters.workflow >>]
@@ -640,15 +711,24 @@ workflows:
           parallelism: 30
           requires:
             - create-sandboxes
-      - test-runner-sandboxes:
+      - chromatic-sandboxes:
           parallelism: 30
           requires:
             - build-sandboxes
-      - chromatic-sandboxes:
+      - e2e-production:
           parallelism: 30
           requires:
             - build-sandboxes
-      - e2e-sandboxes:
+      - e2e-dev:
+          parallelism: 4
+          requires:
+            - create-sandboxes
+      - test-runner-production:
           parallelism: 30
           requires:
             - build-sandboxes
+      # TODO: reenable once we find out the source of flakyness
+      # - test-runner-dev:
+      #     parallelism: 4
+      #     requires:
+      #       - create-sandboxes
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 34ecbfce3d5b..e2a9d40050aa 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -1,6 +1,12 @@
 import type { StorybookConfig } from '@storybook/types';
 
-export type SkippableTask = 'smoke-test' | 'test-runner' | 'chromatic' | 'e2e-tests';
+export type SkippableTask =
+  | 'smoke-test'
+  | 'test-runner'
+  | 'test-runner-dev'
+  | 'chromatic'
+  | 'e2e-tests'
+  | 'e2e-tests-dev';
 export type TemplateKey = keyof typeof baseTemplates | keyof typeof internalTemplates;
 export type Cadence = keyof typeof templatesByCadence;
 
@@ -68,6 +74,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
@@ -90,6 +97,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'nextjs/default-js': {
     name: 'Next.js (JavaScript)',
@@ -99,6 +107,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'nextjs/default-ts': {
     name: 'Next.js (TypeScript)',
@@ -108,6 +117,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
@@ -117,6 +127,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
@@ -135,6 +146,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'react-webpack/17-ts': {
     name: 'React 17 Webpack5 (TS)',
@@ -144,6 +156,7 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'solid-vite/default-js': {
     name: 'SolidJS Vite (JS)',
@@ -155,6 +168,7 @@ const baseTemplates = {
     },
     // TODO: remove this once solid-vite framework is released
     inDevelopment: true,
+    skipTasks: ['e2e-tests-dev'],
   },
   'solid-vite/default-ts': {
     name: 'SolidJS Vite (TS)',
@@ -166,6 +180,7 @@ const baseTemplates = {
     },
     // TODO: remove this once solid-vite framework is released
     inDevelopment: true,
+    skipTasks: ['e2e-tests-dev'],
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
@@ -175,6 +190,7 @@ const baseTemplates = {
       renderer: '@storybook/vue3',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
@@ -184,19 +200,20 @@ const baseTemplates = {
       renderer: '@storybook/vue3',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'vue2-vite/2.7-js': {
     name: 'Vue2 Vite (vue 2.7 JS)',
     script: 'npx create-vue@2 {{beforeDir}} --default',
     // TODO: reenable this once sandbox is available
     inDevelopment: true,
-    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/vue-vite',
       renderer: '@storybook/vue',
       builder: '@storybook/builder-vite',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'html-webpack/default': {
     name: 'HTML Webpack5',
@@ -206,6 +223,7 @@ const baseTemplates = {
       renderer: '@storybook/html',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'html-vite/default-js': {
     name: 'HTML Vite JS',
@@ -215,6 +233,7 @@ const baseTemplates = {
       renderer: '@storybook/html',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
@@ -224,6 +243,7 @@ const baseTemplates = {
       renderer: '@storybook/html',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
@@ -233,17 +253,18 @@ const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
     script: 'yarn create vite . --template svelte-ts',
-    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'angular-cli/default-ts': {
     name: 'Angular CLI (latest)',
@@ -254,6 +275,7 @@ const baseTemplates = {
       renderer: '@storybook/angular',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'angular-cli/14-ts': {
     name: 'Angular CLI (Version 14)',
@@ -264,6 +286,7 @@ const baseTemplates = {
       renderer: '@storybook/angular',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
@@ -274,6 +297,7 @@ const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'svelte-kit/skeleton-ts': {
     name: 'Svelte Kit (TS)',
@@ -284,55 +308,52 @@ const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
     script: 'yarn create vite . --template lit',
-    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
       builder: '@storybook/builder-vite',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
     script: 'yarn create vite . --template lit-ts',
-    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
       builder: '@storybook/builder-vite',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'vue-cli/default-js': {
     name: 'Vue-CLI (Default JS)',
     script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge',
-    skipTasks: [
-      // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-      'smoke-test',
-    ],
     expected: {
       framework: '@storybook/vue3-webpack5',
       renderer: '@storybook/vue3',
       builder: '@storybook/builder-webpack5',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'vue-cli/vue2-default-js': {
     name: 'Vue-CLI (Vue2 JS)',
     script:
       'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"',
-    skipTasks: [
-      // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-      'smoke-test',
-    ],
     expected: {
       framework: '@storybook/vue-webpack5',
       renderer: '@storybook/vue',
       builder: '@storybook/builder-webpack5',
     },
+    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
   'preact-webpack5/default-js': {
     name: 'Preact CLI (Default JS)',
@@ -342,6 +363,7 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'preact-webpack5/default-ts': {
     name: 'Preact CLI (Default TS)',
@@ -351,6 +373,7 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-webpack5',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
@@ -360,6 +383,7 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
@@ -369,19 +393,20 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    skipTasks: ['e2e-tests-dev'],
   },
   'qwik-vite/default-ts': {
     name: 'Qwik CLI (Default TS)',
     script: 'yarn create qwik basic {{beforeDir}} --no-install',
-    // TODO: The community template does not provide standard stories, which is required for e2e tests.
+    // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
     inDevelopment: true,
-    // TODO: Re-enable once problems are fixed.
-    skipTasks: ['e2e-tests'],
     expected: {
       framework: 'storybook-framework-qwik',
       renderer: 'storybook-framework-qwik',
       builder: 'storybook-framework-qwik',
     },
+    // TODO: The community template does not provide standard stories, which is required for e2e tests.
+    skipTasks: ['e2e-tests', 'e2e-tests-dev'],
   },
 } satisfies Record<string, Template>;
 
@@ -405,8 +430,8 @@ const internalTemplates = {
     },
   },
   'internal/ssv6-webpack': {
-    ...baseTemplates['react-webpack/18-ts'],
-    name: 'StoryStore v6 (react-webpack/18-ts)',
+    ...baseTemplates['cra/default-ts'],
+    name: 'StoryStore v6 (cra/default-ts)',
     isInternal: true,
     modifications: {
       mainConfig: {
@@ -418,8 +443,8 @@ const internalTemplates = {
     },
   },
   'internal/pnp': {
-    ...baseTemplates['react-webpack/18-ts'],
-    name: 'PNP (react-webpack/18-ts)',
+    ...baseTemplates['cra/default-ts'],
+    name: 'PNP (cra/default-ts)',
     script: 'yarn create react-app . --use-pnp',
     isInternal: true,
     inDevelopment: true,
diff --git a/scripts/task.ts b/scripts/task.ts
index 22013a2f4eb1..ab5888178ed6 100644
--- a/scripts/task.ts
+++ b/scripts/task.ts
@@ -19,9 +19,11 @@ import { dev } from './tasks/dev';
 import { smokeTest } from './tasks/smoke-test';
 import { build } from './tasks/build';
 import { serve } from './tasks/serve';
-import { testRunner } from './tasks/test-runner';
+import { testRunnerBuild } from './tasks/test-runner-build';
+import { testRunnerDev } from './tasks/test-runner-dev';
 import { chromatic } from './tasks/chromatic';
-import { e2eTests } from './tasks/e2e-tests';
+import { e2eTestsBuild } from './tasks/e2e-tests-build';
+import { e2eTestsDev } from './tasks/e2e-tests-dev';
 
 import {
   allTemplates as TEMPLATES,
@@ -40,6 +42,7 @@ export const extraAddons = ['a11y', 'storysource'];
 export type Path = string;
 export type TemplateDetails = {
   key: TemplateKey;
+  selectedTask: TaskKey;
   template: Template;
   codeDir: Path;
   sandboxDir: Path;
@@ -98,9 +101,11 @@ export const tasks = {
   'smoke-test': smokeTest,
   build,
   serve,
-  'test-runner': testRunner,
+  'test-runner': testRunnerBuild,
+  'test-runner-dev': testRunnerDev,
   chromatic,
-  'e2e-tests': e2eTests,
+  'e2e-tests': e2eTestsBuild,
+  'e2e-tests-dev': e2eTestsDev,
 };
 type TaskKey = keyof typeof tasks;
 
@@ -316,6 +321,8 @@ async function runTask(task: Task, details: TemplateDetails, optionValues: Passe
   }
 }
 
+const controllers: AbortController[] = [];
+
 async function run() {
   const allOptionValues = await getOptionsOrPrompt('yarn task', options);
 
@@ -326,10 +333,11 @@ async function run() {
   const template = TEMPLATES[templateKey];
 
   const templateSandboxDir = templateKey && join(sandboxDir, templateKey.replace('/', '-'));
-  const details = {
+  const details: TemplateDetails = {
     key: templateKey,
     template,
     codeDir,
+    selectedTask: taskKey,
     sandboxDir: templateSandboxDir,
     builtSandboxDir: templateKey && join(templateSandboxDir, 'storybook-static'),
     junitFilename: junit && getJunitFilename(taskKey),
@@ -417,7 +425,6 @@ async function run() {
     setUnready(startFromTask);
   }
 
-  const controllers: AbortController[] = [];
   for (let i = 0; i < sortedTasks.length; i += 1) {
     const task = sortedTasks[i];
     const status = statuses.get(task);
@@ -439,7 +446,6 @@ async function run() {
           // Always debug the final task so we can see it's output fully
           debug: task === finalTask ? true : optionValues.debug,
         });
-
         if (controller) controllers.push(controller);
       } catch (err) {
         logger.error(`Error running task ${getTaskKey(task)}:`);
@@ -484,11 +490,16 @@ async function run() {
       }
     }
   }
+
+  return 0;
+}
+
+process.on('exit', () => {
+  // Make sure to kill any running tasks 🎉
   controllers.forEach((controller) => {
     controller.abort();
   });
-  return 0;
-}
+});
 
 if (require.main === module) {
   run()
diff --git a/scripts/tasks/dev.ts b/scripts/tasks/dev.ts
index 67dac5d2a255..a216cc53d923 100644
--- a/scripts/tasks/dev.ts
+++ b/scripts/tasks/dev.ts
@@ -3,26 +3,34 @@ import detectFreePort from 'detect-port';
 import type { Task } from '../task';
 import { exec } from '../utils/exec';
 
-export const START_PORT = 6006;
+export const PORT = process.env.STORYBOOK_SERVE_PORT
+  ? parseInt(process.env.STORYBOOK_SERVE_PORT, 10)
+  : 6006;
 
 export const dev: Task = {
   description: 'Run the sandbox in development mode',
   service: true,
   dependsOn: ['sandbox'],
   async ready() {
-    return (await detectFreePort(START_PORT)) !== START_PORT;
+    return (await detectFreePort(PORT)) !== PORT;
   },
-  async run({ sandboxDir, codeDir }, { dryRun, debug }) {
+  async run({ sandboxDir, codeDir, selectedTask }, { dryRun, debug }) {
     const controller = new AbortController();
+    const devCommand = `yarn storybook --port ${PORT}${selectedTask === 'dev' ? '' : ' --ci'}`;
+
     exec(
-      `yarn storybook`,
+      devCommand,
       { cwd: sandboxDir },
       { dryRun, debug, signal: controller.signal as AbortSignal }
     ).catch((err) => {
       // If aborted, we want to make sure the rejection is handled.
       if (!err.killed) throw err;
     });
-    await exec(`yarn wait-on http://localhost:${START_PORT}`, { cwd: codeDir }, { dryRun, debug });
+    await exec(
+      `yarn wait-on http://localhost:${PORT}/iframe.html`,
+      { cwd: codeDir },
+      { dryRun, debug }
+    );
 
     return controller;
   },
diff --git a/scripts/tasks/e2e-tests-build.ts b/scripts/tasks/e2e-tests-build.ts
new file mode 100644
index 000000000000..b4f42239588d
--- /dev/null
+++ b/scripts/tasks/e2e-tests-build.ts
@@ -0,0 +1,42 @@
+import dedent from 'ts-dedent';
+import type { Task } from '../task';
+import { exec } from '../utils/exec';
+import { PORT } from './serve';
+
+export const e2eTestsBuild: Task & { port: number } = {
+  description: 'Run e2e tests against a sandbox in prod mode',
+  dependsOn: ['serve'],
+  junit: true,
+  port: PORT,
+  async ready() {
+    return false;
+  },
+  async run({ codeDir, junitFilename, key }, { dryRun, debug }) {
+    if (process.env.DEBUG) {
+      // eslint-disable-next-line no-console
+      console.log(dedent`
+        Running e2e tests in Playwright debug mode for chromium only.
+        You can change the browser by changing the --project flag in the e2e-tests task file.
+      `);
+    }
+
+    const playwrightCommand = process.env.DEBUG
+      ? 'PWDEBUG=1 yarn playwright test --project=chromium'
+      : 'yarn playwright test';
+
+    await exec(
+      playwrightCommand,
+      {
+        env: {
+          STORYBOOK_URL: `http://localhost:${this.port}`,
+          STORYBOOK_TEMPLATE_NAME: key,
+          ...(junitFilename && {
+            PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
+          }),
+        },
+        cwd: codeDir,
+      },
+      { dryRun, debug }
+    );
+  },
+};
diff --git a/scripts/tasks/e2e-tests-dev.ts b/scripts/tasks/e2e-tests-dev.ts
new file mode 100644
index 000000000000..50dce2123a14
--- /dev/null
+++ b/scripts/tasks/e2e-tests-dev.ts
@@ -0,0 +1,9 @@
+import { PORT } from './dev';
+import { e2eTestsBuild } from './e2e-tests-build';
+
+export const e2eTestsDev: typeof e2eTestsBuild = {
+  ...e2eTestsBuild,
+  description: 'Run e2e tests against a sandbox in dev mode',
+  dependsOn: ['dev'],
+  port: PORT,
+};
diff --git a/scripts/tasks/e2e-tests.ts b/scripts/tasks/e2e-tests.ts
deleted file mode 100644
index c9e27530d671..000000000000
--- a/scripts/tasks/e2e-tests.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Task } from '../task';
-import { exec } from '../utils/exec';
-import { PORT } from './serve';
-
-export const e2eTests: Task = {
-  description: 'Run the end-to-end test suite against the sandbox',
-  dependsOn: ['serve'],
-  junit: true,
-  async ready() {
-    return false;
-  },
-  async run({ codeDir, junitFilename, key }, { dryRun, debug }) {
-    await exec(
-      `yarn playwright test`,
-      {
-        env: {
-          STORYBOOK_URL: `http://localhost:${PORT}`,
-          STORYBOOK_TEMPLATE_NAME: key,
-          ...(junitFilename && {
-            PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
-          }),
-        },
-        cwd: codeDir,
-      },
-      { dryRun, debug }
-    );
-  },
-};
diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner-build.ts
similarity index 75%
rename from scripts/tasks/test-runner.ts
rename to scripts/tasks/test-runner-build.ts
index f9b52cca18b6..e25b2fa54906 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner-build.ts
@@ -2,16 +2,17 @@ import type { Task } from '../task';
 import { exec } from '../utils/exec';
 import { PORT } from './serve';
 
-export const testRunner: Task = {
-  description: 'Run the test runner against a sandbox',
+export const testRunnerBuild: Task & { port: number } = {
+  description: 'Run the test runner against a built sandbox',
   junit: true,
   dependsOn: ['serve'],
+  port: PORT,
   async ready() {
     return false;
   },
   async run({ sandboxDir, junitFilename, template }, { dryRun, debug }) {
     const execOptions = { cwd: sandboxDir };
-    const flags = [`--url http://localhost:${PORT}`, '--junit', '--maxWorkers=2'];
+    const flags = [`--url http://localhost:${this.port}`, '--junit', '--maxWorkers=2'];
 
     // index-json mode is only supported in ssv7
     if (template.modifications?.mainConfig?.features?.storyStoreV7 !== false) {
diff --git a/scripts/tasks/test-runner-dev.ts b/scripts/tasks/test-runner-dev.ts
new file mode 100644
index 000000000000..631ec5a42bff
--- /dev/null
+++ b/scripts/tasks/test-runner-dev.ts
@@ -0,0 +1,9 @@
+import { testRunnerBuild as testRunnerProd } from './test-runner-build';
+import { PORT } from './dev';
+
+export const testRunnerDev: typeof testRunnerProd = {
+  ...testRunnerProd,
+  port: PORT,
+  description: 'Run the test runner against a sandbox in dev mode',
+  dependsOn: ['dev'],
+};