Synthetic testing a Next.js app using Grafana k6 cloud
Synthetic testing ensures your application performance meets the expected requirements for typical user journeys. You wouldn’t want to find out your application performance problems reported by your users, would you?
What is Synthetic Testing
Synthetic testing is a testing type to check how a particular end-user journey would perform in the production environment by simulating it in a test or any pre-production environment. By doing synthetic testing, you can prevent performance issue happening in production environment.
The demo application
To understand how to apply synthetic testing for an application, let’s try to do it with a demo application.
The demo application is an app that allows you to prepare for your job interview by taking sample questions. Then you will get feedback from an AI backend service so that you can improve your answers next time. This app is provided as a template by Vercel (Next.js) so that you can learn how to deploy Next.js application with Vercel.
Navigate to my deployed Liftoff application to understand how the app works.
The demo scenario
Let’s try to synthetic test a scenario like below:
User clicks on “Try it out” button → click on “Technical” interview option → “Continue” → choose “John” interviewer → “Continue”.
Create a Performance Test project on Grafana Cloud
Grafana Cloud offers a free plan for using k6 on the cloud so that you can get started using k6 for your project right away, instead of installing k6 and setting up the timeseries database in your local environment.
To start testing using Grafana performance testing, you need to create your project first. Go to Grafana Cloud, login to the platform and click on the “Create new project” button at the “Performance testing” page to do so.
Recording a script
You can manually write the script above using k6. However, if you want to quickly test the scenario or you do not know how to write the k6 script yourself yet, you can use the k6 recorder extension in Chrome or Firefox. Checkout this documentation page for how to install and use the k6 browser extension.
Then open your installed k6 extension and click on “Start recording” button and perform the scenario described above.
After you finished your scenario, click on “Stop recording” button. The extension will try to navigate to your Grafana performance testing tab and fill out the scenario script. The script would look like below:
// Creator: Grafana k6 Browser Recorder 1.0.1
import { sleep, group } from 'k6'
import http from 'k6/http'
export const options = { vus: 10, duration: '5m' }
export default function main() {
let response
group('page_2 - https://liftoff-rho-ten.vercel.app/demo', function () {
response = http.get('https://liftoff-rho-ten.vercel.app/demo', {
headers: {
'upgrade-insecure-requests': '1',
'sec-ch-ua': '"Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
},
})
sleep(15.6)
response = http.get('https://liftoff-public.s3.amazonaws.com/JohnTechnical.mp4', {
headers: {
'accept-encoding': 'identity;q=1, *;q=0',
range: 'bytes=1540096-',
'sec-ch-ua': '"Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
},
})
})
}Inside this script, you have the user behavior scenario and how you want k6 to simulate the users.
The export default function block tells k6 to send request to the “https://liftoff-rho-ten.vercel.app/demo” API first, then wait for 15.6 second to simulate the user think time. Then make another API request to “https://liftoff-public.s3.amazonaws.com/JohnTechnical.mp4” API.
export default function main() {
let response
group('page_2 - https://liftoff-rho-ten.vercel.app/demo', function () {
response = http.get('https://liftoff-rho-ten.vercel.app/demo', {
headers: {
'upgrade-insecure-requests': '1',
'sec-ch-ua': '"Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
},
})
sleep(15.6)
response = http.get('https://liftoff-public.s3.amazonaws.com/JohnTechnical.mp4', {
headers: {
'accept-encoding': 'identity;q=1, *;q=0',
range: 'bytes=1540096-',
'sec-ch-ua': '"Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
},
})
})
}The export const options tells k6 to use 10 virtual users for 5 minutes. Each virtual user will execute the default option above. After finish that, the virtual user will execute another iteration of the scenario till the testing time ends.
Run the test on Grafana k6 cloud
After running the test on Grafana k6 cloud, you can see the analysis result from Grafana Cloud with information about HTTP response time, HTTP request rate, or HTTP failure rate.
Using the analysis result information, you now can check how your application perform with typical end-user journeys so that you can improve your application performance if there are any issues occurring.
Conclusion
Through the article, you can see how quick and easy it is to start synthetic testing for your application using k6. If you want to learn more about how to use k6 to apply performance testing for your application, checkout the k6 documentation page for details.
~~Happy testing, guys~~
