diff --git "a/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts" "b/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts"
new file mode 100644
index 0000000000..55d57c3612
--- /dev/null
+++ "b/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts"
@@ -0,0 +1,87 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+
+import { navigateToOptionDialog } from "../../navigators";
+import { getNewestQuasarDialog } from "../../locators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+/**
+ * 書き出しファイル名パターンダイアログまで移動
+ */
+const moveToFilenameDialog = async (page: Page, optionDialog: Locator) => {
+  await optionDialog.getByRole("button", { name: "編集する" }).click();
+  await page.waitForTimeout(500);
+
+  const filenameDialog = getNewestQuasarDialog(page);
+  await expect(
+    filenameDialog.getByText("書き出しファイル名パターン")
+  ).toBeVisible();
+
+  const doneButton = filenameDialog.getByRole("button", { name: "確定" });
+  const textbox = filenameDialog.getByRole("textbox", {
+    name: "ファイル名パターン",
+  });
+
+  return { filenameDialog, doneButton, textbox };
+};
+
+test("「オプション」から「書き出しファイル名パターン」を変更したり保存したりできる", async ({
+  page,
+}) => {
+  const optionDialog = await navigateToOptionDialog(page);
+
+  let { doneButton, textbox } = await moveToFilenameDialog(page, optionDialog);
+
+  // デフォルト状態は確定ボタンが押せる
+  await expect(textbox).toHaveValue("$連番$_$キャラ$（$スタイル$）_$テキスト$");
+  await expect(doneButton).toBeEnabled();
+
+  // 何も入力されていないときは確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("");
+  await textbox.press("Enter");
+  await expect(optionDialog.getByText("何か入力してください")).toBeVisible();
+  await expect(doneButton).toBeDisabled();
+
+  // $連番$ が含まれていない場合は確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("test");
+  await textbox.press("Enter");
+  await expect(textbox).toHaveValue("test");
+  await expect(optionDialog.getByText("$連番$は必須です")).toBeVisible();
+  await expect(doneButton).toBeDisabled();
+
+  // 無効な文字が含まれている場合は確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("$連番$\\");
+  await textbox.press("Enter");
+  await expect(doneButton).toBeDisabled();
+  await expect(
+    optionDialog.getByText("使用できない文字が含まれています：「\\」")
+  ).toBeVisible();
+
+  // $連番$ を含めると確定ボタンが押せる
+  await textbox.click();
+  await textbox.fill("test");
+  await textbox.press("Enter");
+  await page.getByRole("button", { name: "$連番$" }).click();
+  await expect(textbox).toHaveValue("test$連番$");
+  await expect(doneButton).toBeEnabled();
+
+  // 確定するとダイアログが閉じて設定した内容が反映されている
+  await doneButton.click();
+  await page.waitForTimeout(500);
+  await expect(optionDialog.getByText("test$連番$.wav")).toBeVisible();
+
+  // 再度開くと設定した内容が反映されている
+  ({ doneButton, textbox } = await moveToFilenameDialog(page, optionDialog));
+  await expect(textbox).toHaveValue("test$連番$");
+
+  // デフォルト値にリセットできる
+  await page.getByRole("button", { name: "デフォルトにリセット" }).click();
+  await expect(textbox).toHaveValue("$連番$_$キャラ$（$スタイル$）_$テキスト$");
+});
diff --git "a/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
index 47696e2a15..f5e04741a0 100644
--- "a/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
+++ "b/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -1,6 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 import { navigateToMain } from "../navigators";
+import { getNewestQuasarDialog, getQuasarMenu } from "../locators";
 
 test.beforeEach(async ({ page }) => {
   const BASE_URL = "http://localhost:5173/#/home";
@@ -24,7 +25,7 @@ test("ツールバーのカスタマイズでボタンを追加でき、デフ
   // ツールバーのカスタマイズページに移動
   await page.getByText("設定").click();
   await page.waitForTimeout(100);
-  await page.getByText("ツールバーのカスタマイズ").click();
+  await getQuasarMenu(page, "ツールバーのカスタマイズ").click();
   await page.waitForTimeout(100);
   await expect(page.getByText("ツールバーのカスタマイズ")).toBeVisible();
 
@@ -37,8 +38,7 @@ test("ツールバーのカスタマイズでボタンを追加でき、デフ
     await page.getByRole("button").filter({ hasText: "全部書き出し" }).count()
   ).toBe(1);
   await page.getByText("保存", { exact: true }).click();
-  await page
-    .locator("#q-portal--dialog--6")
+  await getNewestQuasarDialog(page)
     .getByRole("button")
     .filter({ hasText: "close" })
     .click();
@@ -56,7 +56,7 @@ test("ツールバーのカスタマイズでボタンを追加でき、デフ
   // 再度ツールバーのカスタマイズページに移動し、デフォルトに戻すボタンを押す
   await page.getByText("設定").click();
   await page.waitForTimeout(100);
-  await page.getByText("ツールバーのカスタマイズ").click();
+  await getQuasarMenu(page, "ツールバーのカスタマイズ").click();
   await page.waitForTimeout(100);
   expect(
     await page
diff --git a/tests/e2e/locators.ts b/tests/e2e/locators.ts
new file mode 100644
index 0000000000..aa16fd5eb8
--- /dev/null
+++ b/tests/e2e/locators.ts
@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+
+/**
+ * 最新のquasarダイアログのlocaltorを取得する
+ */
+export function getNewestQuasarDialog(page: Page) {
+  const locator = page.locator('[id^="q-portal--dialog"]');
+  return locator.last();
+}
+
+/**
+ * quasarのメニューのlocaltorを取得する
+ */
+export function getQuasarMenu(page: Page, menuName: string) {
+  return page.getByRole("listitem").filter({ hasText: menuName });
+}
diff --git a/tests/e2e/navigators.ts b/tests/e2e/navigators.ts
index 69ff0f28a9..5e50675638 100644
--- a/tests/e2e/navigators.ts
+++ b/tests/e2e/navigators.ts
@@ -1,4 +1,5 @@
 import { expect, Page } from "@playwright/test";
+import { getNewestQuasarDialog, getQuasarMenu } from "./locators";
 
 /**
  * 初回起動時の確認を完了してメイン画面に移動
@@ -20,4 +21,16 @@ export async function navigateToHelpDialog(page: Page) {
   await navigateToMain(page);
   await page.waitForTimeout(100);
   await page.getByRole("button", { name: "ヘルプ" }).click();
+  return getNewestQuasarDialog(page);
+}
+
+/**
+ * オプションダイアログの表示まで移動
+ */
+export async function navigateToOptionDialog(page: Page) {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "設定" }).click();
+  await getQuasarMenu(page, "オプション").click();
+  return getNewestQuasarDialog(page);
 }