How to make dropdown scroll to the last selected option after dropdown is re-opened?
Calling filtering_select_ref.dropdown.set('selected', selected_node_ref) or filtering_select_ref.set('scrollOnFocus', true) did not work for me on IE 11.
If you just need to scroll to the option, you could use win.scrollIntoView(node_ref) from "dojo/window" module as shown in the docs and pass the id or the node reference to the option as an argument.
You may also find these methods interesting to help solve your problem:
filtering_select_ref.openDropDown()
var dropdown = filtering_select_ref.dropdown;
dropdown.selectFirstNode()
dropdown.selectNextNode()
dropdown.selectPreviousNode()
dropdown.selectLastNode()
#Carlos Nantes suggested good options however I was aware of them and my problem with them was that I could not "catch" the moment when dropdown got opened.
I finally found a way to "catch" that moment with filtering_select_ref.watch('_opened', function()...
watch doc can be found here
Related
I'm working on an autocomplete for the React Search Box but because it doesn't have an open interface, the Callout will popup if you have done a previous search. I want to either turn it off or customize it so I don't have to use a separate component.
Thanks in advance.
I know it's a little late but I found setting autoComplete attribute on the SearchBox to "off" works.
Please, I don't know why but I can't click on this radio button.
I'm trying by xpath, css, id... but anything works.
Always I get the error: no such element: Unable to locate element
And I added an explicit wait, but it still not working.
Now, I'm trying it but not works as well:
WebElement radio = driver.findElement(By.xpath("//div[#class='form-inputs-container']/ul/li[3]/label"));
radio.click();
I need click on multiple destinations radio on this website:
https://www.turismocity.com.br/
Can you help me, please ?
RadioButton
It looks like your xpath is wrong Try with below xpath it will work
//form[#class="tc-form-full-flight"]//label[#for="tt1"]/following-sibling::div
For first radio button: //form[#class="tc-form-full-flight"]//label[#for="tt1"]/following-sibling::div
For second radio button: //form[#class="tc-form-full-flight"]//label[#for="tt2"]/following-sibling::div
For third radio button: //form[#class="tc-form-full-flight"]//label[#for="tt3"]/following-sibling::div
Hope this will be helpful!!!
This should work //input[#id='tt3'] or //input[#value='MultiDestino']
You can evaluate xpath in chrome console like this $x("//input[#value='MultiDestino']")
The xpath you have returned empty []
Locator is incorrect. More than that - even if it was valid, this way of finding elements is unreliable (you've used an element position - [3] in case of order change, locator will brake). I suggest css selector:
input[value='MultiDestino']
For locators, you should always start with something that is highly unlikely to change. Typically that's IDs, names, and various other custom attributes depending on the site. In this site's case, the three radio buttons you are looking at each have an ID.
Side note... sometimes sites/pages don't respect HTML standards that require the ID to be unique on the page so even if your desired element has an ID, always check to make sure it's unique on the page. In this case, the IDs are unique.
To click the multiple destinations radio button, you can use the code below.
driver.findElement(By.id("tt3")).click();
In some of your comments, it looks like Selenium might be having a hard time clicking on the INPUT itself and the LABEL is working. If that's the case, then you can change the locator slightly and use the code below
driver.findElement(By.cssSelector("#tt3 + label")).click();
In the CSS selector above, # means ID and + means next sibling. See the W3C docs for more info.
I am trying to find a solution to this question posted in the Google Selenium forum a couple years ago (most similar thing I found...unfortunately no posted answer in the forum). In my Selenium testing (Python bindings), how can I click on a Highcharts data series to trigger the onClick event? I am trying to do this for a bar chart, but any examples would work. Manually this works. When I click on a data series, a new div pops up with additional information about that data series, and I would like to verify this action using Selenium. I can get the series tooltip to appear using ActionChains, but for some reason the click() event doesn't seem to fire in Selenium.
I have tried to click on elements with class 'highcharts-series', the children rects of those elements, and the overall parent element 'highcharts-series-group'. The most progress I have is by clicking the children rects of the series, since I can see the tooltip pop up (see screenshot). But no clicking action--Selenium times out waiting for the next step.
One reason might be because the Highcharts group container (highcharts-series-group) has a higher zIndex than the element I want to click (3 vs. 0.1). But clicking the entire group does nothing, and in a real browser, I believe I am clicking on an actual series, not the group container--so I assume that since it works in a real browser, the zIndex shouldn't affect my clicking? You can see how all of these series are arranged in the svg element in the second screenshot.
This is how I am trying the click now. I built this following the solution in this SO question:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
data_rect = data_series[0].find_element_by_tag_name('rect')
builder = ActionChains(self.browser)
series_click = builder.click(data_rect)
series_click.perform()
Thanks for your help!
UPDATE
So this seems completely hokey, but if I click on every single series using a for loop, the last one "takes" and the expected onClick event occurs. When I test manually, though, clicking on any single series works. The code which triggers the last series is:
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
for series in data_series:
rect = series.find_element_by_tag_name('rect')
if rect.text == '':
rect.click()
This seems like a complete hack just to make my test work, so I am wondering if anyone knows a root cause of why clicking on a single element doesn't work, or a cleaner way to do this?
Thanks!
UPDATE #2
So I looked at the library that Robbie pointed out in his answer below, which seems to use ActionChains to build out its interactions with HighCharts. The library is cool and obviously works for others, but the author only seems to track mouseover events...and when I tried different variations of the below code for a click event, I could only get the tooltip to appear--no click event. So I still seem stuck. ActionChains seem to work okay for reading tooltips and values from HighCharts with Selenium, but click events still seem a mystery to me...
parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')
series_number = 0
for series in data_series:
if series_number == 0:
click_object = series.find_element_by_tag_name('rect')
else:
pass
series_number += 1
builder = ActionChains(self.browser)
click_me = builder.click(click_object)
click_me.perform()
Have you checked this project? https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs
When I was automating Highcharts in Selenium C# last year, I was able to dissect this java project and get a really good understanding, then write my own version in C#.
Perhaps this could give you some ideas and hints
Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});