Here is HTML code:
<img ng-src="/static/images/Shine_small.jpg" width="32px" height="32px" src="/static/images/Shine_small.jpg">
Here is my code:
expect(element(by.binding('/static/images/Shine_small.jpg')).getAttribute('src'))
.toMatch(/static/images/Shine_small.jpg);
You can use HTMLImageElement read-only attribute complete (w3c spec)
Just watch out to test if src is not empty as it will resolve to complete being true as well. You could use browser.wait to wait for it for a tolerated time to become complete.
Use isDisplayed function. In your case it should be like below.
expect(element(by.binding('/static/images/Shine_small.jpg'))
.isDisplayed().then(function (isVisible) {
if(isVisible)
{
expect(element(by.binding('/static/images/Shine_small.jpg')).getAttribute('src'))
.toMatch(/static/images/Shine_small.jpg);
}
});
try below piece of code...
it('should display image',()=>{
element(by.css("img[src='./assets/images/circular.png']"))
});
src is same as that of given to "img" in html
Related
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
Just started to learn a Meteor and stuck with a silly problem. I have a collection "Images" and i trying to get one random image from her. But in the browser's console it's says that "Cannot read property 'url' of undefined", but if type a db's "findOne" method in the console there is a record that i wanted.
A client code:
Template.main.helpers({
img: function () {
return Images.findOne({rand: {$gte: Math.random()}}).url;
}
});
Collection:
Images = Meteor.Collection('images');
On a server's side i've got simple fixtures for initial tests
if(Images.find().count() === 0){
Images.insert({url: "http://domain.com/test1.jpg", rand: Math.random()});
Images.insert({url: "http://domain.com/test2.jpg", rand: Math.random()});
Images.insert({url: "http://domain.com/test3.jpg", rand: Math.random()});
}
And simple template:
<head>
<title>Test</title>
</head>
<body>
{{> main}}
</body>
<template name="main">
{{img}}
</template>
P.S. I'm working under the Win 8.
First, I'm going to assume that the images are published to the client. You should verify that Images.find().count() > 0 is true in your browser console (not in your template code).
Next, you should read about how to add guards to your template code to fix the error you are seeing. This article should explain what you need to know.
Finally, unless you actually need rand on your documents, there are better ways to accomplish a random selection. Your question says you are looking for one image, but it's possible that 1 or 0 could be returned with your code. Instead you could use the built-in Random package. Give this a try:
Template.main.helpers({
img: function() {
var image = Random.choice(Images.find().fetch());
return image && image.url;
}
});
Although, I think it makes more sense to return the image object:
Template.main.helpers({
image: function() {
return Random.choice(Images.find().fetch());
}
});
And then select the url in your template (no guards are needed in this case):
<template name="main">
<img src="{{image.url}}">
</template>
You need to be careful with your assumptions when you load a template. When your web page has loaded on the web browser, it won't necessarily have any data in it (your Images.findOne() query could return null)
You just need to take account of this possibility
var image = Images.findOne({rand: {$gte: Math.random()}});
return image && image.url
I want to get some json object from a remote server.
Here is the simplest html you can imagine:
<div id="getHotels" data-theme="e" data-role="button">Get hotels</div>
<ul id="bringHotels" data-role="listview"></ul>
and here is the javascript:
$("#getHotels").click(function(){
$.getJSON("/services/apexrest/Hotels", function(obj){
$.each(obj,function(key,value){
$("#bringHotels").append("<li>"+value.Hotel_Name__c+"</li>");
});
});
});
i have never used the getJSON method but it seems to be quite clear, despite that it doesnt work and I checked the directory - there really is JSON array. So, if I am doing it wrong, please correct me, thank you.
There are no enough informations about the problem to solve it...
It could be a problem in the URL you pass to getJSON. Try to change the first slash with a ./, or use other callbacks to obtain more debug infos:
$.getJSON("example.json", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
I want my page to load javascript dynamically to my body:
<script type= "text/javascript" src="this path should be decided from wicket dynamically"/>
I am using wicket version 1.4 therefore JavaScriptResourceReference does not exist in my version (for my inspection it wasn't ' )
how can I solve this ?
thanks in advance :).
I specify my comment into an answer.
You can use this code snippet:
WebMarkupContainer scriptContainer = new WebMarkupContainer("scriptContainer ");
scriptContainer .add(new AttributeAppender("type", Model.of("text/javascript")));
scriptContainer .add(
new AttributeAppender("src", urlFor(
new JavaScriptResourceReference(
YourClass.class, "JavaScriptFile.js"), null).toString()));
add(scriptContainer );
and the corresponding html:
<script wicket:id="scriptContainer "></script>
Just change the string JavaScriptFile.js to load any other Javascript file.
JavascriptPackageResource.getHeaderContributor() does exactly what you need.
You need nothing in your markup, just add the HeaderContributor it returns to your page.
Update: For Wicket 1.5 see the migration guide, but it goes like this:
public class MyPage extends WebPage {
public MyPage() {
}
public void renderHead(IHeaderResponse response) {
response.renderJavaScriptReference(new PackageResourceReference(YuiLib.class,
"yahoo-dom-event/yahoo-dom-event.js"));
response.renderCSSReference(new PackageResourceReference(AbstractCalendar.class,
"assets/skins/sam/calendar.css"));
}
}
If you want to put your <script> element in the body, you can simply declare it as a WebMarkupContainer and add an AttributeModifier to set the src attribute. Although in that case wicket won't generate the relative URLs for you, you have to do it yourself.
I'm not sure I understood completely.
If you are trying to create and append a script to the body after the page is loaded you should do it this way:
<script type="text/javascript">
function load_js() {
var element = document.createElement("script");
element.src = "scripts/YOUR_SCRIPT_SRC.js"; // <---- HERE <-----
document.body.appendChild(element);
}
// Wait for the page to be loaded
if(window.addEventListener)
window.addEventListener("load",load_js,false);
else if(window.attachEvent)
window.attachEvent("onload",load_js);
else
window.onload = load_js;
</script>
What I did here is create a new script element, and then apply to it its source.
That way you can control dynamicaly the src. After that I append it to the body.
The last part is there so the new element is applied only after the page is loaded.
I'm trying to manipulate forms with Mootools. My purpose is to inject the response content of a form into a div element named result.
Here a code that works, but it replaces the content of the result div. This is not what I want : I want to ADD the form response content to the result div existing content. I just can't find on the web how to do this, and I've tried many things that are not working ... Please help
window.addEvent('domready', function() {
$('myform').addEvent('submit', function(e) {
e.stop();
var result = $('result').empty();
this.set('send',{
url: this.get('action'),
data: this,
onSuccess: function() {
result.set("html", this.response.text);
}
}).send();
});
});
If it's only text you want to add, just remove the empty method, and replace result.set() with result.appendText().
If you need to append an element tree, repeat the first step, and do:
onSuccess: function(){
Elements.from(this.response.text).inject(result);
}
Btw. It's all in the documentation - http://mootools.net/docs/core/Element/Element