|
|
|
@ -1,46 +1,40 @@ |
|
|
|
|
import express from 'express'; |
|
|
|
|
import * as path from 'path'; |
|
|
|
|
import * as assert from 'assert'; |
|
|
|
|
import * as http from 'http'; |
|
|
|
|
|
|
|
|
|
import TestServer from './lib/TestServer'; |
|
|
|
|
import eventually from './eventually'; |
|
|
|
|
import { Builder, Lanthan } from 'lanthan'; |
|
|
|
|
import { WebDriver, Key } from 'selenium-webdriver'; |
|
|
|
|
import Page from './lib/Page'; |
|
|
|
|
|
|
|
|
|
const newApp = () => { |
|
|
|
|
let app = express(); |
|
|
|
|
|
|
|
|
|
app.get('/', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body><a href="hello">hello</a></body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
app.get('/follow-input', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body><input></body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
app.get('/area', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body> |
|
|
|
|
<img |
|
|
|
|
width="256" height="256" usemap="#map" |
|
|
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" |
|
|
|
|
> |
|
|
|
|
<map name="map"> |
|
|
|
|
<area shape="rect" coords="0,0,64,64" href="/"> |
|
|
|
|
<area shape="rect" coords="64,64,64,64" href="/"> |
|
|
|
|
<area shape="rect" coords="128,128,64,64" href="/"> |
|
|
|
|
</map> |
|
|
|
|
</body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
let server = new TestServer(); |
|
|
|
|
|
|
|
|
|
server.receiveContent('/', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<a href="hello">hello</a> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
server.receiveContent('/follow-input', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<input> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
server.receiveContent('/area', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<img |
|
|
|
|
width="256" height="256" usemap="#map" |
|
|
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" |
|
|
|
|
> |
|
|
|
|
<map name="map"> |
|
|
|
|
<area shape="rect" coords="0,0,64,64" href="/"> |
|
|
|
|
<area shape="rect" coords="64,64,64,64" href="/"> |
|
|
|
|
<area shape="rect" coords="128,128,64,64" href="/"> |
|
|
|
|
</map> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
/* |
|
|
|
|
* test case: link2 is out of the viewport |
|
|
|
@ -52,16 +46,13 @@ const newApp = () => { |
|
|
|
|
* | | |
|
|
|
|
* +-----------------+ |
|
|
|
|
*/ |
|
|
|
|
app.get('/test1', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
server.receiveContent('/test1', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
/* |
|
|
|
|
* test case 2: link2 and link3 are out of window of the frame |
|
|
|
@ -74,22 +65,18 @@ const newApp = () => { |
|
|
|
|
* | | |
|
|
|
|
* +-----------------+ |
|
|
|
|
*/ |
|
|
|
|
app.get('/test2', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body><iframe height="5000" src='/test2-frame'></body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
app.get('/test2-frame', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
server.receiveContent('/test2', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<iframe height="5000" src='/test2-frame'> |
|
|
|
|
</body></html">`); |
|
|
|
|
server.receiveContent('/test2-frame', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
/* test case 3: link2 is out of window of the frame |
|
|
|
|
* +-----------------+ |
|
|
|
@ -101,51 +88,43 @@ const newApp = () => { |
|
|
|
|
* | | |
|
|
|
|
* +-----------------+ |
|
|
|
|
*/ |
|
|
|
|
app.get('/test3', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body><iframe src='/test3-frame'></body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
app.get('/test3-frame', (_req, res) => { |
|
|
|
|
res.send(`<!DOCTYPEhtml>
|
|
|
|
|
<html lang="en"> |
|
|
|
|
<body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body> |
|
|
|
|
</html">`); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return app; |
|
|
|
|
server.receiveContent('/test3', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<iframe src='/test3-frame'> |
|
|
|
|
</body></html">`); |
|
|
|
|
server.receiveContent('/test3-frame', ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"><body> |
|
|
|
|
<div><a href="link1">link1</a></div> |
|
|
|
|
<div style="min-height:3000px"></div> |
|
|
|
|
<div><a href="link2">link2</a></div> |
|
|
|
|
</body></html">`); |
|
|
|
|
|
|
|
|
|
return server; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
describe('follow test', () => { |
|
|
|
|
|
|
|
|
|
const port = 12321; |
|
|
|
|
let http: http.Server; |
|
|
|
|
let server = newApp(); |
|
|
|
|
let lanthan: Lanthan; |
|
|
|
|
let webdriver: WebDriver; |
|
|
|
|
let browser: any; |
|
|
|
|
|
|
|
|
|
before(async() => { |
|
|
|
|
http = newApp().listen(port); |
|
|
|
|
lanthan = await Builder |
|
|
|
|
.forBrowser('firefox') |
|
|
|
|
.spyAddon(path.join(__dirname, '..')) |
|
|
|
|
.build(); |
|
|
|
|
webdriver = lanthan.getWebDriver(); |
|
|
|
|
browser = lanthan.getWebExtBrowser(); |
|
|
|
|
await server.start(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
after(async() => { |
|
|
|
|
await server.stop(); |
|
|
|
|
if (lanthan) { |
|
|
|
|
await lanthan.quit(); |
|
|
|
|
} |
|
|
|
|
if (http) { |
|
|
|
|
http.close(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
afterEach(async() => { |
|
|
|
@ -156,7 +135,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should focus an input by f', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/follow-input`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/follow-input')); |
|
|
|
|
await page.sendKeys('f'); |
|
|
|
|
await page.waitAndGetHints(); |
|
|
|
|
await page.sendKeys('a'); |
|
|
|
@ -166,7 +145,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should open a link by f', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url()); |
|
|
|
|
await page.sendKeys('f'); |
|
|
|
|
await page.waitAndGetHints(); |
|
|
|
|
await page.sendKeys('a'); |
|
|
|
@ -178,7 +157,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should focus an input by F', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/follow-input`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/follow-input')); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
await page.waitAndGetHints(); |
|
|
|
|
await page.sendKeys('a'); |
|
|
|
@ -188,7 +167,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should open a link to new tab by F', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url()); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
await page.waitAndGetHints(); |
|
|
|
|
await page.sendKeys('a'); |
|
|
|
@ -202,7 +181,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should show hints of links in area', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/area`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/area')); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
|
|
|
|
|
let hints = await page.waitAndGetHints(); |
|
|
|
@ -210,7 +189,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should shows hints only in viewport', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test1`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/test1')); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
|
|
|
|
|
let hints = await page.waitAndGetHints(); |
|
|
|
@ -218,7 +197,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should shows hints only in window of the frame', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test2`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/test2')); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
|
|
|
|
|
await webdriver.switchTo().frame(0); |
|
|
|
@ -227,7 +206,7 @@ describe('follow test', () => { |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should shows hints only in the frame', async () => { |
|
|
|
|
let page = await Page.navigateTo(webdriver, `http://127.0.0.1:${port}/test3`); |
|
|
|
|
let page = await Page.navigateTo(webdriver, server.url('/test3')); |
|
|
|
|
await page.sendKeys(Key.SHIFT, 'f'); |
|
|
|
|
|
|
|
|
|
await webdriver.switchTo().frame(0); |
|
|
|
|