Merge pull request #1269 from grafana/add-instructions-k6-browser-docker

add instructions on how to run k6 browser tests using Docker

Author: mdcruz

src/data/markdown/translated-guides/en/01 Get started/02 Installation.md

@@ -56,6 +56,12 @@ Alternatively, you can download and run [the latest official installer](https://
 docker pull grafana/k6
 ```
 
+We also have a separate image you can use with `chromium` installed to run k6 browser tests.
+
+```bash
+docker pull grafana/k6:master-with-browser
+```
+
 ## Download the k6 binary
 
 Our [GitHub Releases page](https://github.com/grafana/k6/releases) has a standalone binary for all platforms. After downloading and extracting the archive for your platform, place the `k6` or `k6.exe` binary in your `PATH` to run `k6` from any location.

src/data/markdown/translated-guides/en/03 Using k6 browser/02 Running browser tests.md

@@ -58,12 +58,20 @@ To run a simple local script:
 
 2. Then, run the test on your terminal with this command:
 
-<CodeGroup labels={["Bash", "Windows: CMD", "Windows: PowerShell"]} lineNumbers={[false]}>
+<CodeGroup labels={["Bash", "Docker", "Windows: CMD", "Windows: PowerShell"]} lineNumbers={[false]}>
 
 ```bash
 $ K6_BROWSER_ENABLED=true k6 run script.js
 ```
 
+```bash
+# When using the `k6:master-with-browser` Docker image, you need to add `--cap-add=SYS_ADMIN`
+# to grant further system permissions on the host for the Docker container.
+# There is also no need to set the K6_BROWSER_ENABLED variable explicitly since this is already
+# defined in the Dockerfile.
+docker run --rm -i --cap-add=SYS_ADMIN grafana/k6:master-with-browser run - <script.js
+```
+
 ```bash
 C:\k6> set "K6_BROWSER_ENABLED=true" && k6 run script.js
 ```
@@ -74,6 +82,12 @@ PS C:\k6> $env:K6_BROWSER_ENABLED=true ; k6 run script.js
 
 </CodeGroup>
 
+<Blockquote mod="note" title="">
+
+  When using Docker to run k6 browser tests, make sure you have pulled the correct image with Chromium built-in. See [k6 Installation via Docker](/get-started/installation/#docker) for more information.
+
+</Blockquote>
+
 ## Interact with elements on your webpage
 
 You can use `page.locator()` and pass in the element's selector you want to find on the page. `page.locator()` will create and return a [Locator](/javascript-api/k6-experimental/browser/locator/) object, which you can later use to interact with the element.
@@ -174,7 +188,7 @@ To run a browser-level and protocol-level test concurrently, you can use [scenar
 
   Keep in mind that there is an additional performance overhead when it comes to spinning up a browser VU and that the resource usage will depend on the system under test.
 
-  </Blockquote>
+</Blockquote>
 
 <CodeGroup labels={["script.js"]} lineNumbers={[true]}>