I am running a cucumber test with chimp.js under meteor.js.
I would like to click and select an item from a selectized field with selenium/webdriver.io. Moreover, but probably irrelevant, I use the reactive-selectize package under meteor.
While my testing environment under chrome is processing, I defined to run the following action with selenium/webdriver.io; in my step I tried the following alternatives:
browser.click('#select'); // Alternative A
browser.click('div.selectize-control'); // Alternative B
browser.click('div.selectize-input'); // Alternative C
None of these actions triggered the opening of the selectize dropdown list.
However, if I try
browser.execute(function(bookshop_id) {
var $sel = $('#new-order-bookshop').selectize()[0];
$sel.selectize.setValue('bpS3E8t3PLRnd8YWZ'); // select value via selectize
}, bookshop_id);
It re-runs selectize on the select field, so all my s are gone. I guess, I am overwriting the options that my meteor app originally generated. I could manually add options/items, but this is rather an awkward solution.
How can I select items of a selectize field with selenium/webdriver.io?
Related
I want to trigger user interaction for window scroll to change the isScrolled data so that the div class can change. Right now I just test the component when the isScrolled data is changed. Is this the right way to test?
This is acceptable way to test. However, instead of directly setting the isScrolled to true, call the method using the vm as (ensure that you have mocked the document.documentElement.topScroll to something other than zero):
wrapper.vm.onScrollHandler();
Finally, if you need to really test for scroll event, you can manually fire one using the dispatchEvent() method as following:
window.dispatchEvent(new CustomEvent('scroll', { detail: 'anything' }));
You use this and then run your assertion.
On a side note, instead of pictures of your code, paste actual snippets so that they are easy to copy and paste. And, you onScrollHandler can be shortened to:
onScrollHandler() {
this.isScrolled = document.documentElement.topScroll > 0;
}
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 need to instantly fill a textarea with a very long string for testing purposes.
set/send_keys simulates typing and is too slow for Sauce Labs causing time outs.
Is there a way to instantly fill a textarea in Capybara?
The only way to instantly do it would be using execute_script to set the value via JS
element = find('textarea') # however you locate the element
execute_script('arguments[0].value = arguments[1]', element, text_to_set)
Note: this won't trigger all the events a user would generate when inputting into the textarea
TL;DR: Use Javascript/JQuery (.val() function) to set the field's value via the .execute_script()/.evaluate_script() function. It will automatically send the full string. You have more details bellow.
Example:
def execute_script(script)
browser.execute(function() {
$('<yourSelectorHere>').val("blablabla");
})
nil
end
Selenium team decided a LOOOONG way back to make it work this way, because it will actually simulate the real way a user would fill that input/textarea/field/etc.
Note: I wrote the command in WebdriverIO, but now have updated to Capybara as well.
Indeed, using the .setValue()/.set(), or the .keys()/.send_keys() methods will issue a POST action on the target element (presumably an <input>) in the form of an array of characters. See example:
Command: browser.setValue('input[connectqa-input="rename-device"]','stackoverflowstackoverflowstack');
Output:
> browser.setValue('input[connectqa-input="rename-device"]','stackoverflowstackoverflowstack')
{ state: 'pending' }
> [21:52:25] COMMAND POST "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/elements"
[21:52:25] DATA {"using":"css selector","value":"input[connectqa-input=\"rename-device\"]"}
[21:52:25] RESULT [{"ELEMENT":"6"}]
[21:52:25] COMMAND POST "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/element/6/clear"
[21:52:25] DATA {}
[21:52:25] COMMAND POST "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/element/6/value"
[21:52:25] DATA {"value":["s","t","a","c","k","o","v","e","r","f","(21 more items)"],"text":"stackoverflowstackoverflowstack"}
One quick and easy way to escape this is to go ahead and abuse the .val() JQuery function via the .execute()/.executeScript() methods:
Command: browser.execute(function() { $('input[connectqa-input="rename-device"]').val("dwadawdawdawdawdawdwadawawdadawdawdaw"); }) (WebdriverIO)
For Capybara syntax, see this question. It covers both .execute_script() & .evaluate_script(). (I don't want to mooch-off their views). Also you should document on the methods before-hand here.
Output:
> [21:59:38] COMMAND POST "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/execute"
[21:59:38] DATA {"script":"return (function () { $('input[connectqa-input=\"rename-device\"]').val(\"dwadawdawdawdawdawdwadawawdadawdawdaw\"); }).apply(null, arguments)","args":[]}
Hope it helped!
I've just recently asked a question ( Refreshing i18n translated string interpolated values in Aurelia ) regarding how to refresh i18n string interpolated values when a select input field (with language ids) changes. I received a great answer, however now I realized that there was another requirement.
It's not only string interpolated values that needs to be refreshed.
In my page-specific templates I have some select fields (custom elements), which gets their option values from injecting a "service" class. That service is responsible for doing the http fetch request, and returning a promise to the select field (custom element).
Now here's the problem. When the global (language) select field from my site-wide nav-bar custom element changes, and i18n refreshing happens using the notification approach proposed in the link above. How would I then also re-fetch my different select input custom elements inside the template, but with the new language id from the language select in the nav-bar?
The only solution I know so far is to do window.location (router.navigate(sameroute) didn't trigger a refresh) and refresh the current page whenever the language select changes, however that's obviously not a great way to handle this.
I'll try to see if I can put together a plunkr, since all this may sound a little confusing.
#chrismbeckett from in https://gitter.im/Aurelia/Discuss gave me this hint:
"For those types of inter-component syncs, use the EventAggregator.
Pub a 'lang-changed' event and let any component do what it needs to
update itself"
So in nav-bar.js i did this:
let payload = { 'lngId': this.appLngId};
this.eventAggregator.publish('lang_changed', payload);
and in the custom element which were to be refreshed I put this inside the attached() function:
this.eventAggregator.subscribe('lang_changed', payload => {
alert(payload.lngId)
self.myTodosService.getMyTodos(payload.lngId);
.then(function(data){
self.myTodos = data;
})
});
We wanted to use the portfolioitemstreegrid(https://github.com/RallySoftware/app-catalog/tree/master/src/apps/portfolioitemstreegrid) app since there was an issue with the old PortfolioDrilldownApp. we were able to add the edit app setting options by adding:
getSettingsFields: function () {
var fields = this.callParent(arguments);
fields.push({
type: 'query'
});
return fields;
},
but that doesn't filter anything it just shows the box.
What do we need to add to get the query box to work. The app has a filter already but it isn't flexible enough for us to run the queries we need.
I hoped too that doing something like this will allow wiring up of query into the treegrid filter, but it does not work. There is no storeConfig on a treegrid:
if (this.getSetting('query')) {
config.storeConfig.filters = [Rally.data.QueryFilter.fromQueryString(this.getSetting('query'))];
}
In a month or so a new hierarchical tree grid app will become available, and it will take a query from the app settings dialog. I would not suggest extending this portfolioitemstreegrid, also because it is using the head (unstable) version 'x' of AppSDK2.