diff --git a/.github/workflows/storybook-test.yml b/.github/workflows/storybook-test.yml
index fa29f9ebd..89075d194 100644
--- a/.github/workflows/storybook-test.yml
+++ b/.github/workflows/storybook-test.yml
@@ -48,12 +48,15 @@ jobs:
           path: frontend/node_modules
           key: cache-frontend-node-modules-${{ hashFiles('frontend/package-lock.json') }}
 
+      - name: playwright version
+        run: npx playwright -V > playwright-version.txt && cat playwright-version.txt
+
       - name: cache playwright
         id: cache-playwright
         uses: actions/cache@v3
         with:
           path: ~/.cache/ms-playwright
-          key: cache-playwright-${{ hashFiles('frontend/package-lock.json') }}
+          key: cache-playwright-${{ hashFiles('frontend/package-lock.json') }}-${{ hashFiles('playwright-version.txt') }}
 
       - name: cache backend node-modules
         id: cache-backend-node-modules
diff --git a/frontend/package.json b/frontend/package.json
index 4e6e366e5..e0a60b5a7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
     "lint-fix": "eslint --fix src",
     "noEmit": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --quiet",
-    "storybook-test": "test-storybook",
+    "storybook-test": "test-storybook --maxWorkers=1",
     "storybook-test-ci": "concurrently --kill-others --success first \"npm run storybook\" \"wait-on tcp:6006 && npm run storybook-test\"",
     "storybook-update-snapshot": "test-storybook --updateSnapshot",
     "storybook-update-snapshot-ci": "concurrently --kill-others --success first \"npm run storybook\" \"wait-on tcp:6006 && npm run storybook-update-snapshot\"",
diff --git a/frontend/src/app/__image_snapshots__/app-page--select-channel.png b/frontend/src/app/__image_snapshots__/app-page--select-channel.png
new file mode 100644
index 000000000..49bf35f46
Binary files /dev/null and b/frontend/src/app/__image_snapshots__/app-page--select-channel.png differ
diff --git a/frontend/src/app/__image_snapshots__/app-page--send-msg.png b/frontend/src/app/__image_snapshots__/app-page--send-msg.png
new file mode 100644
index 000000000..180a0e4fa
Binary files /dev/null and b/frontend/src/app/__image_snapshots__/app-page--send-msg.png differ
diff --git a/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png b/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png
new file mode 100644
index 000000000..c6d340a75
Binary files /dev/null and b/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png differ
diff --git a/frontend/src/app/page.stories.tsx b/frontend/src/app/page.stories.tsx
index f5c8041b6..58dec85ee 100644
--- a/frontend/src/app/page.stories.tsx
+++ b/frontend/src/app/page.stories.tsx
@@ -20,12 +20,71 @@ export const Basic: Story = {};
 export const Login: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginBtn = canvas.getByText('login as fuga');
 
+    const loginBtn = canvas.getByText('login as fuga');
     await userEvent.click(loginBtn);
+    await sleep(1000);
+    expect(canvas.getByText('ChatChannelArea'));
+  },
+};
+
+export const SelectChannel: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-    await sleep(3000);
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
 
-    expect(canvas.getByText('ChatChannelArea'));
+    await sleep(1000);
+  },
+};
+
+export const SendMsg: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
+
+    const inputElem =
+      canvas.getByTestId('input-test-id')?.firstElementChild?.firstElementChild;
+    if (inputElem === undefined || inputElem === null) {
+      expect(false);
+      return;
+    }
+    await userEvent.type(inputElem, 'This is test msg');
+    await userEvent.click(canvas.getByText('Send'));
+
+    // SEND ボタンに アニメーションがあり、スクショのタイミングによって
+    // スクショに若干の差異が生まれ テストが落ちてしまうので 適当に Footer を クリック
+    await userEvent.click(canvas.getByText('Footer'));
+
+    await sleep(1000);
+  },
+};
+
+export const SendSomeMsg: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const hoge0 = canvas.getByText('hoge 0');
+    await userEvent.click(hoge0);
+
+    const inputElem =
+      canvas.getByTestId('input-test-id')?.firstElementChild?.firstElementChild;
+    if (inputElem === undefined || inputElem === null) {
+      expect(false);
+      return;
+    }
+    for (let i = 0; i < 30; i++) {
+      await userEvent.type(inputElem, `This is test msg ${i}`);
+      await userEvent.click(canvas.getByText('Send'));
+    }
+
+    // SEND ボタンに アニメーションがあり、スクショのタイミングによって
+    // スクショに若干の差異が生まれ テストが落ちてしまうので 適当に Footer を クリック
+    await userEvent.click(canvas.getByText('Footer'));
+
+    await sleep(1000);
   },
 };
diff --git a/frontend/src/components/Elements/Input/Input.tsx b/frontend/src/components/Elements/Input/Input.tsx
index c4ded68a8..9ebbe2459 100644
--- a/frontend/src/components/Elements/Input/Input.tsx
+++ b/frontend/src/components/Elements/Input/Input.tsx
@@ -12,6 +12,7 @@ export const Input = ({
     <>
       <TextField
         id="outlined-multiline-static"
+        data-testid="input-test-id"
         multiline
         value={msg}
         onChange={onChangeAct}