XMove X,Y relative to current X,Y Mouse position

Hello,

I am trying to move an Ionic 3 range slider.
It works when the slider is configured to display ‘ticks’ on the slider, in this case I can use xpath for #DOWN and #UP.
When the slider has no ‘ticks’ configured, I have no element to attach to.
I tried to XMove to ‘400,0’ hoping this would be relative to current Mouse position, but it is relative to viewport.
I tried XMoveRelative but only accept vision image, that i don’t want to use to be as generic as possible (slider can change color, position, aspect).
Is there any thing I can do to achieve my goal ?
Thank you.
Here is a demo script:

{
  "Name": "fill_range-ionic",
  "CreationDate": "2021-4-22",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://ionicframework.com/docs/v3/demos/src/range/www/?production=true&ionicplatform=ios",
      "Value": ""
    },
    {
      "Command": "store",
      "Target": "8",
      "Value": "range"
    },
    {
      "Command": "XMove",
      "Target": "xpath=//ion-range[@color='danger']/div[@class='range-slider']//div[@aria-valuenow='1300']/div[@class='range-knob']",
      "Value": "#DOWN"
    },
    {
      "Command": "comment",
      "Target": "When ticks are present:",
      "Value": ""
    },
    {
      "Command": "XMove",
      "Target": "xpath=(//ion-range[@color='danger']/div[@class='range-slider']//div[contains(@class,'range-tick')])[${range}*1+1]",
      "Value": "#UP"
    },
    {
      "Command": "comment",
      "Target": "when there are no ticks would like to move relative:",
      "Value": "1000"
    },
    {
      "Command": "XMove",
      "Target": "xpath=//ion-range[@color='secondary']/div[@class='range-slider']//div[@class='range-knob']",
      "Value": "#DOWN"
    },
    {
      "Command": "XMove",
      "Target": "400,0",
      "Value": "#DOWN"
    }
  ]
}

I must admit that I easilly managed to make it work with XMoveRelative and a vision image (setting green and pink boxes). I will try on my real use case, but if possible I’d rather not use vision image.

Thx

I am not sure I understand the situation. Can you please add a screenshot?

Here is what I would like to achieve with the Xmove command and an offset to move the mouse:
ui.vision.ionic.slider

Thx

Thanks for the video, I think I understand now!

The good news first: I found a solution using visionLimitSearchArea | element:xpath=ion-list[3]. => This way you can use XPath locator to select the area of the slider you need, and then XMove | image finds the correct slider.

The bad news: I also found a bug, so my solution does not work yet :wink: => We will fix the bug with the next update in 1-2 weeks and then my solution will work. I will post more details and a screen video then.


Edit April 29: Solution now in comment #8

Meanwhile here is a “second-best” solution that does not use visionLimitSearchArea. Instead it uses @0.8#3 to select the 3rd slider (“Warmth”).

    {
      "Name": "slider",
      "CreationDate": "2021-4-26",
      "Commands": [
        {
          "Command": "open",
          "Target": "https://ionicframework.com/docs/v3/demos/src/range/www/?production=true&ionicplatform=ios",
          "Value": ""
        },
        {
          "Command": "comment",
          "Target": "click // xpath=//ion-list[2]",
          "Value": ""
        },
        {
          "Command": "comment",
          "Target": "visionLimitSearchArea // element:xpath=xpath=//ion-list[2]",
          "Value": ""
        },
        {
          "Command": "XMove",
          "Target": "ball_dpi_168.png@0.8#3",
          "Value": "#down"
        },
        {
          "Command": "echo",
          "Target": "Starting point: x=${!imagex} y=${!imagey}",
          "Value": "green"
        },
        {
          "Command": "store",
          "Target": "${!imagex}",
          "Value": "x"
        },
        {
          "Command": "store",
          "Target": "${!imagey}",
          "Value": "y"
        },
        {
          "Command": "executeScript_Sandbox",
          "Target": "return Number (${x}) +300",
          "Value": "x"
        },
        {
          "Command": "XMove",
          "Target": "${x},${y}",
          "Value": "#up"
        }
      ]
    }

Thank you for your help and solution.

This is the solution with visionLimitSearchArea (V6.2.2, available soon).

You can use XPath locator to limit the image search the area of the slider you need, and then

XClick | image

finds the correct slider. The x/y of this point is stored in ${!imagex},${!imagey}.

visionLimitSearchArea

The advantage compared to the @0.8#3 method is that any image after visionLimitSearchArea searches only search this small area. So this solution is faster.

    {
      "Name": "slider1",
      "CreationDate": "2021-4-29",
      "Commands": [
        {
          "Command": "open",
          "Target": "https://ionicframework.com/docs/v3/demos/src/range/www/?production=true&ionicplatform=ios",
          "Value": "",
          "Description": ""
        },
        {
          "Command": "click",
          "Target": "xpath=/html/body/ion-app/ng-component/ion-nav/ng-component/ion-content/div[2]/ion-list[3]",
          "Value": "",
          "Description": "WARMTH slider. The Click command is NOT needed. We used it only to get the right XPath"
        },
        {
          "Command": "comment",
          "Target": "click // xpath=/html/body/ion-app/ng-component/ion-nav/ng-component/ion-content/div[2]/ion-list/ion-item",
          "Value": "",
          "Description": "Test Xpath of BRIGHTNESS Slider area"
        },
        {
          "Command": "comment",
          "Target": "visionLimitSearchArea // element:xpath=/html/body/ion-app/ng-component/ion-nav/ng-component/ion-content/div[2]/ion-list[1]",
          "Value": "",
          "Description": "Limit image search to  BRIGHTNESS Slider Area"
        },
        {
          "Command": "visionLimitSearchArea",
          "Target": "element:xpath=/html/body/ion-app/ng-component/ion-nav/ng-component/ion-content/div[2]/ion-list[3]",
          "Value": "",
          "Description": "Limit image search to WARMTH Slider Area"
        },
        {
          "Command": "XClick",
          "Target": "ball_dpi_170.png",
          "Value": "",
          "Description": ""
        },
        {
          "Command": "echo",
          "Target": "Starting point: x=${!imagex} y=${!imagey}",
          "Value": "green",
          "Description": ""
        },
        {
          "Command": "XMove",
          "Target": "${!imagex},${!imagey}",
          "Value": "#down",
          "Description": ""
        },
        {
          "Command": "store",
          "Target": "${!imagex}",
          "Value": "x",
          "Description": ""
        },
        {
          "Command": "store",
          "Target": "${!imagey}",
          "Value": "y",
          "Description": ""
        },
        {
          "Command": "executeScript_Sandbox",
          "Target": "return Number (${x}) +100",
          "Value": "x",
          "Description": ""
        },
        {
          "Command": "XMove",
          "Target": "${x},${y}",
          "Value": "#up",
          "Description": ""
        }
      ]
    }

Thank you, works as expected in UI RPA 6.2.2