如何在 CodeMirror 编辑器中使用 selenium 模拟关键事件

Question

There are plenty of examples around that show how to use the following to enter text using selenium

driver.execute_script('cm.setValue("text")');

This works, but isn't very "selenium" of us. We want to simulate actual keyboard key presses like the send_keys function in selenium. We created a enterFormData that gets an element and types to it using driver.send_keys() (eg a textarea with an ID we can easily simulate typing) . How can we simulate actual key presses into the CodeMirror editor? We also want to be able to test HotKeys (eg Ctrl-Shift-M) and then take a driver.get_screenshot_as_base64()

Answer 1

For selenium to detect the keyboard events, you'll first have to bring codemirror into focus.

You can do something like this:

/* getting codemirror element */
WebElement codeMirror = driver.findElement(By.className("CodeMirror"));

/* getting the first line of code inside codemirror and clicking it to bring it in focus */
WebElement codeLine = codeMirror.findElements(By.className("CodeMirror-line")).get(0);
codeLine.click();

/* sending keystokes to textarea once codemirror is in focus */
WebElement txtbx = codeMirror.findElement(By.cssSelector("textarea"));
txtbx.sendKeys("Hello World");

Answer 2

The codemirror instance should have a hidden textarea in it which captures the keyboard events...

I did something like this:

driver.findElement(By.css('.CodeMirror textarea'))
    .sendKeys('text', 
        webdriver.Key.chord(webdriver.Key.CONTROL, webdriver.Key.SHIFT, "m"));

This bit: webdriver.Key.chord(webdriver.Key.CONTROL, webdriver.Key.SHIFT, "m") simulates the (Ctrl+Shift+M)

Answer 3

I myself have found this answer to the question https://stackoverflow.com/a/48969245/6077069 . You should use driver's action chains instead of element send_keys. This is working in my case.