Skip to content

page ​

页面类,包含对页面的操作、比如进入、刷新、返回、设置页面模拟等。

page.setViewSize(width,height) ​

设置页面视图宽高,可用于在运行时动态修改。

js
await page.setViewSize(200,400) // 设置页面视图大小为宽200高400
await page.setViewSize(200,400) // 设置页面视图大小为宽200高400

page.setDevice(name:string) ​

设置页面设备模拟, 注意需要在页面创建前设置,否则只在之后创建的页面生效.

更多可用设备名称

js
await page.setDevice('iPhone 11') // 模拟iPhone 11 访问
await page.setDevice('iPhone 11') // 模拟iPhone 11 访问

page.create(url:string) ​

创建新页面打开网页, 传入标准的url格式

js
await page.create('https://www.baidu.com') // 打开百度页面
await page.create('https://www.baidu.com') // 打开百度页面

page.waitPopup() ​

将页面上下文切换至弹出的新窗口中

js
  await dom.click("#pageOpen") // 该点击操作将启动新窗口
  await page.waitPopup() // 将上下文切换至最近打开的窗口中
  // 后续操作将在新窗口中进行
  await dom.fill("#id","123")
  await dom.click("#pageOpen") // 该点击操作将启动新窗口
  await page.waitPopup() // 将上下文切换至最近打开的窗口中
  // 后续操作将在新窗口中进行
  await dom.fill("#id","123")

page.waitForEvent(event:string) ​

等待页面事件,用于更新页面上下文内容,默认事件为framenavigated页面重定向 更多event事件:

  • 'close': 页面被关闭时触发。
  • 'console': 当页面中有新的 console.log, console.debug, console.info, console.warn, 或 console.error 时触发。
  • 'crash': 当浏览器崩溃时触发。
  • 'dialog': 当页面弹出对话框时触发。
  • 'domcontentloaded': 当页面的 DOMContentLoaded 事件被触发时触发。即当初始 HTML 文档完全加载和解析完成后触发。
  • 'download': 当页面开始下载文件时触发。
  • 'filechooser': 当页面需要选择文件时触发。
  • 'frameattached': 当页面附加子帧时触发。
  • 'framedetached': 当页面卸载子帧时触发。
  • 'framenavigated': 当一个帧被导航到一个新的url时发出。
  • 'load': 当页面的 load 事件被触发时触发。即当所有资源(如图像和样式表)都已加载完成时触发。
  • 'navigation': 当页面控制权转移到另一个页面时触发。这通常意味着页面正在导航到新的 URL。
  • 'request': 当页面发出网络请求时触发。
  • 'response': 当页面接收到网络响应时触发。
  • 'route': 当页面接收到网络请求时触发。此事件允许您拦截和修改请求的内容。
  • 'websocket': 当页面连接到 WebSocket 时触发。
js
// 登陆后页面会重建因此需要进行上下文转换
await Promise.all([dom.click("text=登 录"),page.waitForEvent('framenavigated')])

// 下载文件时,需要指定路径否则不会实际存储
const downloadPromise = page.waitForEvent('download');
// 点击下载操作
await dom.click('/download_btn');
const download = await downloadPromise;
// 填写存储路径
await download.saveAs('/path/to/save/at/' + download.suggestedFilename());
// 登陆后页面会重建因此需要进行上下文转换
await Promise.all([dom.click("text=登 录"),page.waitForEvent('framenavigated')])

// 下载文件时,需要指定路径否则不会实际存储
const downloadPromise = page.waitForEvent('download');
// 点击下载操作
await dom.click('/download_btn');
const download = await downloadPromise;
// 填写存储路径
await download.saveAs('/path/to/save/at/' + download.suggestedFilename());

page.waitForResponse ​

等待页面的接口响应 提示:: 这里使用Promise.all 是为了让两个操作同时进行,wait Response 基于事件监听,你不能等待监听而不去触发请求,这意味着什么都不会发生。

js
const [res] = await Promise.all([
  page.waitForResponse(response => response.url().includes('/ajax/websiteProfile/online.json') && response.status() === 200),
  // Triggers the response
  page.to(`http://t.268xue.com/`)
]);
console.log('response',res.url())
const [res] = await Promise.all([
  page.waitForResponse(response => response.url().includes('/ajax/websiteProfile/online.json') && response.status() === 200),
  // Triggers the response
  page.to(`http://t.268xue.com/`)
]);
console.log('response',res.url())

page.setBrowserCofing(options) ​

设置浏览器配置信息。

!!! 注意-必须在第一访问页面前进行,或设置后使用page.create进行新环境搭建,否则配置不会生效

全量配置参考:newContext( options)

js
await page.setBrowserCofing({userAgent:"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1"}) // 自定义浏览器userAgent

// 配置允许获取定位权限,设置经纬度
await page.setBrowserCofing({permissions:['geolocation'], geolocation: { longitude: 12.4924, latitude: 41.8902 }})
await page.setBrowserCofing({userAgent:"Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1"}) // 自定义浏览器userAgent

// 配置允许获取定位权限,设置经纬度
await page.setBrowserCofing({permissions:['geolocation'], geolocation: { longitude: 12.4924, latitude: 41.8902 }})

page.to(url[, options]) ​

切换当前页面的url,支持传入标准的url格式。

options:

  • referer string: Referer header value.

  • timeout: number Maximum operation time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout.

  • waitUntil: "load"|"domcontentloaded"|"networkidle"|"commit" When to consider operation succeeded, defaults to load. Events can be either:#

    • 'domcontentloaded' - consider operation to be finished when the DOMContentLoaded event is fired.

    • 'load' - consider operation to be finished when the load event is fired.

    • 'networkidle' - consider operation to be finished when there are no network connections for at least 500 ms.

    • 'commit' - consider operation to be finished when network response is received and the document started loading.

js
await page.to('https://www.baidu.com')
// commit 事件触发时,则判定页面加载完成。 -用于快速执行命令,一些网站主程序加载快,但依赖缓慢可用此参数加速测试。
await page.to('https://www.baidu.com',{waitUntil:'commit'})

// 增加页面访问超时时间,默认10s, 当前设置30s
await page.to('https://www.baidu.com',{timeout: 30000})
await page.to('https://www.baidu.com')
// commit 事件触发时,则判定页面加载完成。 -用于快速执行命令,一些网站主程序加载快,但依赖缓慢可用此参数加速测试。
await page.to('https://www.baidu.com',{waitUntil:'commit'})

// 增加页面访问超时时间,默认10s, 当前设置30s
await page.to('https://www.baidu.com',{timeout: 30000})

page.hasText(text:string,options:{timeout: number }) : bool ​

  • v1.1.7+

查找当前页面是否包含text元素,结果返回布尔值。

js
await page.to('https://www.baidu.com')
let result = await page.hasText('百度一下')
await page.to('https://www.baidu.com')
let result = await page.hasText('百度一下')

page.getURL() ​

获取当前页面的地址。

js
await page.getURL()
await page.getURL()

page.back() ​

回退当前页面。

js
await page.back()
await page.back()

page.forward() ​

前进当前页面。

js
await page.forward()
await page.forward()

page.refresh() ​

刷新当前页面。

js
await page.refresh()
await page.refresh()

page.change(index | url) ​

切换当前控制的页面, 1表示第一个。除了索引切换外还支持url模糊切换。 注: 如果先前页面在iframe内,切换页面后会自动退出iframe。

js
await page.change(1)
await page.change("baidu.com") // 切换至url 包含baidu.com
await page.change("/seach") // 切换至url 包含seach
await page.change(1)
await page.change("baidu.com") // 切换至url 包含baidu.com
await page.change("/seach") // 切换至url 包含seach

page.changeIframe(index) ​

切换当前控制的iframe, 0表示当前页面内第一个iframe, -1 表示退出iframe, 默认不会进入iframe内。 也支持通过传递iframe-url片段切换到指定iframe中,更加方便。

js
await page.changeIframe(0)
// 根据 frame url进行切换
await page.changeIframe("/login")

// 退出iframe回到基础页面
await page.changeIframe(-1)
await page.changeIframe(0)
// 根据 frame url进行切换
await page.changeIframe("/login")

// 退出iframe回到基础页面
await page.changeIframe(-1)

page.screenshot(filePath,options) ​

屏幕截图, filePath表示截图存放路径。 必须指明详细的文件地址,而非目录地址。

js
await page.screenshot('/src/screenshot/nihao.jpg') // 截图存取至该路径下
// 兼容多平台运行时需要提供全平台可用路径

const path = require('path')
const os = require('os')
const imgPath = path.resolve(os.tmpdir(),'nihao.jpg') // 获取跨平台的临时目录
await page.screenshot(imgPath)
await page.screenshot('/src/screenshot/nihao.jpg') // 截图存取至该路径下
// 兼容多平台运行时需要提供全平台可用路径

const path = require('path')
const os = require('os')
const imgPath = path.resolve(os.tmpdir(),'nihao.jpg') // 获取跨平台的临时目录
await page.screenshot(imgPath)