I was using ng2-select component but its last commit was in January and it lacks async items support. The owner suggested that most of its features are being integrated into ngx-bootstrap/typeahead component, but it requires the user to start typing some letter to find the filtered items.
Is it possible to make it open the complete list of items when it gets focused, just like ng2-select does?
You can set [typeaheadMinLength] option to 0, after this dropdown with options will be opened on click.
A little demo https://valor-software.com/ngx-bootstrap/#/typeahead#reactive-forms
Related
Is it possible somehow to update Vuetify v-combobox items as the user is typing? I want to change the list of available items depending on what the users started typing, to create an address input with suggestions from a geolocation API.
This is what I tried: #update:search-input='fetchAddresses'
And in fetchAddresses: this.items = newListOfItems
However, while #update:search-input fires as expected, the combobox list will only be updated after losing focus. Can I somehow trigger it to be updated? (This may very well be an X/Y problem, so any hints about other approaches are welcome)
My current, ugly, hack is to force the whole combobox component to re-render with the current value set, and then refocus on it. (There is an activateMenu() method on the combobox that I could use to make sure the list reopened:
this.$nextTick(() => {
if (this.$refs.addressCombobox) {
this.$refs.addressCombobox.focus()
this.$refs.addressCombobox.activateMenu()
}
})
I'm using Vue 2.
In my case no-filter solved this problem
<v-combobox no-filter ... >
Thanks Peter for API,Perf karate framework.
Now I am trying UI automation and it looks perfect as of now.
I have below question:
I have a menu bar with 15 items in it. they are named as following:
-Home
-Account
-groups
-settings
etc etc.
Locator for each one is like this "a[name=Home]" , "a[name=Account]", "a[name=groups]" . So ony the part after name= is something that is dynamic in nature. So my question is that is it possible to somehow make this dynamic locator?
I have written a called feature in which i have written steps to login and select a menu item. and I want to pass the menu item from calling feature in json like below:
if I want to click on Account menu
* call read(menuItem.feature) {menuItem: Account}
menuItem.feature looks something like below:
Given url 'xyz'
And input (username, userID)
And input (password, password)
And click("button[name=login]")
And click("a[name=Home]")
Here I want to make Home as dynamic in last click step on menuItem.feature so that I can pass other menu items and reuse all above steps/feature file to login everytime with different menu items passed from calling feature file in json{.
Again its just a query. I have currently written multiple scenarios to click on menu item and then in calling feature I call the called feature with tags like #Home,#account etc. and this works perfectly fine.
Also if there is any other better way to achieve this then please suggest
Yes. Let me put it this way, the things you see such as input('foo', 'bar') is pure JS behind the scenes. So normal programming-language rules apply. For example:
* def dynamic = 'foo'
* def locator = 'a[name=' + dynamic + ']'
* input(locator, 'some value')
I've done a search and most of the related google results have returned just in general selecting an element from a dropdown. However the ID's in this case for the elements in the dropdown are dynamically generated unfortunately.
This is for a base test case, so I basically just need to select for example the first one. The text is also the same for the elements in the dropdown (not sure if that helps).
Is there such an example of this?
Im using cucumber with caybara(using selenium driver) integration
You can find the first option element and then use the select_option method to select it.
For example, if the select list has an id "select_id", you can do:
first('#select_id option').select_option
As #TomWalpole mentions, this will not wait for the element to appear. It would be safer to do one of the following:
first('#select_id option', minimum: 1).select_option
or
find('#select_id option:first-of-type').select_option
Alternatively you can get the first element text then select it by select function:
first_element = find("#id_of_dropdown > option:nth-child(1)").text
select(first_element, :from => "id_of_dropdown")
After two days of searching and reading, this article was amongst one of a few that was helpful. Hopefully, this can help someone else!
I created a few methods like so, excuse the naming..I changed it.
def some_dropdown(id, text)
dropdown = find(id).click
dropdown.first('option', text: text).select_option
end
def select_form
within 'content#id' do
some_dropdown('#id', text)
click_link_or_button 'Submit'
end
end
I also referenced this.
I've tried to select an option from a modal dropdown. After trying all listed methods, and many other from other threads - I totally gave up and instead of using clicks or select_option just used keyboard keys
find(:select, "funding").send_keys :enter, :down, :enter
In case it still complains - try:
find(:select, "funding", visible: false).send_keys :enter, :down, :enter
Worked like a charm, selecting first option from a dropdown.
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
I want be able click on link from drop down using selenium with phpunit. I don't have any idea how make it happens, can anyone show me example or relevant tutorial, post or anything that can help me figure out.
when I try click on the element without put mouse over the drop down I got this error:
Element is not currently visible and so may not be interact with command ....
Thanks.
EDIT:
when I said "drop down" I don't mean regular select. it more like popup
you can see the example here:
http://investing.com
look how they build the menu I want be able click on 'Technical' -> 'Fibonacci Calculator' for example.
Check this post out:
Selenium: How to select an option from a select menu?
You can find more info about this here
select(selectLocator, optionLocator)
Arguments:
selectLocator - an element locator identifying a drop-down menu
optionLocator - an option locator (a label by default)
Select an option from a drop-down using an option locator.
Option locators provide different ways of specifying options of an HTML Select element (e.g. for selecting a specific option, or for asserting that the selected option satisfies a specification). There are several forms of Select Option Locator.
label=labelPattern: matches options based on their labels, i.e. the visible text. (This is the default.)
label=regexp:^[Oo]ther
value=valuePattern: matches options based on their values.
value=other
id=id: matches options based on their ids.
id=option1
index=index: matches an option based on its index (offset from zero).
index=2
If no option locator prefix is provided, the default behaviour is to match on label.
Credits go to Dave Hunt
What I use:
$search13 = $this->webDriver->findElement(WebDriverBy::id('id_of_dropdown_field'));
$search13->click(); // Clicking on the dropdownfield
$this->webDriver->getKeyboard()->pressKey('ARROW_DOWN'); // Will go down in your dropdown selection )
sleep(1);
$this->webDriver->getKeyboard()->pressKey('ENTER'); // Enter for submitting your selection
EDIT:
http://www.anitpatel.net/2012/02/25/selenium-webdriver-how-to-click-on-a-hidden-link-or-menu/
This one explains it in java but basically what he does is a mouse over/hover and wait.
Then he clicks on the element.
I'm not a java genius but it's an example how to work with it.
You can use the:
string mouseOver(string $locator)
This simulates a user hovering a mouse over the specified element.
http://docs.tadiavo.com/phpunit/www.phpunit.de/pocket_guide/3.1/en/selenium.html
Check if the element is visible using the xpath of the required option value.
$this->isElementPresent($xpath);
$this->click($xpath);
If it is true, then click() method selects the specified option.