TypeScript Example

Grafana k6 OSS Support
1

Hi all, here’s an example of a performance framework written in TypeScript:

I’m also learning, so please let me know if you notice anything that can be improved :slight_smile:

(I’d love to know how to transpile it down to a version of JS that can run with ‘base’ compatibility mode also! I’ve had no luck there…)

7 Likes
2

Good job!

I’ll have a look and might provide a PR in case I find something that could be of use for you. :+1:

2 Likes
3

Lately, we have fixed some issues on the k6 TypeScript definitions.

Inspired by @sstratton’s project. We have ended creating a GitHub Template to generate a k6 project using TypeScript easily.

We hope it can also be useful for the community.

5 Likes
6

Hi, @ppcano ! I was following your approach to using it in my project.

I copied the webpack.config.js, tsconfig.json, .babelrc files and installed the devDependencies in my project that uses the POM “pattern” (I just only did a minor change in the GlobEntries changing the path to my performance tests).

When I tried to use the chromium browser (import { chromium } from 'k6/experimental/browser';, I got this error: Module '"k6/experimental/browser"' has no exported member 'chromium'.

Sample.-

import { sleep, check } from "k6";
import { chromium } from 'k6/experimental/browser';

import { SLLoginPage } from '../pages/SLLoginPage';
import { SLProductPage } from '../pages/SLProductsPage';

let slLoginPage: SLLoginPage;
let slProductPage: SLProductPage;

export const options = {
    scenarios: {
        login: {
            executor: 'constant-vus',
            exec: 'login',
            vus: 1
        }
    },
};

export async function login() {
    const browser = chromium.launch({
        headless: true,
        slowMo: '500ms'
    });
    const context = browser.newContext();
    const page = context.newPage();

    try { 
        slLoginPage = new SLLoginPage(page);
        slProductPage = new SLProductPage(page);

        await slLoginPage.goTo();
        await slLoginPage.fillLoginForm(process.env.USERNAME as string, process.env.PASSWORD as string);
        await page.waitForURL('**/dashboard', { timeout: 3000 });
} finally {
    page.close();
    browser.close();
}

Thanks in advance for your help. Have a great day!

9

Hi @ppcano

I cloned this template to my existing React and typescript project. But when running the npm run bundle command I get the same errors

ERROR in ../src/e2e/helpers/flows/loginFlow.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\flows\loginFlow.ts: Unexpected token, expected "," (11:36)

   9 | import { TEST_CLIENT_ID } from '../../e2e.test';
  10 |
> 11 | export const loginTest = async (page: Page, url: string): Promise<void> => {
     |                                     ^
  12 |   console.info('Logging in...');
  13 |
  14 |   //-----Login-----//
    

ERROR in ../src/e2e/helpers/intercepts.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\intercepts.ts: Unexpected token, expected "," (7:46)

   5 | import { logRequest, logResponse, mockedCloudfrontResponseHeaders } from '~/e2e/helpers';
   6 |
>  7 | export const setBasicPageInterceptions = (page: Page): void => {
     |                                               ^
   8 |   try {
   9 |     page.on('console', (message: ConsoleMessage, args) => {
  10 |       if (args) DEBUG && console.info(Bright('[PAGE] ') + message.text(), ...args);
   

ERROR in ../src/e2e/helpers/logging.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\logging.ts: Unexpected token, expected "," (6:34)

  4 | import * as readline from 'readline';
  5 |
> 6 | export const temporarilyLog = (str: string): void => {
    |                                   ^
  7 |   readline.clearLine(process.stdout, 0);
  8 |   readline.cursorTo(process.stdout, 0);
  9 |   process.stdout.write(Dim(str));
    

ERROR in ../src/e2e/helpers/resetLocalStorage.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\resetLocalStorage.ts: Unexpected token, expected "," (6:47)

  4 | import { HTTPRequest } from 'puppeteer';
  5 |
> 6 | export const resetLocalStorage = async (browser: BrowserContext, url: string): Promise<void> => {
    |                                                ^
  7 |   const page = await browser.newPage();
  8 |   await page.setRequestInterception(true);
  9 |   page.on('request', (req) => {
    

webpack 5.89.0 compiled with 4 errors in 1353 ms

Did I do something wrong? Or is there any actual problem in the template? I have installed the typescript dependencies and tried again the same error persisted.

Thanks in advance.

10

Hi @saivignesh0303

I encountered the same problem and solved it, so I’d like to share it.
In my case, the cause was simply that “.babelrc” was not cloned from the template.

.babelrc

{
  "presets": ["@babel/env", "@babel/typescript"],
  "plugins": [
    "@babel/proposal-class-properties",

    "@babel/proposal-object-rest-spread"
  ]
}

After placing this, I ran the command again and it worked without any problems.