2022-02-11 01:02:38 +01:00
|
|
|
import { BrowserInterface, Event } from './base'
|
2021-10-25 08:21:57 +02:00
|
|
|
import fs from 'fs-extra'
|
2021-09-13 14:36:25 +02:00
|
|
|
import {
|
|
|
|
chromium,
|
|
|
|
webkit,
|
|
|
|
firefox,
|
|
|
|
Browser,
|
|
|
|
BrowserContext,
|
|
|
|
Page,
|
|
|
|
ElementHandle,
|
|
|
|
} from 'playwright-chromium'
|
2021-10-25 08:21:57 +02:00
|
|
|
import path from 'path'
|
2021-09-13 14:36:25 +02:00
|
|
|
|
|
|
|
let page: Page
|
|
|
|
let browser: Browser
|
|
|
|
let context: BrowserContext
|
|
|
|
let pageLogs: Array<{ source: string; message: string }> = []
|
2021-11-18 23:23:21 +01:00
|
|
|
let websocketFrames: Array<{ payload: string | Buffer }> = []
|
2021-10-25 08:21:57 +02:00
|
|
|
|
|
|
|
const tracePlaywright = process.env.TRACE_PLAYWRIGHT
|
2021-09-13 14:36:25 +02:00
|
|
|
|
|
|
|
export async function quit() {
|
|
|
|
await context?.close()
|
|
|
|
await browser?.close()
|
|
|
|
context = undefined
|
|
|
|
browser = undefined
|
|
|
|
}
|
|
|
|
|
|
|
|
class Playwright extends BrowserInterface {
|
2021-10-27 07:10:26 +02:00
|
|
|
private activeTrace?: string
|
2022-02-11 01:02:38 +01:00
|
|
|
private eventCallbacks: Record<Event, Set<(...args: any[]) => void>> = {
|
|
|
|
request: new Set(),
|
|
|
|
}
|
|
|
|
|
|
|
|
on(event: Event, cb: (...args: any[]) => void) {
|
|
|
|
if (!this.eventCallbacks[event]) {
|
|
|
|
throw new Error(
|
|
|
|
`Invalid event passed to browser.on, received ${event}. Valid events are ${Object.keys(
|
|
|
|
event
|
|
|
|
)}`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
this.eventCallbacks[event]?.add(cb)
|
|
|
|
}
|
|
|
|
off(event: Event, cb: (...args: any[]) => void) {
|
|
|
|
this.eventCallbacks[event]?.delete(cb)
|
|
|
|
}
|
2021-09-13 14:36:25 +02:00
|
|
|
|
2022-04-07 13:39:49 +02:00
|
|
|
async setup(browserName: string, locale?: string) {
|
2021-09-15 17:03:33 +02:00
|
|
|
if (browser) return
|
2021-09-13 14:36:25 +02:00
|
|
|
const headless = !!process.env.HEADLESS
|
|
|
|
|
|
|
|
if (browserName === 'safari') {
|
|
|
|
browser = await webkit.launch({ headless })
|
|
|
|
} else if (browserName === 'firefox') {
|
|
|
|
browser = await firefox.launch({ headless })
|
|
|
|
} else {
|
|
|
|
browser = await chromium.launch({ headless, devtools: !headless })
|
|
|
|
}
|
2022-04-07 13:39:49 +02:00
|
|
|
context = await browser.newContext({ locale })
|
2021-09-13 14:36:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
async get(url: string): Promise<void> {
|
|
|
|
return page.goto(url) as any
|
|
|
|
}
|
|
|
|
|
2022-02-15 19:53:45 +01:00
|
|
|
async loadPage(
|
|
|
|
url: string,
|
|
|
|
opts?: { disableCache: boolean; beforePageLoad?: (...args: any[]) => void }
|
|
|
|
) {
|
2021-10-27 07:10:26 +02:00
|
|
|
if (this.activeTrace) {
|
2021-10-25 08:21:57 +02:00
|
|
|
const traceDir = path.join(__dirname, '../../traces')
|
|
|
|
const traceOutputPath = path.join(
|
|
|
|
traceDir,
|
|
|
|
`${path
|
|
|
|
.relative(path.join(__dirname, '../../'), process.env.TEST_FILE_PATH)
|
|
|
|
.replace(/\//g, '-')}`,
|
2021-10-27 07:10:26 +02:00
|
|
|
`playwright-${this.activeTrace}-${Date.now()}.zip`
|
2021-10-25 08:21:57 +02:00
|
|
|
)
|
|
|
|
|
|
|
|
await fs.remove(traceOutputPath)
|
|
|
|
await context.tracing
|
|
|
|
.stop({
|
|
|
|
path: traceOutputPath,
|
|
|
|
})
|
|
|
|
.catch((err) => console.error('failed to write playwright trace', err))
|
|
|
|
}
|
|
|
|
|
2021-09-15 17:03:33 +02:00
|
|
|
// clean-up existing pages
|
|
|
|
for (const oldPage of context.pages()) {
|
|
|
|
await oldPage.close()
|
2021-09-13 14:36:25 +02:00
|
|
|
}
|
|
|
|
page = await context.newPage()
|
|
|
|
pageLogs = []
|
2021-11-18 23:23:21 +01:00
|
|
|
websocketFrames = []
|
2021-09-13 14:36:25 +02:00
|
|
|
|
|
|
|
page.on('console', (msg) => {
|
|
|
|
console.log('browser log:', msg)
|
|
|
|
pageLogs.push({ source: msg.type(), message: msg.text() })
|
|
|
|
})
|
|
|
|
page.on('crash', (page) => {
|
|
|
|
console.error('page crashed')
|
|
|
|
})
|
|
|
|
page.on('pageerror', (error) => {
|
|
|
|
console.error('page error', error)
|
|
|
|
})
|
2022-02-11 01:02:38 +01:00
|
|
|
page.on('request', (req) => {
|
|
|
|
this.eventCallbacks.request.forEach((cb) => cb(req))
|
|
|
|
})
|
2021-10-25 08:21:57 +02:00
|
|
|
|
2022-01-29 00:50:36 +01:00
|
|
|
if (opts?.disableCache) {
|
|
|
|
// TODO: this doesn't seem to work (dev tools does not check the box as expected)
|
|
|
|
const session = await context.newCDPSession(page)
|
|
|
|
session.send('Network.setCacheDisabled', { cacheDisabled: true })
|
|
|
|
}
|
|
|
|
|
2021-11-18 23:23:21 +01:00
|
|
|
page.on('websocket', (ws) => {
|
|
|
|
if (tracePlaywright) {
|
2021-10-25 08:21:57 +02:00
|
|
|
page
|
|
|
|
.evaluate(`console.log('connected to ws at ${ws.url()}')`)
|
|
|
|
.catch(() => {})
|
2021-11-18 23:23:21 +01:00
|
|
|
|
2021-10-25 08:21:57 +02:00
|
|
|
ws.on('close', () =>
|
|
|
|
page
|
|
|
|
.evaluate(`console.log('closed websocket ${ws.url()}')`)
|
|
|
|
.catch(() => {})
|
|
|
|
)
|
2021-11-18 23:23:21 +01:00
|
|
|
}
|
|
|
|
ws.on('framereceived', (frame) => {
|
|
|
|
websocketFrames.push({ payload: frame.payload })
|
|
|
|
|
|
|
|
if (tracePlaywright) {
|
2021-10-25 08:21:57 +02:00
|
|
|
if (!frame.payload.includes('pong')) {
|
|
|
|
page
|
|
|
|
.evaluate(`console.log('received ws message ${frame.payload}')`)
|
|
|
|
.catch(() => {})
|
|
|
|
}
|
2021-11-18 23:23:21 +01:00
|
|
|
}
|
2021-10-25 08:21:57 +02:00
|
|
|
})
|
2021-11-18 23:23:21 +01:00
|
|
|
})
|
2021-10-25 08:21:57 +02:00
|
|
|
|
2022-02-15 19:53:45 +01:00
|
|
|
opts?.beforePageLoad?.(page)
|
|
|
|
|
2021-10-25 08:21:57 +02:00
|
|
|
if (tracePlaywright) {
|
|
|
|
await context.tracing.start({
|
|
|
|
screenshots: true,
|
|
|
|
snapshots: true,
|
|
|
|
})
|
2021-10-27 07:10:26 +02:00
|
|
|
this.activeTrace = encodeURIComponent(url)
|
2021-10-25 08:21:57 +02:00
|
|
|
}
|
2021-09-13 14:36:25 +02:00
|
|
|
await page.goto(url, { waitUntil: 'load' })
|
|
|
|
}
|
|
|
|
|
|
|
|
back(): BrowserInterface {
|
|
|
|
return this.chain(() => {
|
|
|
|
return page.goBack()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
forward(): BrowserInterface {
|
|
|
|
return this.chain(() => {
|
|
|
|
return page.goForward()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
refresh(): BrowserInterface {
|
|
|
|
return this.chain(() => {
|
|
|
|
return page.reload()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
setDimensions({
|
|
|
|
width,
|
|
|
|
height,
|
|
|
|
}: {
|
|
|
|
height: number
|
|
|
|
width: number
|
|
|
|
}): BrowserInterface {
|
|
|
|
return this.chain(() => page.setViewportSize({ width, height }))
|
|
|
|
}
|
|
|
|
addCookie(opts: { name: string; value: string }): BrowserInterface {
|
|
|
|
return this.chain(async () =>
|
|
|
|
context.addCookies([
|
|
|
|
{
|
|
|
|
path: '/',
|
|
|
|
domain: await page.evaluate('window.location.hostname'),
|
|
|
|
...opts,
|
|
|
|
},
|
|
|
|
])
|
|
|
|
)
|
|
|
|
}
|
|
|
|
deleteCookies(): BrowserInterface {
|
|
|
|
return this.chain(async () => context.clearCookies())
|
|
|
|
}
|
|
|
|
|
2022-02-06 21:53:03 +01:00
|
|
|
focusPage() {
|
|
|
|
return this.chain(() => page.bringToFront())
|
|
|
|
}
|
|
|
|
|
2021-09-13 14:36:25 +02:00
|
|
|
private wrapElement(el: ElementHandle, selector: string) {
|
|
|
|
;(el as any).selector = selector
|
|
|
|
;(el as any).text = () => el.innerText()
|
|
|
|
;(el as any).getComputedCss = (prop) =>
|
|
|
|
page.evaluate(
|
|
|
|
function (args) {
|
|
|
|
return (
|
|
|
|
getComputedStyle(document.querySelector(args.selector))[
|
|
|
|
args.prop
|
|
|
|
] || null
|
|
|
|
)
|
|
|
|
},
|
|
|
|
{ selector, prop }
|
|
|
|
)
|
|
|
|
;(el as any).getCssValue = (el as any).getComputedCss
|
|
|
|
;(el as any).getValue = () =>
|
|
|
|
page.evaluate(
|
|
|
|
function (args) {
|
|
|
|
return (document.querySelector(args.selector) as any).value
|
|
|
|
},
|
|
|
|
{ selector }
|
|
|
|
)
|
|
|
|
return el
|
|
|
|
}
|
|
|
|
|
|
|
|
elementByCss(selector: string) {
|
|
|
|
return this.waitForElementByCss(selector)
|
|
|
|
}
|
|
|
|
|
|
|
|
elementById(sel) {
|
|
|
|
return this.elementByCss(`#${sel}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
getValue() {
|
|
|
|
return this.chain((el) =>
|
|
|
|
page.evaluate(
|
|
|
|
function (args) {
|
|
|
|
return document.querySelector(args.selector).value
|
|
|
|
},
|
|
|
|
{ selector: el.selector }
|
|
|
|
)
|
|
|
|
) as any
|
|
|
|
}
|
|
|
|
|
|
|
|
text() {
|
|
|
|
return this.chain((el) => el.text()) as any
|
|
|
|
}
|
|
|
|
|
|
|
|
type(text) {
|
|
|
|
return this.chain((el) => el.type(text))
|
|
|
|
}
|
|
|
|
|
|
|
|
moveTo() {
|
|
|
|
return this.chain((el) => {
|
|
|
|
return page.hover(el.selector).then(() => el)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
async getComputedCss(prop: string) {
|
|
|
|
return this.chain((el) => {
|
|
|
|
return el.getCssValue(prop)
|
|
|
|
}) as any
|
|
|
|
}
|
|
|
|
|
|
|
|
async getAttribute(attr) {
|
|
|
|
return this.chain((el) => el.getAttribute(attr))
|
|
|
|
}
|
|
|
|
|
|
|
|
async hasElementByCssSelector(selector: string) {
|
|
|
|
return this.eval(`!!document.querySelector('${selector}')`) as any
|
|
|
|
}
|
|
|
|
|
2022-02-06 21:53:03 +01:00
|
|
|
keydown(key: string): BrowserInterface {
|
|
|
|
return this.chain((el) => {
|
|
|
|
return page.keyboard.down(key).then(() => el)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
keyup(key: string): BrowserInterface {
|
|
|
|
return this.chain((el) => {
|
|
|
|
return page.keyboard.up(key).then(() => el)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2021-09-13 14:36:25 +02:00
|
|
|
click() {
|
|
|
|
return this.chain((el) => {
|
|
|
|
return el.click().then(() => el)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
elementsByCss(sel) {
|
|
|
|
return this.chain(() =>
|
|
|
|
page.$$(sel).then((els) => {
|
|
|
|
return els.map((el) => {
|
|
|
|
const origGetAttribute = el.getAttribute.bind(el)
|
|
|
|
el.getAttribute = (name) => {
|
|
|
|
// ensure getAttribute defaults to empty string to
|
|
|
|
// match selenium
|
|
|
|
return origGetAttribute(name).then((val) => val || '')
|
|
|
|
}
|
|
|
|
return el
|
|
|
|
})
|
|
|
|
})
|
|
|
|
) as any as BrowserInterface[]
|
|
|
|
}
|
|
|
|
|
|
|
|
waitForElementByCss(selector, timeout?: number) {
|
|
|
|
return this.chain(() => {
|
|
|
|
return page
|
|
|
|
.waitForSelector(selector, { timeout, state: 'attached' })
|
|
|
|
.then(async (el) => {
|
|
|
|
// it seems selenium waits longer and tests rely on this behavior
|
|
|
|
// so we wait for the load event fire before returning
|
|
|
|
await page.waitForLoadState()
|
|
|
|
return this.wrapElement(el, selector)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
waitForCondition(condition, timeout) {
|
|
|
|
return this.chain(() => {
|
|
|
|
return page.waitForFunction(
|
|
|
|
`function() {
|
|
|
|
return ${condition}
|
|
|
|
}`,
|
|
|
|
{ timeout }
|
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
async eval(snippet) {
|
|
|
|
// TODO: should this and evalAsync be chained? Might lead
|
|
|
|
// to bad chains
|
|
|
|
return page
|
|
|
|
.evaluate(snippet)
|
|
|
|
.catch((err) => {
|
|
|
|
console.error('eval error:', err)
|
|
|
|
return null
|
|
|
|
})
|
|
|
|
.then(async (val) => {
|
|
|
|
await page.waitForLoadState()
|
|
|
|
return val
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
async evalAsync(snippet) {
|
|
|
|
if (typeof snippet === 'function') {
|
|
|
|
snippet = snippet.toString()
|
|
|
|
}
|
|
|
|
|
|
|
|
if (snippet.includes(`var callback = arguments[arguments.length - 1]`)) {
|
|
|
|
snippet = `(function() {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const origFunc = ${snippet}
|
|
|
|
try {
|
|
|
|
origFunc(resolve)
|
|
|
|
} catch (err) {
|
|
|
|
reject(err)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})()`
|
|
|
|
}
|
|
|
|
|
|
|
|
return page.evaluate(snippet).catch(() => null)
|
|
|
|
}
|
|
|
|
|
|
|
|
async log() {
|
|
|
|
return this.chain(() => pageLogs) as any
|
|
|
|
}
|
|
|
|
|
2021-11-18 23:23:21 +01:00
|
|
|
async websocketFrames() {
|
|
|
|
return this.chain(() => websocketFrames) as any
|
|
|
|
}
|
|
|
|
|
2021-09-13 14:36:25 +02:00
|
|
|
async url() {
|
|
|
|
return this.chain(() => page.evaluate('window.location.href')) as any
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Playwright
|