Automating/replaying on Chrome devtools timeline

Question

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?

Answer 1

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.