Unable to select from dropdown in webpage using selenium VBA - vba

I am trying to select an option from a dropdown which in a form in web page with Selenium webdriver using VBA. There are 8 checkbox each checkbox gives 2 or 3 dropdown to select, Checkbox 3 and 4 has the same option so I am unable to select the 2nd option in 4th checkbox.
bot.FindElementsByCss(".bs-FilterControl-item-checkbox")(4).Click ' to select 4th checkbox it works
bot.FindElementByXPath("//*[#value='false']").Click ' this code selects the 2nd option in the 3rd checkbox
so i tried the below code it results as NoSuchElementError :
bot.FindElementByXPath("//*[#value='false'][2]").Click
Here is the complete HTML code of form:
<form>
<div class="bs-FilterControl-flyout">
<div class="bs-FilterControl-flyout-inner">
<div class="bs-FilterControl-flyout-gradient"></div>
<div class="bs-FilterControl-flyout-contents">
<div class="bs-FilterControl-flyout-header"><button class="Button bs-ButtonLegacy Flex-flex" type="button" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--default Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Clear</span></span></div></div></button>
<h2><span>Filters</span></h2><button class="Button bs-ButtonLegacy Button--color Button--color--blue Flex-flex" type="submit" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--blue Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--white Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Done</span></span></div></div></button></div>
<div
class="bs-FilterControl-list">
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="created"><span>Date</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="inTheLast">is in the last</option>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="isOnOrAfter">is on or after</option>
<option value="isBefore">is before</option>
<option value="isBeforeOrOn">is before or on</option>
</select>
<div class="bs-FilterControl-input-container">
<div class="bs-FilterControl-inTheLast-container"><span><input class="bs-FilterControl-textInput" type="text" value=""></span>
<select class="bs-FilterControl-unitSelect">
<option value="days">days</option>
<option value="months">months</option>
</select>
</div>
</div>
<div class="bs-FilterControl-timezone">
<div class="Box-root">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart" style="margin-left: -8px;">
<div class="Box-root Box-hideIfEmpty Margin-left--8">
<div class="bs-FilterControl-timezoneLabel"><span>Timezone:</span></div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio46"><input title="CST/CDT - Chicago" class="Radio-source" id="radio46" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--blue"><div class="Radio-dot Box-root Box-background--white"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">CST/CDT</span></div></label></div>
<div
class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio47"><input title="UTC - UTC" class="Radio-source" id="radio47" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--white"><div class="Radio-dot Box-root"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">UTC</span></div></label></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="amount"><span>Amount</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="greaterThan">is greater than</option>
<option value="lessThan">is less than</option>
</select>
<div class="bs-FilterControl-input-container"><span> </span><span><input class="bs-FilterControl-textInput" type="text" value=""></span></div>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="paid"><span>Status</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is successful</option>
<option value="false">is failed</option>
<option value="pending">is pending</option>
</select>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="refunded"><span>Refunded</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is fully refunded</option>
<option value="false">is not refunded</option>
<option value="partial">is partially refunded</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="captured"><span>Captured</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">has been captured</option>
<option value="false">has not been captured</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="disputed"><span>Disputed</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is disputed</option>
<option value="false">is not disputed</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="source"><span>Payment source</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="card">Card</option>
<option value="bank_account">Bank Account</option>
<option value="ach_credit_transfer">ACH Credit Transfer</option>
<option value="ach_debit">ACH Debit</option>
<option value="alipay">Alipay</option>
<option value="bancontact">Bancontact</option>
<option value="eps">EPS</option>
<option value="giropay">Giropay</option>
<option value="ideal">iDEAL</option>
<option value="multibanco">Multibanco</option>
<option value="p24">P24</option>
<option value="sofort">SOFORT</option>
<option value="three_d_secure">3D Secure</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Try
bot.FindElementByXPath("//*[text()='is not refunded']").Click
It matches the element on the desired text of the drop down option.

Related

How to position font-awesome icon vertically in bootstrap row when one column has textarea

I would like the flag in the far right column to be vertically in the middle of the "row"
Looking for bootstrap 3 solution
Here is my code:
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="row form-row">
<div class="form-group col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field 1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" style="cursor:default" aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
<div class="form-group col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1 Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
<div class="col-xs-1">
<i class="text-danger fa fa-flag fa-2x fa-fw"></i>
</div>
</div>
</div>
</div>
</div>
This is it:
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="container">
<div class="row>">
<div class="form-group">
<div class="col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field
1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger"
aria-hidden="true" style="cursor:default"
aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1
Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1">
<i class="glyphicon glyphicon-flag" style="color: #A54142; font-size: 20px; padding-top: 30px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you can see:https://jsfiddle.net/sugandhnikhil/vdhmjn17/
Thanks!!

Anomaly in Bootstrap 3.3.7, 'row' class and 'col' cllass

I have an abnormal behavior when I use the 'row' class
the 'notes' field is not displayed for the whole width. seems to behave in his own way.
I used bootstrap 3.3.7, jquery-1.12.4, jquery.dataTables 1.10.16, bootstrap-select 1.12.4
<div class="table-bordered" style="padding:10px;margin:5px; border-color:dodgerblue; border-width:2px">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue; align-content:center">Aggiungi Anomalie<span class="badge badge-default"></span></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select id="ListaAnomalieSelect" name="ListaAnomalieSelect" class="selectpicker form-control" title="Selezionare Ammaloramento..."></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Gravità...">
<option>Lieve</option>
<option>Medio</option>
<option>Alto</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Estensione...">
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="3" class="form-control" id="Note" name="Note" placeholder="Note"></textarea>
</div>
</div>
</div>
<button id="AddAnomalia" class="btn btn-success" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-ok"></i> Aggiungi</button>
</div>
the result on the chrome browser is
does anyone know where the error is? thank you
The problem is that .row can only contain columns. Wrap the content in a .col- like this:
<div class="row">
<div class="col-xs-12">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue">Anomalie Elemento<span class="badge badge-default"></span></h3>
<div class="table-responsive" style="width: 100%; border: 1px solid black; padding: 3px; margin-top:10px;">
<table id="AnomalieDatatable" class="display table-striped table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Anomalia</th>
<th>Estensione</th>
<th>Note</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Remove extra space before first col in bootstrap

Before the first col, there is big space left, like I have used pull-1. Before the first row I have my navbar with margin-bottom:0;
Here is my code
<div class="container-fluid">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area" >
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
I think you are talking about the space created by the container-fluid.
With container-fluid
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area">
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
Without container-fluid
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area">
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
Hope this helps!

Two inputs same form column taking all the cell width Bootstrap 3

I'm trying to get hands over Bootstrap 3 and I'm kindof struggling with the new classes for the grid. Previous versions of Bootstrap let you set the width of a input by adding the span-* class so if you wanted to put two inputs on the same form column, adding span-2 and span-10 did the job. I'm trying to do this with bootstrap 3 but I don't get the same result as you can see in this fiddle, I want to set the select and the input on the same col. I want the labels at top of the inputs so adding the inline class to the form don't work.
What I'm missing here?
Cheers and thanks in advance
http://jsbin.com/esewOyo/1/
Most people can't believe how many classes are involved but form-control is always 100% so each one must go inside a col-- class and if you want to put elements on the same row, in this situation, then you'd use a nested row with columns as follows:
<div class="container">
<form role="form">
<div class="row my-row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label> </label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
</div>
</form>
</div>
Because the gutter is too wide for my taste:
.row.my-row, .row.my-row .row {
margin-left:-1%;
margin-right:-1%
}
.row.my-row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.row.my-row .row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}

How to make a dropdown select form in Twitter Bootstrap

They've provided the example markup for a regular input-text form:
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
But how could I get something like
Just a bit confused on how the markup would look for a select list. Thanks!
Bootstrap 2.3.2:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Select:</label>
<div class="controls">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
Bootstrap 3.x:
<form role="form" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label">Select:</label>
<div class="col-sm-3">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</fieldset>
</form>
col-sm-2 and col-sm-3 define the widths for you can change accordingly. Have a look at the Grid system on the Bootstrap site to see the different variations.
Hope this helps
The answer by Lodder is correct for Bootstrap 2.x, but it will not work for Bootstrap 3. This will work Bootstrap 3:
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
And work without value - Bootstrap 3.
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>