3

I have a web page that has the ngx-monaco-editor implemented in angular. But i am not able send any data to the editor using sendKeys() . I tried replacing textContent of the div element but it just displays the text in the editor but the other components does not detect that the text was entered.

Is there a way to properly send input to the ngx-monaco-editor using selenium protractor?

An example website would be :

https://stackblitz.com/edit/ngx-monaco-editor-example

I am not able to send values to the editor

Code i tried:

await browser.get('https://stackblitz.com/edit/ngx-monaco-editor-example')   

await browser.sleep(10000)

await element(by.xpath('(//*[@class="view-line"])[1]')).sendKeys('some test')

Error i get:

Element <div class="view-line"> is not reachable by keyboard
5

If you are not sure about the locator then you can use the action class sendKeys method to interact with the field.

Here, it interacts with the active (currently focused ) element.

So the first step is to bring the element to focus, this can be done by just clicking it:

await browser.get('https://stackblitz.com/edit/ngx-monaco-editor-example')      
await browser.sleep(10000)
await  $('[class="view-line"]').click()
await browser.sleep(4000)

Now you can see the cursor is at the below place:

enter image description here

Now you can interact with the element using browser.actions():

await browser.actions().sendKeys('This is test').perform();

this will send input to the currently active element:

enter image description here

Now let us look deeper to find out the locator:

We now know that the sendKey using action works, so we can find the locator from the active element:

The outerHTML of the active element gives the locator:

await  $('[class="view-line"]').click()
let test = await browser.driver.switchTo().activeElement()
console.log("outer");
console.log(await test.getAttribute('outerHTML'))
//await test.sendKeys("a=1;c=a+10;") if you try this you can see even this sends data

Output:

<textarea data-mprt="6" class="inputarea" wrap="off" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="Editor content;Press Alt+F1 for Accessibility Options." role="textbox" aria-multiline="true" aria-haspopup="false" aria-autocomplete="both" style="font-size: 1px; line-height: 18px; top: 0px; left: 562px; width: 1px; height: 1px;"></textarea>

So the input element is the text area, and you can send data to this element. Try

$('textarea[class="inputarea"]').sendKeys('something');

Note: you can use this approach of getting outer HTML of the active element in cases where you are not sure about the element but browser actions work.

Summary:

So you can use two approaches:

1:

await elem.click()
await browser.actions().sendKeys('This is test').perform();

2:

await elem.click()
let field= await browser.driver.switchTo().activeElement()
await field.sendKeys("HI");

you can find the locator or element as:

await field.getAttribute('outerHTML');
| improve this answer | |
  • That worked out perfectly,Thank you – John Jan 22 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.