I have a dynamically generated dropdown with normal structure as:
<select>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
etc.
</select>
It is kind of pagination and I don't know how many items will be in the table and don't want to calculate how many options with which numbers will be in dropdown according to item count.
What I want to achieve with Cypress is simply always select the last option.
I know I can select any option by name or value, e.g. cy.get('select').select('10')
Also with index: cy.get('select').select(0)
But I don't know the last index.
I also tried select().last() but this doesn't work, as select must not be empty.
If your options are dynamic, you should ensure the list is populated before selecting
cy.get('select option')
.should('have.length.gt', 0)
cy.get('select option')
.last()
.then($lastOption => {
cy.get('select').select($lastOption.text())
})
You can do something like this. First get the number of options and then using that select the last item.
cy.get('select')
.find('option')
.its('length')
.then((len) => {
cy.get('select').select(len - 1)
})
Related
I am trying to fetch visible text from a dropdown which does not have a selected option.
For dropdown which has selected option, i am using below code to fetch value from dropdown.
DenominationDropdown = element(by.css('[id*="MainContent_uxDenomination"] select'));
expect(DenominationDropdown.element(by.css('[selected="selected"]')).getText()).toBe('All Denominations');
In my second dropdown, there is selected value is not getting populated. I want to fetch current visible value (default value) which in my case is "All Dates" but below code is not working as there is no selected value.
DatesDropdown = element(by.css('[id*="MainContent_uxDates"] select'));
expect(DatesDropdown.element(by.css('[selected="selected"]')).getText().toBe('All Dates');;
Can someone please suggest a way in protractor to read current visible text or default value of dropdown?
HTML of dropdown:
<select name="ctl00$ctl00$ctl00$ctl00$body$body$MainContent$MainContent$uxDates" id="ctl00_ctl00_ctl00_ctl00_body_body_MainContent_MainContent_uxDates" class="ClassName">
<option value="%">All Dates</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
.......
</select>
If it doesn't actually have the attribute selected=selected in the HTML, there should be another way. I tried this in my app on a dropdown and it worked fine:
var el = element(by.model('myDropdown')).$('option:checked');
expect(el.getText()).toEqual('test');
Note the above was for a dropdown, I originally thought it would be option:selected but that threw an invalid locator error. I have done this for radios in the past too:
var el = $('input[type=radio]:checked');
And, in case you werent aware, the $ is syntax equivalent to element(by.css())
getText() should return you the visible text only, by definition, which means that, if you call it on your select element, you should get the currently "selected" option:
expect(DatesDropdown.getText()).toEqual('All Dates');
In the case that doesn´t work with $.('option:checked'). you can try with add to end element(by.css('option:checked'));
var el = element(by.model('myDropdown')).element(by.css('option:checked'));
expect(el.getText()).toEqual('test');
Just asked another question but i think I need a much simpler solution.
Therefore i have made this JSFiddle:
http://jsfiddle.net/4EVBL/18/
<select name="selection" class="box1" style="width: 200px; height: 100px;" multiple>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
Is it possible to have the values (1 and 2) selected in the selected "box" on load, so it is possible to see which ones are selected. And is it possible to have the values of the input field divided by comma, so if one add "3" the value in the input fild will be 1,2,3. Can it also be done so that if you remove the value "2" in the select field the input field will say 1,3 ?
Any tips or help is much appreciated :)
You only need to make a couple of changes to your existing code. To populate the select on load, the following will suffice:
$(".box1").val($(".box2").val().split(","));
which populates .box1 with an array of values.
Meanwhile, to populate the textbox when the select box changes, use the .val() method instead of complicating it with :selected selectors and .text() methods:
$(".box1").change(function () {
$(".box2").val($(this).val());
});
JavaScript will automatically do a .toString() of the array into a comma-separated list of selected values.
While executing protractor tests, I would like to clear a dropdown. I know how to select a particular option in dropdown. How can it be cleared?
The dropdown is part of a form. The values of the options for dropdown are loaded with an ajax call. So, the select looks something like this.
<select>
<option>First Value</option>
<option>Second Value</option>
<select>
Now, when the form is loaded, no value is selected. But, as soon as a value is selected it is not possible to clear it (even manually) as this is a mandatory field. It is only possible to select an alternate value from the dropdown.
However, I would like to do a second test, which checks if the value of this field is blank (no selection). For this I have to clear the dropdown. Does protractor provide a way?
Let's say I can't change the order of tests for some reason.
Currently, I reload the entire form in order to clear the dropdown.
If the dropdown cannot be typed into, the only way to clear a dropdown using Protractor is to have an option in your dropdown that acts as a default selection before a user has selected 'First Value' or 'Second Value. This can be a blank option as well, like you desire
Something like this:
<select>
<option></option>
<option>First Value</option>
<option>Second Value</option>
</select>
And then select the first option via
element.all(by.tagName('option')).get(0).click();
This should get you the desired effect. Let me know if this helps!
I'm using Twitter's Bootstrap to create an email sign-up form.
I've been asked to create a select option for products interested in.
<label>Products interested in:</label>
<select>
<option>Select all</option>
<option>Product A</option>
<option>Product B</option>
<option>Other</option>
</select>
As you can see there two option there that don't work out of the box.
A) Select all
B) Other
Can anyone tell me how to implement these options?
It depends on what you want the 2 options to do? For any product or "select all and Other" you will need an event after that option has been selected.
I'm guessing you will need to use jquery to do something with the selection otherwise it will just "sit" in the select box.
So far, I don't think this is possible as I've been on it for 3.5 hours now. No luck.
I have a form.
I have a select field (with select options of course) which I want to display associated data next to the select items.
For example:
On my Add Plan form, I have a select box titled Plan Details. Plan Detail (model) has a Plan Detail Note (model) (PlanDetailNote belongs to PlanDetail) which is associated. In other words, each Plan Detail has a Note about it in the plan_detail_notes table.
I want to know if it is humanly possible with cakephp to display it like so:
Select Plan Detail:
[Plan Detail Option 1] - [Plan Detail Note]
[Plan Detail Option 2] - [Plan Detail Note]
[Plan Detail Option 3] - [Plan Detail Note]
[Plan Detail Option 4] - [Plan Detail Note]
As you can see the, the note is appended to the normal select option BUT is just static for viewing only - does not need to be saved.
Is this possible with CakePHP?
just another thought, if what you actually want is
<select>
<option value="1">[Plan Detail Option 1] - [Plan Detail Note]</option>
<option value="2">[Plan Detail Option 2] - [Plan Detail Note]</option>
...
<option value="N">[Plan Detail Option N] - [Plan Detail Note]</option>
</select>
Then you could manually create the list using the getAll query (assuming the relationships are properly created)
[ in the controller ]
$plans_list = array();
$plans = $this->Plan->findAll();
foreach($plans as $row) {
$plans_list["{$row['Plan']['id']}"] = "{$row['Plan']['name']} - {$row['PlanDetail']['note']}";
}
$this->set('plans_list', $plans_list);
[ and then in the view ]
<?php echo $form->select('Plan.id', $plans_list); ?>
Haven't worked with Cake for a while, but in your Plan Details controller could you not append the Plan Detail Note before you send it off to the view?
sounds like what you want to do is display the plan detail note as text in a div next to the select box. When you select an option, you want the text in the div to be updated to the plan detail note of the selected option.
If that is what you want to happen, then that will require some ajax work. basically you will observe the field of your select box for an 'onChange' event. That event will update the innerHtml of the div with your plan detail note.
I like to store the plan detail notes as a javascript array or object, then onChange, set the div innerHtml to the value in the javascript array.
zeroSkills,
Based on your concept I was able to get it working with some adjustments. Here is what I did:
In the add.ctp (view)
...
echo $this->Form->select('plan_detail_id',$plans_list);
...
In function add() (in the plans_controller.php)
...
$plans_list = array();
$plans = $this->Plan->PlanDetail->find('all');
foreach ($plans as $row) {
$plans_list["{$row['PlanDetail']['id']}"] = "{$row['PlanDetail']['name']} - {$row['PlanDetailNote']['name']}";
}
$this->set('plans_list', $plans_list);
}
...
I did not even need to mess with my Model which was a relief!
Here is a link to an example of the option output:
http://prntscr.com/1jmid
As you can see, I appended the "Under 65" or "Over 65" based on the value of an associated table PlanDetailNote.