Importing xk6 browser lib into existing k6 project

Grafana k6 k6-browser
1

Hi,

I have an existing k6 project for API tests. The original binary was installed via Brew on my Mac, my installation points to /Users/obrancov/go/bin. I’m referencing the binary in package.json as "@types/k6": "~0.37.0",

My question is how do I reference the new binary that I downloaded compiled binary from here Browser Module Documentation? How do I switch my code to point to the new binary, just change the path?

I copied the xk6 browser and placed it in the same directory as my brew installation location of k6. But when I try to access the tool from my current project with import launcher from 'k6/x/browser'; I get cannot find module exception.

/Users/obrancov/go/bin
➜   ls
k6                              xk6                             xk6-browser
➜  which k6
/Users/obrancov/go/bin/k6
3

Hi Oliver!

I’m referencing the binary in package.json as "@types/k6": "~0.37.0"

That’s the type definitions package for k6, which is not related to xk6-browser, or to the k6 binary you use.

My question is how do I reference the new binary that I downloaded compiled binary from here xk6-browser? How do I switch my code to point to the new binary, just change the path?

Yes, you’ll need to somehow specify the path of the new binary that has xk6-browser built-in, and not use the k6 binary you installed with Brew, as that only has the vanilla k6 without xk6-browser. I’m not aware of a direct integration with Node’s package.json, but you can set the directory where you downloaded the xk6-browser binary in your PATH environment variable, before the global ~/go/bin one. So you might set export PATH="<directory where xk6-browser is located>:/Users/obrancov/go/bin:$PATH". This will ensure that you’ll always use the binary with xk6-browser, which also supports running k6 scripts, but be aware that to use the k6 you installed from Brew, you’ll have to run it using its full path: /Users/obrancov/go/bin/k6.

There’s likely a more elegant solution to this, maybe within package.json itself or setting a .env file in your project directory that automatically gets loaded, etc., but hope this helps.

1 Like
4

Hi,

Thanks for the response, that does help, I can reference xk6-browser binary that I downloaded after adding to my PATH. However my project still cannot import anything. I seem to have a gap in my understanding about how the main k6 (downloaded through Brew) was getting accessed since it’s not directly referenced in my package.json. However that was working, I need to tell my project to point to my xk6-browser install under /Users/obrancov/go/bin/xk6-browser.

5

Any Update on this? I cannot import anything into my script. For my current project my k6 dependencies like 'k6/http" still comes from my dependency of “@types/k6”. The k6 videos or tutorials do not explain where the dependencies sit.

I’ve added the xk6-bowser to my path and It’s accessible, but I cannot import anything as part of my Typescript project.

6

Hi Oliver,

can you share your project repository, or a small subset of it, that reproduces your issue, so we can take a look?

For my current project my k6 dependencies like 'k6/http" still comes from my dependency of “@types/k6”.

The k6/http module is not related to @types/k6. As mentioned above, @types/k6 are only the type definitions you can use in your IDE to get useful features like autocomplete. This is the only module available on NPM. In contrast, modules prefixed with k6/ are either part of the k6 standard library written in Go and exposed to JS scripts (see the JS API documentation), or k6 extensions also written in Go and exposed to JS under the k6/x/ prefix.

If you want to use TypeScript, you’ll need to have a conversion/build step prior to using the scripts with k6, since k6 natively only supports JS ES2015 syntax. Take a look at the k6-template-typescript project for how to do that.

Hope this clears up some things, but seeing a sample project would help us help you further.

7

Hi,

Thank you for the reply. The project you linked is exactly the one I’m basing my current tests on. I initially installed k6 via Brew and then started working by cloning the k6-template-typescript project you linked.

When I navigate to one of my imports for the standard k6 tests, it takes me to the /node_modles/@types/k6/..." directory of my project. I’m only importing the JS API’s as the documentation states, transpiling via “yarn webpack” before every run as the test package suggests.

The knowledge I’m missing is how does this package know to point to my brew installation, no where in any documentation, video I’ve watched does this become evident. In this video, the import magically works.

The binary is accessible globally, but how to import into exactly the same template project linked above is not clear.

Below is the path to my k6 binaries.

➜  k6-typescript git:(main) ✗ which k6
/Users/obrancov/go/bin/k6
➜  k6-typescript git:(main) ✗ which xk6-browser
/Users/obrancov/go/bin/xk6-browser

Here is part of my zshrc., which may have redundancies. It allows me to access k6 as well as xk6-browser from the command line, but I don’t know how to import any of the new dependencies. Despite the fact that you said the @types library in NPM has no relation to k6 itself, the template example points all the imports to exactly the @types definitions. So how does it know where the real binary is, and how can I import functionality from xk6-browser?

export PATH="/Users/obrancov/go/bin:$PATH"
export PATH="/usr/local/go/bin:$PATH"
export GOPATH="$HOME/go"
export PATH="$GOPATH/bin:$PATH"
export PATH="$PATH:./node_modules/.bin"

I feel like I’m missing a potentially very simple bit of information. Thank you for your help thus far.

8

The knowledge I’m missing is how does this package know to point to my brew installation

It doesn’t. The @types/k6 package contains the TypeScript type definitions for a specific k6 version. It’s up to you to ensure that the k6 (or xk6-browser) version you’re running actually matches the definitions in @types/k6.

Also, @types/k6 doesn’t include any of the xk6-browser APIs, so it’s only helpful for k6 APIs.

The binary is accessible globally, but how to import into exactly the same template project linked above is not clear.

You don’t import the k6/xk6-browser binary anywhere. Your JS/TS project is not aware in anyway of the k6/xk6-browser version you’ll eventually run the script with.

Despite the fact that you said the @types library in NPM has no relation to k6 itself, the template example points all the imports to exactly the @types definitions.

Right, the template project points to a specific @types/k6 version that the resulting script is supposed to be run with. This is merely useful during development so that you get the same type definitions for the k6 APIs of the version you’re targetting, but it has no relevance when you actually run the script.

So how does it know where the real binary is, and how can I import functionality from xk6-browser?

It doesn’t know. When you run k6 run ... or xk6-browser run ..., the binary will be chosen according to your $PATH, and any imported libraries will be resolved at runtime. In the case of imports from k6/x/browser, this will only work with the xk6-browser binary, since that binary actually has the JS module exposed by the xk6-browser extension, which is built into the binary itself. This is why the plain k6 binary doesn’t work for running xk6-browser scripts, and you need to use a separate binary.

In your case, since you installed k6 via Brew, you can’t just run k6 run <xk6-browser script>, since that k6 binary doesn’t have the k6/x/browser module. So you’ll need to run xk6-browser run <xk6-browser script> instead. Note that the reverse is possible: you can run plain k6 scripts with the xk6-browser binary, but not the other way around.

I hope this clears things up.

9

the binary will be chosen according to your $PATH , and any imported libraries will be resolved at runtime

I think this is the answer I was looking for, I’ll just have to try and compile it.

Thanks.