[FIXED] What is the best way to click on element with selenium where id is changing dynamically?

Issue

I have web-page where I am trying to automate publishing of products with Selenium.

You can check situation here: https://player.vimeo.com/video/767368522?h=a8feaf8791

I am able to click onto everything else but this button (because the id the number part is automatically generated).

I've thought of selecting it by class_name, by XPATH but it seems like it's just not ok...

This is the HTML structure:

<div id="mceu_104" class="mce-container mce-panel mce-floatpanel mce-window mce-in" hidefocus="1" role="dialog" aria-describedby="mceu_104-none" aria-label="Source code" style="border-width: 1px; z-index: 65536; left: 447px; top: 34px; width: 640px; height: 361px;">
   <div class="mce-reset" role="application">
      <div id="mceu_104-head" class="mce-window-head">
         <div id="mceu_104-title" class="mce-title">Izvorni kod</div>
         <button type="button" class="mce-close" aria-hidden="true">×</button>
         <div id="mceu_104-dragh" class="mce-dragh"></div>
      </div>
      <div id="mceu_104-body" class="mce-container-body mce-window-body mce-abs-layout" style="width: 640px; height: 271px;">
         <div id="mceu_104-absend" class="mce-abs-end"></div>
         <div id="mceu_105" class="mce-container mce-form mce-abs-layout-item mce-first mce-last" style="left: 0px; top: 0px; width: 640px; height: 271px;">
            <div id="mceu_105-body" class="mce-container-body mce-abs-layout" style="width: 640px; height: 271px;">
               <div id="mceu_105-absend" class="mce-abs-end"></div>
               <textarea id="mceu_106" class="mce-textbox mce-multiline mce-abs-layout-item mce-first mce-last" hidefocus="1" spellcheck="false" style="direction: ltr; text-align: left; left: 20px; top: 20px; width: 590px; height: 221px;"></textarea>
            </div>
         </div>
      </div>
      <div id="mceu_107" class="mce-container mce-panel mce-foot" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px; left: 0px; top: 0px; width: 640px; height: 50px;">
         <div id="mceu_107-body" class="mce-container-body mce-abs-layout" style="width: 640px; height: 50px;">
            <div id="mceu_107-absend" class="mce-abs-end"></div>
            <div id="mceu_108" class="mce-widget mce-btn mce-primary mce-abs-layout-item mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_108" role="button" style="left: 508.975px; top: 10px; width: 58.025px; height: 28px;"><button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;"><span class="mce-txt">U redu</span></button></div>
            <div id="mceu_109" class="mce-widget mce-btn mce-abs-layout-item mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_109" role="button" style="left: 572px; top: 10px; width: 56px; height: 28px;"><button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;"><span class="mce-txt">Otkaži</span></button></div>
         </div>
      </div>
   </div>
</div>

So I would need to click onto this element:

<button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;"><span class="mce-txt">U redu</span></button>

This is my code:

 final_description = html_and_css + csvproductDescription + html_and_css2
    WebDriverWait(driver, 2).until(EC.visibility_of_element_located((By.CLASS_NAME, 'mce-textbox'))).send_keys(final_description)

    WebDriverWait(driver, 2).until(EC.visibility_of_element_located((By.ID, 'mceu_108'))).click()

Can anyone help me, as this seems to be using tinymce and these ID's are generating automatically...

Thanks!

Solution

To click on the button U redu you can use any of the xpath option

WebDriverWait(driver, 5).until(EC.visibility_of_element_located((By.XPATH, '//button[.//span[text()="U redu"]]'))).click()

OR

WebDriverWait(driver, 5).until(EC.visibility_of_element_located((By.XPATH, '//button[contains(.,"U redu")]'))).click()

Answered By - KunduK