Element

Element 模块提供了控制页面元素的方法。

属性

element.tagName

标签名，小写。

element.tagName: string

方法

element.$

在元素范围内获取元素。

element.$(selector: string): Promise<Element>

参数说明

示例代码：

const page = await program.currentPage()  let element = await page.$('.index-hd')  element = await element.$('.index-desc')  console.log(await element.text())

element.$$

在元素范围内获取元素数组。

element.$$(selector: string): Promise<Element[]>

参数说明

示例代码：

 const page = await program.currentPage()  const element = await page.$('.index-bd')  const elements = await element.$$('.list-text')  console.log(await elements[0].text())

element.size

获取元素大小。

element.size(): Promise<Object>

返回值说明

示例代码：

 const page = await program.currentPage()  const element = await page.$('.index-bd')  const { width, height } = await element.size()  console.log(width, height)

element.offset

获取元素绝对位置。

element.offset(): Promise<Object>

返回值说明

坐标信息以页面左上角为原点。

示例代码：

 const page = await program.currentPage()  const element = await page.$('.index-bd')  const { left top } = await element.offset()  console.log(left, top)

element.text

获取元素文本。

element.text(): Promise<string>

示例代码：

 const page = await program.currentPage()  const element = await page.$('.index-desc')  console.log(await element.text())

element.attribute

获取元素特性。

element.attribute(name: string): Promise<string>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('.logo')  console.log(await element.attribute('src')) // -> 'static/logo.png'

element.property

获取元素属性。

element.property(name: string): Promise<any>

参数说明

element.property 与 element.attribute 主要区别如下：

element.attribute 获取的是标签上的值，因此它的返回类型一定是字符串，element.property 则不一定。

element.attribute 可以获取到 class 和 id 之类的值，element.property 不行。

element.property 可以获取到文档里对应组件列举的大部分属性值，比如表单 input 等组件的 value 值。

示例代码：

const page = await program.currentPage()  const element = await page.$('input')  console.log(await element.property('value'))

element.html

获取元素 HTML。

element.html(): Promise<string>

element.outerHtml

同 html，只是会获取到元素本身。

element.outerHtml(): Promise<string>

示例代码：

const page = await program.currentPage()  const element = await page.$('.index-desc')  console.log(await element.html())  console.log(await element.outerHtml())

element.value

获取元素值。

element.value(): Promise<string>

示例代码：

const page = await program.currentPage()  const element = await page.$('.input')  console.log(await element.value())

element.style

获取元素样式值。

element.style(name: string): Promise<string>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('.index-desc')  console.log(await element.style('color')) // -> 'rgb(128, 128, 128)'

element.tap

点击元素。

element.tap(): Promise<void>

示例代码：

const page = await program.currentPage()  const element = await page.$('.list-item-hd')  await element.tap()

element.longpress

长按元素。

element.longpress(): Promise<void>

element.touchstart

手指开始触摸元素。

element.touchstart(options: Object): Promise<void>

options 字段定义如下：

element.touchmove

手指触摸元素后移动。

element.touchmove(options: Object): Promise<void>

options 字段同 touchstart。

element.touchend

手指结束触摸元素。

element.touchend(options: Object): Promise<void>

options 字段同 touchstart。

const page = await program.currentPage()  const element = await page.$('.touch')  await element.touchstart({    touches: [      {        identifier: 1,        pageX: 500,        pageY: 500      }    ],    changedTouches: [      {        identifier: 1,        pageX: 500,        pageY: 500      }    ]  })  await element.touchend({    touches: [],    changedTouches: [      {        identifier: 1,        pageX: 500,        pageY: 500      }    ]  })

element.trigger

触发元素事件。

element.trigger(type: string, detail?: Object): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('picker')  await element.trigger('change', { value: 1 })

该方法无法改变组件状态，仅触发响应方法，也无法触发用户操作事件，即 tap，longpress 等事件，请使用对应的其它方法调用。

element.input

输入文本，仅 input、textarea 组件可以使用。

element.input(value: string): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('input')  await element.input('test')

element.callMethod

调用组件实例指定方法，仅自定义组件可以使用。

element.callMethod(method: string, ...args: any[]): Promise<any>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('set-tab-bar')  await element.callMethod('navigateBack')

element.data

获取组件实例渲染数据，仅自定义组件可以使用。

element.data(path?: string): Promise<Object>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('set-tab-bar')  console.log(await element.data('hasSetTabBarBadge'))

element.setData

设置组件实例渲染数据，仅自定义组件可以使用。

element.setData(data: Object): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('set-tab-bar')  await page.setData({    hasSetTabBarBadge: true  })

element.callContextMethod

调用上下文 Context 对象方法，仅 video 组件可以使用。

element.callContextMethod(method: string, ...args: any[]): Promise<any>

参数说明

video 组件必须设置了 id 才能使用。

const page = await program.currentPage()  const element = await page.$('video')  await element.callContextMethod('play')

element.scrollWidth

获取滚动宽度，仅 scroll-view 组件可以使用。

element.scrollWidth(): Promise<number>

element.scrollHeight

获取滚动高度，仅 scroll-view 组件可以使用。

element.scrollHeight(): Promise<number>

element.scrollTo

滚动到指定位置，仅 scroll-view 组件可以使用。

element.scrollTo(x: number, y: number): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('scroll-view')  const y = (await element.scrollHeight()) - 50  await element.scrollTo(0, y)

element.swipeTo

滑动到指定滑块，仅 swiper 组件可以使用。

element.swipeTo(index: number): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('swiper')  await element.swipeTo(2)

element.moveTo

移动视图容器，仅 movable-view 组件可以使用。

element.moveTo(x: number, y: number): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('movable-view')  await element.moveTo(40, 40)

element.slideTo

滑动到指定数值，仅 slider 组件可以使用。

element.slideTo(value: number): Promise<void>

参数说明

示例代码：

const page = await program.currentPage()  const element = await page.$('slider')  await element.slideTo(10)

平台差异

program(全局对象)

Page

Element

测试平台判断

if (process.env.UNI_PLATFORM === "h5") {} if (process.env.UNI_PLATFORM === "app-plus") {} if (process.env.UNI_PLATFORM === "mp-weixin") {} if (process.env.UNI_PLATFORM === "mp-baidu") {}