Selecting from AngularJS dropdown in Protractor. - javascript

I have searched to forums over and over again - tried to make sense of some of what people have said, but the solutions never seem to fit my case.
My problem concerns selecting an item from a drop down list that has been coded in AngularJS on a website. I am running automated tests using Protractor and a Selenium server. Right now I am running different scripts I have coded on various websites that have been coded in AngularJS. Its fascinating to see something I code fill out a form automatically - so cool!
Unfortunately whenever I come across a drop down in my test I try and come up with a solution for hours and never have been able to figure it out. So I have come to stack!!
This is the code I am working with it's actually jetblue's sign up website so if you want to take a look go here: https://trueblue.jetblue.com/web/trueblue/register/
The trouble starts on page two with the dropdowns - don't know how to fill out a single one.
Thanks,
FB
<div class="row has-dropdown form-value error" style="z-index: 108; position: relative;"> <label for="my-info-title"> <span aria-hidden="true">*</span> <span class="visuallyHidden">required</span> Title
<div class="tb-select accountData_title"><span class="tb-select-title error">Select</span><div class="tb-select-dropdown"><ul><li class="selected" title=""><span>Select</span></li><li title="DR"><span> Dr
</span></li><li title="JT"><span> Jetter
</span></li><li title="MISS"><span> Miss
</span></li><li title="MR"><span> Mr
</span></li><li title="MRS"><span> Mrs
</span></li><li title="MS"><span> Ms
</span></li></ul></div><select name="accountData_title" class="my-info-title-select" id="my-info-title" style="display: none;"> <option value="">Select</option> <option value="DR"> Dr
</option> <option value="MISS"> Miss
</option> <option value="MR"> Mr
</option> <option value="MRS"> Mrs
</option> <option value="MS"> Ms

title: ElementFinder = $('select#my-info-title');
list: ArrayElementFinder = $('select#my-info-title > option');
First perform the title.click()[This clicks on the title dropdown]. Then choose the title you want to select.
eg: list.get(1).click() which chooses the title as DR
Hope this gives the answer for your problem.
Note: The solution is given with CSS Selectors and typescript.
if the above method fails try the below alternate function.
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.all(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};
Hope above functions helps you!!
0506

Related

Python Selenium WebDriver Stuck at the DropDown and And Not Selecting

I am a python selenium webdriver newbee.
I am stuck at a dropdown that has an "onchange" parameter in the html.
This is how the inspect window looks:
I am trying to first key in the date to the box called "Start"
Then move on to the dropdown for the "Schools" (School1, School2 etc).
Once I choose the school, the adjacent dropdown (School Levels) will refresh/update/populate with the school levels (middle, high, elem etc) for that school. There is an "onchange=" for this element.
Then move on to the School Levels dropdown to choose the level. There is an "onchange=" for this element, too
And then move on the the grade level dropdown.
I am stuck at the first dropdown.After I enter the start date, it does move on the dropdown and clicks on it and all three schools get visible but the driver does not select the school and does not move on to the adjacent school level dropdown.
As far as I understand from what I have found online, it most probably has to do with the onchange javascript event but couldn't figure out how to fire the event.
Please help.
Thank you in advance.
This is the html block for the start date box:
<div class="inline-block" ><input name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$DatePickerStartDate" type="text" size="9" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate" spellcheck="false" style="BACKGROUND:#ff9999;display:inline;" /><input type="image" name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$DatePickerStartDate_IB" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate_IB" src="Images/Mindex/WebControls/DatePicker/calendar.jpg" onclick="PopupCal('Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate', 'Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate',false,false); return false;" style="border-width:0px;display:inline;vertical-align:middle;" /></div></nobr>
And this is the html block for the two adjacent dropdowns:
<select name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown" onchange="javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown\',\'\')', 0)" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingDropDown">
<option selected="selected" value="3">School1</option>
<option value="4">School2</option>
<option value="5">School3</option>
</select>
<select name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown" onchange="javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown\',\'\')', 0)" id="Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingSchoolLevelDropDown">
<option selected="selected" value="4">K-8</option>
<option value="5">High School</option>
<option value="6">Summer School</option>
<option value="7">Middle School</option>
<option value="8">Elementary</option>
</select></nobr>
And this is my code:
print("Clicking on student selector icon")
driver.find_element_by_xpath("/html/body/form/div[4]/div[1]/div/div[2]/div/table/tbody/tr/td/table[2]/tbody/tr["+str(r)+"]/td[1]/input").click()
time.sleep(2)
tab_student = driver.find_element_by_id("Template1_Control0_TabHeaderDetails_MenuTabs1_MenuTabStudent")#we can move this to the start of the script
tab_student.click()
time.sleep(3)
icon_add_enrollment = driver.find_element_by_id("Template1_Control0_BottomPanel_IconButtonAdd")#we can move this to the start of the script
icon_add_enrollment.click()
time.sleep(3)
input_startdate = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_DatePickerStartDate")
input_startdate.send_keys("4/21/2010")
time.sleep(2)
print("Start Date entered")
dropdown_school = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingDropDown")
dropdown_school.select_by_visible_text("School1")
time.sleep(5)
print("School picked")
time.sleep(6)
dropdown_level = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_BuildingSchoolLevelDropDown")
dropdown_level.select_by_visible_text("Elementary")
#or maybe I can use this? actions.move_to_element(dropdown_building).click().perform()
time.sleep(2)
print("Building picked")
time.sleep(6)
dropdown_grade = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_GradeDropDown")
actions.move_to_element(dropdown_grade).click().perform()
time.sleep(2)
dropdown_grade.select_by_visible_text("1").click()
print("Grade picked")
time.sleep(2)
dropdown_ethnicity = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_ddlEthnicity")
actions.move_to_element(dropdown_ethnicity).click().perform()
time.sleep(2)
dropdown_ethnicity.select_by_visible_text("White").click()
print("Ethnicity picked")
time.sleep(2)
icon_save_enrollment = driver.find_element_by_id("Template1_Control0_BottomPanel_StudentEditEnrollmentAdd_IconButtonAdd")#we can move this to the start of the script
icon_save_enrollment.click()
time.sleep(4)
print("Enrollment added.. Moving on to enrolling the next child")
I also tried move_to_element().click(perform() but still not working.
The onchange javascripts in the html is not showing correctly for some reason so I am attaching them below:
//for school dropdown:
javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingDropDown\',\'\')', 0)
//for school levels dropdown:
javascript:setTimeout('__doPostBack(\'Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown\',\'\')', 0)
Thank you again.
As far as I understand, this is your exact problem:
After I enter the start date, it does move on the dropdown and clicks on it and all three schools get visible but the driver does not select the school and does not move on to the adjacent school level dropdown.
Which means the error occurs when selecting the dropdowns or <select> inputs once the date is properly detected by the onchange.
Ive found this to work on similar cases:
schoolSelector = Select(driver.find_element_by_xpath('//select[#name="Template1$Control0$BottomPanel$StudentEditEnrollmentAdd$BuildingSchoolLevelDropDown"]'))
schoolOptions = schoolSelector.options
then if you want to iterate through each school you may use schoolOptions to get each one with:
for school in range(0,len(schoolOptions)):
schoolSelector.select_by_index(school)
Edit:
Had not noticed you posted all of your code, I think selecting by index and via XPATH is usually more precise. Give it a shot.

Jquery preselect dropdown menu option in a plugin

I asked here a couple of days ago how can i make a dropdown section in a form pre select an option.
I have got an answer and tried it and some other suggestions i have found online, all of which had failed.
I attached two pictures showing what I did, so hopefully you guys will be able to help me.
(bear in mind that i used a plugin which only allows me to add code not edit the given one)
Num1
thats how the plugin made the form, i cannot edit it
Num2
thats what i have tried and it did not work
EDIT
here is the code the pulgin made:
<label class="fitText" style="font-size: 16px;">Product</label>
<select name="Product" data-export-field="">
<option value=""> - Product - </option>
<option value="A" data-price="0">
A
</option>
<option value="B" data-price="14">
B
(+$14.00)
</option>
</select>
What I made:
<script>
$(window).load(function() {
$('#Product option[value=A]').attr('selected','selected');
});
</script>
Hope you guys will help me! :D
Thanks
Yarin
This should achieve what you want-
script -
$(document).ready(function() {
$('select[name=Product] > option[value=A]').attr('selected','selected');
});
The # selector is for ID's, not name. Use the same selector for name as value.
$(document).ready() (or $(function() {} )) should be a little bit quicker as it calls when the DOM is ready for manipulation rather than when everything is ready. I've also heard that $(window).load(function() {}) can be called at unintentional times, project depending.
Otherwise your code is solid.
Or you can try this one :
$(document).ready(function(){
$("#select_id").val('A');
});
On page load, set default value for the select tag. Might help you.

PHP/Javascript: Where to specify components of a drop down list?

I have recently been trying to alter someone else's code however am a complete beginner when it comes to PHP/Javascript. I want to add an extra option to a drop down menu that specifies the Read/Write nature of an object. Currently the only options are 'R' and 'W' however I would like to add an R/W option for Read/Write. To the best of my knowledge I believe the drop down list itself is instantiated here however please correct me if I'm wrong.
<div class="form-group">
<label class="col-sm-3 control-label">Read/Write:</label>
<div class="col-sm-3">
<select class="form-control" ng-options="item for item in readWrite" ng-model="singleRegister.RW" ng-change="modbusChange(modbusDetailsEdit)"> </select>
</div>
</div>
Where should I be looking in the code for the items in the list? I found this in a javascript file that seemed like what i was looking for:
$scope.readWrite=['R','W'];
However when i altered it to look as below nothing changed in the code
$scope.readWrite=['R','W','R/W'];
Any help would be much appreciated.
EDIT: This is the list in question FWIW...

Having some issues with html events, ajax, and getting the correct value into javascript

i'm trying to wrap my head around html events, the use of ajax, and javascript
lets say i have a drop down box with countries
countries: <select name='country' id='country' onchange='showhotel(this.value);showpictures(this.value);'>
<option value='country1'>country1</option>
<option value='country2'>country2</option>
</select>
and i use ajax to output hotels in selected country in a new dropbox, but i also have function that would output pictures of the hotels under the form
Hotels: <select name='hotel' id='hotel'></select>
</form>
<div id='picture'> </div>
now lets say I've selected a country and outputted a picture
<div id='picture'> <img src='picture of hotel.jpg' onmouseover='showroom()'> </div>
now i want it so when i hover over a picture it will use the value from the hotels drop down box to output pictures of the room the hotel have available
now the question is
onmouseover="showroom(what the hell do i put in here to make this work???)"
like i said i use ajax to make this work, and since the img line is outputted from php i tried what i though would be the obvious
echo ("<img src='$pictureOfHotel' onmouseover='showroom($hotel)'>");
that didn't work, I've tried several thing for hours now, and i can't wrap my head around how to get this to work. any help would be greatly appreciated

Move the records per page next to pagination in datatables

I'm using datatables, with their example i was able to build tables nicely. But the problem is i don't seem to understand how to move the "records per page" element, which is a "span6" class of bootstrap. i do get the point that it's actually javascript which is doing this, need some help on this. Here is the LINK for the example i'm using.
This is the div you are taking about in that page
<div class="span6">
<div id="example_length" class="dataTables_length">
<label>
<select size="1" name="example_length" aria-controls="example">
<option value="10" selected="selected">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>records per page</label>
</div>
</div>
Just copy this to other location and modify the css accordingly.
To modify the DOM using Javascript.
http://woork.blogspot.in/2007/10/how-to-change-text-using-javascript.html
Take a look at this page in their documentation... DataTables dynamic language. It doesn't give the best explanations of how to move things but it's a good place to start experimenting. I was able to hide or change the "records per page" text and I would image there is a way to move it as well.
The preamble on that page says "Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults."
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page"
}
should give you a place to start.

Categories