Selenium automation script for <input>tag working as select tag (drop down) with checkbox in it for multiple selection? - selenium

Can anybody help me to find a solution on here
Selenium automation script for <input> tag working as select tag (drop down) with checkbox in it for multiple selection.
The values selected are reading from excel file. Please find below code trial :
List<WebElement> elements = (List<WebElement>) driver
.findElements(By.id("ctl00_ContentPlaceHolder1_rcbClinicians_Input"));
int numberOfElements = elements.size();
System.out.println("----size----- " + numberOfElements);
for (int i = 0; i < numberOfElements; i++) {
System.out.println(i);
elements = driver.findElements(By.id("ctl00_ContentPlaceHolder1_rcbClinicians_Input"));
elements.get(i).click();
}
Please help me find a solution
<li>Choose Clincians* </li>
<li>
<div id="ctl00_ContentPlaceHolder1_rcbClinicians" class="RadComboBox RadComboBox_Default" style="width:500px;white-space:normal;">
<table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%" class="rcbFocused">
<tbody><tr>
<td style="width:100%;" class="rcbInputCell rcbInputCellLeft"><input name="ctl00$ContentPlaceHolder1$rcbClinicians" type="text" class="rcbInput" id="ctl00_ContentPlaceHolder1_rcbClinicians_Input" value="" autocomplete="off"></td>
<td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_ContentPlaceHolder1_rcbClinicians_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
</tr>
</tbody></table>
<input id="ctl00_ContentPlaceHolder1_rcbClinicians_ClientState" name="ctl00_ContentPlaceHolder1_rcbClinicians_ClientState" type="hidden" autocomplete="off" value="{"logEntries":[],"value":"","text":"","enabled":true,"checkedIndices":[],"checkedItemsTextOverflows":false}">
</div>
</li>
</ul>
<ul>
<li>Choose CaseManagers* </li>
<li>
<div id="ctl00_ContentPlaceHolder1_rcbCaseManagers" class="RadComboBox RadComboBox_Default" style="width:500px;white-space:normal;">
<table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%" class="">
<tbody><tr>
<td style="width:100%;" class="rcbInputCell rcbInputCellLeft"><input name="ctl00$ContentPlaceHolder1$rcbCaseManagers" type="text" class="rcbInput" id="ctl00_ContentPlaceHolder1_rcbCaseManagers_Input" value="" autocomplete="off"></td>
<td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_ContentPlaceHolder1_rcbCaseManagers_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
</tr>
</tbody></table>
<input id="ctl00_ContentPlaceHolder1_rcbCaseManagers_ClientState" name="ctl00_ContentPlaceHolder1_rcbCaseManagers_ClientState" type="hidden" autocomplete="off" value="{"logEntries":[],"value":"","text":"","enabled":true,"checkedIndices":[],"checkedItemsTextOverflows":false}">
</div>
</li>
</ul>

I don't see anything in your code that you are reading values from Excel. if you want to select value one by one yu can call this below method n time witch the the value you want to select. If you want multiple selection you can modify it with a for loop to do so.
/**
* #author mbn217
* #Date ------
* #Purpose This method will select a element from a list of
* values by the name passed in the parameter
* #param element --> element of the webpage (the weblist element)
* #param Name --> The value we want to select
* #return N/A
*/
public static void selectElementByName(WebElement element, String Name) {
Select selectitem = new Select(element);
selectitem.selectByVisibleText(Name);
}

Related

Angular 5 trying to loop through array with ngIf's to show spans gives me all of them

I am trying to loop trough an array of objects that have an array of "dependent"-objects in them. For every dependent there is an array of, up to three ENUMS, AssignmentRoles. So for every AssignmentRole I want to display some html. My problem is I am displaying all three of the AssignmentRoles for every dependent even though they dont have every AssignmentRole in their AssignmentRole Array. This is what I am working with, and trying to do:
The object:
and this is the html:
<tr *ngFor="let assignment of filteredAssignments">
<td>
<ul class="dependent-entities" *ngFor="let dependent of assignment.DependentEntities">
<li class="filterable">
<span class="assignment-roles">
<ng-container *ngIf="dependent.AssignmentRoles[0] == AssignmentRole.HRResponsible">
<span class="hr-responsible"
HR
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="HRResponsible">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[1] == AssignmentRole.SoFContact">
<span class="sof-contact">
SF
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="SoFContact">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[2] == AssignmentRole.GeneralContact">
<span class="general-contact">
G
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="GeneralContact">
</ng-container>
</span>
</li>
</ul>
</td>
</tr>
*Edit, I placed the spans in ng-containers and removed the ngFor. Here is an image of how it looks. The first row is correct, the second should not be empty, the third is correct and the fourth should not be empty... So every other one is empty..
I got it working by removing the index e.g *ngIf="dependent.AssignmentRoles == AssignmentRole.GeneralContact"

xpath with Multiple condition in Selenium

Wants to locate element with multiple condition on particular row,
I want to Click on div which contains ng-click="condition001" which has parent link contains Auto-001
So query become like : Select element xpath("//div[contains(#ng-click,'condition001')]") where Link("Auto-001")
<tr ng-repeat="(abc, xyz)" ng-show="data.length > 0">
<td class="x001">
<div class="x002">
<a class="x003" href="#">Auto-001</a>
</div>
</td>
<td class="x004">
<div class="x005">
<div class="x006">
<div class="x007" ng-click="condition001" tabindex="0">
<i class="x008"></i>
</div>
</div>
</div>
</td>
</tr>
Please suggest relevant xpath code which can work for above criteria,
To click on the WebElement identified through xpath as ("//div[contains(#ng-click,'condition001')]") where it has partialLinkText as ("Auto-001") you can use the following line of Java code :
WebElement myElem = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//a[#class='x003' and contains(.,'Auto-001')]//following::td[1]//div[#class='x007' and #ng-click='condition001']")));

How to extract text between 2 same child tags of a parent tag

Below is the html markup and I want to extract mobile number 7788996655 using xpath:-
<table class="table hover" id="resultTable">
<tbody>
<tr class="odd">
<td class="left">
<img src="/symfony/web/index.php/pim/viewPhoto/gamerNumber/1/from/gameDir" height="200" width="196">
</td>
<td class="left">
<span style="font-weight:bold;">John Player</span>
<br>
<span style="font-weight:bold;">Email: </span>
john.player#yyeett.com,
<span style="font-weight:bold;">
Mobile: </span>7788996655,
<span style="font-weight:bold;">Skype: </span>
game.player,
<br>
<span style="font-weight:bold;">Designation: </span>
Moderator,
<br>
<span style="font-weight:bold;">Game Name: </span>
Counter Strike
<br>
</td>
</tr>
</tbody>
</table>
I tried below xpath, but it didn't worked:
//td/span[contains(.,'Mobile:')]/following-sibling::text()[1]
Can someone provide solution for this?
Workaround I tried is to get whole text within td and then used pattern matching regex to extract mobile number from it. But, now i want to know whether is it possible using xpath?
You can do it using below XPath
<parent td node xpath>/text()[preceding-sibling::span[1][text() = 'Mobile: ']]
Now for an explanation. /td/text() will select each text which is part of the td node but is not part of any other node. So in this case it ,,7788996655,, game.player, moderator.
Now out of these 4 text we want to filter out one which has a previous sibling, which is a span and has text Mobile:, so we can add [preceding-sibling::span[1][text()='Mobile: ']]

How to click on the checbox from a list of checkboxes available inside a table using selenium

I have been trying to click on the one particular checkbox, but all the checkboxes have the same tags and parameters inside. Only the text which is the name of the check box is varying, but unfortunately couldn't get that also to be used. Kindly do help me with this.
Html code:
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox1 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox2 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox3 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox4 name
Answers would be very much helpful and appreciated.
The xpaths I have tried:
//table/tbody/tr/td/input/following-sibling::text()
this is highlighting all the texts i.e names of checkboxes
//table/tbody/tr/td/input/following-sibling::br/preceding::text()='Checkbox name'
//table/tbody/tr/td/input/text()\[preceding::br and contains(../text(),'Checkbox name')\][1]
You should try using following xPath to select checkbox which is based on visible text :-
//td[contains(., 'Checkbox1 name')]/input
As you mentioned in the question, your purpose is to click on the checkbox.
You can select the input tag with the exact text:
//input[.="Checkbox1 name"]
or if you think there could be some extra spaces or text around the text, then you can use contains function:
//input[contains(., "Checkbox1 name")]
Also you can select by index:
element(by.tagName('table')).all(by.tagName('input')).get(INDEX).click();
Check this - protractor allows to search byCssContaining text -
http://www.protractortest.org/#/api?view=ProtractorBy.prototype.cssContainingText
It might be better than xPath.
Here is for your question:
function clickCheckboxByName (name) {
var checkbox = element(by.cssContainingText("input[type='checkbox']", name));
checkbox.click();
}

How do I implement something like this?

Well I have to implement something as follows:
I need to display a list of Contact IDs of all the contacts I have in my model.
<ul>
#for (int i = 0; i < Model.Contacts.ToList().Count; i++)
{
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a></li>
}
</ul>
Each list element will be clickable, upon clicking which, a dialog will popup.
function showContactInfoDialog(id) {
document.getElementById('contact-dialog').style.display = 'block';
}
The dialog should show that particular contact's First Name, Last Name, Title, Email.
<div id="contact-dialog">
<form action="Contact/SaveContactEdits" method="post">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" name="FName"value="#Model.Contacts.ToList()[id].FirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" name="LName" value="#Model.Contacts.ToList()[id].LastName" /></td>
</tr>
<tr>
<td>Title</td>
<td>
<input type="text" name="Title" value="#Model.Contacts.ToList()[id].Title" /></td>
</tr>
<tr>
<td>Email Address</td>
<td>
<input type="text" name="Email" value="#Model.Contacts.ToList()[id].Email" /></td>
</tr>
</table>
<input type="submit" value="Save"/>
</form>
</div>
The dialog should let user make edits to the contact's details.
How do I do this? I'm having problem in passing the 'id' parameter to the dialog box element.
<div id="contact-dialog">
I'm having problem in passing the 'id' parameter to the dialog box
element.
The way you are using the id is not correct as you use it like the following. In the given code below (taken from your code) you are using the id as the index and that won't work most of the time especially if the ids does not start with 0.
Model.Contacts.ToList()[id]
That also won't work because the onclick event happens on the client side where the model is no longer available. So what you can do, since calling another controller method is not an option is to write all the details in a hidden field. Put them on a single container, for example one div per contact, the assign the id of the contact to the div. When the a tag is clicked, you read the values from the div and assign them to the form. All of this can be handled easier with tools like knockout, but if using it is not an option then here's the code that will do the trick.
// in your loop do this
// btw, it would be better if you Contacts object is an IList so you can do indexing easier
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a>
<div id="#("contactrow"+Model.Contacts.ToList()[i].ContactId)">
#Html.HiddenFor(m=>Model.Contacts.ToList()[i].FirstName)
// do the same for the rest of the fields you want to show on the dialog
</div>
</li>
before you show the dialog, copy the contents to the form:
function showContactInfoDialog(id) {
// we are targetting this -> <input type="text" name="FName"
// assign an id (fname) for optimal performance
var container = $("#contactrow"+id);
        $("#fname").val(container.find('#FirstName').val());
// do the same for the rest of the fields
document.getElementById('contact-dialog')
.style.display = 'block';
}