Posted on Oct 20 • Originally published at qainsights.com In this blog post you will learn how to get started with Browser performance testing using k6. Client-side performance is paramount to validate the performance of your application along with the network load i.e. protocol load e.g. APIs. Not many tools are sophisticated when it comes to measuring end-to-end performance. Opentext LoadRunner TruClient protocol is one of the tool at its best when it comes to measuring front-end performance. JMeter w/ Selenium can be used to measure the browser performance. But the maintenance is nightmare and too flaky. If you do not want to use any tool, you can leverage the Chromium Developer Protocol.It is often referred to as the Chrome DevTools Protocol (CDP), is a set of APIs and tools that allow developers to interact with and inspect web pages in the Chromium-based web browsers like Google Chrome, Microsoft Edge, and others. It provides a way to access and control various aspects of web pages, such as inspecting the Document Object Model (DOM), manipulating CSS, monitoring network activity, debugging JavaScript, and much more.k6 is getting traction among developers and performance engineers. After getting acquired to Grafana, there are numerous improvements in the k6 ecosystem. I have already published a complete series on k6, please check it out if you are new to k6.https://www.youtube.com/playlist?list=PLJ9A48W0kpRJKmVeurt7ltKfrOdr8ZBdtNo more building xk6 browser from the binaries. The latest version of k6 is now bundled with the browser capability to test the front-end performance.The following are the prerequisites to get started with k6 browser:You can install k6 in Windows, Linux, and macOS. Here is the command to install k6 in Mac.brew install k6To verify the installation, use k6 version.k6 browser is built on top of Playwright API. Playwright is an open-source automation library for browsers that allows developers and testers to automate tasks and interactions with web pages in Chromium, Firefox, and WebKit-based browsers. It provides a JavaScript API that makes it easy to write browser automation scripts and run them across different browser engines. Playwright is developed by Microsoft and is designed to be a more powerful and user-friendly alternative to other browser automation libraries like Puppeteer.Copy and paste the below code and save it as hello-browser.js.To run the script, k6 run hello-browser.jsHere is the output.Let us break down the code one by one. Here is the output breakdown.By default, k6 runs the test in headless mode. To turn off it, issue K6_BROWSER_HEADLESS=false k6 run .js This will launch the Chromium browser and perform the scripted actions.You can also interact with the application using Locator object. k6 also supports Asynchronous operations.It is always ideal to test both the APIs and the front-end simultaneously to get the real simulation of production. You can create both the tests in one script, or you can write two different scripts and run it simultaneously. In conclusion, browser performance testing with k6 is a valuable addition to your toolkit for assessing and optimizing the performance of web applications. With its user-friendly approach, bundled browser capability, and the power of the Chromium Developer Protocol, k6 simplifies the process of evaluating client-side performance and empowers you to build faster, more efficient, and more reliable web applications. It's a powerful tool that every performance engineer and developer should consider in their testing repertoire.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse marcuskohlberg - Oct 13 Leonardo Montini - Oct 12 Łukasz Wójcik - Sep 10 Dennis - Oct 3 Once suspended, qainsights will not be able to comment or publish posts until their suspension is removed. Once unsuspended, qainsights will be able to comment and publish posts again. Once unpublished, all posts by qainsights will become hidden and only accessible to themselves. If qainsights is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to NaveenKumar Namachivayam ⚡. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag qainsights: qainsights consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging qainsights will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.