In this post, we will learn how to use the web-test-runner will also learn about the web-test-runner performance plugin to measure bundle and render performance in a basic JavaScript library.
Web runner introduction
- A new, lightweight, and pure web-based tool.
- Web Runner is a test authoring and execution tool
- It enables you to create manual tests, run both manual and automation, test, submit and edit defects and view the dashboards from a web browser without the need to download the ALM client
- It also offers a different set of forms and rules to enforce your process without using the ALM workflow
- After creating your test and completing your test results along with any submitted defects are automatically saved to ALM
What is playwright
- The playwright is a node.js library to automate Chrome, firefox with a single API. The playwright is built to enable cross-browser web testing
- The playwright is a Microsoft product but it is a fork of the puppeteer
- Puppeteer is a node.js library to automate the Chromium browser with the javascript API
- Time to first interaction – how much time it takes to start using the app and how fast
Capabilities:-
- It can run multiple pages, domains, and iframes
- Intercept network activity for mocking network requests
- Emulate mobile devices, locations, and permissions
- Native input events for mouse and keyboards
- Upload and download support
- Support for all browsers
- Test on Chromium, Firefox,
- Test for mobile (device emulation)
- Headless and headful
- Fast and reliable execution
- Auto-wait APIs (clicks, types, etc)
- Timeout-free automation
Render – how fast an element is updating in the UI
Bundle Size – How much code is required to update the UI and load
Jank – how much smooth is the application or little to no lag/stuttering
Above elements of a performance play a significant part in an effective web app. However, each element requires a separate approach to test and measure.
The web-test-runner package is a good test runner to run JavaScript. modern web. dev project has The web/test-runner package, which provides many high-quality tools for web development. we can use web/test-runner for unit tests and it has a plugin API to add customized plugins for your test . We will use the web-test runner performance plugin to create some tests to calculate the performance.
How to Setup of we test runner
- You have to create a web runner. config.mjs file, that will have the configuration setup for our tests. then you need to install the following packages to our
package.json:
1 . web/test-runner
2 . web/dev-server-build
3 . web/dev-server-build
4 . Web-test-runner-performance
import { defaultReporter } from '@web/test-runner';
import { esbuildPlugin } from '@web/dev-server-esbuild';
import { playwrightLauncher } from '@web/test-runner-playwright';
export default ({
concurrency: 1,
concurrentBrowsers: 1,
nodeResolve: true,
testsFinishTimeout: 10000,
files: ['./src/*.performance.ts'],
browsers: [playwrightLauncher({ product: 'chromium', launchOptions: {
headless: false } })],
reporters: [
defaultReporter({ reportTestResults: true, reportTestProgress: true })
],
plugins: [
buildPlugin({ ts: true, json: true, target: 'auto', sourceMap: true })
],
});- Our tests should be run individually from any of our other tests, as well as having the concurrency and concurrent browser options set to 1. This will help provide a more consistent test environment. while the performance tests are running, the less exact the measurements will be due to resource allocation by the operating system.
import { expect } from '@esm-bundle/chai';
describe('basic test', () => {
it(`should add`, async () => {
expect(2 + 3).to.be(5);
});
});Measuring Bundle Performance
- After the basic test runner setup, we can create tests to measure bundle performance. First, we need to add the bundle plugin before beginning the testing of bundle sizes of our library. Once the plugin will add we can create a test.
import { bundlePerformancePlugin } from 'web-test-runner-performance';
export default ({
plugins: [
bundlePerformancePlugin(),
]
});
import { expect } from '@esm-bundle/chai';
import { testBundleSize } from 'web-test-runner-performance/browser.js
describe('performance', () => {
it('css bundle size limits should meet maximum (0.2kb brotli)', async () =>
{
expect((await testBundleSize('./demo-
module/index.css')).kb).to.below(0.2);
});
it('js bundle size limits should meet maximum (0.78kb brotli)', async () =>
{
expect((await testBundleSize('./demo-module/index.js')).kb).to.below(0.8)
});
});- The performance plugin will take the module’s path, which can be JavaScript/CSS. Once bundled then it will measure the file size through compression and it will return a final file size in kilobytes. Bundle tests will help to stop performance regression with third-party code and ensure compatibility between modules.
- if the bundles list multiple imports at once then Bundles can be multiple entry points
import { expect } from '@esm-bundle/chai';
import { testBundleSize } from 'web-test-runner-performance/browser.js';
describe('performance', () => {
it('js bundle size limits should meet maximum (2kb brotli)', async () => {
const bundle =
import './demo-module/index.js';
import './demo-module-one/index.js';
expect((await testBundleSize(bundle)).kb).to.below(2);
});
});Measuring Render Performance
- RenderPerformancePlugin will measure the render time of a given procedure element in milliseconds. This measurement is from the time the element is added to the DOM to the first painting of the element and the measurement of time is determined using the performance timing element. Once the plugin is added, we can check that the test is how quickly an element can be rendered.
import { renderPerformancePlugin } from 'web-test-runner-performance';
export default ({
plugins: [
renderPerformancePlugin(),
],
});
import { expect } from '@esm-bundle/chai';
import { testBundleSize, testRenderTime, html } from 'web-test-runner-
performance/browser.js';
import 'demo-module/my-element.js';
describe('performance', () => {
it(`should meet maximum render time 1000 <p> below 50ms`, async () => {
const result = await testRenderTime(html`<my-element>hello world</my-
element>, { iterations: 1000, average: 10 });
expect(result.averages.length).to.eql(10);
expect(result.duration).to.below(50);
});
});- The render time of the test cases will take a template to render then it will return how long the element took to render in milliseconds. The config will accept an iterations property to render the template n+ iterations. The test runner will render 3 times and average the results By default. using the average property This can be customized. By rendering performance at a component level with a small test, we can instantly narrow and isolate performance early on in the development phase.
References:-
