Frame

Frame代表一个 DOM 框架。就像 DOM API 相关的方法一样，Frame 对象上绑定了对 DOM 树上元素进行增删改查的方法。

获取元素(Element)

通过选择器来获取指定元素，提供了类似 Jquery 的接口:

• Frame.$(selector) -> Promise<ElementHandle | null>: 获取与选择器匹配的第一个元素
• Frame.$$(selector) -> Promise<Array<ElementHandle>>: 获取与选择器匹配的所有元素
• Frame.$eval(selector, func, args) -> Promise<Awaited<ReturnType<Func>>>: 对获取的元素执行 func 函数
• Frame.$$eval(selector, func, args) -> Promise<Awaited<ReturnType<Func>>>: 对获取的元素列表执行 func 函数(注意是对列表本身，而不是列表中的每个值)

Tips

更好的是通过 Frame.locator(selector) 来获取Locator实现与元素的交互

获取父子对象(Page/parentFrame/childFrames)

Frame 可以嵌套，并且他们都隶属于Page:

• Frame.page() -> Page: 与框架关联的页面
• Frame.parentFrame() -> Frame | null: 返回父框架，对于 mainFrame 返回 null
• Frame.childFrames() -> Frame[]: 返回子框架数组

获取或设置页面属性

隶属于该页面有很多属性可以读取和设置:

• Page.content() -> Promise<string>/Page.setContent(html:string, opt) -> Promise<void>: 获取/设置页面，包括 DOCTYPE
• Page.title() -> Promise<string>: 返回页面的标题
• Page.url() -> string: 返回页面的 URL

交互

所谓的交互就是点击、悬停、输入等:

• Frame.click(selector, opts) -> Promise<void>: 触发 selector 指定的 Element 的 click 事件
• Frame.hover(selector) -> Promise<void>: 触发 selector 指定的 Element 的悬停
• Frame.type(selector, text, opts) -> Promise<void>: 要发送 text 字符的键盘按键

评估(evaluate)

所谓的评估就是在当前上下文执行一段 JS 语句。他类似于在浏览器开发者工具的控制台中执行语句:

• Frame.evaluate(func, args) -> Promise<Awaited<ReturnType<Func>>>