Automating using Selenium - selenium

I am trying to find the text from the Select Elements "[New List]". The HTML code behind this is :
<div id="pageBody">
<div class="grid">
<div class="col_12 bgColor column">
<form method="POST" action="pickListEdit.cfm" name="formMain" id="formMain">
<input type="hidden" id="usrAction" name="usrAction" value="NONE"/>
<input type="hidden" id="listtype" name="listtype" value="ACCTS"/>
<input type="hidden" id="listmodified" name="listmodified" value="0"/>
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tbody>
<tr class="alt first last">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="360">
<tbody>
<tr class="alt first">
<td width="150" align="right" class="critH2">
<td height="1" align="left">
<select name="listkey" size="1" onchange="formSubmit('GET');"class="selectfont">
<option value="0">[New List]</option>
</select>
</td>
</tr>
<tr class="alt last">
</tbody>
</table>
</td>
<td width="10"/>
<td width="10"/>
<td valign="top">
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600">
</form>
</div>
</div>
</div>
</div>
</body>
The C# code that I am using is :
var AccPic = Driver.Instance.FindElement(By.ClassName("selectfont"));
var selectelement = new SelectElement(AccPic);
selectelement.SelectByText(AP);
The problem is it is unable to find the field name. What I need to do is find the element [New List] and select it. Can someone please help.

Assuming it's the only option tag on the page:
var newList = Driver.Instance.FindElement(By.TagName("option"));
var selectedElement = new SelectElement(newlist);

Related

Bottom spacing between tables

I'm building an email and have run into a problem where there seems to be automatic spacing at the bottom between two tables.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>
I've included tags such as: cellpadding cellspacing border and gave them a value on zero, which I though would have solved the problem, however that wasn't the case.
Add style="display: block;" to the image. (See Why does my image have space underneath? for a deeper explanation)
A quick glance at your code shows me you're going to have a lot more problems with email clients. I would strongly suggest testing before sending using a service like Litmus.
http://litmus.com
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" style="display: block;" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>

XPath: Get previous item, filtering by class

I have this HTML:
<div class="DivHeaderSizes" data-subgroup="1">
<img style="display:none" class="help-size-img-colorbox" data-subgroup="1_Man" src="Man.gif">
<div class="subgroup-description">Jogging</div>
<div class="help-size-link cboxElement" data-subgroup="1_Man">Tutorial</div>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="41" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="41">41</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_41" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_41" class="txt-Size" data-price="19.50" data-size="41" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="42" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="42">42</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_S" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_S" class="txt-Size" data-price="19.50" data-size="42" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Using Selenium with C# and starting from input element with name
ctl00$CthBody$sizelist$TxtSize_41
I want the XPath expression to get the text "Jogging". Thanks.
If the context node is input[#name='ctl00$CthBody$sizelist$TxtSize_41'], then the following XPath will select the div containing "Jogging":
(preceding::div[#class='subgroup-description'])[1]
Or you could use:
ancestor::div[1]/preceding-sibling::div[1]/div[#class='subgroup-description']

What can I do to see all the contents of my page when screens are smaller

I am new to bootstrap. What can I do to see all the contents of my page when screens are smaller. My table in Activities panel doesn't adjust with the screen size.I have a div named MiddleDiv where I append 1 or more tables on the fly.
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Activities</div>
<div class="panel-body">
<div class="table-responsive" id="MiddleDiv">
<table width="100%" style="margin-bottom:10px" id="Table_1" class="TableBlankClass table">
<tbody>
<tr class="bg-success">
<td style="font-weight:bold" id="ActivityCompany_1" colspan="3">Company(Bill to): TD General Insurance Company</td>
<td style="font-weight:bold" id="ActivityClient_1" colspan="6">Client: Test Adjsuter</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tbody>
<tr>
<td><button class="btn btn-danger btn-xs" id="ActivityDel_1" onclick="DelActivity('Table_1')" type="button">Del</button></td>
<td class="ActivitiesHeading">Activity</td>
<td>
<select onchange="GetRate('Table_1')" id="ActivityTypeDropDown_1" style="width:200px;" class="form-control TableSelectClass">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Accomodation">Accomodation</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td class="ActivitiesHeading">Comments</td>
<td colspan="2" class="ActivitiesHeading"><textarea rows="1" style="width: 275px; height: 35px;" class="form-control" id="ActivityComments_1"></textarea></td>
<td class="ActivitiesHeading">Status<span id="ActivitySpan_1"></span></td>
<td colspan="2" class="ActivitiesHeading">
<select onchange="CalculateActivities(); CreateRemoveReasonButton('Table_1');" id="ActivityStatusDropDown_1" style="width:200px;" class="form-control">
<option value="24859" selected="">Waiting To Process Payer Invoice</option>
</select>
</td>
</tr>
<tr>
<td class="ActivitiesHeading">Rate</td>
<td class="ActivitiesHeading">Qty</td>
<td class="ActivitiesHeading">Discount</td>
<td class="ActivitiesHeading">Discount %</td>
<td class="ActivitiesHeading">Reason For Discount</td>
<td class="ActivitiesHeading">Tax Applicable</td>
<td class="ActivitiesHeading">Taxes</td>
<td class="ActivitiesHeading">SubTotal</td>
<td class="ActivitiesHeading">Gross Total</td>
</tr>
<tr>
<td><input type="text" onblur="if (this.value=='') {this.value = 0;}" value="0" onkeyup="CalculateActivities()" id="ActivityRate_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='' || this.value=='0') {this.value = 1;}" value="1" onkeyup="CalculateActivities()" id="ActivityQty_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscount_1" class="form-control TableDiscountClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscountPercentage_1" class="form-control TableDiscountClass"></td>
<td>
<select id="ReasonForDiscountDropDown_1" class="form-control">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Late Report Delivery">Late Report Delivery</option>
<option value="Incorrect File Management">Incorrect File Management</option>
<option value="Client Satisfaction">Client Satisfaction</option>
<option value="Other - See Service Notes">Other - See Service Notes</option>
</select>
</td>
<td>
<select onchange="CalculateActivities()" id="ActivityTaxApplicable_1" class="form-control">
<option value="Yes" selected="">Yes</option>
<option value="No">No</option>
</select>
</td>
<td><img width="15" height="15" title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass">0.00</td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" >0.00</td> </tr> </table> </body>" src="/files/404048/93171/Info-32.png" id="ActivityTaxesAmount_1" class="TaxesClass" data-original-title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass"></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" ></td> </tr> </table> </body>"></td>
<td id="ActivitySubTotal_1">100.00</td>
<td id="ActivityGrossTotal_1">100.00</td>
</tr>
<tr>
<td class="ActivitiesHeading">Measure</td>
<td colspan="2" class="ActivitiesHeading">GAP Code</td>
<td colspan="3" class="ActivitiesHeading">Other Description</td>
<td colspan="3" class="ActivitiesHeading"> </td>
</tr>
<tr>
<td>
<select id="ActivityMeasure_1" class="form-control">
<option selected="" value="- Select One -">- Select One -</option>
</select>
</td>
<td colspan="2">
<select id="ActivityGAPCode_1" class="form-control">
<option value="00000" selected=""><-Select One-></option>
</select>
</td>
<td colspan="3"><input type="text" id="ActivityOtherDescription_1" class="form-control"></td>
<td colspan="3">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Total</div>
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table">
<tbody>
<tr>
<td class="HeadingTD">SubTotal</td>
<td id="AllSubTotal"></td>
<td class="HeadingTD">Discount</td>
<td id="AllDiscount"></td>
<td class="HeadingTD">Tax</td>
<td id="AllTax"></td>
<td class="HeadingTD">Gross Total</td>
<td id="AllGrossTotal"></td>
</tr>
<tr>
<td colspan="2" id="AddItemTD"></td>
<td colspan="2" id="SubmitActivitiesTD"></td>
<td colspan="2" id="VoidInvoiceTD"></td>
<td colspan="2" align="right"><button class="btn btn-primary btn-sm" onclick="window.parent.close()" type="button">Close</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I can see you are just wrapping traditional HTML tables with some bootstrap classes expecting them to be responsive.
It's a good start but you need to rethink how you construct your tables when you use bootstrap.
Bootstrap uses their "Grid System" http://getbootstrap.com/css/#grid
The grid system doesn't use tables at all. It uses divs with specific classes on them achieve the layout you are looking for. Until you fully use the bootstrap grid system you will not truly see a responsive design.
Take the time to learn the bootstrap grid system.
A bit of a side note and personal opinion: Looking at your form design (which looks great btw) you might not like the result of a responsive design. All of the form fields will end up stacking on top of each other. This form design really only works horizontally. If it were vertically aligned it might get very confusing. If it were me, I might design the form to fit interfaces as small as a tablet but not mobile.

Auto login form with Visual Basic

I need make an auto login form application with Visual Basic 10.0 for the following code:
</script>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td rowspan="10" width="50%" height="100%" background="images/bg1222.jpg" style="background-position:right top; background-repeat:repeat-y"></td>
<td rowspan="10" width="1" bgcolor="#000000"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width=100%>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="153">
<param name="movie" value="images/hed2.swf">
<param name="quality" value="high">
<embed src="images/hed2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="778" height="153"></embed>
</object>
</td>
</tr>
</table>
</td>
<!--<td rowspan="10" width="0" bgcolor="#000000"></td>-->
<td rowspan="10" width="50%" height="100%" background="images/bg1223.jpg" style="background-position:left top; background-repeat:repeat-y"></td>
</tr>
<tr>
<td width="780" height="30" align="center" valign="bottom" background="images/footer.gif"></td>
</tr>
<tr>
<td height="583" valign="top" style="background-repeat:repeat-y;" >
<br><br><br><br><br><br><br>
<center>
<form action="/cse/login/login1_check.jsp" name="first" method="post">
<table width="25%" height="90" border="0" class='formtable1'>
<caption align="top">
<strong> User Login </strong>
<br>
</caption>
<tr>
</tr>
<tr>
<td width="24%" height="32">
<div align="right"> User ID: </div>
</td>
<td width="76%">
<label>
<input name="uid" type="text" >
</label>
</td>
</tr>
<tr>
<td height="43">
<div align="right"> Password: </div>
</td>
<td>
<label>
<input name="password" type="password" >
</label>
</td>
</tr>
</table>
<input type="submit" name="sub" value="Login">
</form>
</center>`enter code here`
Say username is user and password is pass.
It should be auto filled and clicked in the submit button. What would the code be for Visual Basic 10.0?
Try this:
If Not String.IsNullOrEmpty(My.Settings.Username) And Not String.IsNullOrEmpty(My.Settings.Password) Then
TxtUsername.Text = My.Settings.Username
TxtPassword.Text = My.Settings.Password
End If
You first need to take all the elements that you want to interact to. If they have an ID, you don't need to search, simply get the element with:
Dim elem As HtmlElement = Webbrowser1.Document.GetElementById("myId")
If not, you need to search for yours, for example:
Dim inputs As New List(Of HtmlElement)(a.Document.GetElementsByTagName("input"))
For Each elem As HtmlElement In inputs
If elem.GetAttribute("name").Equals("uid") Then
'...
End If
Next
To set a value of a input:
elem.SetAttributte("value", passwordVar)
To click a clickable element (such a submit input):
elem.InvokeMember("submit")
Or:
elem.InvokeMember("click")

Input field is filled, but content is not saved using Selenium IDE

Using Selenium IDE, I'm able to fill an input field (using "type" command), but when I "save" the value, this value is lost. Doing the same by hand, everything works fine.
Any hint to solve this issue? I've already tried using typeKeys command.
The code inside the target page is:
<!-- language-all: lang-html -->
<div id="editDiv" class="editDialog">
<table cellspacing="0" width="100%">
<tbody>
<tr>
<td width="25%" style="">period</td>
<td align="right" width="25%" style="padding: 6px;">
<input id="period" type="text" onblur="changeValue(this.id, this.value, undefined)">
<br>
<label>da 0 a 9</label>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="100%">
<input type="button" value="Save" onclick="applyChanges()">
<input type="button" value="Cancel" onclick="removeEditDialog(false)">
</div>
To help more on this issue:
function changeValue(id, value, paramPos) {
var par = tempGlobalParams[id] ? tempGlobalParams[id] : tempGlobalPaintingsParams[paramPos][id];
if(checkRules(id, value, paramPos)){
par.custom = value;
}