Is there any method in WWW::Selenium which will allow me to iterate through this structure (HTML code) and access the hrefs?
<div class="myGengo_wrap full_width">
<h1>Dashboard</h1>
<div class="blue list">
<span class="title">Sections </span>
<span class="dashboard_master_language">
<span class="dashboard_language wide">
Englisch (Master)
</span>
</span>
<span class="dashboard_languages">
<span class="dashboard_language wide">
Chinese
</span>
<span class="dashboard_language wide">
German
</span>
</span>
...
...
</div>
There is a get_all_links method - see the documentation.
Related
Given an HTML template with the following structure:
<div id="user-a">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
<div id="user-b">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
<div id="user-c">
<span class="entry-1"></span>
<span class="entry-2"></span>
<span class="entry-3"></span>
<span class="entry-4"></span>
<span class="entry-5"></span>
<span class="entry-6"></span>
</div>
etc, is there any way to generate the child < span > elements in HTML without manually adding them for each user? I will not have access to Javascript or PHP in this environment, only a basic HTML form and an inline style sheet.
I created chatbox UI for my Application. I want to add scroll bar for the chatbox. I added the overflow-y:auto; in chat-content div class. But it doesn't work.If I add the style in chat div class it will work both messages and input box also. But I need scroll only messages. I don't know where to add the overflow-y:auto;
Any one please find the solution for me.
Here I attached the html code for chatbox.
I followed this tutorial:
https://codepen.io/CodeFrogShow/pen/PKYvMo
html:
<div class="container_chatbot">
<div class="app">
<div class="head clearfix">
<span class="messages-notification">
<i class="fa fa-comments-o"></i>
<span class="count"></span>
</span>
<span class="title">Messenger</span>
<span class="create-new">
<a (click) = "onVisible()" class="close">
<i class="material-icons">expand_more</i>
</a>
</span>
</div>
<div class="body">
<div class="friend-list clearfix">
<ul>
<li class="active">
<span class="messages hide">
<span class="count"></span>
</span>
<img src="https://s5.postimg.org/3wnxyjz8n/image.png" alt="" />
<span class="name">
Jiffy
</span>
</li>
</ul>
</div>
<div class="chat-messages">
<div class="chat">
<div class="chat-content clearfix" >
<span *ngFor= "let message of messages_receiver" class="friend last">
{{message}}
</span>
<span *ngFor= "let message of messages_sender" class="you first">
{{message}}
</span>
</div>
<div class="msg-box">
<input type="text" [(ngModel)]= "message" class="ip-msg" placeholder="type something.." />
<span class="btn-group">
<a (click) = "send()" >
<i class="fa fa-paper-plane"></i>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
I am using angular ng-repeat to get several divs. The code in original template html is :
<div class="span5 noMarginLeft">
<div class="dark">
<h1>Timeline</h1>
<div class="timeline">
<div class="timeslot">
<div class="task">
<span>
<span class="type">appointment</span>
<span class="details">
Dennis Ji at Bootstrap Metro Dashboard HQ
</span>
<span>
remaining time
<span class="remaining">
3h 38m 15s
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and the style of each div (class: 'timeslot' or 'timeslot alt') is auto-calculated for its height:
and the result of the code is:
when I use ng-repeat to get these divs, (code here)
<div class="timeslot" ng-repeat="comment in allComments">
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
the style of the div is gone, and the height of each div is not auto-calculated. How can I solve this? Thanks in advance.
You should create a directive to make the calculation. if you are doing this with jquery then you are going to face same issue.
/**
* Lets create directive
*/
angular
.module('demoApplication')
.directive('autoHeight', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
//Do your calculations here
console.log(element.css('height'));
}
};
}]);
HTML
<div class="timeslot" ng-repeat="comment in allComments" auto-height>
<div class="task">
<span>
<span class="type">{{comment.userId}}}</span>
<span class="details">
{{comment.content}}
</span>
<span>
<span class="remaining">
{{comment.dislike}}
</span>
</span>
</span>
<div class="arrow"></div>
</div>
<div class="icon">
<i class="icon-map-marker"></i>
</div>
<div class="time">
3:43 PM
</div>
</div>
Woring plunker for directive
So here is the HTML markup that I have on my site and it displays star rating with the help of some css.
Now I have read this entire google document but I am still not able to understand how to change my markup. I am not willing to make changes in css and I don't have that much data available with me so that can create markup as per microdata/RDF as mentioned in google docs.
What is the minimum change that I can make so that google understands aggregate rating for the item?
<div class="store__rating">
<meta content="5" itemprop="rating">
<div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="reviewCount">
2Reviews
</span>
</div>
</div>
I ended up doing like this, here is the testing tool, just paste the HTML and validate
<div class="store__rating" typeof="v:Review-aggregate" xmlns:v="http://rdf.data-vocabulary.org/#">
<span rel="v:rating">
<span typeof="v:Rating">
<span content="5" property="v:average"></span>
<span content="5" property="v:best"></span>
</span>
</span>
<span content="2" property="v:count"></span>
<div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="filled_green"><i class="icon-star"></i></span>
<span class="reviewCount">
2 Reviews
</span>
</div>
</div>
Given the following HTML:
<body>
<h2>
<span class="mw-headline" id="KNOWNID">S</span>
<span class="mw-editsection">
<span class="mw-editsection-bracket">[</span>
Bn
<span class="mw-editsection-bracket">]</span>
</span>
</h2>
<div class="h"></div>
<p>M</p>
<p>M</p>
<p>M</p>
<p>M</p>
<p>M</p>
<h2>
<span class="mw-headline" id="NEXTKNOWNID">S</span>
<span class="mw-editsection">
<span class="mw-editsection-bracket">[</span>
Bn
<span class="mw-editsection-bracket">]</span>
</span>
</h2>
</body>
I have the ID="KNOWNID" and need to select all <p></p> Elements until the id="NEXTKNOWNID". How can this be acomplised with XPATH?
Thanks
Use the preceding-sibling and following-sibling:
//p[preceding-sibling::h2/span[#id="KNOWNID"] and following-sibling::h2/span[#id="NEXTKNOWNID"]]