I am trying to select a desired value from dropdown menu in browser developer tools with Javascript. The following picture shows the content of the page.
But whenever I select another value with code and then click the save button, the changes are not actually saved. When I select normally with my mouse and click the save button, it changes normally.
I have tried the following stuff. These seemingly changed the value of selected dropdown menu (it shows 2 when I write the code) but cannot be saved afterwards.
1- document.getElementById('channel24g_ctrl')[2].selected = true
2- document.getElementById('channel24g_ctrl').options.selectedIndex = 2
3- document.getElementById('channel24g_ctrl').options[2].selected = true
4- document.getElementById('channel24g_ctrl').options[2].click()
5- document.getElementById('channel24g_ctrl').options[2].setAttribute("selected", "selected");
document.getElementById('channel24g_ctrl').options[1].removeAttribute("selected");
I might have tried some other combinations of those above.
Only the fifth actually makes target option "selected" but it still doesn't work when save button is clicked. I am no expert with javascript or ember but I have done similiar things before with other websites and succeeded. So maybe the problem is with Ember Framework?
What else can I do?
Apparently, selecting an option alone is sometimes not enough. change() must be called after selecting the option in order to apply changes. The following piece of code made the trick:
document.getElementById('channel24g_ctrl').options[2].selected = true;
$(document.querySelector('#channel24g_ctrl')).change();
document.getElementById('wifi_wizard_save').click();
document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'
Related
I am using ng-zorro-select using angular. This is a library but it's based on standard html and css.
Suppose i have this page:
table with select
This is what is happening:
When i press TAB the focus goes to the first select
then i can type in my search option
to select the option i have to press ENTER on my keyboard
to move to the next select i have to press TAB
This is what i want:
Pressing tab goes to the first select (or another one in the row, but i can't get tabindex to work for me).
I type in my search
Now instead of pressing ENTER i would like to press TAB to select my option
Pressing TAB again will move the focus to the next element
My understanding here is that it has something to do with the presets that ng zorro team decided on the select option. But since it's a standard select i can't figure out how to override that specific property.
Using a simple html <select> works great so it is doable, i just don't know how and what i have to override to make it work.
External Resources:
If you want to play around you can use this Stackblitz ng-zorro-select or visit the ng zorro select page.
I honestly know nothing about the tab key and how to handle onFocus events in angular, or how to give a specific element focus on angular.
Anyway if you do, thanks for helping me.
If you look at the source code of the component they're calling a method to close it on TAB press.
If you want to keep using this component you could do a wrapper component that passes down everything but overrides the method onKeyDown to match your expected behavior.
Having this button:
<button id="btn-login-5" type="button" class="m-1 btn btn-warning" disabled="">Update</button>
I want to remove the disable attribute in order to click the button.
This is the code i see everytime:
button = self.driver.find_element(
By.XPATH, "/html/body/div/div/button")
self.driver.execute_script(
'arguments[0].removeAttribute("disabled");', button)
But I can't figure me out how that can work for anyone, I mean, if the element is disabled, selenium cannot run that very first line, is not able to asign the var "button" because he can't find that element.
Am I missing something? I am getting this error if a run that:
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/div/div/button"}
Update
I just realized this is related to selenium grid, I tried to click the button in a lot of ways, and no one works, but if instead of using selenium grid I use a local webdriver all of them works! So I have no idea what to do now.
If you use this relative xpath, instead of absolute one, it works:
button = driver.find_element(By.XPATH, "//button[#type='button']")
But is this the only button in your DOM? If not, you may have to add other relative entities to it.
Refactored Code (as per your query info provided):
button = driver.find_element(By.XPATH, "//button[#type='button']")
driver.execute_script('arguments[0].removeAttribute("disabled");', button)
button.click()
Output:
Process finished with exit code 0
The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the button clickable again.
You were close enough. To remove the disabled attribute, the Update element can be still identified for it's presence using the following Locator Strategy:
button = WebDriverWait(self.driver, 20).until(EC.presence_of_element_located((By.XPATH, "//button[#class='m-1 btn btn-warning' and text()='Update']")))
self.driver.execute_script('arguments[0].removeAttribute("disabled");', button)
All works fine, the problem is a different one, my code couldn't find the element because the element was not there, something very strange, I have a docker with the page server and if I open the page I can see the button but the selenium grid webdriver doesn't load the button at all, I don't know why, maybe that button depends of some server wich is not accesible from the webdriver.
I'll ask the page developer for this, but the code was good :)
I lost a full day of work for nothing :)
If it's automated tests that fail, running with a --headless option, you could enable print-screens in case of errors and then check if the button shows or not. Might be that the button is outside of the viewport. Or the automated testing does not wait long enough for the element to be rendered.
I apologize in advance as I'm not able to get the minimal amount of code possible, but I'm currently working on a Shopify site (that I didn't build) and I want to have no default variants selected. For example, if you go to this page https://thriveworkwear.com/products/carpenter-work-pants-5300-pro, you'll see that the default options are Color: Hickory Waist:30W Inseam:30L.
Is there a way to disable the default variant functionality? Meaning that no variants are selected and the user has to select them manually.
I tried to follow this guide https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-drop-downs and this one but they DIDN't work.
I have also tried adding this:
document.querySelector('input[name="name0"]:checked').checked = false;
document.querySelector('input[name="name1"]:checked').checked = false;
document.querySelector('input[name="name2"]:checked').checked = false;
to the theme.js file but it didn't work. It seems to work if I add it through the console tab but not when I add it on the site.
Any help is appreciated.
It seems that the options are generated from the following APP: https://apps.shopify.com/best-custom-product-options
This means that everything is generated using Javascript that you may not have control over.
You will have to reveal the App if there is an option in it to disable the default selected options or if there is an event you can listen to when the App applies the options.
The final line is to use Mutation Observer and wait for HTML modifications in the form to fire your code, but this is the final approach if nothing else works.
I've got a page where I'm using JavaScript to enable \ disable controls based on what is selected, such as:
var selectableItems = document.getElementById('holder_wizard_pnlSelectableItems');
selectableItems.disabled = true;
This works perfectly fine in IE, but in Chrome it doesn't do anything. I did manage to disable the options for a RadioButtonList with the code below, but can't seem to translate that into anything else.
$("#holder_wizard_pnlContactRequest :input").attr('disabled', true);
Ideally what I want to do is disable a button and a drop down list and be able to re-endable them. There are numerous posts recommending using CSS for this, but that is just a styling change. I actually want to enable / disable them properly within Chrome.
The controls I want to change the state of are a btnAdd and ddlProducts but nothing I seem to do alters them, then the code I posted adding the attribute didn't change the state of the button even though that is also seen as an input.
Try this..
document.getElementById("holder_wizard_pnlContactRequest ").setAttribute('disabled', true);
Or
document.getElementById('btnAdd').disabled='true';
In this example: http://jsfiddle.net/5WrcD/2/ I have two Ember.Selects with selection bound to a single controller. Using Firefox (I'm running version 15.0 Mac), when I change the value of the first select, the second select does not change. If I then proceed to change the value of the second select to match the first, all subsequent changes to either select will be propagated to the other. Using Chrome/Safari the selects stay synchronized from the beginning.
Could this possible be a bug in Ember or Firefox? Am I wrong to expect the selects to stay synchronized?
This is probably not a bug with Ember, but an issue with Firefox I guess.
If you check with a DOM inspector(Firebug) in Firefox you can see that the correct options are getting selected, the two select menus are changing synchronously. Its just that its not being shown in display until we change a couple of times.
So Ember is anyway successful in setting selected="selected" on the correct option , Firefox is having problems showing the correct item in ui.
I created another ticket here for the issue:
HTML select, correct option selected in DOM, but wrong item shown in firefox
Update
After discussions on the other Question, it is found that setting content:'' will fix the issue in firefox. So if you dont want any default selection you are good to go without this.
Eg : http://jsfiddle.net/5WrcD/3/show/
Credits : vol7ron