Make pages as a page object

29 files changed, 826 insertions, 980 deletions

diff --git a/e2e/blacklist.test.ts b/e2e/blacklist.test.ts
index c88f655..b3b5f0f 100644
--- a/e2e/blacklist.test.ts
+++ b/e2e/blacklist.test.ts
@@ -1,9 +1,11 @@
 import express from 'express';
 import * as path from 'path';
 import * as assert from 'assert';
+
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
 import * as http from 'http';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -54,21 +56,19 @@ describe("navigate test", () => {
       },
     });
 
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/a`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('j');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/a`);
+    await page.sendKeys('j')
 
     // not works
     let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
+    let scrollY = await page.getScrollY();
     assert.equal(pageYOffset, 0);
 
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/ab`);
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('j');
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/ab`);
+    await page.sendKeys('j');
 
     // works
-    pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-    assert.equal(pageYOffset, 64);
+    scrollY = await page.getScrollY();
+    assert.equal(scrollY, 64);
   });
 });
diff --git a/e2e/clipboard.test.ts b/e2e/clipboard.test.ts
index dbc00de..5491e89 100644
--- a/e2e/clipboard.test.ts
+++ b/e2e/clipboard.test.ts
@@ -7,7 +7,8 @@ import eventually from './eventually';
 import * as clipboard from './lib/clipboard';
 import settings from './settings';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -17,8 +18,7 @@ const newApp = () => {
   return app;
 };
 
-describe("navigate test", () => {
-
+describe("clipboard test", () => {
   const port = 12321;
   let http: http.Server;
   let lanthan: Lanthan;
@@ -55,10 +55,9 @@ describe("navigate test", () => {
   })
 
   it('should copy current URL by y', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/#should_copy_url`);
-    let body = await webdriver.findElement(By.css('body'));
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/#should_copy_url`);
+    await page.sendKeys('y');
 
-    await body.sendKeys('y');
     await eventually(async() => {
       let data = await clipboard.read();
       assert.equal(data, `http://127.0.0.1:${port}/#should_copy_url`);
@@ -66,11 +65,10 @@ describe("navigate test", () => {
   });
 
   it('should open an URL from clipboard by p', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-    let body = await webdriver.findElement(By.css('body'));
-
     await clipboard.write(`http://127.0.0.1:${port}/#open_from_clipboard`);
-    await body.sendKeys('p');
+
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys('p');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -79,11 +77,10 @@ describe("navigate test", () => {
   });
 
   it('should open an URL from clipboard to new tab by P', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-    let body = await webdriver.findElement(By.css('body'));
-
     await clipboard.write(`http://127.0.0.1:${port}/#open_to_new_tab`);
-    await body.sendKeys(Key.SHIFT, 'p');
+
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'p');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -95,24 +92,22 @@ describe("navigate test", () => {
   });
 
   it('should open search result with keywords in clipboard by p', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-    let body = await webdriver.findElement(By.css('body'));
-
     await clipboard.write(`an apple`);
-    await body.sendKeys('p');
+
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'p');
 
     await eventually(async() => {
-      let tabs = await browser.tabs.query({});
+      let tabs = await browser.tabs.query({ active: true });
       assert.equal(tabs[0].url, `http://127.0.0.1:${port}/google?q=an%20apple`);
     });
   });
 
   it('should open search result with keywords in clipboard to new tabby P', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-    let body = await webdriver.findElement(By.css('body'));
-
     await clipboard.write(`an apple`);
-    await body.sendKeys(Key.SHIFT, 'p');
+
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'p');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
diff --git a/e2e/command_addbookmark.test.ts b/e2e/command_addbookmark.test.ts
index ad94494..bd7ae1a 100644
--- a/e2e/command_addbookmark.test.ts
+++ b/e2e/command_addbookmark.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -50,12 +51,9 @@ describe('addbookmark command test', () => {
   });
 
   it('should add a bookmark from the current page', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('addbookmark how to be happy', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('addbookmark how to be happy');
 
     await eventually(async() => {
       var bookmarks = await browser.bookmarks.search({ title: 'how to be happy' });
diff --git a/e2e/command_bdelete.test.ts b/e2e/command_bdelete.test.ts
index ce54b23..0a9c757 100644
--- a/e2e/command_bdelete.test.ts
+++ b/e2e/command_bdelete.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -60,19 +61,13 @@ describe('bdelete/bdeletes command test', () => {
       let handles = await webdriver.getAllWindowHandles();
       assert.equal(handles.length, 5);
       await webdriver.switchTo().window(handles[2]);
-      await webdriver.findElement(By.css('iframe'));
     });
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
   });
 
   it('should delete an unpinned tab by bdelete command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete site5', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete site5');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -86,12 +81,9 @@ describe('bdelete/bdeletes command test', () => {
   });
 
   it('should not delete an pinned tab by bdelete command by bdelete command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete site1', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete site1');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -100,42 +92,31 @@ describe('bdelete/bdeletes command test', () => {
   });
 
   it('should show an error when no tabs are matched by bdelete command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete xyz', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete xyz');
 
     await eventually(async() => {
-      let p = await webdriver.findElement(By.css('.vimvixen-console-error'));
-      let text = await p.getText();
+      let text = await console.getErrorMessage();
       assert.equal(text, 'No matching buffer for xyz');
     });
   });
 
   it('should show an error when more than one tabs are matched by bdelete command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete site', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete site');
 
     await eventually(async() => {
-      let p = await webdriver.findElement(By.css('.vimvixen-console-error'));
-      let text = await p.getText();
+      let text = await console.getErrorMessage();
       assert.equal(text, 'More than one match for site');
     });
   });
 
   it('should delete an unpinned tab by bdelete! command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete! site5', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete! site5');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -149,12 +130,9 @@ describe('bdelete/bdeletes command test', () => {
   });
 
   it('should delete an pinned tab by bdelete! command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdelete! site1', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdelete! site1');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -168,12 +146,9 @@ describe('bdelete/bdeletes command test', () => {
   });
 
   it('should delete unpinned tabs by bdeletes command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdeletes site', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdeletes site');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -186,12 +161,9 @@ describe('bdelete/bdeletes command test', () => {
   });
 
   it('should delete both pinned and unpinned tabs by bdeletes! command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('bdeletes! site', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('bdeletes! site');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
diff --git a/e2e/command_buffer.test.ts b/e2e/command_buffer.test.ts
index e642673..97c7bec 100644
--- a/e2e/command_buffer.test.ts
+++ b/e2e/command_buffer.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -59,19 +60,13 @@ describe('buffer command test', () => {
       let handles = await webdriver.getAllWindowHandles();
       assert.equal(handles.length, 5);
       await webdriver.switchTo().window(handles[2]);
-      await webdriver.findElement(By.css('iframe'));
     });
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
   });
 
   it('should do nothing by buffer command with no parameters', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -80,55 +75,41 @@ describe('buffer command test', () => {
   });
 
   it('should select a tab by buffer command with a number', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer 1');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
-      assert.equal(tabs[0].index, 2);
+      assert.equal(tabs[0].index, 0);
     });
   });
 
   it('should should an out of range error by buffer commands', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer 0', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer 0');
 
     await eventually(async() => {
-      let p = await webdriver.findElement(By.css('.vimvixen-console-error'));
-      let text = await p.getText();
+      let text = await console.getErrorMessage();
       assert.equal(text, 'tab 0 does not exist');
     });
 
     await (webdriver.switchTo() as any).parentFrame();
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
 
-    await webdriver.switchTo().frame(0);
-    input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer 9', Key.ENTER);
+    console = await page.showConsole();
+    await console.execCommand('buffer 9');
 
     await eventually(async() => {
-      let p = await webdriver.findElement(By.css('.vimvixen-console-error'));
-      let text = await p.getText();
+      let text = await console.getErrorMessage();
       assert.equal(text, 'tab 9 does not exist');
     });
   });
 
   it('should select a tab by buffer command with a title', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer my_site1', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer my_site1');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -137,12 +118,9 @@ describe('buffer command test', () => {
   });
 
   it('should select a tab by buffer command with an URL', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer /site1', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer /site1');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -154,12 +132,9 @@ describe('buffer command test', () => {
     let handles = await webdriver.getAllWindowHandles();
     await webdriver.switchTo().window(handles[4]);
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer site', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer site');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -168,12 +143,9 @@ describe('buffer command test', () => {
   });
 
   it('should do nothing by ":buffer %"', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer %', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer %');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -185,12 +157,9 @@ describe('buffer command test', () => {
     let handles = await webdriver.getAllWindowHandles();
     await webdriver.switchTo().window(handles[1]);
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('buffer #', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('buffer #');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
diff --git a/e2e/command_open.test.ts b/e2e/command_open.test.ts
index cfaee15..bc4cf96 100644
--- a/e2e/command_open.test.ts
+++ b/e2e/command_open.test.ts
@@ -6,7 +6,8 @@ import * as http from 'http';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
 
@@ -34,7 +35,7 @@ describe("open command test", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -58,16 +59,12 @@ describe("open command test", () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   })
 
   it('should open default search for keywords by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open an apple');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true });
@@ -77,11 +74,8 @@ describe("open command test", () => {
   });
 
   it('should open certain search page for keywords by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open yahoo an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open yahoo an apple');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true })
@@ -91,11 +85,8 @@ describe("open command test", () => {
   });
 
   it('should open default engine with empty keywords by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true })
@@ -105,11 +96,8 @@ describe("open command test", () => {
   });
 
   it('should open certain search page for empty keywords by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open yahoo', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open yahoo');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true })
@@ -119,30 +107,24 @@ describe("open command test", () => {
   });
 
   it('should open a site with domain by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open example.com');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true })
       let url = new URL(tabs[0].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'http://example.com/')
     });
   });
 
   it('should open a site with URL by open command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('open https://i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('open https://example.com/');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({ active: true })
       let url = new URL(tabs[0].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'https://example.com/')
     });
   });
 });
diff --git a/e2e/command_quit.test.ts b/e2e/command_quit.test.ts
index 29b947a..29de86a 100644
--- a/e2e/command_quit.test.ts
+++ b/e2e/command_quit.test.ts
@@ -5,8 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
-
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -60,19 +60,13 @@ describe('quit/quitall command test', () => {
       let handles = await webdriver.getAllWindowHandles();
       assert.equal(handles.length, 5);
       await webdriver.switchTo().window(handles[2]);
-      await webdriver.findElement(By.css('iframe'));
     });
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
   });
 
   it('should current tab by q command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('q', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('q');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -81,12 +75,9 @@ describe('quit/quitall command test', () => {
   });
 
   it('should current tab by quit command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('quit', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('quit');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -95,12 +86,9 @@ describe('quit/quitall command test', () => {
   });
 
   it('should current tab by qa command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('qa', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('qa');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -109,12 +97,9 @@ describe('quit/quitall command test', () => {
   });
 
   it('should current tab by quitall command', async() => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    await input.sendKeys('quitall', Key.ENTER);
+    let page = await Page.currentContext(webdriver);
+    let console = await page.showConsole();
+    await console.execCommand('quitall');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
diff --git a/e2e/command_tabopen.test.ts b/e2e/command_tabopen.test.ts
index ca4ad92..9cf49f6 100644
--- a/e2e/command_tabopen.test.ts
+++ b/e2e/command_tabopen.test.ts
@@ -6,8 +6,8 @@ import * as http from 'http';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
-
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
 
@@ -35,7 +35,7 @@ describe("tabopen command test", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     http = newApp().listen(port);
@@ -64,16 +64,12 @@ describe("tabopen command test", () => {
       await browser.tabs.remove(tab.id);
     }
 
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   })
 
   it('should open default search for keywords by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen an apple');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -84,11 +80,8 @@ describe("tabopen command test", () => {
   });
 
   it('should open certain search page for keywords by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen yahoo an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen yahoo an apple');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -99,11 +92,8 @@ describe("tabopen command test", () => {
   });
 
   it('should open default engine with empty keywords by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -114,11 +104,8 @@ describe("tabopen command test", () => {
   });
 
   it('should open certain search page for empty keywords by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen yahoo', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen yahoo');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -129,32 +116,26 @@ describe("tabopen command test", () => {
   });
 
   it('should open a site with domain by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen example.com');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
       assert.equal(tabs.length, 2);
       let url = new URL(tabs[1].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'http://example.com/')
     });
   });
 
   it('should open a site with URL by tabopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('tabopen https://i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('tabopen https://example.com/');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
       assert.equal(tabs.length, 2);
       let url = new URL(tabs[1].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'https://example.com/')
     });
   });
 });
diff --git a/e2e/command_winopen.test.ts b/e2e/command_winopen.test.ts
index cdd4c1c..6ebeca2 100644
--- a/e2e/command_winopen.test.ts
+++ b/e2e/command_winopen.test.ts
@@ -6,7 +6,8 @@ import * as http from 'http';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
 
@@ -34,7 +35,7 @@ describe("winopen command test", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     http = newApp().listen(port);
@@ -62,16 +63,12 @@ describe("winopen command test", () => {
       await browser.windows.remove(win.id);
     }
 
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/area`);
   })
 
   it('should open default search for keywords by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen an apple');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -84,11 +81,8 @@ describe("winopen command test", () => {
   });
 
   it('should open certain search page for keywords by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen yahoo an apple', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen yahoo an apple');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -101,11 +95,8 @@ describe("winopen command test", () => {
   });
 
   it('should open default engine with empty keywords by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -118,11 +109,8 @@ describe("winopen command test", () => {
   });
 
   it('should open certain search page for empty keywords by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen yahoo', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen yahoo');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -135,11 +123,8 @@ describe("winopen command test", () => {
   });
 
   it('should open a site with domain by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen example.com');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -147,16 +132,13 @@ describe("winopen command test", () => {
 
       let tabs = await browser.tabs.query({ windowId: wins[1].id });
       let url = new URL(tabs[0].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'http://example.com/')
     });
   });
 
   it('should open a site with URL by winopen command ', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys('winopen https://i-beam.org', Key.ENTER);
+    let console = await page.showConsole();
+    await console.execCommand('winopen https://example.com/');
 
     await eventually(async() => {
       let wins = await browser.windows.getAll();
@@ -164,7 +146,7 @@ describe("winopen command test", () => {
 
       let tabs = await browser.tabs.query({ windowId: wins[1].id });
       let url = new URL(tabs[0].url);
-      assert.equal(url.href, 'https://i-beam.org/')
+      assert.equal(url.href, 'https://example.com/')
     });
   });
 });
diff --git a/e2e/completion.test.ts b/e2e/completion.test.ts
index fd58f74..4884d21 100644
--- a/e2e/completion.test.ts
+++ b/e2e/completion.test.ts
@@ -3,11 +3,11 @@ import * as path from 'path';
 import * as assert from 'assert';
 import * as http from 'http';
 
-import settings from './settings';
 import eventually from './eventually';
+import settings from './settings';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
-import { Console } from './lib/Console';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -26,7 +26,7 @@ describe("general completion test", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -50,86 +50,68 @@ describe("general completion test", () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   });
 
   it('should all commands on empty line', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-
-    await eventually(async() => {
-      let items = await c.getCompletions();
-      assert.equal(items.length, 10);
-      assert.deepEqual(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'))
-    });
+    let console = await page.showConsole();
+
+    let items = await console.getCompletions();
+    assert.equal(items.length, 10);
+    assert.deepEqual(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'))
   });
 
   it('should only commands filtered by prefix', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('b');
-
-    await eventually(async() => {
-      let items = await c.getCompletions();
-      assert.equal(items.length, 4);
-      assert.deepEqual(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'))
-    });
+    let console = await page.showConsole();
+    await console.inputKeys('b');
+
+    let items = await console.getCompletions();
+    assert.equal(items.length, 4);
+    assert.deepEqual(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'))
   });
 
+  // > byffer
+  // > bdelete
+  // > bdeletes
+  // : b
   it('selects completion items by <Tab>/<S-Tab> keys', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('b');
-
+    let console = await page.showConsole();
+    await console.inputKeys('b');
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 4);
     });
 
-    await c.sendKeys(Key.TAB);
+    await console.sendKeys(Key.TAB);
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.ok(items[1].highlight)
-
-      let v = await c.currentValue();
-      assert.equal(v, 'buffer');
+      assert.equal(await console.currentValue(), 'buffer');
     });
 
-    await c.sendKeys(Key.TAB, Key.TAB);
+    await console.sendKeys(Key.TAB, Key.TAB);
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.ok(items[3].highlight)
-
-      let v = await c.currentValue();
-      assert.equal(v, 'bdeletes');
+      assert.equal(await console.currentValue(), 'bdeletes');
     });
 
-    await c.sendKeys(Key.TAB);
+    await console.sendKeys(Key.TAB);
     await eventually(async() => {
-      let v = await c.currentValue();
-      assert.equal(v, 'b');
+      assert.equal(await console.currentValue(), 'b');
     });
 
-    await c.sendKeys(Key.SHIFT, Key.TAB);
+    await console.sendKeys(Key.SHIFT, Key.TAB);
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.ok(items[3].highlight)
-
-      let v = await c.currentValue();
-      assert.equal(v, 'bdeletes');
+      assert.equal(await console.currentValue(), 'bdeletes');
     });
   });
 });
diff --git a/e2e/completion_buffers.test.ts b/e2e/completion_buffers.test.ts
index 9c212cc..e927f54 100644
--- a/e2e/completion_buffers.test.ts
+++ b/e2e/completion_buffers.test.ts
@@ -6,8 +6,8 @@ import * as http from 'http';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By } from 'selenium-webdriver';
-import { Console } from './lib/Console';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
 
@@ -30,7 +30,7 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -69,22 +69,17 @@ describe("completion on buffer/bdelete/bdeletes", () => {
       let handles = await webdriver.getAllWindowHandles();
       assert.equal(handles.length, 5);
       await webdriver.switchTo().window(handles[2]);
-      await webdriver.findElement(By.css('iframe'));
     });
-    body = await webdriver.findElement(By.css('body'));
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    page = await Page.currentContext(webdriver);
   });
 
   it('should all tabs by "buffer" command with empty params', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('buffer ');
+    let console = await page.showConsole();
+    await console.inputKeys('buffer ');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 6);
       assert.deepEqual(items[0], { type: 'title', text: 'Buffers' });
       assert.ok(items[1].text.startsWith('1:'));
@@ -99,14 +94,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should filter items with URLs by keywords on "buffer" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('buffer title_site2');
+    let console = await page.showConsole();
+    await console.inputKeys('buffer title_site2');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.deepEqual(items[0], { type: 'title', text: 'Buffers' });
       assert.ok(items[1].text.startsWith('2:'));
       assert.ok(items[1].text.includes('title_site2'));
@@ -115,28 +107,22 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should filter items with titles by keywords on "buffer" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('buffer /site2');
+    let console = await page.showConsole();
+    await console.inputKeys('buffer /site2');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.deepEqual(items[0], { type: 'title', text: 'Buffers' });
       assert.ok(items[1].text.startsWith('2:'));
     });
   })
 
   it('should show one item by number on "buffer" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('buffer 2');
+    let console = await page.showConsole();
+    await console.inputKeys('buffer 2');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 2);
       assert.deepEqual(items[0], { type: 'title', text: 'Buffers' });
       assert.ok(items[1].text.startsWith('2:'));
@@ -144,14 +130,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should show unpinned tabs "bdelete" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('bdelete site');
+    let console = await page.showConsole();
+    await console.inputKeys('bdelete site');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 4);
       assert.ok(items[1].text.includes('site3'));
       assert.ok(items[2].text.includes('site4'));
@@ -160,14 +143,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should show unpinned tabs "bdeletes" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('bdelete site');
+    let console = await page.showConsole();
+    await console.inputKeys('bdeletes site');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 4);
       assert.ok(items[1].text.includes('site3'));
       assert.ok(items[2].text.includes('site4'));
@@ -176,14 +156,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should show both pinned and unpinned tabs "bdelete!" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('bdelete! site');
+    let console = await page.showConsole();
+    await console.inputKeys('bdelete! site');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 6);
       assert.ok(items[1].text.includes('site1'));
       assert.ok(items[2].text.includes('site2'));
@@ -194,14 +171,11 @@ describe("completion on buffer/bdelete/bdeletes", () => {
   })
 
   it('should show both pinned and unpinned tabs "bdeletes!" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('bdeletes! site');
+    let console = await page.showConsole();
+    await console.inputKeys('bdeletes! site');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 6);
       assert.ok(items[1].text.includes('site1'));
       assert.ok(items[2].text.includes('site2'));
diff --git a/e2e/completion_open.test.ts b/e2e/completion_open.test.ts
index dcd1829..9c6cf95 100644
--- a/e2e/completion_open.test.ts
+++ b/e2e/completion_open.test.ts
@@ -6,8 +6,8 @@ import * as http from 'http';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
-import { Console } from './lib/Console';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
 
@@ -27,7 +27,7 @@ describe("completion on open/tabopen/winopen commands", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -54,19 +54,15 @@ describe("completion on open/tabopen/winopen commands", () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   });
 
   it('should show completions from search engines, bookmarks, and histories by "open" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('open ');
+    let console = await page.showConsole();
+    await console.inputKeys('open ');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let 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'));
@@ -74,136 +70,79 @@ describe("completion on open/tabopen/winopen commands", () => {
   });
 
   it('should filter items with URLs by keywords on "open" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('open https://');
+    let console = await page.showConsole();
+    await console.inputKeys('open https://');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let items = completions.filter(x => x.type === 'item').map(x => x.text);
       assert.ok(items.every(x => x.includes('https://')));
     });
   })
 
   it('should filter items with titles by keywords on "open" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('open getting');
+    let console = await page.showConsole();
+    await console.inputKeys('open getting');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let items = completions.filter(x => x.type === 'item').map(x => x.text);
       assert.ok(items.every(x => x.toLowerCase().includes('getting')));
     });
   })
 
   it('should filter items with titles by keywords on "tabopen" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('tabopen https://');
+    let console = await page.showConsole();
+    await console.inputKeys('tabopen getting');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let items = completions.filter(x => x.type === 'item').map(x => x.text);
       assert.ok(items.every(x => x.includes('https://')));
     });
   })
 
   it('should filter items with titles by keywords on "winopen" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('winopen https://');
+    let console = await page.showConsole();
+    await console.inputKeys('winopen https://');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let items = completions.filter(x => x.type === 'item').map(x => x.text);
       assert.ok(items.every(x => x.includes('https://')));
     });
   })
 
   it('should display only specified items in "complete" property by set command', async() => {
-    let c = new Console(webdriver);
-
-    const execCommand = async(line: string) => {
-      await body.sendKeys(':');
-      await webdriver.switchTo().frame(0);
-      await c.sendKeys(line, Key.ENTER);
-      await new Promise(resolve => setTimeout(resolve, 100));
-      await (webdriver.switchTo() as any).parentFrame();
-    }
-
-    const typeCommand = async(...keys: string[]) => {
-      await body.sendKeys(':');
-      await webdriver.switchTo().frame(0);
-      await c.sendKeys(...keys);
-    }
+    let console = await page.showConsole();
+    await console.execCommand('set complete=sbh');
+    await (webdriver.switchTo() as any).parentFrame();
 
-    const cancel = async() => {
-      await c.sendKeys(Key.ESCAPE);
-      await new Promise(resolve => setTimeout(resolve, 100));
-      await (webdriver.switchTo() as any).parentFrame();
-    }
-
-    await execCommand('set complete=sbh');
-    await typeCommand('open ');
+    console = await page.showConsole();
+    await console.inputKeys('open ');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let titles = completions.filter(x => x.type === 'title').map(x => x.text);
       assert.deepEqual(titles, ['Search Engines', 'Bookmarks', 'History'])
     });
 
-    await cancel();
-    await execCommand('set complete=bss');
-    await typeCommand('open ');
+    await console.close();
+    console = await page.showConsole();
+    await console.execCommand('set complete=bss');
+    await (webdriver.switchTo() as any).parentFrame();
+
+    console = await page.showConsole();
+    await console.inputKeys('open ');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let titles = completions.filter(x => x.type === 'title').map(x => x.text);
       assert.deepEqual(titles, ['Bookmarks', 'Search Engines', 'Search Engines'])
     });
   })
 
   it('should display only specified items in "complete" property by setting', async() => {
-    const settings = {
-      source: 'json',
-      json: `{
-        "keymaps": {
-          ":": { "type": "command.show" }
-        },
-        "search": {
-          "default": "google",
-          "engines": { "google": "https://google.com/search?q={}" }
-        },
-        "properties": {
-          "complete": "sbh"
-        }
-      }`,
-    };
-    await browser.storage.local.set({ settings, });
-
-    let c = new Console(webdriver);
-
-    const typeCommand = async(...keys: string[]) => {
-      await body.sendKeys(':');
-      await webdriver.switchTo().frame(0);
-      await c.sendKeys(...keys);
-    }
-
-    const cancel = async() => {
-      await c.sendKeys(Key.ESCAPE);
-      await new Promise(resolve => setTimeout(resolve, 100));
-      await (webdriver.switchTo() as any).parentFrame();
-    }
-
     await browser.storage.local.set({ settings: {
       source: 'json',
       json: `{
@@ -219,15 +158,18 @@ describe("completion on open/tabopen/winopen commands", () => {
         }
       }`,
     }});
-    await typeCommand('open ');
+
+    let console = await page.showConsole();
+    await console.inputKeys('open ');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let titles = completions.filter(x => x.type === 'title').map(x => x.text);
       assert.deepEqual(titles, ['Search Engines', 'Bookmarks', 'History'])
     });
 
-    await cancel();
+    await console.close();
+    await (webdriver.switchTo() as any).parentFrame();
 
     await browser.storage.local.set({ settings: {
       source: 'json',
@@ -244,14 +186,14 @@ describe("completion on open/tabopen/winopen commands", () => {
         }
       }`,
     }});
-    await typeCommand('open ');
+
+    console = await page.showConsole();
+    await console.inputKeys('open ');
 
     await eventually(async() => {
-      let completions = await c.getCompletions();
+      let completions = await console.getCompletions();
       let titles = completions.filter(x => x.type === 'title').map(x => x.text);
       assert.deepEqual(titles, ['Bookmarks', 'Search Engines', 'Search Engines'])
     });
-
-
   })
 });
diff --git a/e2e/completion_set.test.ts b/e2e/completion_set.test.ts
index 018479f..2d9681f 100644
--- a/e2e/completion_set.test.ts
+++ b/e2e/completion_set.test.ts
@@ -4,14 +4,14 @@ import * as assert from 'assert';
 import settings from './settings';
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By } from 'selenium-webdriver';
-import { Console } from './lib/Console';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 describe("completion on set commands", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -33,19 +33,15 @@ describe("completion on set commands", () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`about:blank`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `about:blank`);
   });
 
   it('should show all property names by "set" command with empty params', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('set ');
+    let console = await page.showConsole();
+    await console.inputKeys('set ');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 5);
       assert.deepEqual(items[0], { type: 'title', text: 'Properties' });
       assert.ok(items[1].text.startsWith('hintchars'))
@@ -56,14 +52,11 @@ describe("completion on set commands", () => {
   });
 
   it('should show filtered property names by "set" command', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let c = new Console(webdriver);
-    await c.sendKeys('set no');
+    let console = await page.showConsole();
+    await console.inputKeys('set no');
 
     await eventually(async() => {
-      let items = await c.getCompletions();
+      let items = await console.getCompletions();
       assert.equal(items.length, 2);
       assert.ok(items[1].text.includes('nosmoothscroll'))
     });
diff --git a/e2e/console.test.ts b/e2e/console.test.ts
index 65c5d2d..ede2c3c 100644
--- a/e2e/console.test.ts
+++ b/e2e/console.test.ts
@@ -4,7 +4,8 @@ import * as assert from 'assert';
 import * as http from 'http';
 
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -25,7 +26,7 @@ describe("console test", () => {
   let http: http.Server;
   let lanthan: Lanthan;
   let webdriver: WebDriver;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     http = newApp().listen(port);
@@ -46,81 +47,60 @@ describe("console test", () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   });
 
   it('open console with :', async() => {
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    
-    let input = await webdriver.findElement(By.css('input'));
-    assert.equal(await input.isDisplayed(), true);
+    await page.sendKeys(':');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), '');
   });
 
   it('open console with open command by o', async() => {
-    await body.sendKeys('o');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, 'open ');
+    await page.sendKeys('o');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), 'open ');
   });
 
   it('open console with open command and current URL by O', async() => {
-    await body.sendKeys(Key.SHIFT, 'o');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, `open http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'o');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `open http://127.0.0.1:${port}/`);
   });
 
   it('open console with tabopen command by t', async() => {
-    await body.sendKeys('t');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, 'tabopen ');
+    await page.sendKeys('t');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), 'tabopen ');
   });
 
   it('open console with tabopen command and current URL by T', async() => {
-    await body.sendKeys(Key.SHIFT, 't');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, `tabopen http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 't');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `tabopen http://127.0.0.1:${port}/`);
   });
 
   it('open console with winopen command by w', async() => {
-    await body.sendKeys('w');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, 'winopen ');
+    await page.sendKeys('w');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `winopen `);
   });
 
   it('open console with winopen command and current URL by W', async() => {
-    await body.sendKeys(Key.SHIFT, 'W');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, `winopen http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'W');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `winopen http://127.0.0.1:${port}/`);
   });
 
   it('open console with buffer command by b', async() => {
-    await body.sendKeys('b');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, `buffer `);
+    await page.sendKeys('b');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `buffer `);
   });
 
   it('open console with addbookmark command with title by a', async() => {
-    await body.sendKeys('a');
-
-    await webdriver.switchTo().frame(0);
-    let value = await webdriver.executeScript(() => document.querySelector('input')!!.value);
-    assert.equal(value, `addbookmark Hello, world!`);
+    await page.sendKeys('a');
+    let console = await page.getConsole();
+    assert.equal(await console.currentValue(), `addbookmark Hello, world!`);
   });
 });
-
diff --git a/e2e/follow.test.ts b/e2e/follow.test.ts
index 5d38085..fdaedfb 100644
--- a/e2e/follow.test.ts
+++ b/e2e/follow.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -120,13 +121,6 @@ const newApp = () => {
   return app;
 };
 
-const waitForHints = async(webdriver: WebDriver): Promise<void> => {
-  await eventually(async() => {
-    let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-    assert.ok(hints.length > 0);
-  });
-};
-
 describe('follow test', () => {
 
   const port = 12321;
@@ -162,24 +156,20 @@ describe('follow test', () => {
   });
 
   it('should focus an input by f', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/follow-input`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('f');
-    await waitForHints(webdriver);
-    await body.sendKeys('a');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/follow-input`);
+    await page.sendKeys('f');
+    await page.waitAndGetHints();
+    await page.sendKeys('a');
 
     let tagName = await webdriver.executeScript(() => document.activeElement!!.tagName) as string;
     assert.equal(tagName.toLowerCase(), 'input');
   });
 
   it('should open a link by f', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('f');
-    await waitForHints(webdriver);
-    await body.sendKeys('a');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys('f');
+    await page.waitAndGetHints();
+    await page.sendKeys('a');
 
     await eventually(async() => {
       let hash = await webdriver.executeScript('return location.pathname');
@@ -188,24 +178,20 @@ describe('follow test', () => {
   });
 
   it('should focus an input by F', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/follow-input`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
-    await waitForHints(webdriver);
-    await body.sendKeys('a');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/follow-input`);
+    await page.sendKeys(Key.SHIFT, 'f');
+    await page.waitAndGetHints();
+    await page.sendKeys('a');
 
     let tagName = await webdriver.executeScript(() => document.activeElement!!.tagName) as string;
     assert.equal(tagName.toLowerCase(), 'input');
   });
 
   it('should open a link to new tab by F', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
-    await waitForHints(webdriver);
-    await body.sendKeys('a');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`);
+    await page.sendKeys(Key.SHIFT, 'f');
+    await page.waitAndGetHints();
+    await page.sendKeys('a');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -216,50 +202,36 @@ describe('follow test', () => {
   });
 
   it('should show hints of links in area', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/area`);
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/area`);
+    await page.sendKeys(Key.SHIFT, 'f');
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 3);
-    });
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 3);
   });
 
   it('should shows hints only in viewport', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/test1`);
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test1`);
+    await page.sendKeys(Key.SHIFT, 'f');
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 1);
-    });
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 1);
   });
 
   it('should shows hints only in window of the frame', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/test2`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test2`);
+    await page.sendKeys(Key.SHIFT, 'f');
 
     await webdriver.switchTo().frame(0);
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 1);
-    });
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 1);
   });
 
   it('should shows hints only in the frame', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/test3`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'f');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test3`);
+    await page.sendKeys(Key.SHIFT, 'f');
 
     await webdriver.switchTo().frame(0);
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 1);
-    });
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 1);
   });
 });
diff --git a/e2e/follow_properties.test.ts b/e2e/follow_properties.test.ts
index 47556a2..e5608db 100644
--- a/e2e/follow_properties.test.ts
+++ b/e2e/follow_properties.test.ts
@@ -5,8 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
-import { Console } from './lib/Console';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -32,7 +32,7 @@ describe('follow properties test', () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     http = newApp().listen(port);
@@ -72,8 +72,7 @@ describe('follow properties test', () => {
   });
 
   beforeEach(async() => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
   });
 
   afterEach(async() => {
@@ -84,38 +83,31 @@ describe('follow properties test', () => {
   });
 
   it('should show hints with hintchars by settings', async () => {
-    await body.sendKeys('f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 5);
-
-      assert.equal(await hints[0].getText(), 'J');
-      assert.equal(await hints[1].getText(), 'K');
-      assert.equal(await hints[2].getText(), 'JJ');
-      assert.equal(await hints[3].getText(), 'JK');
-      assert.equal(await hints[4].getText(), 'KJ');
-    });
+    await page.sendKeys('f');
 
-    await body.sendKeys('j');
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 5);
 
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
+    assert.equal(hints[0].text, 'J');
+    assert.equal(hints[1].text, 'K');
+    assert.equal(hints[2].text, 'JJ');
+    assert.equal(hints[3].text, 'JK');
+    assert.equal(hints[4].text, 'KJ');
 
-      assert.equal(await hints[0].getCssValue('display'), 'block');
-      assert.equal(await hints[1].getCssValue('display'), 'none');
-      assert.equal(await hints[2].getCssValue('display'), 'block');
-      assert.equal(await hints[3].getCssValue('display'), 'block');
-      assert.equal(await hints[4].getCssValue('display'), 'none');
-    });
+    await page.sendKeys('j');
+    hints = await page.waitAndGetHints();
+
+    assert.equal(hints[0].displayed, true);
+    assert.equal(hints[1].displayed, false);
+    assert.equal(hints[2].displayed, true);
+    assert.equal(hints[3].displayed, true);
+    assert.equal(hints[4].displayed, false);
   });
 
   it('should open tab in background by background:false', async () => {
-    await body.sendKeys(Key.SHIFT, 'f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 5);
-    });
-    await body.sendKeys('jj');
+    await page.sendKeys(Key.SHIFT, 'f');
+    await page.waitAndGetHints();
+    await page.sendKeys('jj');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -125,12 +117,9 @@ describe('follow properties test', () => {
   });
 
   it('should open tab in background by background:true', async () => {
-    await body.sendKeys(Key.CONTROL, 'f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 5);
-    });
-    await body.sendKeys('jj');
+    await page.sendKeys(Key.CONTROL, 'f');
+    await page.waitAndGetHints();
+    await page.sendKeys('jj');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -140,35 +129,25 @@ describe('follow properties test', () => {
   });
 
   it('should show hints with hintchars by settings', async () => {
-    let c = new Console(webdriver);
-
-    await body.sendKeys(':');
-    await webdriver.switchTo().frame(0);
-    await c.sendKeys('set hintchars=abc', Key.ENTER);
-    await new Promise(resolve => setTimeout(resolve, 100));
+    let console = await page.showConsole();
+    await console.execCommand('set hintchars=abc');
     await (webdriver.switchTo() as any).parentFrame();
 
-    await body.sendKeys('f');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-      assert.equal(hints.length, 5);
-
-      assert.equal(await hints[0].getText(), 'A');
-      assert.equal(await hints[1].getText(), 'B');
-      assert.equal(await hints[2].getText(), 'C');
-      assert.equal(await hints[3].getText(), 'AA');
-      assert.equal(await hints[4].getText(), 'AB');
-    });
-
-    await body.sendKeys('a');
-    await eventually(async() => {
-      let hints = await webdriver.findElements(By.css(`.vimvixen-hint`));
-
-      assert.equal(await hints[0].getCssValue('display'), 'block');
-      assert.equal(await hints[1].getCssValue('display'), 'none');
-      assert.equal(await hints[2].getCssValue('display'), 'none');
-      assert.equal(await hints[3].getCssValue('display'), 'block');
-      assert.equal(await hints[4].getCssValue('display'), 'block');
-    });
+    await page.sendKeys('f');
+    let hints = await page.waitAndGetHints();
+    assert.equal(hints.length, 5);
+    assert.equal(hints[0].text, 'A');
+    assert.equal(hints[1].text, 'B');
+    assert.equal(hints[2].text, 'C');
+    assert.equal(hints[3].text, 'AA');
+    assert.equal(hints[4].text, 'AB');
+
+    await page.sendKeys('a');
+    hints = await page.waitAndGetHints();
+    assert.equal(hints[0].displayed, true);
+    assert.equal(hints[1].displayed, false);
+    assert.equal(hints[2].displayed, false);
+    assert.equal(hints[3].displayed, true);
+    assert.equal(hints[4].displayed, true);
   });
 });
diff --git a/e2e/lib/Console.ts b/e2e/lib/Console.ts
index 37b0597..233bf48 100644
--- a/e2e/lib/Console.ts
+++ b/e2e/lib/Console.ts
@@ -1,4 +1,4 @@
-import { WebDriver, By } from 'selenium-webdriver';
+import { WebDriver, By, Key } from 'selenium-webdriver';
 
 export type CompletionItem = {
   type: string;
@@ -25,6 +25,21 @@ export class Console {
     });
   }
 
+  async execCommand(command: string): Promise<void> {
+    let input = await this.webdriver.findElement(By.css('input.vimvixen-console-command-input'));
+    await input.sendKeys(command, Key.ENTER);
+  }
+
+  async getErrorMessage(): Promise<string> {
+    let p = await this.webdriver.findElement(By.css('.vimvixen-console-error'));
+    return p.getText();
+  }
+
+  async inputKeys(...keys: string[]) {
+    let input = await this.webdriver.findElement(By.css('input'));
+    await input.sendKeys(...keys);
+  }
+
   getCompletions(): Promise<CompletionItem[]> {
     return this.webdriver.executeScript(() => {
       let items = document.querySelectorAll('.vimvixen-console-completion > li');
@@ -46,4 +61,12 @@ export class Console {
       return objs;
     });
   }
+
+  async close(): Promise<void> {
+    let input = await this.webdriver.findElement(By.css('input'));
+    await input.sendKeys(Key.ESCAPE);
+    // TODO remove sleep
+    await new Promise(resolve => setTimeout(resolve, 100));
+    await (this.webdriver.switchTo() as any).parentFrame();
+  }
 }
diff --git a/e2e/lib/FormOptionPage.ts b/e2e/lib/FormOptionPage.ts
new file mode 100644
index 0000000..c8ff341
--- /dev/null
+++ b/e2e/lib/FormOptionPage.ts
@@ -0,0 +1,64 @@
+import { Lanthan } from 'lanthan';
+import { WebDriver, By } from 'selenium-webdriver';
+
+export default class FormOptionPage {
+  private webdriver: WebDriver;
+
+  constructor(lanthan: Lanthan) {
+    this.webdriver = lanthan.getWebDriver();
+  }
+
+  async setBlacklist(nth: number, value: string): Promise<void> {
+    let selector = '.form-blacklist-form .column-url';
+    let inputs = await this.webdriver.findElements(By.css(selector));
+    if (inputs.length <= nth) {
+      throw new RangeError('Index out of range to set a blacklist')
+    }
+    await inputs[nth].sendKeys(value);
+    await this.webdriver.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
+  }
+
+  async setSearchEngine(nth: number, name: string, url: string) {
+    let selector = '.form-search-form input.column-name';
+    let 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(name);
+    await this.webdriver.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
+
+    selector = '.form-search-form input.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()`);
+  }
+
+  async addBlacklist(): Promise<void> {
+    let button = await this.webdriver.findElement(By.css('.form-blacklist-form .ui-add-button'))
+    await button.click();
+  }
+
+  async removeBlackList(nth: number): Promise<void> {
+    let buttons = await this.webdriver.findElements(By.css('.form-blacklist-form .ui-delete-button'));
+    if (buttons.length <= nth) {
+      throw new RangeError('Index out of range to remove blacklist')
+    }
+    await buttons[nth].click()
+  }
+
+  async addSearchEngine(): Promise<void> {
+    let button = await this.webdriver.findElement(By.css('.form-search-form .ui-add-button'))
+    await button.click();
+  }
+
+  async setDefaultSearchEngine(nth: number): Promise<void> {
+    let radios = await this.webdriver.findElements(By.css('.form-search-form input[type=radio]'));
+    if (radios.length <= nth) {
+      throw new RangeError('Index out of range to set a default search engine');
+    }
+    await radios[nth].click();
+  }
+}
diff --git a/e2e/lib/JSONOptionPage.ts b/e2e/lib/JSONOptionPage.ts
new file mode 100644
index 0000000..ac1ae3d
--- /dev/null
+++ b/e2e/lib/JSONOptionPage.ts
@@ -0,0 +1,22 @@
+import { Lanthan } from 'lanthan';
+import { WebDriver, By } from 'selenium-webdriver';
+
+export default class JSONOptionPage {
+  private webdriver: WebDriver;
+
+  constructor(lanthan: Lanthan) {
+    this.webdriver = lanthan.getWebDriver();
+  }
+
+  async updateSettings(value: string): Promise<void> {
+    let textarea = await this.webdriver.findElement(By.css('textarea'));
+    await this.webdriver.executeScript(`document.querySelector('textarea').value = '${value}'`)
+    await textarea.sendKeys(' ');
+    await this.webdriver.executeScript(() => document.querySelector('textarea')!!.blur());
+  }
+
+  async getErrorMessage(): Promise<string> {
+    let error = await this.webdriver.findElement(By.css('.settings-ui-input-error'));
+    return error.getText();
+  }
+}
diff --git a/e2e/lib/OptionPage.ts b/e2e/lib/OptionPage.ts
new file mode 100644
index 0000000..6b66f41
--- /dev/null
+++ b/e2e/lib/OptionPage.ts
@@ -0,0 +1,36 @@
+import { Lanthan } from 'lanthan';
+import { WebDriver, By } from 'selenium-webdriver';
+import JSONOptionPage from './JSONOptionPage';
+import FormOptionPage from './FormOptionPage';
+
+export default class OptionPage {
+  private webdriver: WebDriver;
+
+  constructor(private lanthan: Lanthan) {
+    this.webdriver = lanthan.getWebDriver();
+  }
+
+  static async open(lanthan: Lanthan) {
+    let url = await lanthan.getWebExtBrowser().runtime.getURL("build/settings.html")
+    await lanthan.getWebDriver().navigate().to(url);
+    return new OptionPage(lanthan);
+  }
+
+  async switchToForm(): Promise<FormOptionPage> {
+    let useFormInput = await this.webdriver.findElement(By.css('#setting-source-form'));
+    await useFormInput.click();
+    await this.webdriver.switchTo().alert().accept();
+    return new FormOptionPage(this.lanthan);
+  }
+
+  async asFormOptionPage(): Promise<FormOptionPage> {
+    // TODO validate current page
+    return new FormOptionPage(this.lanthan);
+  }
+
+  async asJSONOptionPage(): Promise<JSONOptionPage> {
+    // TODO validate current page
+    return new JSONOptionPage(this.lanthan);
+  }
+}
+
diff --git a/e2e/lib/Page.ts b/e2e/lib/Page.ts
new file mode 100644
index 0000000..7a5dd7a
--- /dev/null
+++ b/e2e/lib/Page.ts
@@ -0,0 +1,93 @@
+import { WebDriver, By, until } from 'selenium-webdriver';
+import { Console } from './Console';
+
+type Hint = {
+  displayed: boolean,
+  text: string,
+};
+
+export default class Page {
+  private constructor(private webdriver: WebDriver) {
+  }
+
+  static async currentContext(webdriver: WebDriver): Promise<Page> {
+    await Page.waitForConsoleLoaded(webdriver);
+    return new Page(webdriver);
+  }
+
+  static async navigateTo(webdriver: WebDriver, url: string): Promise<Page> {
+    await webdriver.navigate().to(url);
+    await Page.waitForConsoleLoaded(webdriver);
+    return new Page(webdriver);
+  }
+
+  async sendKeys(...keys: Array<string|number|Promise<string|number>>): Promise<void> {
+    let body = await this.webdriver.findElement(By.css('body'));
+    await body.sendKeys(...keys);
+  }
+
+  async navigateTo(url: string): Promise<Page> {
+    await this.webdriver.navigate().to(url);
+    await Page.waitForConsoleLoaded(this.webdriver);
+    return new Page(this.webdriver);
+  }
+
+  async showConsole(): Promise<Console> {
+    let iframe = this.webdriver.findElement(By.css('#vimvixen-console-frame'));
+
+    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')));
+    return new Console(this.webdriver);
+  }
+
+  async getConsole(): Promise<Console> {
+    let iframe = this.webdriver.findElement(By.css('#vimvixen-console-frame'));
+
+    await this.webdriver.wait(until.elementIsVisible(iframe));
+    await this.webdriver.switchTo().frame(0);
+    return new Console(this.webdriver);
+  }
+
+  async getScrollX(): Promise<number> {
+    return await this.webdriver.executeScript(() => window.pageXOffset);
+  }
+
+  getScrollY(): Promise<number> {
+    return this.webdriver.executeScript(() => window.pageYOffset);
+  }
+
+  scrollTo(x: number, y: number): Promise<void> {
+    return this.webdriver.executeScript(`window.scrollTo(${x}, ${y})`);
+  }
+
+  pageHeight(): Promise<number> {
+    return this.webdriver.executeScript(() => window.document.documentElement.clientHeight);
+  }
+
+  async waitAndGetHints(): Promise<Hint[]> {
+    await this.webdriver.wait(until.elementsLocated(By.css('.vimvixen-hint')));
+
+    let elements = await this.webdriver.findElements(By.css(`.vimvixen-hint`));
+    let hints = [];
+    for (let e of elements) {
+      let display = await e.getCssValue('display');
+      let text = await e.getText();
+      hints.push({
+        displayed: display !== 'none',
+        text: text,
+      });
+    }
+    return hints;
+  }
+
+  private static async waitForConsoleLoaded(webdriver: WebDriver) {
+    let topFrame = await webdriver.executeScript(() => window.top === window);
+    if (!topFrame) {
+      return;
+    }
+    await webdriver.wait(until.elementLocated(By.css('iframe.vimvixen-console-frame')));
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+}
diff --git a/e2e/mark.test.ts b/e2e/mark.test.ts
index 14885ee..0dc0306 100644
--- a/e2e/mark.test.ts
+++ b/e2e/mark.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -46,59 +47,48 @@ describe("mark test", () => {
   });
 
   it('should set a local mark and jump to it', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await webdriver.executeScript(() => window.scrollTo(200, 200));
-    await body.sendKeys('m', 'a');
-    await webdriver.executeScript(() => window.scrollTo(500, 500));
-    await body.sendKeys('\'', 'a');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
+    await page.scrollTo(200, 200);
+    await page.sendKeys('m', 'a');
+    await page.scrollTo(500, 500);
+    await page.sendKeys('\'', 'a');
 
     await eventually(async() => {
-      let pageXOffset = await webdriver.executeScript(() => window.pageXOffset);
-      let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-      assert.equal(pageXOffset, 200);
-      assert.equal(pageYOffset, 200);
+      assert.equal(await page.getScrollX(), 200);
+      assert.equal(await page.getScrollY(), 200);
     });
   });
 
   it('should set a global mark and jump to it', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}#first`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await webdriver.executeScript(() => window.scrollTo(200, 200));
-    await body.sendKeys('m', 'A');
-    await webdriver.executeScript(() => window.scrollTo(500, 500));
-    await body.sendKeys('\'', 'A');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}#first`);
+    await page.scrollTo(200, 200);
+    await page.sendKeys('m', 'A');
+    await page.scrollTo(500, 500);
+    await page.sendKeys('\'', 'A');
 
     await eventually(async() => {
-      let pageXOffset = await webdriver.executeScript(() => window.pageXOffset);
-      let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-      assert.equal(pageXOffset, 200);
-      assert.equal(pageYOffset, 200);
+      assert.equal(await page.getScrollX(), 200);
+      assert.equal(await page.getScrollY(), 200);
     });
 
     await browser.tabs.create({ url: `http://127.0.0.1:${port}#second` });
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('\'', 'A');
+    page = await Page.currentContext(webdriver);
+    await page.sendKeys('\'', 'A');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({ active: true }))[0];
       let url = new URL(tab.url);
       assert.equal(url.hash, '#first');
 
-      let pageXOffset = await webdriver.executeScript(() => window.pageXOffset);
-      let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-      assert.equal(pageXOffset, 200);
-      assert.equal(pageYOffset, 200);
+      assert.equal(await page.getScrollX(), 200);
+      assert.equal(await page.getScrollY(), 200);
     });
   });
 
   it('set a global mark and creates new tab from gone', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}#first`);
-    await webdriver.executeScript(() => window.scrollTo(500, 500));
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('m', 'A');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}#first`);
+    await page.scrollTo(500, 500);
+    await page.sendKeys('m', 'A');
 
     let tab = (await browser.tabs.query({ active: true }))[0];
     await browser.tabs.create({ url: `http://127.0.0.1:${port}#second` });
@@ -107,13 +97,12 @@ describe("mark test", () => {
     let handles: string[];
     await eventually(async() => {
       handles = await webdriver.getAllWindowHandles();
-      await webdriver.getAllWindowHandles
       assert.equal(handles.length, 2);
     });
     await webdriver.switchTo().window(handles!![0]);
-    await webdriver.navigate().to(`http://127.0.0.1:${port}#second`);
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('\'', 'A');
+
+    page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}#second`);
+    await page.sendKeys('\'', 'A');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({ active: true }))[0];
diff --git a/e2e/navigate.test.ts b/e2e/navigate.test.ts
index 4b664e4..87155fd 100644
--- a/e2e/navigate.test.ts
+++ b/e2e/navigate.test.ts
@@ -5,8 +5,9 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
 import { Options as FirefoxOptions } from 'selenium-webdriver/firefox';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -81,10 +82,8 @@ describe("navigate test", () => {
   })
 
   it('should go to parent path without hash by gu', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/a/b/c`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await body.sendKeys('g', 'u');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/a/b/c`);
+    await page.sendKeys('g', 'u');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -94,10 +93,8 @@ describe("navigate test", () => {
   });
 
   it('should remove hash by gu', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/a/b/c#hash`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await body.sendKeys('g', 'u');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/a/b/c#hash`);
+    await page.sendKeys('g', 'u');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -108,10 +105,8 @@ describe("navigate test", () => {
   });
 
   it('should go to root path by gU', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/a/b/c#hash`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await body.sendKeys('g', Key.SHIFT, 'u');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/a/b/c#hash`);
+    await page.sendKeys('g', Key.SHIFT, 'u');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -121,11 +116,9 @@ describe("navigate test", () => {
   });
 
   it('should go back and forward in history by H and L', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/first`);
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/second`);
-    let body = await webdriver.findElement(By.css('body'));
-
-    await body.sendKeys(Key.SHIFT, 'h');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/first`);
+    await page.navigateTo(`http://127.0.0.1:${port}/second`);
+    await page.sendKeys(Key.SHIFT, 'h');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -133,8 +126,8 @@ describe("navigate test", () => {
       assert.equal(url.pathname, `/first`)
     });
 
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'l');
+    page = await Page.currentContext(webdriver);
+    page.sendKeys(Key.SHIFT, 'l');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -144,10 +137,8 @@ describe("navigate test", () => {
   });
 
   it('should go previous and next page in <a> by [[ and ]]', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/pagenation-a/10`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('[', '[');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/pagenation-a/10`);
+    await page.sendKeys('[', '[');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -157,9 +148,8 @@ describe("navigate test", () => {
   });
 
   it('should go next page in <a> by ]]', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/pagenation-a/10`);
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(']', ']');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/pagenation-a/10`);
+    await page.sendKeys(']', ']');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -169,10 +159,8 @@ describe("navigate test", () => {
   });
 
   it('should go previous page in <link> by ]]', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/pagenation-link/10`);
-
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('[', '[');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/pagenation-link/10`);
+    await page.sendKeys('[', '[');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -182,9 +170,8 @@ describe("navigate test", () => {
   });
 
   it('should go next page by in <link> by [[', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/pagenation-link/10`);
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(']', ']');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/pagenation-link/10`);
+    await page.sendKeys(']', ']');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -194,9 +181,8 @@ describe("navigate test", () => {
   });
 
   it('should go to home page into current tab by gh', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('g', 'h');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
+    await page.sendKeys('g', 'h');
 
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -206,9 +192,8 @@ describe("navigate test", () => {
   });
 
   it('should go to home page into current tab by gH', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('g', Key.SHIFT, 'H');
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}`);
+    await page.sendKeys('g', Key.SHIFT, 'H');
 
     await eventually(async() => {
       let tabs = await browser.tabs.query({});
@@ -220,8 +205,9 @@ describe("navigate test", () => {
   });
 
   it('should reload current tab by r', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/reload`);
-    await webdriver.executeScript(() => window.scrollTo(500, 500));
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/reload`);
+    await page.scrollTo(500, 500);
+
     let before: number;
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -229,8 +215,7 @@ describe("navigate test", () => {
       assert.ok(before > 0);
     });
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('r');
+    await page.sendKeys('r');
 
     let after
     await eventually(async() => {
@@ -240,14 +225,15 @@ describe("navigate test", () => {
     });
 
     await eventually(async() => {
-      let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-      assert.equal(pageYOffset, 500);
+      let page = await Page.currentContext(webdriver);
+      assert.equal(await page.getScrollX(), 500);
     });
   });
 
   it('should reload current tab without cache by R', async () => {
-    await webdriver.navigate().to(`http://127.0.0.1:${port}/reload`);
-    await webdriver.executeScript(() => window.scrollTo(500, 500));
+    let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/reload`);
+    await page.scrollTo(500, 500);
+
     let before: number;
     await eventually(async() => {
       let tab = (await browser.tabs.query({}))[0];
@@ -255,8 +241,7 @@ describe("navigate test", () => {
       assert.ok(before > 0);
     });
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'R');
+    await page.sendKeys(Key.SHIFT, 'R');
 
     let after
     await eventually(async() => {
@@ -265,12 +250,9 @@ describe("navigate test", () => {
       assert.ok(after > before);
     });
 
-    // assert that the page offset is reset to 0, and 'eventually' is timed-out.
-    await assert.rejects(async () => {
-      await eventually(async() => {
-        let pageYOffset = await webdriver.executeScript(() => window.pageYOffset);
-        assert.equal(pageYOffset, 500);
-      });
+    await eventually(async() => {
+      let page = await Page.currentContext(webdriver);
+      assert.equal(await page.getScrollY(), 0);
     });
   });
 });
diff --git a/e2e/options.test.ts b/e2e/options.test.ts
index dba6992..6f05ab0 100644
--- a/e2e/options.test.ts
+++ b/e2e/options.test.ts
@@ -2,9 +2,12 @@ import express from 'express';
 import * as path from 'path';
 import * as assert from 'assert';
 import * as http from 'http';
+import eventually from './eventually';
 
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By } from 'selenium-webdriver';
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
+import OptionPage from './lib/OptionPage';
 
 const newApp = () => {
   let app = express();
@@ -51,48 +54,41 @@ describe("options page", () => {
     }
   })
 
-  const updateTextarea = async(value: string) => {
-    let textarea = await webdriver.findElement(By.css('textarea'));
-    await webdriver.executeScript(`document.querySelector('textarea').value = '${value}'`)
-    await textarea.sendKeys(' ');
-    await webdriver.executeScript(() => document.querySelector('textarea')!!.blur());
-  }
-
   it('saves current config on blur', async () => {
-    let url = await browser.runtime.getURL("build/settings.html")
-    await webdriver.navigate().to(url);
-
-    await updateTextarea(`{ "blacklist": [ "https://example.com" ] }`);
+    let page = await OptionPage.open(lanthan);
+    let jsonPage = await page.asJSONOptionPage();
+    await jsonPage.updateSettings(`{ "blacklist": [ "https://example.com" ] }`)
 
     let { settings } = await browser.storage.local.get('settings');
     assert.equal(settings.source, 'json')
     assert.equal(settings.json, '{ "blacklist": [ "https://example.com" ] } ')
 
-    await updateTextarea(`invalid json`);
+    await jsonPage.updateSettings(`invalid json`);
 
     settings = (await browser.storage.local.get('settings')).settings;
     assert.equal(settings.source, 'json')
     assert.equal(settings.json, '{ "blacklist": [ "https://example.com" ] } ')
 
-    let error = await webdriver.findElement(By.css('.settings-ui-input-error'));
-    let text = await error.getText();
-    assert.ok(text.startsWith('SyntaxError:'))
+    let message = await jsonPage.getErrorMessage();
+    assert.ok(message.startsWith('SyntaxError:'))
   });
 
   it('updates keymaps without reloading', async () => {
-    await browser.tabs.create({ url: `http://127.0.0.1:${port}`, active: false });
-    let url = await browser.runtime.getURL("build/settings.html")
-    await webdriver.navigate().to(url);
-
-    await updateTextarea(`{ "keymaps": { "zz": { "type": "scroll.vertically", "count": 10 } } }`);
+    let optionPage = await OptionPage.open(lanthan);
+    let jsonPage = await optionPage.asJSONOptionPage();
+    await jsonPage.updateSettings(`{ "keymaps": { "zz": { "type": "scroll.vertically", "count": 10 } } }`);
 
+    await browser.tabs.create({ url: `http://127.0.0.1:${port}`, active: false });
+    await new Promise((resolve) => setTimeout(resolve, 100));
     let handles = await webdriver.getAllWindowHandles();
     await webdriver.switchTo().window(handles[1]);
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('zz')
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('zz');
 
-    let y = await webdriver.executeScript(() => window.pageYOffset);
-    assert.equal(y, 640);
+    await eventually(async() => {
+      let y = await page.getScrollY();
+      assert.equal(y, 640);
+    });
   })
 });
diff --git a/e2e/options_form.test.ts b/e2e/options_form.test.ts
index 04803da..bed8490 100644
--- a/e2e/options_form.test.ts
+++ b/e2e/options_form.test.ts
@@ -2,12 +2,10 @@ import * as path from 'path';
 import * as assert from 'assert';
 
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By } from 'selenium-webdriver';
-
+import OptionPage from './lib/OptionPage';
 
 describe("options form page", () => {
   let lanthan: Lanthan;
-  let webdriver: WebDriver;
   let browser: any;
 
   beforeEach(async() => {
@@ -15,7 +13,6 @@ describe("options form page", () => {
       .forBrowser('firefox')
       .spyAddon(path.join(__dirname, '..'))
       .build();
-    webdriver = lanthan.getWebDriver();
     browser = lanthan.getWebExtBrowser();
 
     let tabs = await browser.tabs.query({});
@@ -30,93 +27,56 @@ describe("options form page", () => {
     }
   })
 
-  const setBlacklistValue = async(nth: number, value: string) => {
-    let selector = '.form-blacklist-form .column-url';
-    let input = (await webdriver.findElements(By.css(selector)))[nth];
-    await input.sendKeys(value);
-    await webdriver.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
-  }
-
-  const setSearchEngineValue = async(nth: number, name: string, url: string) => {
-    let selector = '.form-search-form input.column-name';
-    let input = (await webdriver.findElements(By.css(selector)))[nth];
-    await input.sendKeys(name);
-    await webdriver.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
-
-    selector = '.form-search-form input.column-url';
-    input = (await webdriver.findElements(By.css(selector)))[nth];
-    await input.sendKeys(url);
-    await webdriver.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
-  }
-
   it('switch to form settings', async () => {
-    let url = await browser.runtime.getURL("build/settings.html")
-    await webdriver.navigate().to(url);
-
-    let useFormInput = await webdriver.findElement(By.css('#setting-source-form'));
-    await useFormInput.click();
-    await webdriver.switchTo().alert().accept();
+    let page = await OptionPage.open(lanthan);
+    await page.switchToForm();
 
     let { settings } = await browser.storage.local.get('settings');
     assert.equal(settings.source, 'form')
   })
 
   it('add blacklist', async () => {
-    let url = await browser.runtime.getURL("build/settings.html")
-    await webdriver.navigate().to(url);
-
-    let useFormInput = await webdriver.findElement(By.css('#setting-source-form'));
-    await useFormInput.click();
-    await webdriver.switchTo().alert().accept();
-    await webdriver.executeScript(() => window.scrollBy(0, 1000));
+    let page = await OptionPage.open(lanthan);
+    let forms = await page.switchToForm();
 
     // assert default
     let settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.blacklist, [])
 
     // add blacklist items
-    let addButton = await webdriver.findElement(By.css('.form-blacklist-form .ui-add-button'))
-    await addButton.click();
-    await setBlacklistValue(0, 'google.com')
+    await forms.addBlacklist();
+    await forms.setBlacklist(0, 'google.com')
 
     settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.blacklist, ['google.com'])
 
-    await addButton.click();
-    await setBlacklistValue(1, 'yahoo.com')
+    await forms.addBlacklist();
+    await forms.setBlacklist(1, 'yahoo.com')
 
     settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.blacklist, ['google.com', 'yahoo.com'])
 
     // delete first item
-    let deleteButton = (await webdriver.findElements(By.css('.form-blacklist-form .ui-delete-button')))[0];
-    await deleteButton.click()
-
+    await forms.removeBlackList(0);
     settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.blacklist, ['yahoo.com'])
   });
 
   it('add search engines', async () => {
-    let url = await browser.runtime.getURL("build/settings.html")
-    await webdriver.navigate().to(url);
-
-    let useFormInput = await webdriver.findElement(By.css('#setting-source-form'));
-    await useFormInput.click();
-    await webdriver.switchTo().alert().accept();
+    let page = await OptionPage.open(lanthan);
+    let forms = await page.switchToForm();
 
     // assert default
     let settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.search.default, 'google');
 
     // change default
-    let radio = (await webdriver.findElements(By.css('.form-search-form input[type=radio]')))[2];
-    await radio.click();
+    await forms.setDefaultSearchEngine(2);
     settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.search.default, 'bing');
 
-    let addButton = await webdriver.findElement(By.css('.form-search-form .ui-add-button'))
-    await addButton.click();
-    await setSearchEngineValue(6, 'yippy', 'https://www.yippy.com/search?query={}');
+    await forms.addSearchEngine();
+    await forms.setSearchEngine(6, 'yippy', 'https://www.yippy.com/search?query={}');
 
     settings = (await browser.storage.local.get('settings')).settings;
     assert.deepEqual(settings.form.search.engines[6], ['yippy', 'https://www.yippy.com/search?query={}']);
diff --git a/e2e/repeat.test.ts b/e2e/repeat.test.ts
index 2280ed8..a42329e 100644
--- a/e2e/repeat.test.ts
+++ b/e2e/repeat.test.ts
@@ -5,8 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
-
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -33,8 +33,6 @@ describe("tab test", () => {
     webdriver = lanthan.getWebDriver();
     browser = lanthan.getWebExtBrowser();
     http = newApp().listen(port);
-
-    await webdriver.navigate().to(`${url}`);
   });
 
   after(async() => {
@@ -46,21 +44,18 @@ describe("tab test", () => {
     }
   });
 
-  it('repeats last operation', async () => {
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(':');
-
-    await webdriver.switchTo().frame(0);
-    let input = await webdriver.findElement(By.css('input'));
-    input.sendKeys(`tabopen ${url}newtab`, Key.ENTER);
+  it('repeats last command', async () => {
+    let page = await Page.navigateTo(webdriver, url);
+    let console = await page.showConsole();
+    await console.execCommand(`tabopen ${url}newtab`);
 
     await eventually(async() => {
       let current = await browser.tabs.query({ url: `*://*/newtab` });
       assert.equal(current.length, 1);
     });
 
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('.');
+    page = await Page.currentContext(webdriver);
+    await page.sendKeys('.');
 
     await eventually(async() => {
       let current = await browser.tabs.query({ url: `*://*/newtab` });
@@ -74,8 +69,8 @@ describe("tab test", () => {
     }
     let before = await browser.tabs.query({});
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('d');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('d');
 
     await eventually(async() => {
       let current = await browser.tabs.query({});
@@ -83,8 +78,8 @@ describe("tab test", () => {
     });
 
     await browser.tabs.update(before[2].id, { active: true });
-    body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('.');
+    page = await Page.currentContext(webdriver);
+    await page.sendKeys('.');
 
     await eventually(async() => {
       let current = await browser.tabs.query({});
diff --git a/e2e/scroll.test.ts b/e2e/scroll.test.ts
index 63ac8a8..0742c4e 100644
--- a/e2e/scroll.test.ts
+++ b/e2e/scroll.test.ts
@@ -4,7 +4,8 @@ import * as assert from 'assert';
 import * as http from 'http';
 
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -22,7 +23,7 @@ describe("scroll test", () => {
   let http: http.Server;
   let lanthan: Lanthan;
   let webdriver: WebDriver;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     http = newApp().listen(port);
@@ -45,28 +46,28 @@ describe("scroll test", () => {
 
   beforeEach(async() => {
     await webdriver.navigate().to(`http://127.0.0.1:${port}`);
-    body = await webdriver.findElement(By.css('body'));
+    page = await Page.currentContext(webdriver);
   });
 
 
   it('scrolls up by k', async () => {
-    await body.sendKeys('j');
+    await page.sendKeys('j');
 
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.equal(pageYOffset, 64);
+    let scrollY = await page.getScrollY();
+    assert.equal(scrollY, 64);
   });
 
   it('scrolls down by j', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 200));
-    await body.sendKeys('k');
+    await page.sendKeys('k');
 
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.equal(pageYOffset, 136);
+    let scrollY = await page.getScrollY();
+    assert.equal(scrollY, 136);
   });
 
   it('scrolls left by h', async () => {
     await webdriver.executeScript(() => window.scrollTo(100, 100));
-    await body.sendKeys('h');
+    await page.sendKeys('h');
 
     let pageXOffset = await webdriver.executeScript(() => window.pageXOffset) as number;
     assert.equal(pageXOffset, 36);
@@ -74,7 +75,7 @@ describe("scroll test", () => {
 
   it('scrolls left by l', async () => {
     await webdriver.executeScript(() => window.scrollTo(100, 100));
-    await body.sendKeys('l');
+    await page.sendKeys('l');
 
     let pageXOffset = await webdriver.executeScript(() => window.pageXOffset) as number;
     assert.equal(pageXOffset, 164);
@@ -82,23 +83,23 @@ describe("scroll test", () => {
 
   it('scrolls top by gg', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 100));
-    await body.sendKeys('g', 'g');
+    await page.sendKeys('g', 'g');
 
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.equal(pageYOffset, 0);
+    let scrollY = await page.getScrollY();
+    assert.equal(scrollY, 0);
   });
 
   it('scrolls bottom by G', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 100));
-    await body.sendKeys(Key.SHIFT, 'g');
+    await page.sendKeys(Key.SHIFT, 'g');
 
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.ok(pageYOffset > 5000);
+    let scrollY = await page.getScrollY();
+    assert.ok(scrollY > 5000);
   });
 
   it('scrolls bottom by 0', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 100));
-    await body.sendKeys(Key.SHIFT, '0');
+    await page.sendKeys(Key.SHIFT, '0');
 
     let pageXOffset = await webdriver.executeScript(() => window.pageXOffset) as number;
     assert.ok(pageXOffset === 0);
@@ -106,7 +107,7 @@ describe("scroll test", () => {
 
   it('scrolls bottom by $', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 100));
-    await body.sendKeys(Key.SHIFT, '$');
+    await page.sendKeys(Key.SHIFT, '$');
 
     let pageXOffset = await webdriver.executeScript(() => window.pageXOffset) as number;
     assert.ok(pageXOffset > 5000);
@@ -114,41 +115,37 @@ describe("scroll test", () => {
 
   it('scrolls bottom by <C-U>', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 1000));
-    await body.sendKeys(Key.CONTROL, 'u');
+    await page.sendKeys(Key.CONTROL, 'u');
 
-    let pageHeight = 
-      await webdriver.executeScript(() => window.document.documentElement.clientHeight) as number;
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.ok(Math.abs(pageYOffset - (1000 - Math.floor(pageHeight / 2))) < 5);
+    let pageHeight = await page.pageHeight();
+    let scrollY = await page.getScrollY();
+    assert.ok(Math.abs(scrollY - (1000 - Math.floor(pageHeight / 2))) < 5);
   });
 
   it('scrolls bottom by <C-D>', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 1000));
-    await body.sendKeys(Key.CONTROL, 'd');
+    await page.sendKeys(Key.CONTROL, 'd');
 
-    let pageHeight = 
-      await webdriver.executeScript(() => window.document.documentElement.clientHeight) as number;
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.ok(Math.abs(pageYOffset - (1000 + Math.floor(pageHeight / 2))) < 5);
+    let pageHeight = await page.pageHeight();
+    let scrollY = await page.getScrollY();
+    assert.ok(Math.abs(scrollY - (1000 + Math.floor(pageHeight / 2))) < 5);
   });
 
   it('scrolls bottom by <C-B>', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 1000));
-    await body.sendKeys(Key.CONTROL, 'b');
+    await page.sendKeys(Key.CONTROL, 'b');
 
-    let pageHeight = 
-      await webdriver.executeScript(() => window.document.documentElement.clientHeight) as number;
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.ok(Math.abs(pageYOffset - (1000 - pageHeight)) < 5);
+    let pageHeight = await page.pageHeight();
+    let scrollY = await page.getScrollY();
+    assert.ok(Math.abs(scrollY - (1000 - pageHeight)) < 5);
   });
 
   it('scrolls bottom by <C-F>', async () => {
     await webdriver.executeScript(() => window.scrollTo(0, 1000));
-    await body.sendKeys(Key.CONTROL, 'f');
+    await page.sendKeys(Key.CONTROL, 'f');
 
-    let pageHeight = 
-      await webdriver.executeScript(() => window.document.documentElement.clientHeight) as number;
-    let pageYOffset = await webdriver.executeScript(() => window.pageYOffset) as number;
-    assert.ok(Math.abs(pageYOffset - (1000 + pageHeight)) < 5);
+    let pageHeight = await page.pageHeight();
+    let scrollY = await page.getScrollY();
+    assert.ok(Math.abs(scrollY - (1000 + pageHeight)) < 5);
   });
 });
diff --git a/e2e/tab.test.ts b/e2e/tab.test.ts
index c75541b..058d6ca 100644
--- a/e2e/tab.test.ts
+++ b/e2e/tab.test.ts
@@ -5,7 +5,8 @@ import * as http from 'http';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, By, Key } from 'selenium-webdriver';
+import { WebDriver, Key } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 const newApp = () => {
   let app = express();
@@ -61,32 +62,34 @@ describe("tab test", () => {
 
   it('deletes tab and selects right by d', async () => {
     await browser.tabs.update(tabs[3].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('d');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('d');
 
-    let current = await browser.tabs.query({ windowId: win.id });
-    assert.ok(current.length === tabs.length - 1);
-    assert.ok(current[3].active);
-    assert.ok(current[3].url === tabs[4].url);
+    await eventually(async() => {
+      let current = await browser.tabs.query({ windowId: win.id });
+      assert.ok(current.length === tabs.length - 1);
+      assert.ok(current[3].active);
+      assert.ok(current[3].id === tabs[4].id);
+    });
   });
 
   it('deletes tab and selects left by D', async () => {
     await browser.tabs.update(tabs[3].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'D');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.SHIFT, 'D');
 
     await eventually(async() => {
       let current = await browser.tabs.query({ windowId: win.id });
       assert.ok(current.length === tabs.length - 1);
       assert.ok(current[2].active);
-      assert.ok(current[2].url === tabs[2].url);
+      assert.ok(current[2].id === tabs[2].id);
     })
   });
 
   it('deletes all tabs to the right by x$', async () => {
     await browser.tabs.update(tabs[1].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('x', '$');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('x', '$');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current.length === 2);
@@ -94,8 +97,8 @@ describe("tab test", () => {
 
   it('duplicates tab by zd', async () => {
     await browser.tabs.update(tabs[0].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('z', 'd');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('z', 'd');
 
     await eventually(async() => {
       let current = await browser.tabs.query({ windowId: win.id });
@@ -107,8 +110,8 @@ describe("tab test", () => {
 
   it('makes pinned by zp', async () => {
     await browser.tabs.update(tabs[0].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('z', 'p');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('z', 'p');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[0].pinned);
@@ -116,8 +119,8 @@ describe("tab test", () => {
 
   it('selects previous tab by K', async () => {
     await browser.tabs.update(tabs[2].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'K');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.SHIFT, 'K');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[1].active);
@@ -125,8 +128,8 @@ describe("tab test", () => {
 
   it('selects previous tab by K rotatory', async () => {
     await browser.tabs.update(tabs[0].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'K');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.SHIFT, 'K');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[current.length - 1].active)
@@ -134,8 +137,8 @@ describe("tab test", () => {
 
   it('selects next tab by J', async () => {
     await browser.tabs.update(tabs[2].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'J');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.SHIFT, 'J');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[3].active);
@@ -143,8 +146,8 @@ describe("tab test", () => {
 
   it('selects previous tab by J rotatory', async () => {
     await browser.tabs.update(tabs[tabs.length - 1].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.SHIFT, 'J');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.SHIFT, 'J');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[0].active)
@@ -152,8 +155,8 @@ describe("tab test", () => {
 
   it('selects first tab by g0', async () => {
     await browser.tabs.update(tabs[2].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('g', '0');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('g', '0');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[0].active)
@@ -161,8 +164,8 @@ describe("tab test", () => {
 
   it('selects last tab by g$', async () => {
     await browser.tabs.update(tabs[2].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('g', '$');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('g', '$');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[current.length - 1].active)
@@ -172,8 +175,8 @@ describe("tab test", () => {
     await browser.tabs.update(tabs[1].id, { active: true });
     await browser.tabs.update(tabs[4].id, { active: true });
 
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys(Key.CONTROL, '6');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys(Key.CONTROL, '6');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current[1].active)
@@ -183,8 +186,8 @@ describe("tab test", () => {
   // This might be a bug in Firefox.
   it.skip('reopen tab by u', async () => {
     await browser.tabs.remove(tabs[1].id);
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('u');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('u');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current.length === tabs.length);
@@ -192,8 +195,8 @@ describe("tab test", () => {
 
   it('does not delete pinned tab by d', async () => {
     await browser.tabs.update(tabs[0].id, { active: true, pinned: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('d');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('d');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current.length === tabs.length);
@@ -201,8 +204,8 @@ describe("tab test", () => {
 
   it('deletes pinned tab by !d', async () => {
     await browser.tabs.update(tabs[0].id, { active: true, pinned: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('!', 'd');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('!', 'd');
 
     let current = await browser.tabs.query({ windowId: win.id });
     assert.ok(current.length === tabs.length - 1);
@@ -210,8 +213,8 @@ describe("tab test", () => {
 
   it('opens view-source by gf', async () => {
     await browser.tabs.update(tabs[0].id, { active: true });
-    let body = await webdriver.findElement(By.css('body'));
-    await body.sendKeys('g', 'f');
+    let page = await Page.currentContext(webdriver);
+    await page.sendKeys('g', 'f');
 
     await eventually(async() => {
       let current = await browser.tabs.query({ windowId: win.id });
diff --git a/e2e/zoom.test.ts b/e2e/zoom.test.ts
index 0b55a4d..c1a9db9 100644
--- a/e2e/zoom.test.ts
+++ b/e2e/zoom.test.ts
@@ -3,15 +3,15 @@ import * as assert from 'assert';
 
 import eventually from './eventually';
 import { Builder, Lanthan } from 'lanthan';
-import { WebDriver, WebElement, By } from 'selenium-webdriver';
-
+import { WebDriver } from 'selenium-webdriver';
+import Page from './lib/Page';
 
 describe("zoom test", () => {
   let lanthan: Lanthan;
   let webdriver: WebDriver;
   let browser: any;
   let tab: any;
-  let body: WebElement;
+  let page: Page;
 
   before(async() => {
     lanthan = await Builder
@@ -21,6 +21,7 @@ describe("zoom test", () => {
     webdriver = lanthan.getWebDriver();
     browser = lanthan.getWebExtBrowser();
     tab = (await browser.tabs.query({}))[0]
+    page = await Page.currentContext(webdriver);
   });
 
   after(async() => {
@@ -29,12 +30,11 @@ describe("zoom test", () => {
 
   beforeEach(async() => {
     await webdriver.navigate().to('about:blank');
-    body = await webdriver.findElement(By.css('body'));
   });
 
   it('should zoom in by zi', async () => {
     let before = await browser.tabs.getZoom(tab.id);
-    await body.sendKeys('z', 'i');
+    await page.sendKeys('zi');
 
     await eventually(async() => {
       let actual = await browser.tabs.getZoom(tab.id);
@@ -44,7 +44,7 @@ describe("zoom test", () => {
 
   it('should zoom out by zo', async () => {
     let before = await browser.tabs.getZoom(tab.id);
-    await body.sendKeys('z', 'o');
+    await page.sendKeys('zo');
 
     await eventually(async() => {
       let actual = await browser.tabs.getZoom(tab.id);
@@ -52,9 +52,9 @@ describe("zoom test", () => {
     });
   });
 
-  it('scrolls left by h', async () => {
+  it('should reset zoom by zz', async () => {
     await browser.tabs.setZoom(tab.id, 2);
-    await body.sendKeys('z', 'z');
+    await page.sendKeys('zz');
 
     await eventually(async() => {
       let actual = await browser.tabs.getZoom(tab.id);