用于从 Tinymce 编辑器中提取文本的 Selenium JS 代码

Question

在 https://ocr.sanskritdictionary.com/ 上传图像后，可复制的文本将出现在 Tinymce 编辑器中。有人可以建议如何使用 Slenium Javascript webdriver 代码复制结果文本吗？

我尝试使用文本的 html body id 来提取它，但没有成功。我也尝试了Gemini建议的这个方法，没有成功：

    // Wait for the Tinymce editor to appear (adjust the timeout as needed)
    const tinymceEditor = await driver.findElement(By.id(tinymceId));
    await driver.wait(
      () => tinymceEditor.isDisplayed(),
      60000 // Wait for up to 10 seconds
    );

    // Execute JavaScript to get the content from the Tinymce editor
    const text = await driver.executeScript(
      'return document.getElementById("' + tinymceId + '").innerHTML;',
      tinymceEditor
    );

感谢您的建议

Answer 1

问题是 TinyMCE 将其内容包装在 iframe 内，而您当前的方法是尝试直接通过元素的 innerHTML 访问内容，这是行不通的，因为实际内容位于 iframe 内。

要从TinyMCE编辑器获取内容，您需要切换到TinyMCE使用的iframe，然后使用TinyMCE API检索内容。具体方法如下：

// Wait for the TinyMCE editor to be ready
const tinymceEditor = await driver.findElement(By.id(tinymceId));
await driver.wait(() => tinymceEditor.isDisplayed(), 60000); // Wait up to 60 seconds

// Switch to the TinyMCE iframe
await driver.switchTo().frame(driver.findElement(By.css('#' + tinymceId + '_ifr')));

// Get the content from the TinyMCE editor
const text = await driver.executeScript('return tinyMCE.activeEditor.getContent();');

// Switch back to the main document
await driver.switchTo().defaultContent();

console.log('TinyMCE content:', text);

这里发生了什么：

• 切换到 iframe：TinyMCE 将其编辑器内容放入 iframe 中，因此我们必须首先将 Selenium 上下文切换到该 iframe。
• 获取内容：tinyMCE.activeEditor.getContent();是一个 TinyMCE API 调用，可为您提供编辑器内的内容。
• 切换回来：抓取内容后，切换回主文档，以便您可以继续与页面上的其他元素进行交互。

这应该会为您提供来自 TinyMCE 编辑器的正确内容。