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.
Related
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.
I am developing a testing algorithm for our iOS apps using Appium. To fully implement this algorithm i need to identify wither i have moved onto different screen or am still on the same screen after performing some action. I need to know, what makes every screen unique/different from other in terms of Appium?
Going through the pageSource of every screen, i found that most screens have xpath attribute in window element. Can i use value of xpath of window element to mark the screen as unique from others, or do i need to do a trivial string comparison between screen's pageSources to mark them different? Or is there any other better solution?
Not sure if xpath would be the best solution for this. Normally the UIAWindow would remain the same, and developers might use different containers within this UIAWindow to render different screens.
So to verify different screens, you might need to figure out what this container is and see if the container's properties change when you move to a new screen (ie a new container)
If you app user a different header for every new screen, then you can use this header to see if the screen is changed. Example: in WhatsApp, you would see a different persons at the top. So in this case, the person's name can be assumed as the header.
If this doesn't work then you can verify some of the other controls, or say list of all the UIAStaticText on the screen. During screen change the entire list of UIAStaticText might change. So this can indicate a screen change.
For our automation suite at work I've implemented a series of screen check steps. Every time we switch screens I do a find_element command for an element on that screen that is unique to that screen. That way if a button or option takes me to a new screen that is incorrect my test will fail as expected. If it does find the element we're expecting it adds minimal time to the test suite.
Anish Pillai made a good suggestion of using the header text if there is any. Otherwise a particular tab, menu text, resource_id, or whatever is unique about the page would suffice. All you would need to do is a find_element call and a failure message if it fails.
I would like to know if "scroll" event can be added to the Google analytics universal code? i have the below
setTimeout("ga('send','event','engaged users','page visit 30 seconds or more')",30000);
I wanted to track visits over 30secs that the scrolls
You can use window.scroll which is available in the jQuery API.
$(window).scroll(function() {
ga('send','event', 'engaged users');
});
See https://api.jquery.com/scroll/
There are several plugins/libraries out there that add scroll tracking, but if you want to do it yourself make sure you don't send too many events.
You shouldn't send an event to GA directly on the window.onscroll event - this is fired dozens of times a second. It will chew through your hit allowance and it won't provide any useful data.
Even a sampled scroll event isn't much better (where you set a timeout every few hundred milliseconds to check if the user has scrolled) - it still sends potentially hundreds of events user page view.
You should either set it to fire on certain scroll "thresholds" (e.g. 20%, 50%), or, the better way in my opinion is to store a variable with the maximum scroll depth and then use the document.onbeforeunload event to fire just one event at the end of the user's page view. This gives way more accurate data and doesn't send too many events.
onbeforeunload has some browser inconsistencies though (especially on mobile), so you'll want a fallback for that. There's a full tutorial here on creating a cross-browser scroll tracking plugin with tons of code examples here: building a better scroll tracking plugin
what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks
Basically, they're your browser figuring out how to draw the changes that you made to the page.
Don't worry about getting rid of them -- if you did that, your site would be static.
However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.
Lets say that you got a job at Twitter.
And your job is to write the next version of the window that adds each twitter post to the screen.
If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).
A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once.
This cuts down on the number of times that a browser has to figure out where everything needs to go.
#Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference.
Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.
Here's a very handy list of properties and methods that trigger the layout (reflow) of a page:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
You want to minimize these calls as much as possible -- especially in situations where performance is critical, such as during the scroll event, or when animating large blocks of content.
You can use the "Profiles" tab and "Audits" tab to detect the performance of your code. The will give you a report about your codes.
You can reduce the page Recalculate,Layout and Paint's count by many ways.
Append many child at one time.
Hide elements before change them.
Give images and other elements height and width.
I am currently involved with an Application where I need to design the UI part of the Application and current I am in the process of implementation of UI which would be displayed to end user while his or her request is being processed behind the scenes.
So my question is that:
What is the best UI approach/symbol/suggestions to be displayed to end User while his or her request is still being processed behind the scenes ?
Thanks.
Any sort of throbber is adequate enough. Here's a nice throbber generator you can use.
And there's nothing wrong with progress bars, unless there the kind of progress bars that start over without actually indicating progress.
If you don't take your program too seriously, this one is always a crowd pleaser:
This is going to take a while, so to pass the time, here's a dancing bunny:
http://img251.imageshack.us/img251/4828/thdancingbunny.gif
A Loading screen of some sort may work.
It depends on how long your user must wait. If it will be <10 seconds, then just show the spinning pie of death as an animated GIF (or flash if you prefer to be non-accessible) (a simple jquery hide/show with CSS)
If it is a longer wait, like >10 seconds, you may want to implement a short but entertaining caption system. Something like the old "Reticulating Splines" type system to give the users a bit of humor while they wait.. see https://stackoverflow.com/questions/182112/what-are-some-funny-loading-statements-to-keep-users-amused for a list of such statements.
If you've got a long running background process, I'd simply display a progress bar with a message below it that states in the least technical terms possible what the current task is. And then, if possible, a cancel button in case the user gets impatient or mistakenly started the process.
I can't provide any specific links to back me up, but I believe its been proven that just the presence of a progress bar can make a longer task seem shorter than a task without the progress bar.
The worst thing you can do is nothing. Users have been conditioned to think that no feedback = locked up program.
Note on typical implementation (that I use):
jQuery has the .ajax function. When I call the function (onClick or whatever) I .remove() the contents of the (div or whatever seems appropriate) and add a css class of waiting which looks like:
.waiting {
background-color: #eee;
background-image: url('some-spinner.png');
}
the .ajax function has a success callback where I remove the .waiting class and put in the new data I got back from ajax (or put back the data I took out with .remove().
Additionally you may change default mouse cursor to wait or progress states with CSS.
Details about changing cursor with CSS here.