sbase recorder generated script contains random dom uid selection

[dashng]

We met an issue to improve the effecient of UI testing. We found the script which generated by sbase recorder contains random uid as dom node selection string. The node id is auto random rendered. after recording, we run the script, it will failed as the node id not found. Do we have another option to location node with xPath or css? Or can we customize the code to support xPath or css as selection condition? Appreciate your any commnets.

[mdmintz]

The Recorder does the best that it can to choose a good selector. It cannot easily predict if a selector is going to change (Eg. one that is generated at random on each page load). Must be a CSS Selector (not XPath).

After the script is generated, you can change any selectors as needed.

If you showed me the HTML of the element you're trying to capture, I could theoretically improve the Recorder. The information you provided so far is not enough for me to work with.

[dashng]

@mdmintz Appreciate your prompt reply. please check the example about the issue:

I recorder script like below:

from seleniumbase import BaseCase
BaseCase.main(__name__, __file__)

class RecorderTest(BaseCase):
    def test_recording(self):
        self.open("http://10.124.45.128/")
        self.type("input#userid", "test@test.com")
        self.type('input[name="password"]', "Pa55word123!")
        self.click("div#root > div > div")
        self.click('button:contains("Continue")')
        self.click('li[id="9a4af2b418##e6f0c854a1"]')
        self.click('li[id="9a4af2b418##e6f0c854a1##cea6e8473b"]')
        self.click('li[id="9a4af2b418##e6f0c854a1##06c234f4a1"]')
        self.click('li[id="9a4af2b418##12244b6c23"]')
        self.click('li[id="9a4af2b418##12244b6c23##094f0133ca"]')
        self.click('button:contains("New Service")')
        self.click('svg[data-testid="CloseIcon"]')
        self.click('li[id="9a4af2b418##e6f0c854a1##cea6e8473b"]')
        self.click('input[aria-label="Select row"]')
        self.check_if_unchecked('input[aria-label="Unselect row"]')
        self.click('button:contains("Edit")')
        self.click('svg[data-testid="CloseIcon"]')
        self.click('li[id="9a4af2b418##24c63d6174##822ca24bbd"]')
        self.click('input[aria-label="Select row"]')
        self.check_if_unchecked('input[aria-label="Unselect row"]')
        self.click('button:contains("Edit")')
        self.click('svg[data-testid="CloseIcon"]')

When I execute the script, the error id not found raised.

[mdmintz]

I still need to see the outer html of one of those <li> elements in order to make improvements to the Recorder.

[dashng]

@mdmintz Please check the html below:

<nav class="MuiList-root MuiList-padding css-1kfhskd" aria-labelledby="nested-list-subheader">
   <div class="MuiBox-root css-0">
      <ul class="jss4" level="1">
         <li label="" class="menuItem" id="0ded9a812b" level="1">
            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrowIcon css-1yz0o3h" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
               <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
            </svg>
            <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="#" style="padding-left: 0.8rem; padding-right: 1rem;">CA</a>
            <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-a0y2e3" style="min-height: 0px;">
               <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5">
                  <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb">
                     <ul class="jss4" level="2">
                        <li label="US" class="menuItem" id="0ded9a812b##a1f36bd9cc" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/uuu" style="padding-left: 1.6rem; padding-right: 1rem;">User</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="RL" class="menuItem" id="0ded9a812b##ed8d7e717e" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/mr" style="padding-left: 1.6rem; padding-right: 1rem;">R</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
      </ul>
      <ul class="jss4" level="1">
         <li label="" class="menuItem" id="94271e259d" level="1">
            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrowIcon css-1yz0o3h" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
               <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
            </svg>
            <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="#" style="padding-left: 0.8rem; padding-right: 1rem;">PC</a>
            <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-a0y2e3" style="min-height: 0px;">
               <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5">
                  <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb">
                     <ul class="jss4" level="2">
                        <li label="cmy" class="menuItem" id="94271e259d##a83dae6d8d" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/company" style="padding-left: 1.6rem; padding-right: 1rem;">Company</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="men" class="menuItem" id="94271e259d##085d22eb0b" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/menu" style="padding-left: 1.6rem; padding-right: 1rem;">men</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="mr" class="menuItem" id="94271e259d##df71d4dcd8" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/mrc" style="padding-left: 1.6rem; padding-right: 1rem;">MRE</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="Menu Configuration" class="menuItem" id="94271e259d##e93e3a1a7c" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/mcc" style="padding-left: 1.6rem; padding-right: 1rem;">MCC</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="SCO" class="menuItem" id="94271e259d##42011e2858" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/sco" style="padding-left: 1.6rem; padding-right: 1rem;">SCM</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
      </ul>
      <ul class="jss4" level="1">
         <li label="" class="menuItem" id="1673731cad" level="1">
            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrowIcon css-maamqg" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
               <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
            </svg>
            <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="#" style="padding-left: 0.8rem; padding-right: 1rem;">MC</a>
            <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr" style="min-height: 0px;">
               <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5">
                  <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb">
                     <ul class="jss4" level="2">
                        <li label="" class="menuItem" id="1673731cad##9b5f4a7435" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/msr" style="padding-left: 1.6rem; padding-right: 1rem;">SSC</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="" class="menuItem" id="1673731cad##cd5365ada6" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink menuSelected css-a5t1y0" href="/sms" style="padding-left: 1.6rem; padding-right: 1rem;">SM</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
      </ul>
      <ul class="jss4" level="1">
         <li label="" class="menuItem" id="ccfc478a7d" level="1">
            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrowIcon css-1yz0o3h" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
               <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
            </svg>
            <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="#" style="padding-left: 0.8rem; padding-right: 1rem;">SEN</a>
            <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-a0y2e3" style="min-height: 0px; height: 0px; transition-duration: 300ms;">
               <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5">
                  <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb">
                     <ul class="jss4" level="2">
                        <li label="Notification Mail Configuration" class="menuItem" id="ccfc478a7d##553a68c29d" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/event_notification_configuration" style="padding-left: 1.6rem; padding-right: 1rem;">Notification Mail Configuration</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="ENN" class="menuItem" id="ccfc478a7d##2eb2dc0292" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/enn" style="padding-left: 1.6rem; padding-right: 1rem;">ENN</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
      </ul>
      <ul class="jss4" level="1">
         <li label="" class="menuItem" id="549d8c7fef" level="1">
            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrowIcon css-maamqg" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon">
               <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
            </svg>
            <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="#" style="padding-left: 0.8rem; padding-right: 1rem;">IS</a>
            <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr" style="min-height: 0px; height: auto; transition-duration: 300ms;">
               <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5">
                  <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb">
                     <ul class="jss4" level="2">
                        <li label="" class="menuItem" id="549d8c7fef##4030eec56d" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/is" style="padding-left: 1.6rem; padding-right: 1rem;">ISS</a></li>
                     </ul>
                     <ul class="jss4" level="2">
                        <li label="" class="menuItem" id="549d8c7fef##4c37071899" level="2"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways menuLink  css-a5t1y0" href="/ist" style="padding-left: 1.6rem; padding-right: 1rem;">HCD</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
      </ul>
   </div>
</nav>

[mdmintz]

I think I can improve the Recorder for that in the next SeleniumBase release.

[dashng]

I think I can improve the Recorder for that in the next SeleniumBase release.

Is there any temporary fix for this?

[dashng]

I think I can improve the Recorder for that in the next SeleniumBase release.

Is there any temporary fix for this?

I mean May I have a temporary fix with your guide and re-package the code?

[mdmintz]

See https://github.com/seleniumbase/SeleniumBase/issues/1876#issuecomment-1541199499 for the temporary fix.

[dashng]

See #1876 (comment) for the temporary fix.

Appreciate for your continued support on this issue. @mdmintz I am using below commmand to generate testing script:

sbase mkrec TEST_NAME.py --url=URL

My quesiton is where / how to execute the command to remove id attributes?

self.remove_attributes("[id]", "id")

Thanks

[mdmintz]

Execute commands on the command-line during a breakpoint().

[dashng]

Execute commands on the command-line during a breakpoint().

I will try, thanks alot.

[mdmintz]

The Recorder has been improved in SeleniumBase 4.28.0.