Unable to change <select> field more than once using Cypress - javascript

I'm new to using Cypress and just writing a few basic tests for our application to see it in action. However, I've encountered an issue that I haven't been able to resolve or locate a solution for yet; however, at first, glance appears to be relatively straightforward.
When navigating to a page, we have a few select fields a user can change, which will alter the text of a div depending on their selection. These fields are also saved onChange to our database, so when a user uses this object again, we can pre-populate the fields.
When the database is clear of any pre-selected options, the select will correctly be set to European Union, and the dynamic text will be tested and confirmed.
cy.get('#jurisdiction').select('European Union', { force: true })
// Assertion to confirm preview
cy.get('.ilPreviewDiv').invoke('text').then((text) => text.trim()).should('equal', 'text1, text2, text3, text4.')
Afterward, the select will then correctly be switched to United States, the assertion for dynamic text will always fail. I've even attempted to extend the timeout; however, it doesn't appear to make a difference as it doesn't appear actually to wait as long as I set it too.
cy.get('#jurisdiction', { timeout: 15000 }).select('United States', { force: true })
// Assertion to confirm preview
cy.get('.ilPreviewDiv').invoke('text').then((text) => text.trim()).should('equal', 'text1, text2, text3.')
I'm unsure why this occurs as it seems simple enough, but I'm clearly doing something incorrectly. In addition to this, I've placed the select field code below.
<select name="jurisdiction" id="jurisdiction" class="" onchange="updateSelectedJurisdiction(33652); updateOptions(this);">
<option value="">N/A</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="European Union" selected="">European Union</option>
<option value="US and CA">US and CA</option>
<option value="US and EU">US and EU</option>
<option value="US, CA, and EU">US, CA, and EU</option>
</select>
In addition to this, if the database has European Union stored, the .select('United States') appears to be successful; however, the value in the select never changes, and therefore the dynamic text never updates, and the assertion fails.
Any assistance that could be provided would be greatly appreciated. I really appreciate any help you can provide.
Edit:
As suggested, I tried adding .trigger('change') to the end of the .select() and instead now getting an error saying it failed because the element is detached from the DOM. A quick Google search seemed to suggest many others have had this problem, and despite trying to follow along, I've still been unsuccessful. It might be due more to my inexperience than anything but still stuck trying to resolve.

Related

Angular bug with select component

I'm working with Angular 1.6.6 and I have found a bug related to the select component.
I have the following component:
<select ng-model="searchCriterion" ng-change="change()">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="price">Price</option>
<option value="email">Email</option>
</select>
And the change method is showing on the console the value selected. The first time that I select an option it works well, but the second one it return the value selected + 1:
For instance, if I select description, searchCriterion will be price.
The change method is as simple as follows:
$scope.change = function () {
console.log($scope.searchCriterion)
}
If I use the value in other method, for instance a method that is triggered from a ng-click in a button, it happens the same
I have found on the internet some related info, but I don't get with how to fix the error
The code you have provided works properly.
See this plunker to convince yourself: https://embed.plnkr.co/IVg6KXVTPrBP3UhDxkbk/
Your problem shouldn't exist.

How can I change an attribute value in the DOM using Selenium and Python

I'm trying to navigate through a website using Python and Selenium and I've run into an issue that I can't figure out how to solve (assuming it's even possible!)
<select id="uniqueid" autocomplete="off" value="10">
<option selected="selected" value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
The above HTML code is used on the site for displaying the number of rows in a table of data which I'm trying to scrape. The total size of the table is just over 300 rows.
I've had no problem selecting one of the options using Selenium but what I was hoping to achieve was to manipulate the DOM and change the last value from 100 to 350 so that when my script selects that option the entire table is displayed without me having to iterate through the pagination.
I've read that I can use execute_script, but I don't know how to change the values of one of the options. For example:
WebDriver.execute_script("document.getElementById('uniqueid') --what text goes here-- = '350')
Any help would be most appreciated.
You can try this but understand that the site may not be OK with you sending whatever for a value. It may still limit the value to 100, etc.
The Javascript part just takes the element you passed it and sets the value to whatever you pass in, e.g. "300".
select = driver.find_element_by_id("uniqueid")
WebDriver.execute_script("arguments[0].value = arguments[1]", select, "300")
dimension = image.size['width'] * image.size['height']
driver.execute_script('arguments[0].setAttribute("dimension","{}");'.format(dimension), image)

jQuery: unselect option in select element

I faced with a strange behaviour of select element. So, I have a select element with several options. One of option is empty - it's required by plugin to output placeholder.
I needed functionality that would clear selected options and I wrote something like:
$(element).val('');
$(element).find("option:selected").removeAttr("selected");
The thing is that "selected" attribute is still here and it's on old option - you can see it in the code sample.
So, I have 2 questions:
1) Why .val() method of jQuery library do not update "selected" attribute in options list?
2) Why I can not update "selected" attribute in my case? If I switch these statements it's working:
$(element).find("option:selected").removeAttr("selected");
$(element).val('');
Code sample:
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").removeAttr("selected");
alert($("#lang_type").html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_type">
<option value=""></option>
<option value="01">01 - Language of text</option>
<option value="02">02 - Original language of a translated text</option>
<option selected="selected" value="03">03 - Language of abstracts</option>
<option value="04">04 - Rights language</option>
<option value="05">05 - Rights-excluded language</option>
<option value="06">06 - Original language in a multilingual edition</option>
<option value="07">07 - Translated language in a multilingual edition</option>
<option value="08">08 - Language of audio track</option>
<option value="09">09 - Language of subtitles</option>
</select>
<button id="unselect">Unselect</button>
EDIT:
You can use prop(false) property like this
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").prop('selected',false);
});
});
Like #yezzz said, read this :
Note: Do not use removeProp() method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
If I'm not mistaken, a multi-select can be initially unselected, but once any option is selected, it can not be unselected any more. RFC 1866 states in section 8.1.3:
The initial state has the first option selected, unless a SELECTED attribute is present on any of the elements.
This lets me to believe that one option MUST always be selected. Obviously, different browsers interpret this differently...
But it does not seem to be a jQuery issue, rather a browser implementation issue.
The selected attribute reflects merely the initial state of the select input. You shouldn't really care about removing it, as it affects nothing once a different option is selected (either by the user or by a script on your page).
The current state of the input can be read or modified via the selectedIndex property, where a value of -1 means no option is selected (which never is the default, as there always is an option selected initially). However, you seem to want to select a particular "empty" option.
Setting the value on a select box results in the corresponding option being selected, which, in your case, is the very first one.
The code probably does exactly what you want. So don't mind checking the HTML, as the selected attribute - again - is unrelated to the current state of the input.
The :selected selector, however, matches the elements that are currently selected. Your first snippet selects an option, thus making it :selected, then attempts to remove a non-existent attribute from it. The second snippet of yours assumes that the selection remains on the option that was initially selected, and then removes the attribute from it. What follows is the "empty" option getting selected, and no more steps need to be taken, as that's all it takes to select an option.
To summarize: you can safely drop all the code that deals with the removal of the selected attribute, as it doesn't affect the current state of the element, the state being already tied to the correct option.

jQuery val() on dropdown returns value "Array"

I'm stumped. I have a dropdown menu where a user selects an item.
<select name="rep-name" type="text" id="rep-name" size="" value="" >
<option value></option>
<option value="alex">alex</option>
<option value="ben">ben</option>
...
</select>
The value is then retrieved...
$('#rep-name').val()
and sent to a database.
Usually it works fine but in some cases, it sends the value 'Array' to the database. Interestingly, in those cases, the serialize function on the form still gets the correct value of the item. So in other words:
$('#run-pma-form').serialize() // works fine
$('#rep-name').val() // fails
It works fine in ~95% of cases and unfortunately, I don't have info on what browsers are being used, etc when it incorrectly returns 'array.' I'm just wondering if anyone has run into this issue or has any clue why it might be happening.
$("#rep-name")[n].val() will get you the value of any given option, but it's not correct to think of a select menu as having a value—what you want is the value of the currently selected option.
http://api.jquery.com/selected-selector/
$("#rep-name option:selected").val() should work.

How to have a drop-down menu that updates itself after submission?

Here is my drop-down form. I have searched and still do not understand how to have a selected drop-down value remain after the cart is updated. Maybe it is because of the PHP in the name value? I would greatly appreciate any help. I believe this has to be done with javascript, but again I am unsure.
<select id="quantity" name='.$cart[$x]['ASIN'].'>
<option value=1>1</option>;
<option value=2>2</option>;
<option value=3>3</option>;
</select></td>';
Thanks,
Eric
As I understand it, you want the selected item to remain selected after the form is submitted and the page is refreshed... in this case you will need to do something like this:
<select name='mySelect'>
<option value=1 <?=(isset($_POST['mySelect'])&&$_POST['mySelect']==1?'selected':'')?>>1</option>
Basically for each option you need to check if that select has a value, and if that value matches the current option ... if so, echo 'selected' which will set that option to the current displayed choice.
Unless, you have a situation where you're on like a profile page or something, and you want the user to be able to see his current setting, and still be able to change it... then you would need to do something similar but replace $_POST['mySelect'] with the data from the database. So if you have an array of user data, $data, and one of those values is 'quantity' that corresponds with the select, then you would need:
<option value=1 <?=($data['quantity']==1?'selected':'')?>>1</option>

Categories