2019-12-04 19:13:00 +08:00
|
|
|
import puppeteer from 'puppeteer'
|
|
|
|
|
2020-02-06 10:10:43 +08:00
|
|
|
export const E2E_TIMEOUT = 30 * 1000
|
|
|
|
|
2019-12-04 19:13:00 +08:00
|
|
|
const puppeteerOptions = process.env.CI
|
|
|
|
? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
|
|
|
|
: {}
|
|
|
|
|
2020-08-20 22:51:25 +08:00
|
|
|
const maxTries = 20
|
|
|
|
export const timeout = (n: number) => new Promise(r => setTimeout(r, n))
|
|
|
|
|
|
|
|
export async function expectByPolling(
|
|
|
|
poll: () => Promise<any>,
|
|
|
|
expected: string
|
|
|
|
) {
|
|
|
|
for (let tries = 0; tries < maxTries; tries++) {
|
|
|
|
const actual = (await poll()) || ''
|
|
|
|
if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
|
|
|
|
expect(actual).toMatch(expected)
|
|
|
|
break
|
|
|
|
} else {
|
|
|
|
await timeout(50)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-04 19:13:00 +08:00
|
|
|
export function setupPuppeteer() {
|
|
|
|
let browser: puppeteer.Browser
|
|
|
|
let page: puppeteer.Page
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
browser = await puppeteer.launch(puppeteerOptions)
|
|
|
|
page = await browser.newPage()
|
2019-12-11 23:15:52 +08:00
|
|
|
|
|
|
|
page.on('console', e => {
|
|
|
|
if (e.type() === 'error') {
|
2019-12-13 09:46:20 +08:00
|
|
|
const err = e.args()[0] as any
|
|
|
|
console.error(
|
|
|
|
`Error from Puppeteer-loaded page:\n`,
|
|
|
|
err._remoteObject.description
|
|
|
|
)
|
2019-12-11 23:15:52 +08:00
|
|
|
}
|
|
|
|
})
|
2019-12-04 19:13:00 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
afterEach(async () => {
|
|
|
|
await browser.close()
|
|
|
|
})
|
|
|
|
|
|
|
|
async function click(selector: string, options?: puppeteer.ClickOptions) {
|
|
|
|
await page.click(selector, options)
|
|
|
|
}
|
|
|
|
|
|
|
|
async function count(selector: string) {
|
|
|
|
return (await page.$$(selector)).length
|
|
|
|
}
|
|
|
|
|
|
|
|
async function text(selector: string) {
|
|
|
|
return await page.$eval(selector, node => node.textContent)
|
|
|
|
}
|
|
|
|
|
|
|
|
async function value(selector: string) {
|
2020-03-23 23:08:22 +08:00
|
|
|
return await page.$eval(selector, node => (node as HTMLInputElement).value)
|
2019-12-11 22:13:47 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
async function html(selector: string) {
|
|
|
|
return await page.$eval(selector, node => node.innerHTML)
|
2019-12-04 19:13:00 +08:00
|
|
|
}
|
|
|
|
|
2019-12-10 03:20:56 +08:00
|
|
|
async function classList(selector: string) {
|
|
|
|
return await page.$eval(selector, (node: any) => [...node.classList])
|
|
|
|
}
|
|
|
|
|
|
|
|
async function children(selector: string) {
|
|
|
|
return await page.$eval(selector, (node: any) => [...node.children])
|
|
|
|
}
|
|
|
|
|
2019-12-04 19:13:00 +08:00
|
|
|
async function isVisible(selector: string) {
|
2020-03-23 23:08:22 +08:00
|
|
|
const display = await page.$eval(selector, node => {
|
2019-12-04 19:13:00 +08:00
|
|
|
return window.getComputedStyle(node).display
|
|
|
|
})
|
|
|
|
return display !== 'none'
|
|
|
|
}
|
|
|
|
|
|
|
|
async function isChecked(selector: string) {
|
2020-03-23 23:08:22 +08:00
|
|
|
return await page.$eval(
|
|
|
|
selector,
|
|
|
|
node => (node as HTMLInputElement).checked
|
|
|
|
)
|
2019-12-04 19:13:00 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
async function isFocused(selector: string) {
|
|
|
|
return await page.$eval(selector, node => node === document.activeElement)
|
|
|
|
}
|
|
|
|
|
2019-12-18 22:19:31 +08:00
|
|
|
async function setValue(selector: string, value: string) {
|
2020-06-12 22:32:27 +08:00
|
|
|
await page.$eval(
|
|
|
|
selector,
|
|
|
|
(node, value) => {
|
2020-06-26 02:04:23 +08:00
|
|
|
;(node as HTMLInputElement).value = value
|
2020-06-12 22:32:27 +08:00
|
|
|
node.dispatchEvent(new Event('input'))
|
|
|
|
},
|
|
|
|
value
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
async function typeValue(selector: string, value: string) {
|
2019-12-18 22:19:31 +08:00
|
|
|
const el = (await page.$(selector))!
|
2020-03-23 23:08:22 +08:00
|
|
|
await el.evaluate(node => ((node as HTMLInputElement).value = ''))
|
2019-12-18 22:19:31 +08:00
|
|
|
await el.type(value)
|
|
|
|
}
|
|
|
|
|
2019-12-04 19:13:00 +08:00
|
|
|
async function enterValue(selector: string, value: string) {
|
|
|
|
const el = (await page.$(selector))!
|
2020-03-23 23:08:22 +08:00
|
|
|
await el.evaluate(node => ((node as HTMLInputElement).value = ''))
|
2019-12-04 19:13:00 +08:00
|
|
|
await el.type(value)
|
|
|
|
await el.press('Enter')
|
|
|
|
}
|
|
|
|
|
|
|
|
async function clearValue(selector: string) {
|
2019-12-11 22:13:47 +08:00
|
|
|
return await page.$eval(
|
|
|
|
selector,
|
2020-03-23 23:08:22 +08:00
|
|
|
node => ((node as HTMLInputElement).value = '')
|
2019-12-11 22:13:47 +08:00
|
|
|
)
|
2019-12-04 19:13:00 +08:00
|
|
|
}
|
|
|
|
|
2020-06-26 04:38:22 +08:00
|
|
|
function timeout(time: number) {
|
|
|
|
return page.evaluate(time => {
|
|
|
|
return new Promise(r => {
|
|
|
|
setTimeout(r, time)
|
|
|
|
})
|
|
|
|
}, time)
|
|
|
|
}
|
|
|
|
|
|
|
|
function nextFrame() {
|
|
|
|
return page.evaluate(() => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
requestAnimationFrame(resolve)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-12-04 19:13:00 +08:00
|
|
|
return {
|
|
|
|
page: () => page,
|
|
|
|
click,
|
|
|
|
count,
|
|
|
|
text,
|
|
|
|
value,
|
2019-12-11 22:13:47 +08:00
|
|
|
html,
|
2019-12-04 19:13:00 +08:00
|
|
|
classList,
|
2019-12-10 03:20:56 +08:00
|
|
|
children,
|
2019-12-04 19:13:00 +08:00
|
|
|
isVisible,
|
|
|
|
isChecked,
|
|
|
|
isFocused,
|
2019-12-18 22:19:31 +08:00
|
|
|
setValue,
|
2020-06-12 22:32:27 +08:00
|
|
|
typeValue,
|
2019-12-04 19:13:00 +08:00
|
|
|
enterValue,
|
2020-06-26 04:38:22 +08:00
|
|
|
clearValue,
|
|
|
|
timeout,
|
|
|
|
nextFrame
|
2019-12-04 19:13:00 +08:00
|
|
|
}
|
|
|
|
}
|