I need to stop this carousel in order to perform validation on it
Tried to set autoplay=false
The autoplay function is based on setInterval() which is able to be controlled by Cypress.
See the Cypress documentation for clock
cy.clock() overrides native global functions related to time allowing them to be controlled synchronously via cy.tick() or the yielded clock object. This includes controlling:
setTimeout
clearTimeout
setInterval
clearInterval
Date Objects
So you should be able to freeze the carousel by putting the cy.clock() command at the top of your test, or before the cy.visit() page load.
In case you want to test the second slide and the third slide, etc, you can issue a cy.tick(5000) to move the autoplay on for one slide each time, since you configured autoplaySpeed: 5000.
Related
TL;DR: In a Laravel + InertiaJS + Vue 3 developed application, how can I achieve to have a transition between "pages" loaded within a persistent layout <main> section - for example, have that section animate (say, fade out) before loading the next page, then animate (fade) that new page in - when using standard Inertia routing for navigation? I have managed to do it on entering/showing the page, but have found no way to animate before navigation happens.
LONG(ish): The Way I'm trying to do it
Let's assume there is an application (developed with Laravel + InertiaJS + Vue 3).
I have an element in the markup of an Inertia persistent layout that is conditionally shown if a value is true (v-if="shouldAnimate") that is initially set to false when declared, and when onMounted fires, it sets that value to true which in turn triggers the animation to run (doesn't really matter how the animation works, but just in case, I have options to use either GSAP or anime.js).
Up to this point, all is good: every time I navigate to a page (using Inertia-adequate methods such as the Link component) the animation triggers and I am a happy guy.
BUT: I would very much like to be able to play another animation (the reverse of the previous one) before, say, navigation to the next page occurs. I have tried almost everything I can think of and have not been successful. Here's what got the closest to what I need:
I tried hooking into the InertiaJS event Inertia.on('before', ...): effectively, the event fires up right before navigation (checked with some good-old console log), so I tried firing up the animation at this point, only to find out that the Inertia event looks like it is destroying the page immediately before the animation has had time to play; no problem: I'll just event.preventDefault() it, run the animation and THEN, using a setTimeout timed to the length of the animation (300ms) I'll resume navigation, say, by using Inertia.visit.
Doesn't work. Somehow, the default behaviour is prevented (stops the navigation), the animation plays back, but when it comes to the "resume navigation part" I have had mixed results depending on what I use:
Code looks roughly like this:
let removeListener = Inertia.on('before', (event) => {
event.preventDefault()
// Play animation here
setTimeout(() => {
// SOME INERTIA ACTION DESCRIBED BELOW
}, 300)
})
Independently of whether I use Inertia.get(event.detail.visit.url) or Inertia.visit(event.detail.visit.url) what happens is the animation runs its course, and then the timer runs out and this whole code RUNS AGAIN AND AGAIN in intervals equal to the timer. I also tried to do this using the complete event of the animation to trigger the navigation but it behaves the same.
I know this is related to me being an ignorant about how both Inertia and events work, and I am sure there is a proper (correct? right?) way to achieve what I need, but either I have failed in using the correct terms to look for it, or I am approaching this the wrong way. Hopefully this information is enough to explain my issue.
Any help or pointer would be GREATLY appreciated, so thanks in advance.
I'm learning React+Redux and I don't understand the proper way of doing the animations. Lets speak by example:
For instance, I have a list and I would like to remove items on click. That's super easy if I have no animation effects there: dispatch REMOVE_ITEM action on click, reducer removes the item from the store and react re-renders html.
Let's add an animation of deleting the line item on click. So, when user clicks on an item I want to run a fancy effect of line item removal and... how? I can think of several ways how to do it:
1) On click I dispatch REMOVE_ITEM action, then reducer mark an item as goingToBeDeleted in Store, then react renders that element with a class of .fancy-dissolve-animation and I run a timer to dispatch the second action REMOVE_ITEM_COMPLETED. I don't like this idea, because it's still unclear how to add JS animations here (for example, with TweenMax) and I run a JS timer to re-render when CSS animation ends. Doesn't sound good.
2) I dispatch ITEM_REMOVE_PROGRESS actions with an interval of ~30ms, and store holds some "value" which represents the current state of animation. I don't like it too, as it would require me to copy the store ~120 times for ~2 seconds of animation (say, I want smooth 60 fps animation) and that's simply a waste of memory.
3) Make an animation and dispatch REMOVE_ITEM only after animation finishes. That's the most appropriate way I can think of, but still I'd like to have things changed in store right after user makes the action. For example, animation may take longer than few seconds and REMOVE_ITEM might sync with a backend – there's no reason to wait animation finish to make a backend API call.
Thanks for reading – any suggestions?
React has a great solution to this problem in the ReactCSSTransitionGroup helper class (see https://facebook.github.io/react/docs/animation.html). With this option, React takes care of it for you, by keeping the DOM state for the child as it was at the last render. You simply wrap your items in a ReactCSSTransitionGroup object. This keeps track of its children, and when it is rendered with a child removed, instead of rendering without the child, it renders with the child, but adds a CSS class to the child (which you can use to trigger a CSS animation, or you can just use CSS transitions for simplicity). Then, after a timeout (configured as a prop passed to ReactCSSTransitionGroup), it will re-render again, with the child removed from the DOM.
To use ReactCSSTransitionGroup, you'll need to npm install react-addons-css-transition-group, and then require/import 'react-addons-css-transition-group'. The animation docs give more detailed information.
One thing to remember - make sure the children have unique, unchanging keys. Just using the index as the key will make it behave incorrectly.
Instant actions are problematic in redux which saves state, so if we send action and it will change store then this change in store is available in next states, so We can have situation where animation is showing over and over because in store such parameter was set.
My solution for redux instant actions is to add some id like ( Action example code ):
{
type:"SOME_ANIMATION",
id: new Date().getTime() //we get timestamp of animation init
}
Next in component which runs animations save last animation id and if its match don't do animation. I use component state so for example ( Component code):
componentDidUpdate (){
if (this.lastAnimationId===this.props.animation.id)
return; //the same animation id so do not do anything
//here setState or do animation because it is new one
this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation
}
Thanks id we can have only one action without actions which are reversing the state. Reversing actions after timeout can cause problems because if other action ( which is connected with component ) will be send before reverse action then animation can start again.
Minuses of proposed by me approach are that animation data exists in state, but exists also animation id which give us information about it. So we can say that store saves last dispatched animation.
The when_present method polls the DOM every .1 seconds (by default) until the desired element is present. Other than the .1 second delay incurred by using it, is there any reason to use the standard .click method without when_present?
Why shouldn't I just make my own .better_click method that incorporates both waiting and clicking?
No, there is no reason for you to not wait for whatever you want to wait for in your methods.
The original Watir api was blocking for page loading, and javascript interaction was not as important. The current implementation of Watir is closely tied to selenium-webdriver, so most of the behaviors of selenium are duplicated in Watir. Some developers like the added control over exactly what they are waiting for at all times.
I have a web page which can be janky to scroll if certain styles are applied. My question is how can I systematically test the effect of individual styles. I don't want to just manually scroll down the page each time, I want to perform some replicable action so I can easily compare the effect of two different stylesheets. Is it possible to record and replay a sequence?
In Chrome you can try using:
console.timeline('description');
// your code
console.timelineEnd('description');
You'll get a deprecation warning, but it works to record a timeline.
OR
You could use The Intern http://theintern.io/ to automate the repeated task you want to do, for instance scrolling down the page.
In that case, you would write a test case for each style change, scroll the page while measuring with the Frame Timing API
https://github.com/GoogleChrome/frame-timing-polyfill
Each test would expect the frame rate to be above a certain value.
What is the use of tick function in easeljs. When to use it? What exactly does it do to a stage? What is the exact format? I see different ways in which it has been called in different tutorials.
What is difference between tick and ticker?
The tick function on the Stage (and other display objects) advances all the child animations. Things like MovieClip and Sprite have frame-based animation, which are advanced the the next frame whenever they are ticked. You can turn off updateOnTick on the stage to prevent this.
The Ticker is a utility class that manages an actual heartbeat. It is a totally optional utility, but it creates an interval (using timeouts or requestAnimationFrame), and then dispatches events at a ~constant rate (the rate will be dependant on the performance on the device).
You can set the stage as a listener to the Ticker (instead of a custom handler function), and it will automatically call update() (and hence tick()) on the stage. This is the easiest usage. You can also manually call stage.update() in your own function to tick and redraw the stage. Note that using the stage as a listener guarantees that the stage will constantly update - so if you want to control it, then listen to the Ticker yourself, and manually call stage.update().