I am getting an error when trying to click a "Sponsors" link on the page:
unable to locate element, using {:href=>"/Sponsors", :target=>"", :tag_name=>"a"}
Here is the line I am using:
browser.div(:class => "pageContainer").header(:class => "page-header")
.div(:class => "container").nav.ul(:class => "nav nav-pills")
.li(:class => "", :index => 2).a(:href => "/Sponsors", :target => "").click
(FYI: I've tried using index 0 through 4, and removing the index; all resulted in the same error)
Below is the code:
<div class="pageContainer">
<header class="page-header">
<div class="container">
<nav>
<ul class="nav nav-pills">
<li class>...</li>
<li class>...</li>
<li class="dropdown open">...</li>
<li class>
<a href="/Sponsors" target"">
Sponsors
</a>
</li>
<li class="dropdown">...</li>
</ul>
</nav>
Posting as an answer since OP indicates that it's a solution.
Instead of qualifying the whole path to the element, use a single locator (which should still locate the element and should be less fragile if ancestor elements are changed):
browser.a(:href => "/Sponsors").click
browser.a(:text => "Sponsors").click
Related
HTML:
<div id="my-id">
<li class="list_element">
<div class="my_class"></div>
</li>
<li class="list_element">
<div class="another_class"></div>
</li>
<li class="list_element">
<div class="class3"></div>
</li>
</div>
What I want to do with behat/mink:
$page = $this->getSession()->getPage();
$selector = $page->find('css', "#my-id .my_class"); //here I need anchor element located near to .my_class div.
I don't know in which one .list_element .my_class div is. I know only anchor is next to .my_class element. Which selector should I use in the find() function?
Try one of these:
#my-id .my_class ~ a
#my-id .my_class + p
#my-id .list_element a
This is too basic question.Please see more here w3schools
I need to get node path of jstree element ,I using this code :
$(function () {
$('#jstree').jstree();
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
if (data.action == "select_node") {
var node_path = data.instance.get_path(data.node, "/");
console.log(node_path)
}
});
});
But I get unexpected space character (You can see in console.log() function)
http://jsfiddle.net/3q9Ma/741/
I need a pretty path like this : Folder1/children 1
Please tell me what wrong .
Thank you
The problem actually with the HTML in your fiddle. It looks like this:
<div id="jstree">
<ul>
<li>Folder 1
<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Folder 2</li>
</ul>
</div>
The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:
<div id="jstree">
<ul>
<li>Folder 1<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
<li>Folder 2</li>
</ul>
</div>
I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>
My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});
I want to create a variable called style and assign its value
based on the value of the input parameter #filter
I read the play's documentation, but the current solution I can get
it works is something like: which the list template part is duplicated...
#(filter: String = "error")(body: (String) => Html)
#filter match {
case "HOT" => {
<ul class="list">
<li class="icon-hot">this is a list item..</li>
<li class="icon-hot">this is a list item..</li>
</ul>
}
case "NEW" => {
<ul class="list">
<li class="icon-new">this is a list item..</li>
<li class="icon-new">this is a list item..</li>
</ul>
}
}
How do I assign "icon-new" & "icon-hot" to a variable #style and use it latter when writing the list template like this?
<ul class="list">
<li class="#style">this is a list item..</li>
<li class="#style">this is a list item..</li>
</ul>
This seems to work...
in style.scala.html
#(filter: String = "error")(body: (String) => Html)
#filter match {
case "OPEN" => {
#body("icon-plus")
}
case "FOLLOWING" => {
#body("icon-comments")
}
case "HOT" => {
#body("icon-fire")
}
}
And in list template
#(filter: String = "HOT")
#style(filter) { style =>
<ul class="list">
<li class="#style">this is a list item..</li>
<li class="#style">this is a list item..</li>
</ul>
}
but I'm still not very clear how this works...especially the following part:
(body: (String) => Html)
#body("icon-plus")
I have this piece of HTML
<div id="fileTreeInviati">
<ul class="php-file-tree">
<li class="pft-directory">
A006 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-png">
cut.png
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A012 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-jpg">
04.jpg
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A014 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-txt">
acu.txt
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
</ul>
I'm working on a js snippet that cycle through all "a" of the "li" and checks if it has the class "new" if yes increment a counter by one. This counter now has to be printed on the relative "li" "span" 3 level before.
So I have the number of the element with the "new" class.
The js snippet is this
$("#fileTreeInviati .php-file-tree .pft-directory li").each(function(){
$(this).children("a").each(function(i,e){
if ($(e).hasClass("new")){
cont++;
console.log($(e).text());
$(this).parent().parent().parent().children("a").children("span").text(cont);
}
})
cont = 0;
});
I think I'm almost there but the counter is always 1. I think there is something mess with .children, maybe it can handle only the first occurrence?
Thanks for help
Why not just use .length instead?
$('#fileTreeInviati .php-file-tree .pft-directory li a.new').length;
Update: If you want to count every li element separately, use this:
$('#fileTreeInviati .php-file-tree .pft-directory li').each(function() {
alert($('a.new', this).length);
})
OK, I figure out how to do the magic:)
Here it is:
cont = 0;
$('#fileTreeInviati .php-file-tree .pft-directory').each(function() {
$(this).children("ul").children("li").children("a.new").each(function(i,e){
cont++;
$(e).parent().parent().parent().children("a").children("span").text(cont);
});
cont=0;
});
Now all works perfect. If you think this can do in a better way, lemme know.
Bye