I'm trying to test with Selenium if a value has been loaded from the server in a RichTextArea in GWT.
I'm doing
#FindByDebugId("gwt-debug-about-me")
private WebElement aboutMeRichText;
When I send keys, there's no problem, the text is printed in the RichTextArea.
But when I try this (retrieve the value):
aboutMeRichText.getText()
it returns an empty String.
When I look at what's generated in the HTML, it's something like that :
<iframe class="GJUJXOPBLP-com-asdf-asdf-client-resource-Resources-Styles-textBox hasRichTextToolbar" id="gwt-debug-about-me">
#document
<html><head></head><body>Hi there !</body></html>
</iframe>
How should I do to retrieve the "Hi there !" text?
It's an iframe, which is not the same with normal WebElement, so you need to switch to it first.
driver.switchTo().frame(aboutMeRichText);
WebElement body = driver.findElement(By.TagName("body")); // then you find the body
body.getText();
// get out of the editor
driver.switchTo().defaultContent();
Related
As you can see I'm not trying to access anything from inside the actual iframe's contentWindow but rather the iframe tag itself.
Example iframe element:
<iframe id="placeholder"
data-ids="1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0"
style="100%; 330px;" frameborder="0" allowfullscreen="1"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" width="100%" height="100%"></iframe>
I'm trying to retrieve the string that is assigned to the property data-ids
how can I retrieve this using XPath?
//iframe[1].data-ids
//*[#id="placeholder"]/#data-ids
If I use JavaScript getAttribute function works to retrieve:
var frame = document.querySelector('iframe');
var val = frame.getAttribute('data-ids');
alert(val);
but how to do it in Xpath?
Update 1
I'm using the inspector in Chrome, under elements, CTRL-F doing search for XPATH; it won't let me access the specific string I'm trying to reference:
//*[#id="placeholder"]//#data-ids
When I use this it doesn't work it still highlights the entire iframe.
Do you know how to access only the string between quotes assigned to "data-ids" attribute of the iframe tag?
Is there a command similar to the JS command getAttribute() in Xpath?
I want to return only "1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0".
Update 2
Now I'm now using JavaScript "snippet" inside chrome's inspector to evaluate the Xpath reference like so:
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
test = getElementByXpath("//*[#id="placeholder"]//#data-ids")
console.log(test);
and it now outputs the following to the console:
data-ids="1J2cSrn6ox4,BUQzSn85NMs,Fzav6plKfr8,MsNJTTP3LMM,hTZLXnY7Gc0"
which is great, but how do I get just the text? Not the name/value pair, not the attrName="value" but rather just what's in between the quotes?
I'm not asking how to do it with JavaScript; I'm asking how to target the string value of the attribute without converting it to a string.
Ideally //iframe/#data-ids should return the value.
Can you please elaborate what message you are getting and where you are trying the xpath.
I have a richtext component, I gave input as "foo" to richtext component, and it generated
<p>foo</p>, I'm trying to pass this generated content from JSP to JS using the following code.
<script>
var jsvariable = '<%=jspvariable%>'
</script>
the above line throws "unterminated string literal" error, as the JS variable contains
ptagstarts foo ptagends
I'm using the value in JS as I need this variable in other pages as well.
May I know how we to remove this error.
From what you wrote, seems, that you have in your jspvariable string </script>. Html parser treats it as ending of the script block, and you getting invalid script block.
You can check source of your page to be sure, that I am right.
As Thomas suggested, you can escape your content. But as long as this content is provided by user, I would use XssApi, to prevent xss attack as well.
So it would be something like:
var jsvariable = '<%=xssApi.encodeForJSString(jspvariable)%>'
Or:
var jsvariable = '<%=xssApi.filterHTML(jspvariable)%>'
In first case you will get that <script> block from richtext component into your js variable. It will be encoded, and you will not get this error, but I think you do not need it.
In second case, you, should get only text value from you component.
UPDATE 1
Also, as I wrote you in comments, It would be nice to see the way you extract content from your richtext component, because I think, there is a better way of doing this, so you will get only text without anything else.
Is it possible to use ckeditor on a form input instead of textarea, i am building a CMS and now trying to add ckeditor and majority of of fields are form input not textarea
Thanks in advance
You can use CKEditor on an element (a div, say) that has contenteditable set. In fact, by default contenteditable elements will have CKEditor editors instantiated. It seems unconventional to use a rich text editor on an input of type text but I imagine it could be done.
As far as I know CkEditor has to be created using a textarea. In saying this, I am using it in a Razor MVC view and its one of the classes in my form..
The request will be blocked though and you will get this error;
A potentially dangerous Request.Form value was detected from the
client
To get around this, you need to get the value of the CKEditor text and html encode it. You can do this
when submitting your form, intercept it on the onsubmit function:
<form id="myform" onsubmit="javascript:onFormSubmit(this);return false" >
...
</form>
Then in this onFormSubmit function
Get the value,
Set the property value to the url encoded value
Do a ajax call to your server with the data
Your function will get the CKEditor encoded value like so:
function onFormSubmit(form)
{
var editor = CKEDITOR.instances["EditorId"];
var richtextValue = editor.getData();
var urlEncodedValue = encodeURIComponent(richtextValue);
// TODO rest of code doing ajax post to submit your form and its data
// Here you need to do an ajax call to your server pass it the form data along with the url encoded CKEditor value for that property
}
So here's the problem I am writing a program that is going to look through the folder on the localhost before it is rendered. I want to be able to get the value of the ID of a web element and store that in a list object.
For example I have a page:
<html>
<body>
<CustomControl:MyPhoneValidationControl ID="PhoneValidator" validationgroup="PageValidation" />
<CustomControl:MyEmailValidationControl ID="EmailValidator" validationgroup="PageValidation" />
</body>
</html>
The program will go to C:\WebFolder\Page.aspx and then will read the file and find every CustomControl on the page and then grab the Control Type (MyPhoneValidationControl OR MyEmailValidationControl) and then assign the value of the ID (PhoneValidator, EmailValidator) as a property of the Control object.
I am using C#.NET 4.0. Getting the ID of the element is easy after the page is rendered but it doesn't show that it is a custom control. To see the custom control you need to look at the .aspx file without it being rendered by a web server (IIS, etc.)
I resolved myself this by stuffing the page data into a string and then using
string page = new StreamReader(page).ReadToEnd();
List<string> control = new List(string)();
MatchCollection matchControl = Regex.Matches(text, "expression");
foreach (Match match in matchControl)
{
control.Add(match.Value)
}
This catches the control to a list and then I can parse the string list to get the type and ID using Regex in the properties after passing the whole control List to the controls constructor.
I have this code in my gwt client side:
String out = result.getConsoleOutput().replaceAll("\n", "<br/>");
transOut.getElement().setInnerText(out);
Basically what comes out of consoleoutput() is text from a telnet client and transOut is a HTMLPanel in a UiBinder. I want it to show up pretty so I tried to change all the \n to html , but when it shows up in firefox it looks like this on screen blah blahblah blah.... I am guessing gwt escapes the text somewhere how can I get it to write the real tag.
here is an image:
http://www.faciletek.com/errimage.png
You need to:
String out = result.getConsoleOutput().replaceAll("\n", "<br/>");
transOut.getElement().setInnerHTML(out);
Note the setInnerHTML() instead of setInnerText()