JavaScript code utilizing Selenium to retrieve text from a Tinymce text editor

When using https://ocr.sanskritdictionary.com/ to upload an image, the copyable text appears in a Tinymce editor. I am looking for suggestions on how to copy the resulting text using Selenium JavaScript code.

I have attempted to extract it using the html body id of the text, but it was unsuccessful. I also tried the method recommended by Gemini, which did not work:

    // 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
    );

Any suggestions would be greatly appreciated. Thank you.

javascriptselenium-webdriver

Answer №1

The issue lies in the fact that TinyMCE wraps its content within an iframe. Your current method attempts to access the content directly through the element's innerHTML, which is unsuccessful as the actual content is enclosed within the iframe.

To extract the content from a TinyMCE editor, you must switch to the iframe that houses TinyMCE and then utilize the TinyMCE API to retrieve the content. Here is a step-by-step guide:

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

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

// Retrieve 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);

Explanation of the steps:

  • Switching to the iframe: Since TinyMCE places its editor content inside an iframe, it is necessary to switch the Selenium context to that specific iframe initially.
  • Fetching the content: tinyMCE.activeEditor.getContent(); is an API call provided by TinyMCE that returns the content within the editor.
  • Returning to the main document: Once the content is extracted, switch back to the main document to continue interacting with other elements on the webpage.

By following these steps, you should obtain the accurate content from the TinyMCE editor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

Guide to parsing JSONP information using Express

I am attempting to transfer data from phonegap to an express application. Below is the code I am using: Phonegap: $.ajax({ type: 'POST', url:"http://127.0.0.1:3000/test", data: {"test":"this works!"}, dataTyp ...

javascriptjsonnode.jscordovaexpress

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

javascripthtml

The combination of Selenium-Webdriver with the Chai as Promised framework and Mocha struggling with delayed execution

In my simple coffeescript test with Selenium-Webdriver, I am using Chai-as-Promised and Mocha to test a web page that involves an AJAX call for authentication when a login button is clicked. selenium = require 'selenium-webdriver' chai = require ...

selenium-webdrivercoffeescriptmocha.jschai-as-promised

Tips on how to connect the scope from a controller to a custom directive in Angular

Currently, I am delving into the world of Angular and finding myself immersed in directive lessons. However, as I engage in some practice exercises, I have encountered a stumbling block. Specifically, I have developed a custom directive with the intention ...

javascriptangularjs

Retrieving data from JSON in JavaScript

Extracting data from a JSON file and using a JavaScript script to visualize it through a graph. JSON file link: https://i.sstatic.net/1gqov.png The JavaScript code responsible for drawing the graph is as follows: $(document).ready(function(){ google. ...

javascriptjsoncharts

Using the md-date-picker along with the md-menu component

Whenever I try to click on the md-date-picker inside md-menu, it unexpectedly closes. You can view the issue on this CodePen link. This seems to be a bug related to ng-material as discussed in this GitHub issue. Any suggestions for a workaround? Here is t ...

javascriptangularjsangular-material

Turn off the whole DIV container and its contents once the button is clicked

Here's an example of the HTML markup: <div id="picing-selection" class="disableMe"> <a class="upgradeSub" value="@ViewBag.Id"> Upgrade <i class="fa fa-money"></i> </a> </div> The onclick event is d ...

javascriptjqueryhtmlonclick

Node, Express, and Angular redirection problem encountered

I have a web application built with node, express, and angular. The app consists of two main pages - a user profile page and a login page. My goal is to redirect any user who is not logged in to the login page when they try to access the profile page. Howe ...

javascriptnode.jsangularjsexpress

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

javascriptjquerycsswebmedia-queries

Mastering the Art of Accelerating getJSON Array Data

Currently, I am facing a challenge with retrieving a large array (4MB) of data from the server side. I have been utilizing the jQuery getJSON method to obtain the array data and display it on the browser. However, this process has proven to be quite slow ...

javascriptajaxarraysjson

What causes my Excel file to become corrupted when inputting new data?

My intention with this code is to insert "ABC" into cell B3 of an existing Excel document. However, when the file is written, its size decreases significantly and Excel is unable to open it. const excel = require("exceljs"); const template = "./myexcel.xl ...

javascriptnode.jsexceljs

Tips for passing parameters in an AJAX request

I have a single AJAX call that requires passing parameters to my function. Below is the AJAX call implementation: $.ajax({ url: 'lib/function.php', data: { action: 'getStoreSupplyItems', id: store_id, ...

javascriptphpjqueryajax

Guide on generating a route using coordinates in a threejs environment

Currently, I am working with an array of coordinates obtained from the Google Maps Navigation API. I have successfully plotted these coordinates on a sphere, however, my objective is to extract the shape of the path by combining all the coordinate points ...

javascript3dthree.js

Using Angular, we can assign an array iteration as the value for a dropdown option in

Following the controller logic: $scope.form_data = { day: 'Day' }; $scope.days = [ 'Day',1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20, 21,22,23,24,25,26,27,28,29,30, 31 ]; In the html section: <select n ...

javascriptarraysangularjs

How can I adjust the font size of material-ui buttons while ensuring that they scale appropriately?

Having trouble adjusting the font sizes on Material-UI's RaisedButton for React and ensuring that the button scales properly along with it. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText ...

javascriptcssreactjsmaterial-uijsx

Output each element of an array in Vuejs2 with a line break between each

I am currently working with vuejs2 and have a select tag where a person is selected, with their address properties directly bound to the element. I need to display the address of the selected person. I attempted to use an array in order to print out the el ...

javascriptvue.jsvuejs2

Swap out the traditional for loop with a LINQ query utilizing the any method

In my TypeScript code, I have the following snippet: public executeTest(test: Test): void { const testFilters: Record<string> = getTestFilters(); let isTestingRequired: boolean = false; for (let i: number = 0; i < testFilters.leng ...

javascripttypescriptlinqlambdaany

Bootstrap3 Remote Modal experiencing conflict due to Javascript

Utilizing a bootstrap modal to showcase various tasks with different content but the same format is my current goal. However, I am encountering an issue when attempting to make the textareas editable using JavaScript. The conflict arises when I open and cl ...

javascriptphpjquerymodal-dialogbootstrap-modal

Does the useState hook have any connection to hoisting in React?

I am relatively new to React.js and JavaScript, currently working on a project where I need the ability to manually update my components as needed, due to limitations with a third-party library. After doing some research, I came across a pattern on the of ...

javascriptreactjsreact-hooks