>**NOTE**<br>The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
The **UiTest** module provides APIs that you can use to simulate UI actions during testing, such as clicks, double-clicks, long-clicks, and swipes.
This module provides the following functions:
-[By](#by): provides UI component feature description APIs for component filtering and matching.
-[UiComponent](#uicomponent): represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
-[UiDriver](#uidriver): works as the entry class and provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
>**NOTE**
>
>The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
...
...
@@ -12,14 +21,14 @@ import {UiDriver,BY,MatchPattern} from '@ohos.uitest'
## By
The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.<br>
The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
The API capabilities provided by the **By** class exhibit the following features: <br>1. Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component. <br>2. Provide multiple match patterns for component attributes. <br>3. Support absolute positioning and relative positioning for components. APIs such as [By.isBefore](#byisbefore) and [By.isAfter](#byisafter) can be used to specify the features of adjacent components to assist positioning. <br>All APIs provided in the **By** class are synchronous. You are advised to use the static constructor **BY** to create a **By** object in chain mode.
```js
BY.text('123').type('button')
```
### By.text
### text
text(txt: string, pattern?: MatchPattern): By
...
...
@@ -128,11 +137,11 @@ let by = BY.type('button') // Use the static constructor BY to create a By objec
```
### By.clickable
### clickable
clickable(b?: bool): By
Specifies the clickable attribute of the target component.
Specifies the clickable status of the target component.
@@ -256,7 +265,7 @@ Specifies the selected status attribute of the target component.
**Example**
```js
letby=BY.selected(true)// Use the static constructor BY to create a By object and specify the selected status attribute of the target component.
letby=BY.selected(true)// Use the static constructor BY to create a By object and specify the selected status of the target component.
```
### By.isBefore
...
...
@@ -316,6 +325,7 @@ let by = BY.isAfter(BY.text('123')) // Use the static constructor BY to create a
In **UiTest**, the **UiComponent** class represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
All APIs provided in this class use a promise to return the result and must be invoked using **await**.
### UiComponent.click
click(): Promise\<void>
...
...
@@ -639,7 +649,7 @@ async function demo() {
### UiComponent.scrollSearch
scrollSearch(by:By): Promise\<UiComponent>
scrollSearch(by:By): Promise\<UiComponent>
Scrolls on this component to search for the target component (applicable to component that support scrolling, such as **\<List>**).
...
...
@@ -667,12 +677,14 @@ async function demo() {
}
```
## UiDriver
The **UiDriver** class is the main entry to the **uitest** test framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
The **UiDriver** class is the main entry to the UiTest framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
All APIs provided by this class, except for **UiDriver.create()**, use a promise to return the result and must be invoked using **await**.
>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>- The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
>- **<text\>** can be nested only by the parent element label **svg**.
>- Only the default font **sans-serif** is supported.
> **NOTE**
>
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
> - **<text\>** can be nested only by the parent element label **svg**.
> - Only the default font **sans-serif** is supported.
## Required Permissions
...
...
@@ -14,7 +15,7 @@ None
## Child Components
**Tspan**, **textpath**, **animate**, and **animateTransform are** supported.
**\<tspan>**, **\<textpath>**, **\<animate>**, and **\<animateTransform>** are supported.
## Attributes
...
...
@@ -39,7 +40,7 @@ The attributes in the following table are supported.
## Example
```
```css
/* xxx.css */
.container{
flex-direction:row;
...
...
@@ -50,7 +51,7 @@ The attributes in the following table are supported.
}
```
```
```html
<!-- xxx.hml -->
<divclass="container">
<svg>
...
...
@@ -72,7 +73,7 @@ The attributes in the following table are supported.
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -15,31 +17,32 @@ None
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
- GradientDirection
- GradientDirection enums
**GradientDirection** is used to describe the gradient direction.
Enumerates the gradient directions.
| Name | Description |
| Name | Description |
| -------- | -------- |
| Left | The gradient direction is from right to left. |
| Top | The gradient direction is from bottom to top. |
| Right | The gradient direction is from left to right. |
| Bottom | The gradient direction is from top to bottom. |
| LeftTop | The gradient direction is upper left. |
| LeftBottom | The gradient direction is lower left. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| None | No gradient. |
| Left | The gradient direction is from right to left. |
| Top | The gradient direction is from bottom to top. |
| Right | The gradient direction is from left to right. |
| Bottom | The gradient direction is from top to bottom. |
| LeftTop | The gradient direction is upper left. |
| LeftBottom | The gradient direction is lower left. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| @Link | Not allowed | Allowed | Not recommended | Allowed |
| @Prop | Not allowed | Not allowed | Allowed | Allowed |
| @StorageLink | Not allowed | Allowed | Not allowed | Allowed |
| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed |
| Normal variable | Allowed | Not allowed | Not allowed | Allowed |
As indicated by the preceding table:
...
...
@@ -59,7 +59,7 @@ As indicated by the preceding table:
- The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.
- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.
- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using `$`), or normal variables of the child component, but not the @State decorated variables of the child component.
- The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.
...
...
@@ -72,7 +72,7 @@ As indicated by the preceding table:
## Example
```
@Entry
@Component
...
...
@@ -97,7 +97,7 @@ struct CompA {
Row() {
CompB({bLink: $aLink, // valid init a @Link with reference of another @Link,
bProp: this.aState}) // valid init a @Prop with value of a @State
CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean
CompB({aLink: $aState, // invalid: type mismatch expected ref to ClassA, provided reference to boolean
bProp: false}) // valid init a @Prop by constants value
