如何用Selenium定位并点击ID动态生成的TinyMCE按钮？

问题说明 #

使用Selenium实现产品发布自动化，页面采用TinyMCE编辑器。其他元素均可正常交互，但弹窗中的确认按钮（显示文本为“U redu”）因ID为动态生成（如示例中的mceu_108）无法准确定位，尝试过class_name、XPATH定位均未成功。

相关HTML结构 #

<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>

目标按钮 #

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

当前代码 #

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()

解决方案 #

1. 基于按钮文本的XPATH定位 #

利用按钮内固定的文本“U redu”定位，这是最可靠的方式之一：

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

如果需要更精准（避免页面其他地方有相同文本的按钮），可以结合TinyMCE弹窗的上下文（role="dialog"的容器）：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//div[@role='dialog' and contains(@class,'mce-window')]//button[.//span[text()='U redu']]"))).click()

2. 结合class属性定位 #

目标按钮所在的父div带有mce-primary类（标识主操作按钮），可以通过这个类定位：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'mce-primary')]//button"))).click()

3. 调整等待时间 #

原代码中等待时间仅2秒，可能因弹窗加载延迟导致定位失败，建议延长至10秒，确保元素完全加载可交互。

内容的提问来源于stack exchange，提问作者smack857