Dynamically capture and interact with controls

更新时间:
复制 MD 格式

This article describes how to dynamically capture controls to perform actions during an automation flow's runtime.

Overview

When you automate a UI, you may need to interact with UI elements based on dynamic content. For example:

  • Filling out an address. You might need to select a province, city, and county in sequence from drop-down lists that do not support direct text input. The required address may be different each time the automation flow runs.

    image

  • Selecting a specific date from a calendar. The required date may change each time the automation flow runs.

    image

  • Interacting with custom drop-down lists. While these lists often provide a rich user experience, they are sometimes built with elements like ul and li instead of the standard HTML select tag. This means you cannot use standard actions like option or Set Drop-down List (Web). Additionally, the options in these lists are dynamic and change each time the automation flow runs.

    image

In these situations, you can use a control property variable to dynamically capture and interact with the required controls.

Examples

Example: Dynamically select from a drop-down list

This example shows how to select a namespace in the Container Registry (ACR) console. Because the options are user-created, they cannot be hard-coded in the automation flow and must be selected dynamically at runtime.

image

Implementation

  • Main idea: First, click the drop-down list to display the options. Then, dynamically set a control property to interact with the target control.

  • Control configuration:

    • The drop-down list control:

      image

    • The option control: The outertext property is set to $namespace, which is a control property variable. At runtime, you can assign a value to this variable. This allows the flow to capture and interact with the corresponding control.

      image

  • In scripting mode, use the ctrls.variable.assign method to assign a value to the control property variable.

    page = rpa.app.chrome.create('https://cr.console.aliyun.com/cn-hangzhou/instance/repositories')
    # Click the drop-down list
    page.click('select')
    # Use ctrls.variable.assign to set $namespace to 'other0123'
    ctrls.variable.assign('$namespace','other0123')
    # Click the option
    page.click('select-item')
  • In visual development mode, the process is as follows:

    image

    You still use the Custom Script component to assign the value with ctrls.variable.assign.

    image

Example: Select a date in a calendar

This example shows how to select a specific year, month, and day in a calendar.

image

Implementation

  • Main idea: Selecting the year and month involves a drop-down list-like interaction. First, click the list to display the options, then dynamically select the target value. Finally, click the specific day.

  • Control configuration:

    • To select the year, set the outertext property of the option control to $year, a control property variable. A similar approach applies to selecting the month, which uses a $month variable.

      image

    • For the day control, set the outertext property to $day.

      image

  • In scripting mode, use ctrls.variable.assign to assign values to the control property variables. The following script selects the date March 11, 2024.

    page = rpa.app.chrome.create("https://www.baidu.com/s?wd=%E6%97%A5%E5%8E%86")
    # Select the year
    page.click('select_year')
    ctrls.variable.assign('$year','2024年')
    page.click('item_year')
    
    # Select the month
    page.click('select_month')
    ctrls.variable.assign('$month','3月')
    page.click('item_month')
    
    # Select the day
    ctrls.variable.assign('$day','11')
    page.click('item_day')
    

Control property variables

  • A control property variable name must start with a dollar sign ($).

  • Control property variables can only be used in control properties. The same control property variable can be used by multiple controls.

  • A control property variable is scoped to the current project. Its scope includes all controls in the Project Control List but excludes imported custom components.

  • The ctrls.variable.assign method supports assigning a value to the same control property variable multiple times. The value must be a string.