How to use Selenium for testing DocumentEditor

[Csaba Nemes]

DocumentEditor uses canvas internally to represent the editor. How can one access/read the text within the editor and also is it possible to change/edit it from a test tool like Selenium?

[Suriya Murugan]

Hi Csaba, 

Syncfusion Greetings! 

## Select  

You can programmatically select content using select API in DocumentEditor. Then you can access and modify text using Public API based on your requirement. 

You can set cursor position to any where in the document via select API of selection module.  

https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#select 

https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#select-1 

this.container.documentEditor.selection.select({ x: e.offsetX, y: e.offsetY, extend: false }); 

 

You can also select using hierarchal position. 

Sample code snippet 

startOffset 

var startOffset = this.container.documentEditor.selection.startOffset 

endOffset 

 

var endOffset = this.container.documentEditor.selection.endOffset 

select 

 

this.container.documentEditor.selection.select(startOffset, endOffset) 

 

Please check whether this suits your requirement and let us know. 

Note:  

 

hierarchical index will be in below format.  

  

sectionIndex;blockIndex;offset  

  

if block is a paragraph, then the hierarchical index will be like below.  

  

SectionIndex;ParagraphIndex;offset  

  

If the block is a table, then the hierarchical index will be like below.  

  

SectionIndex;TableIndex;RowIndex;CellIndex;BlockIndex;offset  

  

Sample code snippet  

  

this.container.documentEditor.editor.insertText("Welcome")  

this.container.documentEditor.selection.select("0;0;0", "0;0;2")  

The above code will select the letters “We” from inserted text “Welcome”  

## To access text  

  

To retrieve the selected text, DocumentEditor have text API in selection module.  

  

Code snippet:  

this.container.documentEditor.selection.text  

  

API link: https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode   

## Insert Text  

  

DocumentEditor have insertText() API in editor module to insert text in current position.  

  

Code snippet.  

this.container.documentEditor.editor.insertText("Welcome")  

  

API link: https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/#inserttext   

Can you please let us know this will satisfies your requirement? 

Regards, 

Suriya M.