The Sauce Labs Cookbook

Sauce Headless

Front End Performance Testing

Insights

External Resources

More Info


Page tree
Skip to end of metadata
Go to start of metadata

In addition to testing the efficiency of your application rendering, Sauce Labs also provides a means for testing how a single page performs in motion, such as scrolling.

What You'll Learn

  • What is jankiness
  • How to measure jankiness with Sauce Performance
  • How to review jankiness results

Here's what you'll find in this section of the Sauce Performance guide:

 

What You'll Need

  • Google Chrome (no older than 3 versions from latest) as the test browser
  • Test configuration must have performance enabled. See Set Performance Capabilities for instructions.

What is Jankiness?

Web applications sometimes appear to lack smoothness when the the application isn't keeping up with the refresh, a condition sometimes referred to as jankiness.  

According to jankfree.org:

Jank is any stuttering, juddering or just plain halting that users see when a site or app isn't keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.

To see an example, go to https://googlechrome.github.io/devtools-samples/jank/

Implement the Jankiness Custom Command

Since Jankiness occurs during interaction with a page (such as scrolling) rather than just at page load, Sauce Labs created a framework-agnostic custom command that executes a set of automation actions:

  • It jumps to the top
  • It scrolls slowly from the top to the bottom for ~5 seconds
  • It captures the browser activity for the time it was scrolling through the app
  • Based on this browser activity it generates the metrics you can use to assert the performance

Command

The jankiness custom command is a WebDriver extension that can be used with any framework (i.e., Selenium or WebdriverIO). Alternatively, you can call is using the JS Executor.

Jankiness Script Example (WebdriverIO)
const jankiness = browser.execute('sauce:jankinessCheck')

Assertion

Use the command as an assertion in your script to generate an overall Jankiness score based on the measurement.

WebdriverIO Jankiness Test Example
const assert = require('assert')

describe('test the jankiness', () => {
    it('tests for the smoothest experience', () => {
        browser.url('https://googlechrome.github.io/devtools-samples/jank/')

        const addBtn = $('.add')
        for (let i = 0; i < 10; i += 1) {
            addBtn.click()
        }

        const jankiness = browser.execute('sauce:jankinessCheck')

Results

The command returns a JSON object detailing a series of metric scores. Refer to Jankiness Metrics Reference for a description of the captured diagnostics.

Reporting Jankiness

When your test completes, it generates a set of metrics and that you can access through the Performance tab of the Test Details page. If you detect a regression in your website's performance, you can download a Full Trace report, or you can use the Chrome DevTool, which records Javascript method signatures in a hierarchical view for each thread in each process, to get a better idea of how the Chrome browser is interacting with your website.


The full Performance Report provides you access to all metrics as well as area charts showing the Frames Per Second (FPS) CPU and Heap memory used during the jankiness test

  • No labels