We decided to change our backend CMS to use text-angular's WYSIWYG editor. The content pulls from the database just fine, it gets rendered just fine, but the instant we go to view the HTML source, the text is there for an instant and then it disappears. I've turned off sanitization with the ta-unsafe-sanitizer="true" . The weird thing is, if I manually step through the angular code that does the digesting, eventually the text is rendered and it stays on the screen. If I run it without breakpoints, it clears the text.
I'm not sure if it is sanitization or some sort of race condition inside Angular. Anyone else run into this?
View
<div text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics','underline'],['ul','ol'],['outdent','indent'],['html'],['insertImage']]" ng-model="updatePageTranslation.Content" ta-unsafe-sanitizer="true"></div>
Controller
$scope.updatePageTranslation.Content = 'large html portion here';
The scope of the form is set as follows:
<div class="widget" ng-controller="PageController">
Everything gets loaded fine and other fields of the form show the values correctly. The initial render of the content is correct. It is just when switching to HTML view that it goes blank. Clicking Html again switches back to the visual view, which is correct. But if I save, the value sent to the server is now blank.
I can even copy and paste the value into textangular.com site's demo textbox and have the same issue.
This was a strange one to figure out, but thanks to #HanletEscaño, I was able to find my way. When returning the content from the server, I had to do the following in order to pre-sanitize it so that you could switch back and forth between the HTML and rendered view:
Content.Replace(Environment.NewLine, "").Replace("\n", "").Replace("\r", "").Replace("\t", "").Replace(" ", "");
The important one is that last replace, where we replace two spaces with nothing. This seemed to be the final trick. We were coming from a previous WYSIWYG editor where we could make the HTML look nice, but with this editor, everything has to be condensed.
As mentioned above, this seems to be due to the parser struggling to handle whitespace and newlines correctly.
If you take a look at the textAngular source, in taBind.js, _taBlankTest service seems to returns true when the bound value contains spaces, newlines etc, which in turn causes the model to get set to undefined.
I replaced mine with the following to avoid that situation:
angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'])
.service('_taBlankTest', [function(){
var INLINETAGS_NONBLANK = /<(a|abbr|acronym|bdi|bdo|big|cite|code|del|dfn|img|ins|kbd|label|map|mark|q|ruby|rp|rt|s|samp|time|tt|var)[^>]*(>|$)/i;
return function(_defaultTest){
return function(_blankVal){
if(!_blankVal) return true;
var _matchVal = _blankVal.replace(/( |\t|\n)/gm, '');
// find first non-tag match - ie start of string or after tag that is not whitespace
var _firstMatch = /(^[^<]|>)[^<]/i.exec(_matchVal);
var _firstTagIndex;
if(!_firstMatch){
// find the end of the first tag removing all the
// Don't do a global replace as that would be waaayy too long, just replace the first 4 occurences should be enough
_matchVal = _matchVal.toString().replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '');
_firstTagIndex = _matchVal.indexOf('>');
}else{
_firstTagIndex = _firstMatch.index;
}
_matchVal = _matchVal.trim().substring(_firstTagIndex, _firstTagIndex + 100);
// check for no tags entry
if(/^[^<>]+$/i.test(_matchVal)) return false;
// this regex is to match any number of whitespace only between two tags
if (_matchVal.length === 0 || _matchVal === _defaultTest || /^>(\s| |\n|\t)*<\/[^>]+>$/ig.test(_matchVal)) return true;
// this regex tests if there is a tag followed by some optional whitespace and some text after that
else if (/>\s*[^\s<]/i.test(_matchVal) || INLINETAGS_NONBLANK.test(_matchVal)) return false;
else return true;
};
};
}])
Hopefully that may help someone out there!
Related
I have searched high and low for an answer to this question, but I could not find one that works in my instance. I am currently trying to test that some text is bound correctly (I can see it), but I cannot get the actual text when testing. Below is some code.
<h3>Borrowing Potential: {{$ctrl.borrowingPotential.value | currency}} as of
{{$ctrl.borrowingPotential.timeStamp | date:'MM/dd/yyyy hh:mm:ss a':EST}} EST</h3>
__
fit("should have a borrowing potential calculated", function () {
var tab = element(by.css('[ng-click="$ctrl.setSelectedTab($ctrl.tabs.summary)"]'));
tab.click();
var parent = element(by.tagName("member-summary"));
var borrowingPotential = parent.element(by.tagName("h3"));
expect(borrowingPotential.getAttribute("value")).toContain("Some Text");
});
Essentially, I click a tab which displays a custom component called "member-summary", then I attempt to access that element via web driver. It is the only instance of member-summary on this page. However, when I access either parent or borrowingPotential, getText() returns an empty string, and getAttribute returns a null type.
Note: I have also attempted to access the binding directly, again with no results. This does not work because the binding is not considered a child of the parent element (https://github.com/angular/protractor/issues/3147).
How can I get that text and then test that it displayed is correct?
As requested, below is the html from the Chrome debugger. As you can see, the bindings have been replaced with text.
<h3 class="ng-binding">Borrowing Potential: -$48,939,539.14 as of 01/01/0001 12:00:00 AM EST</h3>
Based on your provided info you should only retrieve the text of the h3-element because it isn't an input-field. You can use getText() for it. Your code would be like this
fit("should have a borrowing potential calculated", function() {
var tab = element(by.css('[ng-click="$ctrl.setSelectedTab($ctrl.tabs.summary)"]'));
tab.click();
var parent = element(by.tagName("member-summary"));
var borrowingPotential = parent.element(by.tagName("h3"));
// Replace the `getValue()` with `getText()`
expect(borrowingPotential.getText()).toContain("Some Text");
});
I am trying to clear a text field using this action:
emailField.sendKeys("gmail.com");
emailField.sendKeys(Keys.CONTROL,"a",Keys.DELETE);
In above code, the last line only selects the text, does not delete it, but if I separate the actions it works.
emailField.sendKeys(Keys.CONTROL,"a");
emailField.sendKeys(Keys.DELETE);
From the JavaDoc for WebElement.clear():
If this element is a text entry element, this will clear the value.
Has no effect on other elements. Text entry elements are INPUT and
TEXTAREA elements. Note that the events fired by this event may not be
as you'd expect. In particular, we don't fire any keyboard or mouse
events. If you want to ensure keyboard events are fired, consider
using something like sendKeys(CharSequence) with the backspace key. To
ensure you get a change event, consider following with a call to
sendKeys(CharSequence) with the tab key.
Most likely you simply need to call:
emailField.sendKeys("gmail.com");
emailField.clear();
But if you need the clearing to be done via the keyboard for some reason, use Keys.BACKSPACE.
keys.DELETE can not work to delete the input text,you should use keys.BACKSPACE.
emailField.sendKeys(Keys.BACKSPACE)
From the JavaDoc for Keys.chord
chord(java.lang.CharSequence... value)
Simulate pressing many keys at once in a "chord".
You should be able to use
emailField.sendKeys(Keys.chord(Keys.CONTROL,"a",Keys.DELETE));
Tested in chrome driver
WE.send_keys(' \b')
This will add space then delete it (backspace)
I use in javascript and it's working fine:
await textBox.sendKeys(value);
await textBox.sendKeys(Key.BACK_SPACE);
emailField.sendKeys(Keys.BACKSPACE)
doesn't worked for me .
I used 'Key' instead of 'Keys'
emailField.sendKeys(protractor.Key.BACKSPACE)
emailField.sendKeys(Keys.CONTROL + "a",Keys.DELETE);
In PHP:
if you use php-webdriver (https://github.com/php-webdriver/php-webdriver) you must:
use Facebook\WebDriver\WebDriverKeys AS Keys;
.
.
.
$this->driver->findElement(By::id('demo'))->sendKeys([Keys::BACKSPACE,'Any other text']);
Just adding another working C# example using the Google Chrome webdriver.
SendKeys only takes one parameter so created a string with the Crtl + A. This code sequence will select the current text in the field then delete the text.
Code example:
var crtlA = Keys.Control + "a";
driver.FindElement(By.XPath("//div[3]/div[1]/div[2]/div/div[2]/div[2]/div/div/div[1]/div/span/input")).SendKeys(crtlA); Wait(5000); // Select current text
driver.FindElement(By.XPath("//div[3]/div[1]/div[2]/div/div[2]/div[2]/div/div/div[1]/div/span/input")).SendKeys(Keys.Delete); Wait(5000); // Clear current text
driver.FindElement(By.XPath("//div[3]/div[1]/div[2]/div/div[2]/div[2]/div/div/div[1]/div/span/input")).SendKeys(newItemSku); Wait(5000); // Input SKU name
1. in WebdriverIO, i tried to edit the text by clear text (which contains special charactes like #, +, _) in text field by below following step. Eventhough it was not successful.
example: text=> abc+1234#gmail.com
step1:browser.clearElement(selector);
step2:browser.execute(function () {
document.querySelector(>>>Cssselector<<<).value="";
});
step3: browser.doubleClick(selector);
browser.keys("Delete");
step4: browser.click(selector);
browser.keys(['Meta',a]);
browser.keys('Meta');
browser.keys('Delete');
Note: below step is resolved this issue.
var count= browser.getAttribute(selector, value).length;
for (var i=0;i<count;i++)
{
if (browser.getAttribute(selector, value)=='')
break;
}
else
{
browser.doubleClick(selector);
browser.keys("Delete");
}
browser.pause(200);
// it will clear your text field easily.
Note:
You can add the new text now.
I'm using AngularJS 1.5.0 and Microsoft Edge browser screen doesn't reflect the DOM.
I would like some suggestion how this can be fixed.
I can't really apply a fix for each element as the application is somewhat big with dynamic user content including Angular equations.
Also the app include a lot of dynamic bindings linked to input boxes.
Selecting the text with the mouse turn the 0 into a 2 which is the right value in the example below.
Also changing the position style back and forth seem to force Edge to redraw the element but it's somewhat an ugly fix that I don't like very much and it need to be trigger at so many places (Ajax request, input changes and so on...)
The page start with a value of 0. Then an Ajax call is made and it go fetch the real data. After some experimentation the bug only appears if the new data is 1 character (ex: 2 or 9). And it happens every time. If it's a 2 digit number (ex: 26) then the good number appears.
Any help on this matter would be gladly appreciated.
We were facing the same problem and it stopped occurring after removing the text-transform: uppercase style from the elements that are not updating.
#Sampson, it looks like this is a bug in Edge.
I was able to make a temporary fix with the use of Mutation Observer.
Little script that I made that works for AngularJS elements created server side.
Currently those are the only one causing trouble in my app.
<script>
$(document).ready(function(){
var ua = navigator.userAgent;
var re = new RegExp("Edge/");
if (re.exec(ua) != null){
console.log('edgeMutationObserver ON!!')
var edgeMutationConfig = { characterData: true, subtree: true };
var edgeMutationObserver = new MutationObserver(function(mutations) {
var rgb_p = /rgb\((\d+), (\d+), (\d+)\)/g;
var rgba_p = /rgba\((\d+), (\d+), (\d+), (\d.?\d*)\)/g;
mutations.forEach(function(mutation){
if(mutation.target.nodeType == 3){
var that = mutation.target.parentNode;
// Save the background color
var bgc = that.style.backgroundColor;
// Get applied style from style or css
var bgc_css = bgc || $(that).css('backgroundColor');
var bgc_temp,match;
if(match = rgb_p.exec(bgc_css)){
// rgb transformed in rgba triggers update
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+',1)';
}else if(match = rgba_p.exec(bgc_css)){
// Slightly modify transparency
var alpha = match[4] == 0 ? 0.01 : match[4] - 0.01 ;
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+','+alpha+')';
}else{
// If either inline style or css is already equal to transparent the redraw is not made so i choose an alternate color with 0 opacity
bgc_temp = bgc_css != 'transparent' ? 'transparent' : 'rgba(0,0,0,0)';
}
// Change background color to force redraw
that.style.backgroundColor = bgc_temp;
setTimeout(function(){
// Apply back previous style
// Doesn't redraw without a timeout in Edge
that.style.backgroundColor = bgc;
},0);
}
});
});
$('.ng-binding').each(function(){
edgeMutationObserver.observe(this, edgeMutationConfig);
});
}
});
</script>
I have a test that checks the value an HTML5 range input.
return this.remote
// etc.
.findById('range')
.getAttribute("value")
.then(function(val){
expect(parseInt(val)).to.equal(2);
});
The value is correct when I check its initial value, but if I change the value then check, it has not been updated. I found that the value doesn't update in the developer tools either. I tried using
.sleep(3000)
between changing the value and calling
.getAttribute('value')
but that didnt' seem to be the issue.
In this JSfiddle, inspecting the range element with your browser's developer tools will show the title change, but the value does not (even though the value is correctly changed in the textbox). So this may be an issue with the webdriver, but I'd like to know if anyone has run into this issue.
Is this related to the test's failure to get the updated value? Is there another method I can use to read values(attributes)?
Edit:
It seems like the browser's onchange/oninput event is not triggering properly (similar problems: WebDriver: Change event not firing and Why does the jquery change event not trigger when I set the value of a select using val()?), and the webdriver is possibly not able to, either. Do I have to add Jquery as a define for my test, even though I only need to use trigger() ? Or is there another solution?
Edit2: I've added a better example of how I'm using the range input in this new JSfiddle. I added plus/minus buttons, which fail to trigger the change event that should update the value attribute of the range input, (and which fails to enter the value into the textbox).
You could fire the change event manually in your test. I was able to get the 'textValue' input in your JSFiddle to update that way and I imagine it might work similarly in your test.
rangeBar = document.querySelector('#range');
function myFire(element, eventType) {
var myEvent = document.createEvent('UIEvent');
myEvent.initEvent(
eventType, // event type
true, // can bubble?
true // cancelable?
);
element.dispatchEvent(myEvent);
}
myFire(rangeBar, 'change');
This comes up often enough that I have a helper in my base test class (Java)
public enum SeleniumEvent
{blur,change,mousedown,mouseup,click,reset,select,submit,abort,error,load,mouseout,mouseover,unload,keyup,focus}
public void fireEvent(WebElement el, SeleniumEvent event)
{
((JavascriptExecutor) getDriver()).executeScript(""+
"var element = arguments[0];" +
"var eventType = arguments[1];" +
"var myEvent = document.createEvent('UIEvent');\n" +
"myEvent.initEvent(\n" +
" eventType, // event type\n" +
" true, // can bubble?\n" +
" true // cancelable?\n" +
");\n" +
"element.dispatchEvent(myEvent);", el, event.toString());
}
Another thought. getAttribute("value") might not be getting what you think it does. In JavaScript, document.querySelector('#range').getAttribute('value') always returns the hard-coded value attribute (i.e. the default or initial value), not the input's current value.
document.querySelector('#range').value returns the current value.
I am trying to manipulate a requested document in the WPF WebBrowser-control. I already managed it to invoke JavaScript on loaded document, but I am not able to change the shown HTML-code in the control itself.
My (very simplified) code in the OnNavigating-Handler looks like this:
mshtml.HTMLDocument doc = (mshtml.HTMLDocument)View.browser.Document;
HTMLTableClass table = doc.getElementById("someTable") as HTMLTableClass;
if (table != null)
{
table.appendChild((IHTMLDOMNode)(doc.createElement("<tr>") as IHTMLElement));
}
doc.close();
The -element doesn't get appended to displayed document in the control.
Any hints are very appreciated!
I finally got it. Its only possible to change the content of the table by adding rows and cells which i wanted to avoid in first place. My approach was to directly change the content of the -tag, which didnt work.
mshtml.IHTMLTableRow row = table.IHTMLTable_insertRow(-1) as mshtml.IHTMLTableRow;
mshtml.IHTMLElement c = (mshtml.IHTMLElement)row.insertCell(0);
c.innerText = "some";
mshtml.IHTMLElement c1 = (mshtml.IHTMLElement)row.insertCell(1);
c1.innerText = "text";