Selecting Material UI items doesn't work on playback

Our React app is using Material UI and instead of drop-down/select boxes, the original developers chose to go with a that contains an array of “MenuItem” from the MUI core.

Trying to automate the first page with two such drop downs, the record says it worked, but PlayBack fails when trying to select from the second “select” box.

Here’s a screenshot of the two elements on the page:
image

Here’s the playback screen image:

And here’s the code that was generated (I’m trying to automate through several such pages so have added only the first/relevant portions):

{
  "CreationDate": "2018-10-25",
  "Commands": [
    {
      "Command": "open",
      "Target": "http://localhost:3000/create",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "//*[@id=\"root\"]/div/div/div[2]/div/div/div[2]/div/div[1]/div/form/div[1]/div/div/div",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "//*[@id=\"root\"]/div/div/div[2]/div/div/div[2]/div/div[1]/div/form/div[1]/div/div/div",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "//*[@id=\"menu-\"]/div[2]/ul/li[4]",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "//*[@id=\"menu-\"]/div[2]/ul/li[4]",
      "Value": ""
    },

Maybe the new XClick command works? To test, you only need to replace Click with XClick. (this requires the kantu beta).

1 Like

Thanks; I’ll give that a try

Thanks; that works. Now another question (or I can post separately).

If one of my drop-down values changes (say I need to select ‘18T’ instead of ‘18S’, how do I change the Xpath select string to get the newer value? The Xpath string looks to be identical for different values in that MUI drop-down.

//*[@id="root"]/div/div/div[2]/div/div/div[2]/div/div[1]/div/form/div[1]/div/div/div

I also tried using the ‘Select’ option for the command and it selects the drop-down element itself (I see it flash yellow) but then even though I select the new value, the Xpath isn’t updated and it still selects the old value.

Thanks

NVM; I figured it out – there’s a subsequent command that selects the nth div