CODEWITHSUNDEEP
javaseleniumselenium-webdriverxpathwebdriverwait
Zoran
Zoran

Reputation: 499

How to send text to the Rich Text Editor found in page source

Could someone help me to locate textarea in 'Rich Text Editor'. Being struggling with that issue and could not find solution. Tried with this (among other attempts):

List<WebElement> messageBody =  driver.findElements(By.xpath("//body[@class='cke_editable cke_editable_themed  cke_contents_ltr cke_show_borders']/p"));
    messageBody.get(0).sendKeys("Vamos con una apuesta para esta");

Below are screenshots how does it looks and also attached pagesource. Thank you in advance enter image description here

enter image description here

Here is part of page source:

<form role="form" id="user_message_form">
<div class="form-body">
<div class="row">
    <div class="form-group col-md-12">  
<textarea id="user_message_editor" name="continut_mesaj" class="ckeditor form-control" rows="12" minlength="2" style="visibility: hidden; display: none;"></textarea>
<div id="cke_user_message_editor" class="cke_210 cke cke_reset cke_chrome cke_editor_user_message_editor cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_user_message_editor_arialbl">
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_210_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_218" class="cke_voice_label">Editor toolbars</span>
<div id="cke_210_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_303" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 866px; height: 100%;" title="Rich Text Editor, user_message_editor" aria-describedby="cke_303" tabindex="0" allowtransparency="true"></iframe></div>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 866px; height: 100%;" title="Rich Text Editor, user_message_editor" aria-describedby="cke_303" tabindex="0" allowtransparency="true"></iframe>
#document
<html dir="ltr" lang="en"><head><title data-cke-title="Rich Text Editor, user_message_editor">Rich Text Editor, user_message_editor</title><style data-cke-temp="1">html{cursor:text;*cursor:auto}
<head>...</head>
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false"><p><br></p></body>

Upvotes: 0

Views: 763

Answers (1)

undetected Selenium
undetected Selenium

Reputation: 193108

There is a delta difference between the HTML within the snapshot and the text HTML you have provided.

  • If the Rich Text Editor is not within any <iframe> you can use the following solution:

    WebElement messageBody = driver.findElement(By.xpath("//body[@class='cke_editable cke_editable_themed cke_contents_ltr cke_show_borders']/p"));
messageBody.click();
messageBody.sendKeys("Vamos con una apuesta para esta");

  • If the Rich Text Editor is within the <iframe> with attribute class="cke_wysiwyg_frame cke_reset" you have to switch to the desired iframe first as follows:

    new WebDriverWait(driver, 20).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//iframe[@class='cke_wysiwyg_frame cke_reset']")));
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//body[@class='cke_editable cke_editable_themed cke_contents_ltr cke_show_borders']/p"))).click();
messageBody.sendKeys("Vamos con una apuesta para esta");

Upvotes: 1

Related Questions