How to interact with ngx-monaco-editor



  • 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
    


  • 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');
    


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2