I am testing code that contains a mat-slider and I cannot get the test to set the value of the slider or move the slider.
I have tried various things, including these:
Cypress: set attribute value
How do interact correctly with a range input (slider) in Cypress?
https://github.com/cypress-io/cypress/issues/1570
No luck so far. Is there any other way?
The problem is that mat-slider is not an input=range... When moving the slider, the attribute that changes is the aria-valuenow. I tried setting that and triggering change or input but it hasn't worked so for.
Do I need to work with mousemove etc.?
You could set the focus to the slider and use the arrow keys to increase/decrease the value.
If you have a slider with label "Some slider", initial value of 0 and step 1, the following code would get your value to 3 :).
cy.findByLabelText("Some slider")
.focus()
.type("{rightarrow}{rightarrow}{rightarrow}");
These are all the keys you can use:
https://docs.cypress.io/api/commands/type#Arguments
https://docs.cypress.io/api/commands/focus#Usage
I am using this in a project on cypress 7.4.0
Related
I have a TextBox in a ScreenGui inside StarterGui. I've created a script that sets a variable named cash to 10. It should then procede to change the value of TextBox to 10; it does. Then, 1 second later, it increases cash by 10, and changes the value of TextBox to 20, but didn't display it. I then looked in the editor, and sure enough, it said 20 as the value.
Why was it displaying the original value, and not the actual value?
I believe you've selected the wrong TextBox. It is selected in your properties menu, but it is not highlighted on the screen. Maybe you're looking at the TextBox in the StarterGui? So that could be the problem with your script.
I have a highstock graph with flags that initially is correctly set.
See on Figure 1:
The graph's data is loaded dynamically when the vertical scroll bar is changed. The only thing that changes is the series data with the function
function afterSetExtremes(e) {
var new_data_to_be_loaded = getNewDataToBeLoaded();
chart.series[0].setData(new_data_to_be_loaded);
}
The new series data is loaded correctly but the flags is incorreclty re-arranged, se the Figure 2:
So what's wrong on the setting, since the chart.series[0].setData just set the series not the previous flags added?
Almost a solution:
I found that setdata(data, false), setting the animation/redraw to false solve the problem of wrong flag positioning.
Take a look at that: http://jsfiddle.net/b6b63nwy/10/
But this did raise another problem: the series tooltip does not appear anymore. Is this a highstocks bug?
The answer:
http://forum.highcharts.com/highstock-usage/bug-series-tooltip-doesn-t-render-when-use-series-setdata-t37593/
=====================================================================
If you take a look at the Series.setData section in the official API, you will find that the second argument is a Boolean property which tells if redraw the chart. Instead of setData, try to use Series.update() function.
API Reference:
http://api.highcharts.com/highcharts/Series.setData
http://api.highcharts.com/highstock/Series.update
I need to write some text in openLayers 3... Not a label, something like a text object, that I can select and drag around the map. This text must have multiple lines.
I tried to use a point with ol.style.text, but it isn't multiline.
I also tried the popups, but I need the text to be always displayed.
Is there any way to use a text feature for this (ol.format.TextFeature)?
Is there any object that I can use for that purpose?
Thanks!!
You can use an ol.Overlay for that. An overlay is basically anything an Element can be. It has a position an positioning that can be set at any time.
See an example: http://openlayers.org/en/v3.9.0/examples/overlay.html?q=overlay
You could use map browser events (pointerdown, pointerup) and if the target is your overlay element then you could move it around and update its position.
I have two Meteor.Collections in my app. One contains a bunch of "slider" objects, which define a title, max, min, base value, and step for each slider. Now, I have two problems. The first is making the sliders show up in the first place. I've tried to put the following code:
Sliders.find().forEach(function(slider) {
$("#"+slider._id).slider({
min:slider.min,
max:slider.max,
value:slider.base,
step:slider.step,
change:function(event,ui) {
Data.update({_id:Data.findOne({slider:event.target.id})._id}, {$set:{value:ui.value}});
}
});
});
in Meteor.startup, at the end of my client.js file, in a $(document).ready() block, and nothing seems to get it to work. When I paste it into the javascript console, however, it works. Anyways, that's my first problem.
My second problem is that whenever I slide the slider, the slider disappears. I can keep dragging the mouse around to change the value, but once I let go of the clicker, I can't change the value anymore. I've tried using the above way and calling a Meteor.method that changes it on the server side. It's the fact that I'm updating a collection that is published to the same client that makes the slider disappear. Anything short of that doesn't cause it to disappear. How should I deal with this?
Thanks!
Have you already tried using the Template.preserve method? http://docs.meteor.com/#template_preserve
I have a slider. When the user slides it, it adjusts the gamma of an image. Here is the code, very straightforward, works perfectly.
$('#gammaSlider').slider({
max: 125,
min: -125,
value: 0,
slide: function () {
//stuff to adjust gamma of image
},
change: function () {
//stuff to adjust gamma of image
}
});
However, when the user loads a different image, I want to programmatically set the slider to the value it should be at for the new image (a.k.a. allow flipping back and forth between multiple pages with separate gamma settings). To be clear, the newly loaded image's gamma is already at whatever value it was last set to. I am only seeking to adjust the UI to match the new image's value. For instance, if I increase page 2's gamma, then flip to page 1, I need to move the slider back to default from its increased position, and I need to do it without the code thinking I'm trying to decrease the gamma.
When I do this using the following, there's a problem:
$('#gammaSlider').slider('value', gamma);
The problem is that this is triggering the slide and change calls that I set up for the slider in the original declaration above, causing it to try to reload the image redundantly with new gamma values. Is there a way to change the slider programmatically WITHOUT triggering those calls?
You can use the fact that you can differentiate between a user change and a programmatic change via event.originalEvent. For example, you can have code that gets executed when the user makes a change, and different code that gets executed when you make a programmatic change like changing the value. Since changing the value will trigger the slider's change event, you can put your gamma change code within the block that only is triggered on a user's change, not a programmatic change:
change: function (event) {
if (event.originalEvent) {
//stuff to adjust gamma of image ONLY WHEN USER CHANGES THE SLIDER
console.log('user change');
}
}
You can see in this jsFiddle example that the slider's value is changed to 50, yet no log message is generated unless the user moves the slider. If you comment out the if condition you'll see the log message gets generated not only after the user changes the slider's value, but when you make a change to the value programmatically.
Maybe you can call the slider method passing a new configuration, which probably would be exactly the same object you are passing as parameter, but with the "value" field changed.
I have done a test in one of my old projects and it worked for me.