Use watir web driver to click download icon - webdriver

I am trying to use watir to download files from a web page. Trying to figure out how to click the 'download icon' and then save the file.
The files are in a table, and I want to download each file with the word 'done' in the column and then same it as the report name.
The HTML is below:
<div class="portlet" id="homeStatus">
<div class="portletHeader statusHeader">
Reports and Request Status
</div>
<div class="portletContent" id="statusContent">
<div class="status">
<div class="row-fluid boldText statusHeaderRow">
<div class="span3">Name</div>
<div class="span2">ID</div>
<div class="span3">Date</div>
<div class="span1">Status</div>
<div class="span3">Actions</div>
</div>
<div class="row-fluid statusResultsText">
<div class="span3 bold">
<span class="reportName">report2</span>
</div>
<div class="span2">429696109</div>
<div class="span3">2015-06-14 20:06:55</div>
<div class="span1">Done</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374189255">
<i class="icon-download-alt mediumBlueIcon downloadIcon" id = "/decision_support/Status_retrieve_request.aspx?questionid=Q10201&applicationid=300&JobId=429696109&status=D&Extension=xls&filename=/Outbound06/q3bk06m_429696109_A14A90C6XB906X4F05X8539XDE448240CE97&reqname=report2,429696109" title="Download"></i>
</i>
<i class="icon-cog mediumBlueIcon modifydrequestIcon" id = "d_/decision_support/Report_Builder.aspx?country_cd=CA&qid=Q10201&exe_id=291&AppId=300&divid=1&JobId=429696109&reopen=true" title="Modify"></i>
</div>
</div>
<div class="row-fluid statusResultsText alternateBackground">
<div class="span3 bold">
<span class="reportName">Report Sun Jun 14 20:56:46 2015</span>
</div>
<div class="span2">429695641</div>
<div class="span3">2015-06-14 20:01:34</div>
<div class="span1">User Error</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374188794">
</div>
</div>
</div>
</div>
</div>

# iterate through rows
Browser.divs.each do |row|
if row.div(:class => "span1").text == "Done"
report_name = row.span(:class => "reportName").text
row.divs.last.is.each do |i|
# move the mouse to <i> tag and click the <a> link, if <i> is an icon and <a> link is not present
Browser.driver.action.move_to(i.wd).click.perform
end
end
end

Related

Do not send blank fields via email+contact form 7

I implemented a service booking form using contact form 7. How can I prevent unselected fields from being sent to the customer's email? My form is as follows:
<div class="row">
<div class="col-sm-4">
<span style="padding-bottom: 2em;"></span>
<span class="products">test 1</span>
</div>
<div class="col-sm-2">
<div class="qty-count qty-count--order">
<span class="count-reduce">–</span>
[text text-195 class:count-input "0"]
<span class="count-add">+</span>
</div>
</div>
<div class="col-sm-4">
<span style="padding-bottom: 2em;"></span>
<span class="products"> test 2</span>
</div>
<div class="col-sm-2">
<div class="qty-count qty-count--order">
<span class="count-reduce">–</span>
[text text-349 class:count-input "0"]
<span class="count-add">+</span>
</div>
</div>
</div>
config email:
test1: [text-195]
test2: [text-349]
You should add a star(*) after input.something like this:
[text* text-349 class:count-input "0"]

how to use FOSCommentBundle

Im new to symfony3 and I need a bit of help,I have a timeline page that contains posts and every post has a comment field so in order to do that I've installed the FOSCommentBundle following all the steps in this documentation https://github.com/FriendsOfSymfony/FOSCommentBundle/blob/master/Resources/doc/index.md and then I integrated it with the FOSUserBundle, and I did the following changes in the async.html.twig file :
<div id="fos_comment_thread">#comments</div>
<script type="text/javascript">
// thread id
var fos_comment_thread_id = 'pub';
// api base url to use for initial requests
var fos_comment_thread_api_base_url = 'localhost/Outdoors5/web/app_dev.php/threads';
// Snippet for asynchronously loading the comments
(function() {
var fos_comment_script = document.createElement('script');
fos_comment_script.async = true;
fos_comment_script.src = '{{ asset('bundles/foscomment/js/comments.js') }}';
fos_comment_script.type = 'text/javascript';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fos_comment_script);
})();
</script>
but in the end I got very confused on how I use this ,I passed hours trying to understand and searching for tuto, but no luck.
this is my view
<section id="timeline">
{% for publication in publications %}
<div id="result"></div>
<div class="page-content page-app page-profil " >
<div class="profil-content">
<div class="row">
<div class="row">
<div class="item item-comment">
<div class="user">
<h5 class="name">{{ publication.idProfil.nom }}</h5>
<div class="clearfix">
<p class="time">{% if publication.dateCreation %}{{ publication.dateCreation|date('Y-m-d') }}{% endif %}</p>
</div>
<div class="comment">
<p class="c-primary m-b-0"><strong>{{ publication.texte }}</strong></p>
</div>
</div>
<div class="more">
<div class="row">
<div class="col-sm-4 like">
<i class="fa fa-heart"></i> Like
</div>
<div class="col-sm-4 more-comments">
<div class="comment-number">
<i class="icon-bubble"></i> Comments<span class="pull-right badge badge-dark">3</span>
</div>
</div>
<div class="col-sm-4 more-share">
<i class="icon-share"></i> Share
</div>
</div>
<div class="row comments">
<div class="col-sm-12">
<ul>
<li class="clearfix">
<div class="clearfix">
<div class="info">
<div class="name"><strong class="primary-font"></strong></div>
<div class="date"></div>
</div>
<p>
comment 1
</p>
</div>
</li>
<li></li>
</ul>
</div>
</div>
<div class="row share">
<div class="share-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="share-twitter">
<i class="fa fa-twitter"></i>
</div>
<div class="share-google">
<i class="fa fa-google-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</section>
Could you point me to the right direction?
thank you
There is no need to modify async.html.twig. You just need to add the following code in your twig view:
{% include 'FOSCommentBundle:Thread:async.html.twig' with {'id': 'foo'} %}
To sum up, after doing the following steps:
Step 1: Setting up the bundle
Step 2: Create your Comment and Thread classes
Step 3: Import FOSCommentBundle routing
Step 4: Enable comments on a page
For the FOSUserBundle integration you just have to extend the Comment class as explained in Step 6: Integration with FOSUserBundle

Semantic.ui dropdown not working with React.js

I'm trying to use Semantic.ui's dropdown in my Meteor.js + React.js app. Everything else with Semantic.ui works fine, but I can't make the dropdown menu work. Here's my code:
NavigationMain = React.createClass({
componentDidMount() {
$('.ui.dropdown.right').dropdown();
},
componentDidUpdate() {
$('.ui.dropdown.right').dropdown('refresh');
},
_openChat(){
console.log("click");
},
render(){
return (
<div className="ui top attached menu">
<div className="ui dropdown icon item" onClick={this._openChat}>
<i className="comments outline icon"></i>
</div>
<div className="ui dropdown right icon item">
<i className="wrench icon"></i>
<div className="menu">
<div className="item">
<i className="dropdown icon"></i>
<span className="text">New</span>
<div className="menu">
<div className="item">Document</div>
<div className="item">Image</div>
</div>
</div>
<div className="item">
Open...
</div>
<div className="item">
Save...
</div>
<div className="item">Edit Permissions</div>
<div className="divider"></div>
<div className="header">
Export
</div>
<div className="item">
Share...
</div>
</div>
</div>
</div>
);
}
});
I have also tried using Reacts ref attribute to reference the element like this:
$(this.refs.menu).dropdown();
But it doesn't seem to help either.
All the examples I've found, for example the Semantic.ui's official integration doc (http://semantic-ui.com/introduction/integrations.html), work like this and I've made it work before without React. That's why I'm starting to feel helpless.
Any help with this would be appreciated.
Works for me.
var Content = React.createClass({
componentDidMount: function() {
$('.ui.dropdown').dropdown()
},
render: function () {
return <div className="ui dropdown">
<div className="text">File</div>
<i className="dropdown icon" />
<div className="menu">
<div className="item">New</div>
<div className="item">
<span className="description">ctrl + o</span>
Open...
</div>
<div className="item">
<span className="description">ctrl + s</span>
Save as...
</div>
<div className="item">
<span className="description">ctrl + r</span>
Rename
</div>
<div className="item">Make a copy</div>
<div className="item">
<i className="folder icon" />
Move to folder
</div>
<div className="item">
<i className="trash icon" />
Move to trash
</div>
<div className="divider"></div>
<div className="item">Download As...</div>
<div className="item">
<i className="dropdown icon" />
Publish To Web
<div className="menu">
<div className="item">Google Docs</div>
<div className="item">Google Drive</div>
<div className="item">Dropbox</div>
<div className="item">Adobe Creative Cloud</div>
<div className="item">Private FTP</div>
<div className="item">Another Service...</div>
</div>
</div>
<div className="item">E-mail Collaborators</div>
</div>
</div>
}
});
ReactDOM.render(
<Content />,
document.getElementById('container')
);
Here is a fiddle
https://jsfiddle.net/85z7o3n2/

DomCrawler complex div nesting

I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();

Foundation 5 text box not responding

The text boxes load fine and look great, but you can't click and select text. You can click the textbox and the cursor moves to the first position, but nothing else. For some reason the mouse isn't working in the controls, but the keyboard is.
These are dynamically created text boxes based on the number of rows from the DB. Also, the user can click a spiffy + image to add additional rows. I'm using F5 and also a sortable plugin.
HTML:
<div class="row">
<div class="small-12 large-10 small-centered columns" id="Ingredients">
<ul id="sortable-with-handles" class="sortable list">
<li><div class='row'><div class='small-12 large-12 small-centered columns'><div class='row'>
<div class='small-3 large-1 columns'>Sort</div>
<div class='small-3 large-4 columns'>Ingredient</div>
<div class='small-2 large-2 columns'>Dept</div>
<div class='small-3 large-4 columns'>Shopping List</div>
<div class='small-1 large-1 columns'><img src='./images/green_add.png' id='add_row' height='25' width='25' title='Add Another Row' /></div>
</div></div></div></li>
<li data-id=1><div class='row'><div class='small-12 large-12 small-centered columns' id='ingredients1'><div class='row'>
<div class='small-3 large-1 columns'><img id='sort_1' class='handle' src='./images/sort-icon.png' /></div>
<div class='small-3 large-4 columns'><input type='text' id='ingr_1' name='ingr_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' /></div>
<div class='small-2 large-2 columns'><select id='dept_1' name='dept_1' style='font-size:75%;' class='medium'>
<option value='0' style='font-size:8pt;'>Choose...</option>
<div class='small-3 large-4 columns'><input type='text' id='shop_1' name='shop_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' /></div>
<div class='small-1 large-1 columns'><img src='./images/delete.png' id='delete_row_1' height='25' width='25' title='Remove Ingredient' /></div>
</div></div></div></li>
</ul>
</div>
</div>
I'm including a screenshot:
I had a similar problem and it was turned out to be malformed html - I believe in my case, I had a <div class="row"> that was nested improperly. Looking at your code, it appears you are missing a closing div on your dropdown.
<div class='small-2 large-2 columns'>
<select id='dept_1' name='dept_1' style='font-size:75%;' class='medium'>
<option value='0' style='font-size:8pt;'>Choose...</option>
<!-- missing closing div -->
<div class='small-3 large-4 columns'><input type='text' id='shop_1' name='shop_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' />
</div>

Resources