[KShare] How to set text to the CodeMirror Elements

Hi Community members, :wave:

Have you ever run into a situation when you are sure that an element is interactable but then, you still received the error message Caused by: org.openqa.selenium.ElementNotInteractableException: element not interactable?

The textarea element, which regularly experiences that kind of issue, is what we want to focus on in this article.

If that is the case, you need to verify that the textarea belongs to the codemirror class.

If so, we are going to use a specific approach to accurately capture the object. Let’s follow the steps listed below.

Instructions

1. Find the very first tag, include CodeMirror, of the object

2. Define the object with any locators, such as:

  • xPath: //div[@class="CodeMirror cm-s-default"]

  • CSS Selector: .CodeMirror.cm-s-default

Now, we can practice the approach above with the two scenarios below.

Scenario 1: Find and replace a text

Example: Find the text function and replace it with def

import com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword
WebUI.openBrowser('')
WebUI.navigateToUrl('https://codemirror.net/5/demo/theme.html')
def editor = WebUIAbstractKeyword.findWebElement(findTestObject('Object Repository/TextBox_CodeMirror'))
WebUI.executeJavaScript("""
var editor = arguments[0].CodeMirror;
var pattern = arguments[1];
var replacement = arguments[2];
editor.setValue(editor.getValue().replace(pattern, replacement));
""", Arrays.asList(editor, "function", "def"))

Scenario 2 : Replace all current text with different content

import com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword
WebUI.openBrowser('')
WebUI.navigateToUrl('https://codemirror.net/5/demo/theme.html')
def editor = WebUIAbstractKeyword.findWebElement(findTestObject('Object Repository/TextBox_CodeMirror'))
WebUI.executeJavaScript("""
var editor = arguments[0].CodeMirror;
var pattern = arguments[1];
var replacement = arguments[2];
editor.setValue(pattern); """, Arrays.asList(editor, "Just For Testing"))

Additionally, the sample project and video below might make it easier to see how the recommended methodology operates.

Reference

https://dev.azure.com/linhnguyen0979/_git/KShare_CodeMirrorElement


If you find this article helpful, then don’t forget to leave us a big thumb-up :+1:, or a heart :heart: and share it among your colleages and teammate.

3 Likes

Thank you very much the Product Support team (@support.squad), Linh Nguyen (@linh.nguyen), and Thong Tran (@thong.tran) for another insightful KShare article!

Linh Nguyen Thong Tran
Linh Nguyen (@linh.nguyen) - Product Support Manager at Katalon Thong Tran (@thong.tran) - Senior Software Engineer at Katalon
Linh is the Product Support team Manager at Katalon. She spent many years working as an Automation Testing QA before joining Katalon Product Support as a technical support expert. Based on her experiences, she usually provides consumers with highly applicable solutions. She now manages her team with a user-centric approach to guarantee customers greater success with Katalon Products. A passionate Katalon developer with a wealth of programming and testing expertise. Thong has been dedicated to providing exceptional enterprise support for the past five years, helping Katalon’s customers achieve their testing goals with ease.
2 Likes