Click Checkbox Next To Name

[Keenan]

Hello,

I’ve read a few topics and gone over many manuals but can’t seem to get the code right for what I think should be a very simple request.

I would like UI.Vision to:

• Find the name on the page
• Click the checkbox next to the name

Source Code (Checkbox):

<\div class=“fab-Checkbox js-fab-table-checkbox”><\input aria-label=“Select row 12444” class=“fab-Checkbox__input js-fab-table-checkbox-input” id=“fabricTableCheckboxCell-12444” readonly=“” type=“checkbox” style=“cursor: pointer; height: 100%; width: 100%; z-index: 1;”><\span class=“fab-Checkbox__box”><\label aria-label=“Select row 12444” class=“fab-Checkbox__label” for=“fabricTableCheckboxCell-12444”>

Any help would be super appreciated!

[Plankton]

First the classic HTML “Selenium” approach:

UI.Vision can execute XPath expressions, which can be used to navigate the DOM of the webpage. If each name in the table is within a predictable structure (like the same table row as the checkbox), you could write an XPath expression to find the checkbox based on the name’s position. Here is an example assuming the name and checkbox are in the same table row:

{
  "Name": "CheckNameCheckbox",
  "CreationDate": "2024-03-28",
  "Commands": [
    {
      "Command": "click",
      "Target": "xpath=//div[contains(text(),'John Doe')]/../..//input[@type='checkbox']",
      "Value": ""
    }
  ]
}

In this example, the XPath finds a div containing the text “John Doe”, then navigates up two levels to the common parent element (presumably the table row), and then looks for an input of type checkbox within that parent element. Adjust the XPath as necessary to match the actual structure of your HTML.

Of course, since I have no access to the website, I can not test this RPA code snippet.

See also this post on how to extract text to another text. That is roughly the same issue.

[Plankton]

The second approach is using computer vision/OCR.

Here we use

XClickTextRelative | John Doe#R-5,-1

This command finds the text “John Doe” in the browser viewport, and then moves 5 chars to the left, and 1 char down (hence the command name “…relative…”) and clicks the checkbox. I found the -5,-1 values by experimenting with the “Find” button.

Macro:

{
  "Name": "ClickNEXTtoNAME",
  "CreationDate": "2024-3-28",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://forum.ui.vision/t/click-checkbox-next-to-name/14729",
      "Value": "",
      "Description": ""
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"post_1\"]/div/div[2]/div[2]/div/ul/li",
      "Value": "",
      "Description": "scroll \"table screenshot\" into view"
    },
    {
      "Command": "XClickTextRelative",
      "Target": "John Doe#R-5,-1",
      "Value": "",
      "Description": ""
    }
  ]
}