# Element

The element module provides a way to control Weixin Mini Program page elements.

# attribute

# element.tagName

The label name, in lowercase.

element.tagName: string

# method

# element.$

Get an element within the element scope.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
selector	string	yes	-	Selector

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  let element = await page.$('.index-hd')
  element = await element.$('.index-desc')
  console.log(await element.text())
})

# element.$$

Get an array of elements within the element range.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
selector	string	yes	-	Selector

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-bd')
  const elements = await element.$$('.kind-list-text')
  console.log(await elements[0].text())
})

# element.size

Get the size of the element.

element.size(): Promise<Object>

Return value explaination

field	type	Introductions
width	number	Element width
height	number	Elemental height

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-bd')
  const { width, height } = await element.size()
  console.log(width, height)
})

# element.offset

Get the absolute location of the element.

element.offset(): Promise<Object>

Return value explaination

field	type	Introductions
left	number	Upper left corner x coordinate, px
top	number	Upper left corner y coordinate, px

The coordinates are based on the upper left corner of the page.

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-bd')
  const { left top } = await element.offset()
  console.log(left, top)
})

# element.text

Get the element text.

element.text(): Promise<string>

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-desc')
  console.log(await element.text())
})

# element.attribute

Get element properties.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
name	string	yes	-	Feature name

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-logo')
  console.log(await element.attribute('src')) // -> 'resources/kind/logo.png'
})

# element.property

Get the element properties.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
name	string	yes	-	Attribute Name

The main differences between element.property and element.attribute are as follows:

Element.attribute gets the value on the tag, so its return type is always a character string, while element.property is not.
Element.attribute can get values like class and id, but element.property can't.
Element.property can get most of the attribute values listed in the document for the corresponding component, such as the value of the component such as the form input.

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('input')
  console.log(await element.property('value'))
})

# element.wxml

Gets the element WXML.

element.wxml(): Promise<string>

# element.outerWxml

Like wxml, it just gets the element itself.

element.outerWxml(): Promise<string>

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-desc')
  console.log(await element.wxml())
  console.log(await element.outerWxml())
})

# element.value

Get the element value.

element.value(): Promise<string>

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.weui-input')
  console.log(await element.value())
})

# element.style

Get the element style value.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
name	string	yes	-	Style Name

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.index-desc')
  console.log(await element.style('color')) // -> 'rgb(136, 136, 136)'
})

# element.tap

Click on the element.

element.tap(): Promise<void>

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('.kind-list-item-hd')
  await element.tap()
})

# element.longpress

Longpress the element.

element.longpress(): Promise<void>

# element.touchstart

The finger begins to touch the element.

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

The options field is defined as follows:

field	type	Required to fill in	Default values	Introductions
touches	array\|yes	-	Touch event, an array of touchpoint information currently stuck on the screen
changedTouches	array\|yes	-	Touch events, an array of currently changing touch point information

# element.touchmove

The finger moves after touching the element.

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

The options field is the same as touchstart.

# element.touchend

The finger ends touching the element.

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

The options field is the same as touchstart.

automator.launch().then(async miniProgram => {
  const page = await miniProgram.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

Trigger an element event.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
type	string	yes	-	Trigger type of event
detail	Object	no	-	The detail value passed when the event is triggered

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('picker')
  await element.trigger('change', { value: 1 })
})

# element.input

Input text, only input, textarea components can be used.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
value	string	yes	-	Text that needs to be entered

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('input')
  await element.input('test')
})

# element.callMethod

Calling a component instance specifies methods that can only be used by custom components.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
method	string	yes	-	Method name that needs to be called
...args	array\|no	-	Method parameters

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('set-tab-bar')
  await element.callMethod('navigateBack')
})

# element.data

Get component instance rendering data that can only be used by custom components.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
path	string	no	-	Data Path

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('set-tab-bar')
  console.log(await element.data('hasSetTabBarBadge'))
})

# element.setData

Set component instances to render data that only custom components can use.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
data	Object	yes	-	The data to change

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('set-tab-bar')
  await page.setData({
    hasSetTabBarBadge: true
  })
})

# element.callContextMethod

Calls the Context object method, available only to the video component.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
method	string	yes	-	Method name that needs to be called
...args	array\|no	-	Method parameters

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('video')
  await element.callContextMethod('play')
})

# element.scrollWidth

Gets the scroll width, available only to the scroll-view component.

element.scrollWidth(): Promise<number>

# element.scrollHeight

Gets the scroll height that only the scroll-view component can use.

element.scrollHeight(): Promise<number>

# element.scrollTo

Scrolling to the specified position, only the scroll-view component can be used.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
x	number	yes	-	Horizontal scrolling position
y	number	yes	-	Vertical scrolling position

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('scroll-view')
  const y = (await element.scrollHeight()) - 50
  await element.scrollTo(0, y)
})

# element.swipeTo

Swipe to the specified slider and only the swiper component can be used.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
index	number	yes	-	Index of the target slider

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('swiper')
  await element.swipeTo(2)
})

# element.moveTo

The movable-view container, only the movable-view component can use.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
x	number	yes	-	Offset in the x-axis direction
y	number	yes	-	Offset in the y-axis direction

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('movable-view')
  await element.moveTo(40, 40)
})

# element.slideTo

Slide to the specified value, only the slider component can be used.

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

Parameter explaination

field	type	Required to fill in	Default values	Introductions
value	number	yes	-	The value to be set

Example code:

automator.launch().then(async miniProgram => {
  const page = await miniProgram.currentPage()
  const element = await page.$('slider')
  await element.slideTo(10)
})