Receiving no data when testing bound text - angularjs

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");
});

Related

Coded UI test is not running while setting the UIElementText in the Playback

I have recorded the coded UI test using the VS2015 Coded UI Test builder. based on my recording the following function is created for my test method,
public void RecordedMethod1()
{
#region Variable Declarations
WpfText uIItemText = this.UIMainWindowWindow.UIAddNewRowControlCustom.UIGridCellCustom.UIItemText;
WpfEdit uIItemEdit = this.UIMainWindowWindow.UIAddNewRowControlCustom.UIGridCellCustom.UIItemEdit;
WpfText uIItemText1 = this.UIMainWindowWindow.UIAddNewRowControlCustom.UIGridCellCustom1.UIItemText;
#endregion
// Double-Click label
Mouse.DoubleClick(uIItemText, new Point(73, 3));
//// Failed in the following line and the test is not running after that.
// Type 'aaa' in text box
uIItemEdit.Text = this.RecordedMethod1Params.UIItemEditText;
// Double-Click label
Mouse.DoubleClick(uIItemText1, new Point(79, 10));
// Type 'bbb' in text box
uIItemEdit.Text = this.RecordedMethod1Params.UIItemEditText1;
// Type '{Enter}' in text box
Keyboard.SendKeys(uIItemEdit, this.RecordedMethod1Params.UIItemEditSendKeys, ModifierKeys.None);
}
After reaching the line to set the recorded value to the uiEditItem.Text the test case is not running further cased the failure in the test case.
I have googled for the solution and have found a one that says, you need to rewrite the test cases with the Kebord.SendKeys instead of directly setting the value to the Text property of the EditItem.
By this way I have made my code changes at the line as follows and its working.
// Type 'aaa' in text box
//uIItemEdit.Text = this.RecordedMethod1Params.UIItemEditText;
// Replaced the above line with the SenKeys
Keyboard.SendKeys(this.RecordedMethod1Params.UIItemEditText);
Is that the only solution for this problem (Manullay rewrite the test methods by using the SendKeys method instead of directly assigning a value to the uiEditItem.Text property) ? If not, please provide the feasible solution for this.

Listen for click / hover on individual axis labels

I'm looking for a way to change the value (or format) for an individual series label when hovering it in anycharts.
Currently I'm only able to access the entire axis and I can find no getter method for individual labels so as to attach a listener.
xAxis.labels().listen('mouseOver', function(e) {
console.log(this, e.target);
});
This jsfiddle is as far as I got (see console log), this as well as the event.target reference the entire axis but not the label:
https://jsfiddle.net/robstarbuck/pbhd4b7L/9/
Indeed, there was a little bug with cache and format() function, our dev team made the fix, so please check the working sample:
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
var value = xAxis.scale().ticks().get()[labelIndex];
label.format(value * 2);
https://jsfiddle.net/pbhd4b7L/13/ – it also shows how to work with tick values:
Currently it takes the js from branch, but this fix will be included in the upcoming release – 7.14.0 version (ETA: May 2017)
Our API is a little bit complicated here, but we're working hard to improve it. Does this what you're looking for?
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
label.fontColor('red');
label.draw();
https://jsfiddle.net/pbhd4b7L/10/
This issue was fixed in the 7.14.0 release, use this code:
xAxis.labels().listen('mouseOver', function(e) {
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
var value = xAxis.scale().ticks().get()[labelIndex];
label.format(value * 2);
label.fontColor('red');
label.draw();
});
with the latest version: https://jsfiddle.net/2t08ahkg/3/

Textangular HTML mode clears model value

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!

Intern test returns incorrect value for range input

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.

Using HTMLDocument to manipulate HTML and show it in WebBrowser-control

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";

Resources