Trying to initialize multiple 'select' inputs inside a list item - each

my first post at StackOverFlow ^_^ (So yeah, i'm a noob, be gentle)
I have searched and actually found several solutions to my question around the web, but for some reason none of them work for me.
So here it goes:
I have a list item, and inside it multiple 'select' inputs, as such:
<li id="langlevels">
<select id="encombobox"></select>
<select id="frcombobox"></select>
<select id="hecombobox"></select>
<select id="rucombobox"></select>
<select id="arcombobox"></select>
<select id="otcombobox"></select>
</li>
Now what i'm trying to do is: Using jQuery, initialize all of the 'select' inputs to values I have in an array:
var lang_levels = new Array("Native Level", "Good Level", "Amateur Level");
The way i'm trying (to no avail) to do this is:
//Initializing language levels combobox values
$("#langlevels > select").each(function () {
for(var i=0; i<lang_levels.length;++i)
{
addOption($(this), lang_levels[i], lang_levels[i]);
}
*/
});
NOTE: addOption() is a method I know to be working because I use it to initialize other, un-nested 'select' inputs.
I would very much appreciate your help!
Thanks in advance :)

OK Got it!
The only problem was this:
addOption($(this), lang_levels[i], lang_levels[i]);
was supposed to be this:
addOption(this, lang_levels[i], lang_levels[i]);

Related

Returning hrefs using Selenium

I'm working with html loosely structured like this:
...
<div class='TL-dsdf2323...'>
<a href='/link1/'>
(more stuff)
</a>
<a href='/link2/'>
(more stuff)
</a>
</div>
...
I want to be able to return all of the hrefs contained within this particular div. So far it seems like I am able to locate the proper div
div = driver.find_elements_by_xpath("//div[starts-with(#class, 'TL')]")
This is where I'm hitting a wall though. I've gone through other posts and tried several options such as
links = div.find_elements_by_xpath("//a[starts-with(#href,'/link')]")
and
div.find_element_by_partial_link_text('/link')
but I keep returning empty lists. Any idea where I'm going wrong here?
Edit:
here's a picture of the actual html. I simplified the div class name from ThumbnailLayout to TL and the href /listing to /link
As #mr_mooo_cow pointed out in a comment, a delay was needed in order to extract the links. Here is the final working code:
a_tags = WebDriverWait(driver,10).until(EC.presence_of_all_elements_located( (By.XPATH, "//a[starts-with(#href,'/listing')]") ))
links = []
for link in a_tags:
links.append(link.get_attribute('href'))
Can you try something like this:
links = div.find_elements_by_xpath("//a[starts-with(#href,'/link') and ./div[starts-with(#class, 'TL')]]")
./ references the parent element in xpath. I haven't tested this so let me know if it doesn't work.

While loops in EJS display on a single line

I have rendered data into EJS and now using a while loop I want to cycle through that data and display it on a single line. For example let's say the data is an array of objects with name attributes. I have the names ['Bob','Chris','Sarah']. After I have sent the data over to EJS I want Bob to appear, and then after some time Bob disappears and then Chris appears and then Sarah appears.
As of right now my code outputs them all at once over multiple lines, instead of one at a time on a single line as I desire.
<body>
<% var current = 0; %>
<% while (current < 2){ %>
<h1> Hey <%= person[current].name %>, how are you doing? </h1>
<% current += 1;
};%>
</body>
The output should be on a single line: Hey CURRENT NAME, how are you doing? Then the current name should just keep changing.
Instead the code outputs three lines, one for each name. Does anybody know how to fix this? Thanks.
I think you are confusing template processing (which produces static output) with dynamic updating of a DOM element. The latter is more of a problem for a front-end framework (although just what you have provided is simple enough in vanilla JS).
I would look into just creating a template with a placeholder for the name and then use a timer to update the text inside:
setInterval(3000, function(){
var span = document.getElementById('name-span');
if ('textContent' in span) {
span.textContent = person[current].name;
} else {
span.innerText = person[current].name;
}
current = (current + 1) % person.length;
}
Of course you need to figure out a better way to access person and current instead of using globals.

Can't select element from drop down menu E2E testing using Protractor [duplicate]

This question already has answers here:
How to select option in drop down protractorjs e2e tests
(34 answers)
Closed 5 years ago.
There's quite a few ways to do this and I've tried a good number of them but I can't select an item from a drop down menu when doing an automated test.
"Select" is the default choice that appears in the drop down menu, I want the automated test to pick one of the elements, doesn't matter which one
This is the HTML Code
<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.investmentAmount" required="" ng-class="{submitted:invalid}">
<option value="">Select</option>
<option value="<50"> 50K</option>
<option value="50-100">100K</option>
<option value="100-250">250K</option>
<option value="250-500">500K</option>
</select>
And this is my Protractor file
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element(by.cssContainingText("Select"))
.then(function(options){
options[2].click();
});
}
};
browser.sleep(2000);
I've tried using by.cssElement, by.xpath etc.
When I run the above, I get no errors but it doesn't select any element either.
Thanks
Selects are an odd duck for sure. I generally just click the option by text (when possible). Eg. you should be able to do something like this...
var selectOptionByText = function(text) {
return element(by.cssContainingText('option', text)).click();
};
Once you clicked on //select[#ng-model='user.investmentAmount'] usng xpath,
Put some wait like "browser.sleep(2000)" then use //option[text()='100K'] to click.
It's because of you are selecting only one option containing 'Select' value and expecting array,
try below, first get the select box by model and get all options by
html tag name in array
browser.element(by.model('user.investmentAmount')).all(by.tagName('option')).
then(function(items){
items[2].click();
});

Visual Studio Coded UI: Select HTML Element by CSS Selector

I have run into a problem selecting an item within Microsoft's CodedUI framework. I have a page full of items that can be added/removed via selecting a checkbox. The checkboxes do not have unique id on them, and I am having trouble selecting other than the first item when looking for a particular Tag/class combination. Is there some trick to doing this that isn't immediately obvious.
There are a couple different options here:
1. You could select the object by selecting the item related to it
<div id="parent">
<label id="checkbox1234">MyCheckBox</label>
<input checked="false"></input>
</div>
... could be selected as:
HtmlDiv parent = new HtmlDiv(browserWindow);
parent.SearchProperties["innerText"] = "MyCheckBox";
HtmlCheckBox target = new HtmlCheckbox(parent);
target.SearchProperties["TagName"] = "INPUT";
return target;
or
HtmlLabel sibling = new HtmlLabel(browserWindow);
sibling.SearchProperties["id"] = "checkbox1234";
UITestControlCollection col = sibling.GetParent().GetChildren();
foreach (UITestControl control in col)
{
if (control.ControlType.ToString().Equals("HtmlCheckBox"))
{
return (HtmlCheckBox)control;
}
}
You can use these test utilities created by Gautam Goenka. They worked wonders for me as far as identifying the content of an object and using it for assertions. Still, if you don't have any meaningful way of identifying the objects based on content, this won't help you either. When all else fails, add some useful identifying properties to the HTML.

Show custom message without time prefix in <p:schedule>?

I would like to show a custom message in <p:schedule>. It shows the message with time prefix, e.g. "12a CycDemo".
How can I show only "CycDemo" without time prefix? I'm adding it as follows:
model.addEvent(new DefaultScheduleEvent("CycDemo", fromDate, toDate));
I get one solution. It will not be good solution because of I still cannot find another way.
When I debug the html content on the browser by the developer tool, I found the following code.
....
<span class="fc-event-time">12a</span>
<span class=".....">CycDemo</span>
...
That's why, I solve it by CSS display:none.
.fc-event-time {
display: none;
}
Now, I can only see my expected message without time prefix :)
You have to add an empty timeFormat attribute in <p:schedule> then the prefix will disappear.
<p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeFormat="">
Set AllDay to true of DefaultScheduleEvent
DefaultScheduleEvent d = new DefaultScheduleEvent();
d.setAllDay(true);
eventModel.addEvent(d)

Resources