---
description: 'The steps can be divided into two main categories:'
---

# Step

1. **Action Step**: A step that performs a specific operation, including events such as click, type, copy, and paste.
2. **Group Step:** Controlling the lifecycle of a group of action steps, and limiting the scope of elements. For example, looping ActionStep, limiting the scope of captured elements.

## Examples

<details>

<summary>Action Step</summary>

```javascript
// Click
const ClickActionStep = {
    id: 'xxx',
    type: 'Action',
    actionType: 'click',
    selector: 'xxx',
}

// Type
const TypeActionStep = {
    id: 'xxx',
    type: 'Action',
    actionType: 'type',
    selector: 'xxx'
}
```

</details>

<details>

<summary>Group Step</summary>

```javascript
// A Group Step that limits the scope of elements.
const GroupStep = {
    id: 'xxx',
    type: 'Group',
    // CSS Selector to limit the scope
    conatinerSelector: 'xxx',
    steps: [
        {
            id: 'xxx',
            type: 'Action',
            actionType: 'click',
            selector: 'xxx',
        },
        {
            id: 'xxx',
            type: 'Action',
            actionType: 'type',
            selector: 'xxx',
        },
    ],
}

// Example of a Group Step that loops 5 ActionSteps
const GroupStep = {
    id: 'xxx',
    type: 'Group',
    repeat: 5,
    conatinerSelector: 'xxx',
    steps: [
        {
            id: 'xxx',
            type: 'Action',
            actionType: 'click',
            selector: 'xxx',
        },
        {
            id: 'xxx',
            type: 'Action',
            actionType: 'type',
            selector: 'xxx',
        },
    ],
}


```

</details>
