I have to insert HTML into view dynamically. Inserted code contains angular directives. I found the way to do this using directives:
http://jsfiddle.net/e4zrusgw/
I would like to create e2e test using Protractor. Unfortunately Protractor does not see elements from dynamically inserted HTML. For example, if inserted code contains
<button>Cancel</button>
and I try to get access to this button in protractor specification:
element(by.buttonText('Cancel'));
I get:
ElementNotVisibleError: element not visible
Does anyone have the same problem?
Piotrek.
Problem solved. The solution is to use browser.driver object, for example:
browser.driver.findElement(by.id('accept-button'))
instead of
element(by.id('accept-button'));
Related
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
Here’s what I’m trying to do while testing an Angular app with Protractor. I would like to get a certain element, which is somewhat like this:
<div class="someClass">
<p>{{textFromBoundModel}}</p>
</div>
then get its html, and check whether it contains the text that I expect it to have.
I tried to get this element first by the cssContainingText method, but it didn't quite work (not sure why; maybe because the text within the paragraph is produced dynamically). So now I’m getting this element using just the by.css locator. Next, I'm checking whether it contains the text I’m testing for:
// this is Cucumber.js
this.Then(/^Doing my step"$/, function(callback){
var el = element(by.css('.someClass'));
expect(el).to.contain("some interesting string");
callback();
});
});
but this doesn't work. Problem is, el is some kind of a locator object, and I can’t figure out how to get html of the element it found in order to test against this html. Tried .getText(), with no success.
Any suggestions?
Does:
expect(el.getText()).to.eventually.contain("some interesting string");
work?
I believe you need the .eventually to wait for a promise to resolve, and you need the .getText() to get at the content of the div.
See the chai-as-promised stuff at the head of the cucumber sample.
Try the below solution worked for me
Solution 1 :
expect(page.getTitleText()).toContain('my app is running!');
Solution 2 :
expect<any>(page.getTitleText()).toEqual('my app is running!');
http://www.scientiamobile.com/page/angularwit
Want to be able to do something like this:
<img-wit ng-src="{{trustSrc(profile.pic)}}" w="100"/>
The picture isn't rendering however, although the blank space is sized correctly. Is it possible to use angular directive version of img-wit with ng-src?
UPDATE:
Determined the easiest way to use img-wit is not to implement angularjs directive at all. Instead, just append appropriate img-wit link prefix inside controller.
Support to ngSrc directive has been added in the 0.9.1 version: https://github.com/WURFL/angular-wurfl-image-tailor/releases/tag/0.9.1.
Syntax like the follow is now supported:
<img-wit ng-src="{{myUrl}}"></img-wit>
where {{myUrl}} is the url of the trusted image to load.
Please check https://github.com/WURFL/angular-wurfl-image-tailor#how-to-use-it for further details.
Disclaimer: I work for ScientiaMobile
I am trying to build a set of dynamic tabsets with dynamic content,
http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview
1) Clicking on Dashboard opens a new tab with directive
When I provide the content of a as the directive, this gets rendered as a string.
I've tried to use the html bind unsafe and $compile functions to make this run as an Angular component - but haven't be able to
2) Click on menu [Project Management-> Project] shows a list of Sites, on clicking of which I need to open another tab passing a parameter (Proj-ID or Site-Id)
The idea is to call a function on click of the Site Name, I'll open a new tab with content as a directive
But since I am stuck with the previous problem, I am not able to do this
Is this the right way of passing params to the directive.
Right now, the plunkr tries to o/p the tab content as a file, a string and compile - with no success
[I've revised this question with relevant details from a prev question]
SOLUTION FOUND FOR #1:
For some reason ng-bind-html-unsafe doesn't work with Angular Elements.
I had to do create a compile directive http://docs.angularjs.org/api/ng.$compile, based on info I found here on STO
In tabs-directive.html, you can definitely use ngBindHtmlUnsafe. Make sure don't put {{}} around the variable.
String: <div ng-bind-html-unsafe="tab.content"></div>
This is being done using angular 1.1.X
If there is a dom element that doesnt have a unique class or id how is one supposed to find it in order to do an element().click(); ?
is this something one would just use the full version of jquery for or is there a way to do it with angulars jqueryLite ?
ie if one has a list of links , how would you select the first element of the list using angular?
You can use generic jquery selectors to find elements.. here's some code from my e2e tests. Note especially the :eq(3) selector for taking the 4th anchor tag.
it('The cancel button should close the form and revert the info', function() {
input("ci.customer.name").enter("Tom Selleck")
element('#customerinfo input[value="Cancel"]').click();
// check pdfdata to make sure it got reflected
element('.navbar a:eq(3)').click();
expect(element('.navbar a:eq(2)').text()).not().toBe("Customer (Tom Selleck)");
});