Skip to content

Commit d80102f

Browse files
Update migration guide
I should've broken this up into smaller commits
1 parent 3191271 commit d80102f

File tree

1 file changed

+28
-57
lines changed

1 file changed

+28
-57
lines changed

src/data/markdown/translated-guides/en/03 Using k6 browser/04 Migrating to k6 v0-46.md

Lines changed: 28 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,27 @@ excerpt: 'A migration guide to ease the process of transitioning to the new k6 b
44
slug: '/using-k6-browser/migrating-to-k6-v0-46/'
55
---
66

7-
This guide outlines [the key changes](#key-changes) users will need to make when moving their existing k6 browser test scripts to the new browser module (bundled up with [k6 version 0.46](https://github.com/grafana/k6/releases/tag/v0.46.0)).
7+
This guide outlines the key changes you will need to make when moving your existing k6 browser test scripts to the new [k6 browser module](/javascript-api/k6-experimental/browser/) (bundled with [k6 version 0.46](https://github.com/grafana/k6/releases/tag/v0.46.0)).
88

9-
The latest release simplifies the management of the browser lifecycle by automatically providing and releasing browser resources for users. To facilitate this, a new mandatory field is introduced to define the browser type within [scenario options](#scenario-options).
9+
## Key changes
10+
11+
The updated version introduces notable structural changes in its operation and API, including breaking changes:
1012

11-
Previously, users had to launch and close the browser processes themselves. With the recent updates, the API has abstracted the details of `browserType` (i.e., `chromium`). Consequently, the `chromium` named export, previously found in `k6/experimental/browser`, has been replaced with `browser`.
13+
* The [import path](#import-path) for the browser module has switched from `chromium` to [`browser`](/javascript-api/k6-experimental/browser/#browser-module-api).
14+
* [Simplified resource management](#simplified-resource-management). The browser module now handles the startup and shutdown of browser processes automatically. The `chromium.launch()`, `chromium.connect()`, and `browser.close()` methods are no longer necessary and have been removed.
15+
* [Browser options](#browser-options) can now only be set using [environment variables](/javascript-api/k6-experimental/browser/#browser-module-options).
16+
* [Scenario options](#scenario-options) must now be defined for running browser tests.
17+
* [Single browser context per iteration](#browser-context-limit). You can now only run a single [BrowserContext](/javascript-api/k6-experimental/browser/browsercontext/) at a time in the same iteration.
1218

1319
<Blockquote mod="note" title="">
1420

15-
Users no longer need to use the `K6_BROWSER_ENABLED` flag when running browser tests with the `k6` command.
21+
You no longer need to use the `K6_BROWSER_ENABLED` flag when running browser tests with the `k6` command.
1622

1723
</Blockquote>
1824

1925
## Before and after comparison
2026

21-
Let's start with an overview of the primary differences between the previous and new versions of the k6 browser API. Subsequent sections will delve into each difference in detail.
27+
Let's start with an overview of the main differences between the previous and new versions of the k6 browser API.
2228

2329
<CodeGroup labels={["Before: The previous k6 browser API"]} lineNumbers={[true]}>
2430

@@ -76,19 +82,9 @@ export default async function () {
7682

7783
</CodeGroup>
7884

79-
## Key changes
80-
81-
The updated version introduces notable structural changes in its operation and API. Let's take a look at them.
82-
83-
* The [import path](#import-path) for the browser module has switched from `chromium` to [browser](/javascript-api/k6-experimental/browser/#browser-module-api).
84-
* [Browser options](#browser-options) can now only be set using certain [environment variables](/javascript-api/k6-experimental/browser/#browser-module-options). The `launch()` method, used earlier for this purpose, has been removed.
85-
* [Scenario options](#scenario-options) must now be defined for running browser tests.
86-
* [Simplified resource management](#simplified-resource-management). The browser module now handles the startup and shutdown of browser processes automatically. `chromium.launch()`, `chromium.connect()`, and `browser.close()` methods are no longer necessary, as these methods have been removed.
87-
* [Single browser context per iteration](#browser-context-limit). Users can now only run a single [BrowserContext](/javascript-api/k6-experimental/browser/browsercontext/) at a time in the same iteration.
88-
8985
## Import path
9086

91-
Changes have been made to how the [browser module](/javascript-api/k6-experimental/browser/) is imported. With the browser type (specifically `chromium`) now set in [scenario options](#scenario-options), users should directly import the [browser](/javascript-api/k6-experimental/browser/#browser-module-api) object from the [browser module](/javascript-api/k6-experimental/browser/).
87+
With the browser type (specifically `chromium`) now set in [scenario options](#scenario-options), you should directly import the [browser](/javascript-api/k6-experimental/browser/#browser-module-api) object from the [browser module](/javascript-api/k6-experimental/browser/).
9288

9389
<CodeGroup labels={["Before: Import Path"]} lineNumbers={[true]}>
9490

@@ -106,9 +102,15 @@ import { browser } from 'k6/experimental/browser';
106102

107103
</CodeGroup>
108104

105+
## Simplified resource management
106+
107+
The browser lifecycle is now automatically managed by the browser module, and so the `chromium.launch()`, `chromium.connect()`, and `browser.close()` methods are no longer necessary and have been removed.
108+
109+
Now, all that is needed is to specify the `browser.type` within the [scenario options](#scenario-options). If the option is set, a browser instance will automatically start at the beginning and close at the end of each test iteration.
110+
109111
## Browser options
110112

111-
In k6 v0.46.0, the need to manually start a browser via `chromium.launch()` or `chromium.connect()` and set its configuration through these methods has been removed, so this part can simply be omitted from test scripts. Users can still change some browser settings by using environment variables. For more information, refer to the [browser module options](/javascript-api/k6-experimental/browser/#browser-module-options) documentation.
113+
With the removal of the `chromium.launch()` and `chromium.connect()` methods, setting browsers options is now done by using environment variables. For more information, refer to [Browser Module Options](/javascript-api/k6-experimental/browser/#browser-module-options).
112114

113115
Before:
114116

@@ -153,13 +155,13 @@ PS C:\k6> $env:K6_BROWSER_HEADLESS="false" ; $env:K6_BROWSER_TIMEOUT='60s' ; k6
153155

154156
<Blockquote mod="note" title="">
155157

156-
The following browser options are no longer supported: `devtools`, `env`, and `proxy` since they weren't providing much value. Although `slowMo` has been temporarily removed, we're working on reintroducing it.
158+
The following browser options are no longer supported: `devtools`, `env`, and `proxy` since they weren't providing much value. `slowMo` has been temporarily removed, and we're working on reintroducing it.
157159

158160
</Blockquote>
159161

160162
## Scenario options
161163

162-
In k6 v0.46.0, users must set the [executor](/using-k6/scenarios/executors/) and browser type as options in a [k6 scenario](/using-k6/scenarios/) definition. Specifically, the `browser.type` option should be set to `chromium`, as Chromium is the only browser supported.
164+
You must now set the [executor](/using-k6/scenarios/executors/) and browser type as options in a [scenario](/using-k6/scenarios/) definition. Specifically, the `browser.type` option should be set to `chromium`, as Chromium is the only browser supported.
163165

164166
<CodeGroup labels={["After"]} lineNumbers={[true]}>
165167

@@ -182,15 +184,9 @@ export const options = {
182184

183185
</CodeGroup>
184186

185-
Previously, users were required to handle the creation and closing of the browser instance using `chromium.launch()` or `chromium.connect()` for creation, and the `browser.close()` method for releasing resources before ending the iteration. This repetitive code has been eliminated.
186-
187-
Now, all that is needed is to specify the browser type within the [scenario options](#scenario-options). A browser instance will be automatically created and closed for each iteration by the browser module, streamlining the process.
188-
189-
This change allows to identify the test as a browser test and provides automatic control of the browser's lifecycle. Users no longer need to start or stop the browser manually through the browser API. If the `browser.type` option is set in the scenario options, a browser instance will automatically start at the beginning and close at the end of each test iteration.
190-
191-
## Opening a new page
187+
## Opening and closing a page
192188

193-
Users can open a new page by using the imported [browser](/javascript-api/k6-experimental/browser/#browser-module-api) object's [browser.newPage()](/javascript-api/k6-experimental/browser/newpage) method. Users can still use the [Page](/javascript-api/k6-experimental/browser/page/) object as before.
189+
You can open a new page by using the imported [browser](/javascript-api/k6-experimental/browser/#browser-module-api) object's [browser.newPage()](/javascript-api/k6-experimental/browser/newpage) method. You can still use the [Page](/javascript-api/k6-experimental/browser/page/) object as before.
194190

195191
<CodeGroup labels={["After"]} lineNumbers={[true]}>
196192

@@ -205,39 +201,14 @@ export default async function () {
205201
```
206202
</CodeGroup>
207203

204+
The `browser.close()` method has been removed, so you can remove that from your scripts and use [`page.close()`](/javascript-api/k6-experimental/browser/page/close/) once you're done using the page object.
205+
208206
<Blockquote mod="note" title="">
209207

210208
Closing of the page is critical for the calculation of accurate Web Vital metrics. See the [browser metrics](/using-k6-browser/browser-metrics/) for more details.
211209

212210
</Blockquote>
213211

214-
## Simplified resource management
215-
216-
As [mentioned earlier](#scenario-options), in the new API, there's a shift in how the browser's lifecycle is managed.
217-
218-
Since the browser lifecycle is automatically managed by the browser module, the closing of the browser has been simplified. The explicit `browser.close()` call has been removed. Simply close the page using the [page.close()](/javascript-api/k6-experimental/browser/page/close/) method as in the example below.
219-
220-
<CodeGroup labels={["Before"]} lineNumbers={[true]}>
221-
222-
<!-- eslint-skip -->
223-
224-
```javascript
225-
page.close();
226-
browser.close();
227-
```
228-
229-
</CodeGroup>
230-
231-
<CodeGroup labels={["After"]} lineNumbers={[true]}>
232-
233-
<!-- eslint-skip -->
234-
235-
```javascript
236-
page.close();
237-
```
238-
239-
</CodeGroup>
240-
241212
## Browser context limit
242213

243214
The new browser implementation limits the usage to a single active [BrowserContext](/javascript-api/k6-experimental/browser/browsercontext/) per iteration. This change enhances the prediction of resource requirements for a test run and promotes the use of [scenarios](/using-k6/scenarios/) to separate independent browser sessions.
@@ -262,7 +233,7 @@ export default async function() {
262233

263234
</CodeGroup>
264235

265-
On the other hand, the subsequent example will function correctly by closing the initial [BrowserContext](/javascript-api/k6-experimental/browser/browsercontext/) prior to establishing a new one.
236+
On the other hand, the next example will function correctly by closing the initial [BrowserContext](/javascript-api/k6-experimental/browser/browsercontext/) prior to establishing a new one.
266237

267238
<CodeGroup labels={["Correct usage"]} lineNumbers={[true]}>
268239

@@ -281,6 +252,6 @@ export default async function() {
281252

282253
</CodeGroup>
283254

284-
These updates make the usage of our API more straightforward for users, aiding in more consistent and automatic resource management.
255+
These updates make the usage of the API more straightforward for users, aiding in more consistent and automatic resource management.
285256

286-
For all the details, make sure to review the complete changelog for [k6 version 0.46](https://github.com/grafana/k6/releases/tag/v0.46.0). For more information watch [k6 Office Hours #98](https://www.youtube.com/watch?v=fK6Hpvt0pY0), where we discuss the latest changes in k6 browser, and, as always, ask in [the community forum](https://community.grafana.com/c/grafana-k6/k6-browser/79) if you need our help!
257+
For all the details, make sure to review the complete changelog for [k6 version 0.46](https://github.com/grafana/k6/releases/tag/v0.46.0). For more information watch [k6 Office Hours #98](https://www.youtube.com/watch?v=fK6Hpvt0pY0), where we discuss the latest changes in k6 browser, and, as always, ask in [the community forum](https://community.grafana.com/c/grafana-k6/k6-browser/79) if you need help!

0 commit comments

Comments
 (0)