Currently working on Selenium WebDriver and code had been written in Java.
The Scenario is If i select the drop down value = Month range or Date Range or Week Range then the related drop down will populate (i.e if month Range is selected the From month and To month will be populated, if Date Range is selected the From Date and To Date will be populated, if Week Range is selected the From week and To week will be populated).
What Exactly i want to check whether if the Month Range drop down value is selected in the Period drop down then verify the related drop down that is From month and To month is populating.
Please anyone can help me for this secnario.
The HTML for Period:
<select id="periodId" name="period" style="display: none;">
<option value="l4w">Last 4 Weeks</option>
<option value="l52w">Last 52 Weeks</option>
<option value="daterange">Date Range</option>
<option value="weekrange">Week Range</option>
<option selected="" value="monthrange">Month Range</option>
<option value="yeartodate">Year To Date</option>
</select>
Once the week range is selected it need to select the below The HTML for WeekRange:
<dt id="week-label">
<dd id="week-element">
<select id="fromWeekYear" style="width:60px" name="fromWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option value="2013"> 2013</option>
<option selected="" value="2014"> 2014</option>
</select>
<select id="fromWeek" style="width:60px" name="fromWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
<option value="6"> W 6</option>
<option value="7"> W 7</option>
<option value="8"> W 8</option>
<option value="9"> W 9</option>
<option selected="" value="10"> W 10</option>
<option value="11"> W 11</option>
<option value="12"> W 12</option>
<option value="13"> W 13</option>
<option value="14"> W 14</option>
<option value="15"> W 15</option>
<option value="16"> W 16</option>
<option value="17"> W 17</option>
<option value="18"> W 18</option>
<option value="19"> W 19</option>
<option value="20"> W 20</option>
<option value="21"> W 21</option>
<option value="22"> W 22</option>
<option value="23"> W 23</option>
<option value="24"> W 24</option>
<option value="25"> W 25</option>
<option value="26"> W 26</option>
<option value="27"> W 27</option>
<option value="28"> W 28</option>
<option value="29"> W 29</option>
<option value="30"> W 30</option>
<option value="31"> W 31</option>
<option value="32"> W 32</option>
<option value="33"> W 33</option>
<option value="34"> W 34</option>
<option value="35"> W 35</option>
<option value="36"> W 36</option>
<option value="37"> W 37</option>
<option value="38"> W 38</option>
<option value="39"> W 39</option>
<option value="40"> W 40</option>
<option value="41"> W 41</option>
<option value="42"> W 42</option>
<option value="43"> W 43</option>
<option value="44"> W 44</option>
<option value="45"> W 45</option>
<option value="46"> W 46</option>
<option value="47"> W 47</option>
<option value="48"> W 48</option>
<option value="49"> W 49</option>
<option value="50"> W 50</option>
<option value="51"> W 51</option>
<option value="52"> W 52</option>
<option value="53"> W 53</option>
</select>
</dd>
<dd> </dd>
<dd> </dd>
Based on the Selection of the 1st filter option(i.e. WeekRange) 2nd filter (From Week to To Week is appearing as follows:
In javascript you have to write like below code.
var type = $("#periodId").val();
if(type == "weekrange"){
// then put java script to hide the related element/select boxes.
}else if(){
// then put java script to hide the related element/select boxes.
}else{
// then put java script to hide the related element/select boxes.
}
Related
How can I write a jQuery function that enables the value from second dropdown only if a value is selected on the first dropdown?
As I selected Shiva in first drop down it should be disabled from 2nd drop down.
fist drop down value must not be equal to 2nd dropdown.
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<select class="form-control" id="select3">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
Not sure if this is what you mean. Let me know. You can use a .find and .filter on it.
$('select').on('change', function() {
$('option').prop('disabled', false);
$('select').each(function() {
var val = this.value;
$('select').not(this).find('option').filter(function() {
return this.value === val;
}).prop('disabled', true);
});
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
</form>
Well in the project that I am working there's a database table containing the following fields :
From the database table I want to show beds that's available in the ward that's not occupied when the ward is selected , then in bed select tag should show only available beds .
The jsp form select tag code is :
<div class="form-group">
<label for="course">Ward No:</label>
<div class="form-select">
<select name="Ward" id="course">
<option value="0">--Select Ward No---</option>
<option value="ward1">1</option>
<option value="ward2">2</option>
<option value="ward3">3</option>
<option value="ward4">4</option>
<option value="ward5">5</option>
<option value="ward6">6</option>
<option value="ward7">7</option>
<option value="ward8">8</option>
<option value="ward9">9</option>
<option value="ward10">10</option>
<option value="ward11">11</option>
<option value="ward12">12</option>
</select>
<span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
</div>
</div>
<div class="form-group">
<label for="bed">Bed No:</label>
<div class="form-select">
<select name="Bed" id="course">
<option value="0">--Select Ward No---</option>
<option value="bed1">1</option>
<option value="bed2">2</option>
<option value="bed3">3</option>
<option value="bed4">4</option>
<option value="bed5">5</option>
<option value="bed6">6</option>
<option value="bed">7</option>
<option value="bed8">8</option>
<option value="bed9">9</option>
<option value="bed10">10</option>
<option value="bed11">11</option>
<option value="bed12">12</option>
</select>
<span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
</div>
</div>
So the question is how can I do this ?
I am new java development and this is my first project , so please excuse if any silly mistakes are found.
Thank you in advance for all helping out , its much appreciated.
The simple answer to your question is AJAX
Do an AJAX call to get the available beds from DB after selecting the ward number.
Form the bed dropdown dynamically.
Example:
<select name="Ward" id="course" onChange="fetchAvailableBeds()">
......
</select>
function fetchAvailableBeds()
{
var wardNo = $("#course").val();
var queryUrl = "REST_URL";
$.ajax({
url : URL,
data : "wardNo="+wardNo,
type : "POST",
success : function(data, textStatus, jqXHR)
{
var responseJSON = jqXHR.responseText;
var responseParsedJSON = JSON.parse(responseJSON);
var bedDetails = responseParsedJSON.bedDetails;
if(bedDetails.length > 0)
{
$('#bed').empty().append('<option>--Select Bed--</option>');
for(var i=0;i<bedDetails.length;i++)
{
$('#bed').append('<option value="'+bedDetails[i].name+'">'+bedDetails[i].id+'</option>' );
}
}
else
{
$('#bed').empty().append( '<option>--No Beds Available--</option>');
}
}
});
}
After selecting the ward number you can generate the select tag as string from database using for loop and print out the result on html
Not sure what I am doing wrong but the info that I select does not stick anymore when I navigate to another page and then go back.
This is code that works. It's for a a regular attendee:
<div class="linegroup">
<label class="notrequired" id="dietaryNeed_g1">Meal Preferences</label>
<select name="dietaryNeedValue_g1" id="dietaryNeedValue_g1" class="lbl-col-right" onclick="mealPrefs();">
<optgroup label="Please Select Your Meal Preferences">
<%--<%=cache.getValueListHTML( "ALL_MEALCODE", addSelect, d)%>--%>
<option value=""></option>
<option value="DAIRY" <%if(formFields.getDisplayValue( "dietaryConsiderationsOther_g1").equalsIgnoreCase( "Dairy-Free")){ %>selected
<%}%>>Dairy Free</option>
<option value="FOODALLE" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "FOODALLE")%>>Food Allergy</option>
<option value="KOSHER" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "KOSHER")%>>Kosher</option>
<option value="HALAL" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "HALAL")%>>Halal</option>
<option value="VEGAN" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "VEGAN")%>>Vegan</option>
<option value="VEGTRIAN" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "VEGTRIAN")%>>Vegetarian</option>
<option value="GLUTFREE" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "GLUTFREE")%>>Gluten-Free</option>
<option value="OTHER" <%=formFields.getSelectValue( "dietaryNeedValue_g1", "OTHER")%>>Other</option>
</optgroup>
</select>
This is the code for a guest. For some reason this drop down disappears whenever I go to the next page and then navigate back.
<div class="linegroup">
<label class="required" id="dietaryNeed_g<%=i%>">Meal Preferences</label>
<select name="dietaryNeedValue_g<%=i%>" id="dietaryNeedValue_g<%=i%>" data-parsley-trigger="focusout" class="firstselect lbl-col-right" onchange="mealPrefs();" novalidate>
<optgroup label="Please Select Your Meal Preferences">
<%--<%=cache.getValueListHTML( "ALL_MEALCODE", addSelect, d)%>--%>
<option value=""></option>
<option value="DAIRY" <%if(formFields.getDisplayValue( "dietaryConsiderationsOther_g"+ i).equalsIgnoreCase( "Dairy-Free")){ %>selected
<%}%>>Dairy Free</option>
<option value="FOODALLE" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "FOODALLE")%>>Food Allergy</option>
<option value="KOSHER" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "KOSHER")%>>Kosher</option>
<option value="HALAL" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "HALAL")%>>Halal</option>
<option value="VEGAN" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "VEGAN")%>>Vegan</option>
<option value="VEGTRIAN" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "VEGTRIAN")%>>Vegetarian</option>
<option value="GLUTFREE" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "GLUTFREE")%>>Gluten-Free</option>
<option value="OTHER" <%=formFields.getSelectValue( "dietaryNeedValue_g" + i, "OTHER")%>>Other</option>
</optgroup>
</select>
Any ideas on how to make the Guest dropdown stick?
Currently working on selenium webdriver and the using the language Java.
Log.info("Clicking on To weekrange dropdown");
JavascriptExecutor executor25 = (JavascriptExecutor)driver;
executor25.executeScript("document.getElementById('toWeekYear).style.display='block';");
Select select25 = new Select(driver.findElement(By.id("toWeekYear")));
select25.selectByVisibleText("2011");
JavascriptExecutor executor26 = (JavascriptExecutor)driver;
executor26.executeScript("document.getElementById('toWeekYear).style.display='block';");
Select select26 = new Select(driver.findElement(By.id(" toWeek")));
select26.selectByVisibleText(" W 5");
Thread.sleep(6000);
In the above code, am trying to select the week range and it is in the form to select year-2011 and week-W 5. This values are selecting from the dropdown. The problem is while selecting 1st dropdown it is selecting the year and while trying to select the second drop down am getting the error Cannot locate element with text: W 1
Here is the HTML tag:
<select id="fromWeekYear" style="width:60px" name="fromWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option selected="" value="2013"> 2013</option>
</select>
<select id="fromWeek" style="width:60px" name="fromWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
and
<select id="toWeekYear" style="width:60px" name="toWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option selected="" value="2013"> 2013</option>
</select>
<select id="toWeek" style="width:60px" name="toWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
Here is my fromweek javascript:
Log.info("Clicking on From weekrange dropdown");
JavascriptExecutor executor23 = (JavascriptExecutor)driver;
executor23.executeScript("document.getElementById('fromWeekYear').style.display='block';");
Select select23 = new Select(driver.findElement(By.id("fromWeekYear")));
select23.selectByVisibleText("2011");
JavascriptExecutor executor24 = (JavascriptExecutor)driver;
Thread.sleep(6000);
executor24.executeScript("document.getElementById('fromWeek').style.display='block';");
Select select24 = new Select(driver.findElement(By.id("fromWeek")));
select24.selectByVisibleText(" W 1");
Thread.sleep(6000);
Try this:
new Select(driver.findElement(By.id("fromWeekYear")).selectByValue("2010");
new Select(driver.findElement(By.id("toWeek")).selectByValue("1");
Value is single, use value.
If by text, your text has space:
new Select(driver.findElement(By.id("fromWeekYear")).selectByVisibleText(" 2010");
new Select(driver.findElement(By.id("toWeek")).selectByVisibleText(" W 1");
Other issue is that maybe your space is (& nbsp;)
You have some spacing issues:
driver.findElement(By.id(" toWeek")));
Should not have a space in the id:
driver.findElement(By.id("toWeek")));
I am stuck in one logic, where I have to verify if the options in dropdown are displaying twice. I searched in google for the solution, but didnt find any.
I have this code to get all the options from the dropdown. But not really sure how should I check if the options are displayed twice.
new Select(driver.findElement(By.xpath(//*[#id='unmappedTech']))).selectByVisibleText(VisibleText);
new Select(driver.findElement(By.xpath(//*[#id='unmappedTech']))).getOptions();
In my application, options are displaying twice in dropdown. Here is the source code of dropdown:
<table><tbody><tr>
<td>
<select name="unmappedTech" id="unmappedTech" multiple="multiple" size="10" style="width: 160px;">
<option class=" firepath-matching-node" value="142">Cloud Service Assurance</option>
<option value="123">Cloud Service Assurance Zenoss for Data Center and Cloud</option>
<option value="6">CUSTOMER COLLABORATION</option>
<option value="12">DESKTOP VIRTUALIZATION</option>
<option value="13">FACILITIES</option>
<option value="7">INSTANT MESSAGING</option>
<option value="8">MOBILE COLLABORATION</option>
<option value="141">Network Address Translation</option>
<option value="15">NETWORKING</option>
<option value="3">SECURITY</option>
<option value="16">STORAGE</option>
<option value="81">TestTechnology_Dont_Delete</option>
<option value="10">UNIFIED COMMUNICATIONS</option>
<option value="20">VCH VIDEO</option>
<option value="17">VIRTUALIZATION And CONSOLIDATION</option>
<option value="21">VtechnologyVtechnologyVtechnologyVtechnology</option>
<option value="2">WIRELESS</option>
<option class=" firepath-matching-node" value="142">Cloud Service Assurance</option>
<option value="123">Cloud Service Assurance Zenoss for Data Center and Cloud</option>
<option value="6">CUSTOMER COLLABORATION</option>
<option value="12">DESKTOP VIRTUALIZATION</option>
<option value="13">FACILITIES</option>
<option value="7">INSTANT MESSAGING</option>
<option value="8">MOBILE COLLABORATION</option>
<option value="141">Network Address Translation</option>
<option value="15">NETWORKING</option>
<option value="3">SECURITY</option>
<option value="16">STORAGE</option>
<option value="81">TestTechnology_Dont_Delete</option>
<option value="10">UNIFIED COMMUNICATIONS</option>
<option value="20">VCH VIDEO</option>
<option value="17">VIRTUALIZATION And CONSOLIDATION</option>
<option value="21">VtechnologyVtechnologyVtechnologyVtechnology</option>
<option value="2">WIRELESS</option>
</select>
</td>
I am not a Java person, so forgive me, but you are essentially just wanting to loop through all the options from that Select, keep a record of them, and ensure that one each loop iteration, that option doesn't already exist, so pseudo-code:
Select selectElement = new Select(driver.findElement(By.xpath(//*[#id='unmappedTech'])));
ArrayList<string> options = new ArrayList<string>();
for (WebElement element in selectElement.getOptions()) {
if (options.contains(element.getText())) {
// do something that lets the test fail because the option is listed twice
}
options.add(element.getText());
}
This isn't a Selenium problem as such, it's just comparing a list to see if something is already contained within that list.
This is the java code. Essentially checking whether duplicate is found by rechecking a set.
List<WebElement> options = driver.findElement(
By.xpath("//*[#id='unmappedTech']")).findElements(
By.tagName("option"));
HashSet<String> optionNames = new HashSet<>();
for (WebElement option : options) {
if (optionNames.contains(option.getText()))
System.out.println("Duplicate found");
else
optionNames.add(option.getText());
}
Select s = new Select(driver.findElement(
By.xpath("//Select[#id='unmappedTech']")));
List<WebElement> list = s.getOptions();
Set<String> listNames = new HashSet<String>(list.size());
for (WebElement element : list) {
//Set will not allow to add duplicate value
if(listNames.add(element.getText())==false){
System.out.println("Duplicate value is: "+element.getText());
}
}