8 files changed, 240 insertions, 269 deletions

diff --git a/e2e/completion.test.ts b/e2e/completion.test.ts
index bc065d3..c0e7052 100644
--- a/e2e/completion.test.ts
+++ b/e2e/completion.test.ts
@@ -28,33 +28,24 @@ describe("general completion test", () => {
     page = await Page.navigateTo(webdriver, "about:blank");
   });
 
-  it("should all commands on empty line", async () => {
+  it("should shows all commands on empty line", async () => {
     const console = await page.showConsole();
 
-    const items = await console.getCompletions();
-    assert.strictEqual(items.length, 12);
-    assert.deepStrictEqual(items[0], {
-      type: "title",
-      text: "Console Command",
-    });
-    assert.ok(items[1].text.startsWith("set"));
-    assert.ok(items[2].text.startsWith("open"));
-    assert.ok(items[3].text.startsWith("tabopen"));
+    const groups = await console.getCompletions();
+    assert.strictEqual(groups.length, 1);
+    assert.strictEqual(groups[0].title, "Console Command");
+    assert.strictEqual(groups[0].items.length, 11);
   });
 
-  it("should only commands filtered by prefix", async () => {
+  it("should shows commands filtered by prefix", async () => {
     const console = await page.showConsole();
     await console.inputKeys("b");
 
-    const items = await console.getCompletions();
-    assert.strictEqual(items.length, 4);
-    assert.deepStrictEqual(items[0], {
-      type: "title",
-      text: "Console Command",
-    });
-    assert.ok(items[1].text.startsWith("buffer"));
-    assert.ok(items[2].text.startsWith("bdelete"));
-    assert.ok(items[3].text.startsWith("bdeletes"));
+    const groups = await console.getCompletions();
+    const items = groups[0].items;
+    assert.ok(items[0].text.startsWith("buffer"));
+    assert.ok(items[1].text.startsWith("bdelete"));
+    assert.ok(items[2].text.startsWith("bdeletes"));
   });
 
   // > byffer
@@ -65,21 +56,24 @@ describe("general completion test", () => {
     const console = await page.showConsole();
     await console.inputKeys("b");
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
     });
 
     await console.sendKeys(Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[1].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].highlight);
       assert.strictEqual(await console.currentValue(), "buffer");
     });
 
     await console.sendKeys(Key.TAB, Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[3].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[2].highlight);
       assert.strictEqual(await console.currentValue(), "bdeletes");
     });
 
@@ -90,8 +84,9 @@ describe("general completion test", () => {
 
     await console.sendKeys(Key.SHIFT, Key.TAB);
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.ok(items[3].highlight);
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[2].highlight);
       assert.strictEqual(await console.currentValue(), "bdeletes");
     });
   });
diff --git a/e2e/completion_buffers.test.ts b/e2e/completion_buffers.test.ts
index 57603f6..13d07ea 100644
--- a/e2e/completion_buffers.test.ts
+++ b/e2e/completion_buffers.test.ts
@@ -72,17 +72,19 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer ");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("1:"));
-      assert.ok(items[2].text.startsWith("2:"));
-      assert.ok(items[3].text.startsWith("3:"));
-      assert.ok(items[4].text.startsWith("4:"));
-      assert.ok(items[5].text.startsWith("5:"));
-
-      assert.ok(items[3].text.includes("%"));
-      assert.ok(items[5].text.includes("#"));
+      const groups = await console.getCompletions();
+      assert.strictEqual(groups.length, 1);
+      assert.strictEqual(groups[0].title, "Buffers");
+
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("1:"));
+      assert.ok(items[1].text.startsWith("2:"));
+      assert.ok(items[2].text.startsWith("3:"));
+      assert.ok(items[3].text.startsWith("4:"));
+      assert.ok(items[4].text.startsWith("5:"));
+
+      assert.ok(items[2].text.includes("%"));
+      assert.ok(items[4].text.includes("#"));
     });
   });
 
@@ -91,11 +93,10 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer title_site2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
-      assert.ok(items[1].text.includes("title_site2"));
-      assert.ok(items[1].text.includes(server.url("/site2")));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("2:"));
+      assert.ok(items[0].text.includes("title_site2"));
     });
   });
 
@@ -104,9 +105,9 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer /site2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.ok(items[0].text.startsWith("2:"));
     });
   });
 
@@ -115,10 +116,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("buffer 2");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 2);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Buffers" });
-      assert.ok(items[1].text.startsWith("2:"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+
+      assert.strictEqual(items.length, 1);
+      assert.ok(items[0].text.startsWith("2:"));
     });
   });
 
@@ -127,11 +129,12 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdelete site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
-      assert.ok(items[1].text.includes("site3"));
-      assert.ok(items[2].text.includes("site4"));
-      assert.ok(items[3].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
+      assert.ok(items[0].text.includes("site3"));
+      assert.ok(items[1].text.includes("site4"));
+      assert.ok(items[2].text.includes("site5"));
     });
   });
 
@@ -140,11 +143,12 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdeletes site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 4);
-      assert.ok(items[1].text.includes("site3"));
-      assert.ok(items[2].text.includes("site4"));
-      assert.ok(items[3].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 3);
+      assert.ok(items[0].text.includes("site3"));
+      assert.ok(items[1].text.includes("site4"));
+      assert.ok(items[2].text.includes("site5"));
     });
   });
 
@@ -153,13 +157,14 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdelete! site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.ok(items[1].text.includes("site1"));
-      assert.ok(items[2].text.includes("site2"));
-      assert.ok(items[3].text.includes("site3"));
-      assert.ok(items[4].text.includes("site4"));
-      assert.ok(items[5].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.includes("site1"));
+      assert.ok(items[1].text.includes("site2"));
+      assert.ok(items[2].text.includes("site3"));
+      assert.ok(items[3].text.includes("site4"));
+      assert.ok(items[4].text.includes("site5"));
     });
   });
 
@@ -168,13 +173,14 @@ describe("completion on buffer/bdelete/bdeletes", () => {
     await console.inputKeys("bdeletes! site");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.ok(items[1].text.includes("site1"));
-      assert.ok(items[2].text.includes("site2"));
-      assert.ok(items[3].text.includes("site3"));
-      assert.ok(items[4].text.includes("site4"));
-      assert.ok(items[5].text.includes("site5"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.includes("site1"));
+      assert.ok(items[1].text.includes("site2"));
+      assert.ok(items[2].text.includes("site3"));
+      assert.ok(items[3].text.includes("site4"));
+      assert.ok(items[4].text.includes("site5"));
     });
   });
 });
diff --git a/e2e/completion_open.test.ts b/e2e/completion_open.test.ts
index cefb44f..7eef4c2 100644
--- a/e2e/completion_open.test.ts
+++ b/e2e/completion_open.test.ts
@@ -45,31 +45,13 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      assert.ok(
-        completions.find(
-          (x) => x.type === "title" && x.text === "Search Engines"
-        )
-      );
-      assert.ok(
-        completions.find((x) => x.type === "title" && x.text === "Bookmarks")
-      );
-      assert.ok(
-        completions.find((x) => x.type === "title" && x.text === "History")
-      );
-    });
-  });
-
-  it('should filter items with URLs by keywords on "open" command', async () => {
-    const console = await page.showConsole();
-    await console.inputKeys("open https://");
-
-    await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
+      assert.deepStrictEqual(titles, [
+        "Search Engines",
+        "Bookmarks",
+        "History",
+      ]);
     });
   });
 
@@ -78,11 +60,9 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.toLowerCase().includes("getting")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
@@ -91,24 +71,20 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("tabopen getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
   it('should filter items with titles by keywords on "winopen" command', async () => {
     const console = await page.showConsole();
-    await console.inputKeys("winopen https://");
+    await console.inputKeys("winopen getting");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const items = completions
-        .filter((x) => x.type === "item")
-        .map((x) => x.text);
-      assert.ok(items.every((x) => x.includes("https://")));
+      const groups = await console.getCompletions();
+      const items = groups.map((group) => group.items).flat();
+      assert.ok(items.every((x) => x.text.toLowerCase().includes("getting")));
     });
   });
 
@@ -121,10 +97,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Search Engines",
         "Bookmarks",
@@ -141,10 +115,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Bookmarks",
         "Search Engines",
@@ -164,10 +136,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Search Engines",
         "Bookmarks",
@@ -188,10 +158,8 @@ describe("completion on open/tabopen/winopen commands", () => {
     await console.inputKeys("open ");
 
     await eventually(async () => {
-      const completions = await console.getCompletions();
-      const titles = completions
-        .filter((x) => x.type === "title")
-        .map((x) => x.text);
+      const groups = await console.getCompletions();
+      const titles = groups.map((group) => group.title);
       assert.deepStrictEqual(titles, [
         "Bookmarks",
         "Search Engines",
diff --git a/e2e/completion_set.test.ts b/e2e/completion_set.test.ts
index 0a45ed3..929f649 100644
--- a/e2e/completion_set.test.ts
+++ b/e2e/completion_set.test.ts
@@ -33,14 +33,14 @@ describe("completion on set commands", () => {
     await console.inputKeys("set ");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 6);
-      assert.deepStrictEqual(items[0], { type: "title", text: "Properties" });
-      assert.ok(items[1].text.startsWith("hintchars"));
-      assert.ok(items[2].text.startsWith("smoothscroll"));
-      assert.ok(items[3].text.startsWith("nosmoothscroll"));
-      assert.ok(items[4].text.startsWith("complete"));
-      assert.ok(items[5].text.startsWith("colorscheme"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 5);
+      assert.ok(items[0].text.startsWith("hintchars"));
+      assert.ok(items[1].text.startsWith("smoothscroll"));
+      assert.ok(items[2].text.startsWith("nosmoothscroll"));
+      assert.ok(items[3].text.startsWith("complete"));
+      assert.ok(items[4].text.startsWith("colorscheme"));
     });
   });
 
@@ -49,9 +49,10 @@ describe("completion on set commands", () => {
     await console.inputKeys("set no");
 
     await eventually(async () => {
-      const items = await console.getCompletions();
-      assert.strictEqual(items.length, 2);
-      assert.ok(items[1].text.includes("nosmoothscroll"));
+      const groups = await console.getCompletions();
+      const items = groups[0].items;
+      assert.strictEqual(items.length, 1);
+      assert.ok(items[0].text.includes("nosmoothscroll"));
     });
   });
 });
diff --git a/e2e/lib/Console.ts b/e2e/lib/Console.ts
index 2c128d1..4d017cc 100644
--- a/e2e/lib/Console.ts
+++ b/e2e/lib/Console.ts
@@ -1,7 +1,11 @@
 import { WebDriver, By, Key } from "selenium-webdriver";
 
+export type CompletionGroups = {
+  title: string;
+  items: Array<CompletionItem>;
+};
+
 export type CompletionItem = {
-  type: string;
   text: string;
   highlight: boolean;
 };
@@ -25,23 +29,17 @@ export class Console {
   }
 
   async execCommand(command: string): Promise<void> {
-    const input = await this.webdriver.findElement(
-      By.css("input.vimvixen-console-command-input")
-    );
+    const input = await this.webdriver.findElement(By.css("input"));
     await input.sendKeys(command, Key.ENTER);
   }
 
   async getErrorMessage(): Promise<string> {
-    const p = await this.webdriver.findElement(
-      By.css(".vimvixen-console-error")
-    );
+    const p = await this.webdriver.findElement(By.css("[role=alert]"));
     return p.getText();
   }
 
   async getInformationMessage(): Promise<string> {
-    const p = await this.webdriver.findElement(
-      By.css(".vimvixen-console-info")
-    );
+    const p = await this.webdriver.findElement(By.css("[role=status]"));
     return p.getText();
   }
 
@@ -50,36 +48,42 @@ export class Console {
     await input.sendKeys(...keys);
   }
 
-  getCompletions(): Promise<CompletionItem[]> {
+  getCompletions(): Promise<CompletionGroups[]> {
     return this.webdriver.executeScript(() => {
-      const items = document.querySelectorAll(
-        ".vimvixen-console-completion > li"
-      );
-      if (items.length === 0) {
+      const groups = document.querySelectorAll("[role=group]");
+      if (groups.length === 0) {
         throw new Error("completion items not found");
       }
 
-      const objs = [];
-      for (const li of Array.from(items)) {
-        if (li.classList.contains("vimvixen-console-completion-title")) {
-          objs.push({ type: "title", text: li.textContent!.trim() });
-        } else if (li.classList.contains("vimvixen-console-completion-item")) {
-          const highlight = li.classList.contains(
-            "vimvixen-completion-selected"
-          );
-          objs.push({ type: "item", text: li.textContent!.trim(), highlight });
-        } else {
-          throw new Error(`unexpected class: ${li.className}`);
-        }
-      }
-      return objs;
+      return Array.from(groups).map((group) => {
+        const describedby = group.getAttribute("aria-describedby") as string;
+        const title = document.getElementById(describedby)!;
+        const items = group.querySelectorAll("[role=menuitem]");
+
+        return {
+          title: title.textContent!.trim(),
+          items: Array.from(items).map((item) => ({
+            text: document.getElementById(
+              item.getAttribute("aria-labelledby")!
+            )!.textContent,
+            highlight: item.getAttribute("aria-selected") === "true",
+          })),
+        };
+      });
     });
   }
 
   async getTheme(): Promise<string> {
-    const wrapper = await this.webdriver.findElement(By.css("div[data-theme]"));
-    const theme = await wrapper.getAttribute("data-theme");
-    return theme;
+    const color = (await this.webdriver.executeScript(() => {
+      const input = document.querySelector("input")!;
+      return window.getComputedStyle(input).backgroundColor;
+    })) as string;
+    if (color === "rgb(5, 32, 39)") {
+      return "dark";
+    } else if (color === "rgb(255, 255, 255)") {
+      return "light";
+    }
+    throw new Error(`unknown input color: ${color}`);
   }
 
   async close(): Promise<void> {
diff --git a/e2e/lib/FormOptionPage.ts b/e2e/lib/FormOptionPage.ts
index 5551684..666bac7 100644
--- a/e2e/lib/FormOptionPage.ts
+++ b/e2e/lib/FormOptionPage.ts
@@ -1,5 +1,5 @@
 import { Lanthan } from "lanthan";
-import { WebDriver, By, until } from "selenium-webdriver";
+import { WebDriver, WebElement, By, error } from "selenium-webdriver";
 
 export default class FormOptionPage {
   private webdriver: WebDriver;
@@ -9,15 +9,15 @@ export default class FormOptionPage {
   }
 
   async setBlacklist(nth: number, url: string): Promise<void> {
-    const selector = ".form-blacklist-form-row > .column-url";
-    const inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+
+    const input = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await input.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async setPartialBlacklist(
@@ -25,121 +25,122 @@ export default class FormOptionPage {
     url: string,
     keys: string
   ): Promise<void> {
-    let selector = ".form-partial-blacklist-form-row > .column-url";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a partial blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-partial-blacklist-form-row > .column-keys";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a partial blacklist");
-    }
-    await inputs[nth].sendKeys(keys);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
+
+    const keysInput = rows[nth].findElement(By.css("[aria-label=Keys]"));
+    await keysInput.sendKeys(keys);
+    await this.blurActiveElement();
   }
 
   async setSearchEngine(nth: number, name: string, url: string) {
-    let selector = ".form-search-form-row > .column-name";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a search engine");
     }
-    await inputs[nth].sendKeys(name);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-search-form-row > .column-url";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a search engine");
-    }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const nameInput = rows[nth].findElement(By.css("[aria-label=Name"));
+    await nameInput.sendKeys(name);
+    await this.blurActiveElement();
+
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async addBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-blacklist-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async addPartialBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-partial-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-partial-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-partial-blacklist-form-row:nth-child(${rows.length + 2})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async removeBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-blacklist-form-row .ui-delete-button")
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
     );
-    if (buttons.length <= nth) {
+    if (deleteButtons.length <= nth) {
       throw new RangeError("Index out of range to remove blacklist");
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async removePartialBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-partial-blacklist-form-row .ui-delete-button")
-    );
-    if (buttons.length <= nth) {
-      throw new RangeError("Index out of range to remove partial blacklist");
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
+    );
+    if (deleteButtons.length <= nth) {
+      throw new RangeError(
+        `Index out of range ${deleteButtons.length} to remove partial blacklist ${nth}`
+      );
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async addSearchEngine(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-search-form-row > .column-name`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-search-form > .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-search-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async setDefaultSearchEngine(nth: number): Promise<void> {
-    const radios = await this.webdriver.findElements(
-      By.css(".form-search-form-row input[type=radio]")
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const radios = await fieldset.findElements(
+      By.css("[name=default][type=radio]")
     );
     if (radios.length <= nth) {
       throw new RangeError("Index out of range to set a default search engine");
     }
     await radios[nth].click();
   }
+
+  private async getFieldsetByLegend(legendText: string): Promise<WebElement> {
+    const fieldsets = await this.webdriver.findElements(By.tagName("fieldset"));
+    for (const fieldset of fieldsets) {
+      const legend = await fieldset.findElement(By.tagName("legend"));
+      if ((await legend.getText()) === legendText) {
+        return fieldset;
+      }
+    }
+    throw new error.NoSuchElementError(
+      `Unable to locate fieldset with legend: ` + legendText
+    );
+  }
+
+  private async blurActiveElement(): Promise<void> {
+    await this.webdriver.executeScript(`document.activeElement.blur()`);
+  }
 }
diff --git a/e2e/lib/JSONOptionPage.ts b/e2e/lib/JSONOptionPage.ts
index 0f2b0a7..2d8147e 100644
--- a/e2e/lib/JSONOptionPage.ts
+++ b/e2e/lib/JSONOptionPage.ts
@@ -20,9 +20,7 @@ export default class JSONOptionPage {
   }
 
   async getErrorMessage(): Promise<string> {
-    const error = await this.webdriver.findElement(
-      By.css(".settings-ui-input-error")
-    );
+    const error = await this.webdriver.findElement(By.css("p[role=alert]"));
     return error.getText();
   }
 }
diff --git a/e2e/lib/Page.ts b/e2e/lib/Page.ts
index 85bda8d..6531f19 100644
--- a/e2e/lib/Page.ts
+++ b/e2e/lib/Page.ts
@@ -46,9 +46,7 @@ export default class Page {
     await this.sendKeys(":");
     await this.webdriver.wait(until.elementIsVisible(iframe));
     await this.webdriver.switchTo().frame(0);
-    await this.webdriver.wait(
-      until.elementLocated(By.css("input.vimvixen-console-command-input"))
-    );
+    await this.webdriver.wait(until.elementLocated(By.css("input")));
     return new Console(this.webdriver);
   }