A library for executing actions in a remote browser and viewing/replaying them locally.
npm install remote-browser-viewjs
npm install remote-browser-view
`
使用
后端起监听node服务,创建浏览器和解析url地址。
`
let server = require("remote-browser-view/dist/node/index.cjs")
let start = new server.ServerBrowser(
{
"listenAddr":"0.0.0.0",
"port":6060,
"headless":false
//"playwrightProxy":{} playwright浏览器代理配置,参考import('playwright-core').LaunchOptions
}
)
start.start()`
前端连接后端服务
`
import WebReplayManager from 'remote-browser-view/dist/browser'
let start = new WebReplayManager({
"target":"https://www.airdroid.cn/", //要打开的网站地址
"PlaySelect":"#replay", //要渲染的dom节点
"WebSocketUrl":"ws://127.0.0.1:6060/", //前面部署的node服务地址
"rrwebReplayConfig":{} //基于rrweb项目实现,rrweb的配置自定义
})
start.start() //开始渲染url回调函数,优化交互
页面渲染中的回调函数
start.renderLoading = () => {
}
渲染结束的回调函数
start.renderFinish = () => {
}
页面操作完成之后:
获取用户操作动作
console.log("userAction:",start.getWebInteractionActions())
获取第三方网站cookie
console.log("Cookies:",start.getServerBrowserCookies())
获取第三方网站所有请求
console.log("Connections:",start.getServerBrowserConnections(["fetch","xhr","document"]))
`
node根据执行动作回放
`
let server = require("../dist/node/index.cjs")
let actions = require("./test.action.json")let replayAction = server.ReplayActions
let requests = replayAction(actions,"https://www.airdroid.cn/",false)
requests.then(connections => {
console.log(connections)
})
``