docs(recipes): fix layout + k6 (#3738)

* docs(tools+integrations): clean up and fix broken guides

* docs(k6): update recipe

docs/docs/tools-and-integrations/artillery-plugin.mdx

@@ -65,7 +65,7 @@ Follow these instructions to run the included demo app and TypeScript example:
 
 1. Copy the `.env.template` file to `.env`.
 2. Log into the [Tracetest app](https://app.tracetest.io/).
-3. This example is configured to use Jaeger. Ensure the environment you will be utilizing to run this example is also configured to use the Jaeger Tracing Backend by clicking on Settings, Tracing Backend, Jaeger, updating the url to `jaeger:16685`, Test Connection and Save.
+3. This example is configured to use Jaeger. Ensure the environment you will be utilizing to run this example is also configured to use the Jaeger Tracing Backend by clicking on Settings, Tracing Backend, Jaeger, updating the URL to `jaeger:16685`, Test Connection and Save.
 4. Fill out the [token](https://docs.tracetest.io/concepts/environment-tokens) and [agent API key](https://docs.tracetest.io/concepts/agent) details by editing your `.env` file. You can find these values in the Settings area for your environment.
 5. Run `docker compose up -d`.
 6. Run `npm i` to install the required dependencies.

docs/docs/tools-and-integrations/cypress.mdx

@@ -59,7 +59,11 @@ The `@tracetest/cypress` npm package is a Cypress plugin that allows you to run
 - Create an [environment token](/concepts/environment-tokens).
 - Have access to the environment's [agent API key](/configuration/agent).
 
-**Pokeshop Demo:**
+**Docker**:
+
+- Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
+
+## Run This Quckstart Example
 
 Clone the official [Tracetest Pokeshop Demo App Repo](https://github.com/kubeshop/pokeshop) to your local machine.
 
@@ -68,15 +72,17 @@ git clone https://github.com/kubeshop/pokeshop.git
 cd pokeshop
 ```
 
-Before moving forward, run `npm i` in the root folder to install the dependencies.
+Follow these instructions to run the Cypress example:
 
-```bash
-npm i
-```
-
-**Docker**:
+1. Copy the `.env.template` file to `.env`.
+2. Log into the [Tracetest app](https://app.tracetest.io/).
+3. This example is configured to use the OpenTelemetry Collector. Ensure the environment you will be utilizing to run this example is also configured to use the OpenTelemetry Tracing Backend by clicking on Settings, Tracing Backend, OpenTelemetry, Save.
+4. Fill out the [token](https://docs.tracetest.io/concepts/environment-tokens) and [agent API key](https://docs.tracetest.io/concepts/agent) details by editing your `.env` file. You can find these values in the Settings area for your environment.
+5. Run `docker compose -f docker-compose.yml -f docker-compose.e2e.yml up -d`.
+6. Run `npm i` in the root folder to install the dependencies.
+7. Run `npm run cy:run` or `npm run cy:open`.
 
-- Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
+Follow along with the sections below for an in detail breakdown of what the example you just ran did and how it works.
 
 ## Project Structure
 

docs/docs/tools-and-integrations/k6.mdx

@@ -16,6 +16,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
 :::note
 [Check out the source code on GitHub here.](https://github.com/kubeshop/tracetest/tree/main/examples/tracetest-k6)
 :::
@@ -80,34 +84,31 @@ This is a simple quick start guide on how to run the Tracetest k6 extension to r
 - Create an [environment token](/concepts/environment-tokens).
 - Have access to the environment's [agent API key](/configuration/agent).
 
-**Tracetest CLI**:
-
-- [Download the CLI](/getting-started/installation#install-the-tracetest-cli).
-- Configure the CLI to connect to your Tracetest environment with the environment token you created in the step above.
-
-    ```bash
-      tracetest configure -t <tttoken_1234567890>
-    ```
+**Docker**:
 
-**xk6:** To start using the Tracetest k6 binary you need to have the xk6 builder installed on your machine. You can [follow the instructions defined in this page](https://github.com/grafana/xk6/) to do that.
+- Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
 
-**Docker**: Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
-
-## Installing the k6 Tracetest Extension
+## Run This Quckstart Example
 
-Installing the k6 Tracetest extension is as easy as running the following command:
+Clone the official [Tracetest Pokeshop Demo App Repo](https://github.com/kubeshop/pokeshop) to your local machine.
 
 ```bash
-xk6 build v0.42.0 --with github.com/kubeshop/xk6-tracetest
+git clone https://github.com/kubeshop/pokeshop.git
+cd pokeshop
 ```
 
-This will generate the `k6-tracetest` binary in the current directory.
+Follow these instructions to run the Cypress example:
 
-The instructions can be also found in the main [k6 docs](https://k6.io/docs/extensions/get-started/bundle/) in case you need to combine multiple extensions into one binary.
+1. Copy the `.env.template` file to `.env`.
+2. Log into the [Tracetest app](https://app.tracetest.io/).
+3. This example is configured to use Jaeger. Ensure the environment you will be utilizing to run this example is also configured to use the Jaeger Tracing Backend by clicking on Settings, Tracing Backend, Jaeger, updating the URL to `jaeger:16685`, Test Connection and Save.
+4. Fill out the [token](https://docs.tracetest.io/concepts/environment-tokens) and [agent API key](https://docs.tracetest.io/concepts/agent) details by editing your `.env` file. You can find these values in the Settings area for your environment.
+5. Run `docker compose -f docker-compose.yml -f docker-compose.e2e.yml up -d`.
+6. Run `npm i` in the root folder to install the dependencies.
+7. [Install k6 Tracetest extension](https://github.com/grafana/xk6) for your OS. This will create a `k6` binary.
+8. Run `XK6_TRACETEST_API_TOKEN=<TRACETEST_API_TOKEN> ./k6 run ./test/k6/import-pokemon.js -o xk6-tracetest`.
 
-## Using the Tracetest Extension For Load Tests
-
-Once you have installed the k6 Tracetest binary, you can use the base k6 functionality to run load tests against instrumented services and Tracetest to run checks against the resulting telemetry data.
+Follow along with the sections below for an in detail breakdown of what the example you just ran did and how it works.
 
 ## Project Structure
 
@@ -117,15 +118,58 @@ The project is built with Docker Compose.
 
 The [Pokeshop Demo App](/live-examples/pokeshop/overview) is a complete example of a distributed application using different backend and front-end services, implementation code is written in Typescript.
 
-The `docker-compose-yaml` file in the root directory is for the Pokeshop Demo app, the OpenTelemetry setup and the [Tracetest Agent](/concepts/agent).
+The `docker-compose.yml` file in the root directory is for the Pokeshop Demo app and the OpenTelemetry setup.
+And the `docker-compose.e2e.yml` includes the [Tracetest Agent](/concepts/agent).
 
-### Docker Compose Network
+Finally, the k6 load tests can be found in `test/k6/import-pokemon.js`.
+
+## Installing the k6 Tracetest Extension
+
+[Installing the k6 Tracetest extension](https://github.com/grafana/xk6) is as easy as running the following command:
+
+<Tabs groupId="k6">
+  <TabItem value="Linux" label="Linux" default>
+
+```bash title="Terminal"
+docker run --rm -it -u "$(id -u):$(id -g)" -v "${PWD}:/xk6" \
+  grafana/xk6 build v0.43.1 \
+  --with github.com/kubeshop/xk6-tracetest
+```
+
+  </TabItem>
+
+  <TabItem value="MacOS" label="MacOS" default>
+
+```bash title="Terminal"
+docker run --rm -it -e GOOS=darwin -u "$(id -u):$(id -g)" -v "${PWD}:/xk6" \
+  grafana/xk6 build v0.43.1 \
+  --with github.com/kubeshop/xk6-tracetest
+```
 
-All `services` in the `docker-compose.yaml` are on the same network and will be reachable by hostname from within other services. For example, `jaeger:14250` in the `collector.config.yaml` file will map to the `jaeger` service, where port `14250` is the port where the Jaeger all-in-one instance accepts telemetry data.
+  </TabItem>
+
+  <TabItem value="Windows" label="Windows" default>
+
+```bash title="Terminal"
+docker run --rm -it -e GOOS=windows -u "$(id -u):$(id -g)" -v "${PWD}:/xk6" `
+  grafana/xk6 build v0.43.1 --output k6.exe `
+  --with github.com/kubeshop/xk6-tracetest
+```
+
+  </TabItem>
+</Tabs>
+
+This will generate the `k6-tracetest` binary in the current directory.
+
+The instructions can be also found in the main [k6 docs](https://k6.io/docs/extensions/get-started/bundle/) in case you need to combine multiple extensions into one binary.
+
+## Using the Tracetest Extension For Load Tests
+
+Once you have installed the k6 Tracetest binary, you can use the base k6 functionality to run load tests against instrumented services and Tracetest to run checks against the resulting telemetry data.
 
 ## Creating Your Tracetest Test Definition
 
-The `tests/test.yaml` file contains the test definition that will be used to run the tests. It uses the trace id trigger which is required for the k6 integrations as well as adding assertions using test-based TDD patterns.
+The `test/k6/import-pokemon.yaml` file contains the test definition that will be used to run the tests. It uses the trace id trigger which is required for the k6 integrations as well as adding assertions using test-based TDD patterns.
 
 ```yaml
 type: Test
@@ -156,12 +200,13 @@ spec:
 Create the test using the following command:
 
 ```bash
-tracetest apply test -f ./tests/test.yaml
+tracetest configure -t <TRACETEST_API_TOKEN>
+tracetest apply test -f ./test/k6/import-pokemon.yaml
 ```
 
 ## Creating Your k6 Script
 
-The `import-pokemon.js` file contains the k6 script that will be used to run the performance tests. It is a simple script that will trigger a `POST` request to the `/pokemon/import` Pokeshop Demo app endpoint.
+The `test/k6/import-pokemon.js` file contains the k6 script that will be used to run the performance tests. It is a simple script that will trigger a `POST` request to the `/pokemon/import` Pokeshop Demo app endpoint.
 
 ```javascript
 import { Http, Tracetest } from "k6/x/tracetest";
@@ -222,48 +267,28 @@ export function teardown() {
 }
 ```
 
-## Tracetest Agent Connects to Tracetest
+### Setting the Environment Variables
 
-The `docker-compose.yaml` file includes the [Tracetest Agent](/concepts/agent) image, which is going to fetch traces from the Jaeger all-in-one instance and send them to Tracetest.
+Copy the `.env.template` content into a new `.env` file.
 
-```yaml
-version: "3"
-
-services:
-  tracetest-agent:
-    image: kubeshop/tracetest-agent:latest
-    environment:
-      TRACETEST_DEV: ${TRACETEST_DEV}
-      TRACETEST_API_KEY: ${TRACETEST_API_KEY}
+```bash title=Terminal
+cp .env.template .env
 ```
 
-Do not forget to set the `TRACETEST_API_KEY` environment variable in the `.env` file to your Tracetest Agent. The API key available on the `Settings > Agent` page of your environment as you can see [here](/configuration/agent).
+Add the [Tracetest API Token](/concepts/environment-tokens) and [Tracetest Agent API Key](/configuration/agent) to the `TRACETEST_API_TOKEN` and `TRACETEST_AGENT_API_KEY` variables.
 
-Configure Tracetest Agent to connect to the Jaeger instance running in Docker.
-
-```yaml title=tracetest-datastore.yaml
----
-type: DataStore
-spec:
-  id: current
-  name: jaeger
-  type: jaeger
-  jaeger:
-    endpoint: jaeger:16685
-    tls:
-      insecure: true
-```
-
-```bash
-tracetest apply datastore -f ./tracetest-datastore.yaml
+```bash title=.env
+TRACETEST_API_TOKEN=<YOUR_API_TOKEN> # your environment token
+TRACETEST_AGENT_API_KEY=<YOUR_AGENT_API_KEY>
+POKESHOP_DEMO_URL=http://localhost:8081
 ```
 
-## Run the Pokeshop Demo App and the Tracetest Agent
+### Starting the Pokeshop Demo App
 
-To start the full setup, run the following command:
+To start the Pokeshop Demo App, run the following command from the root directory:
 
 ```bash
-docker-compose up -d
+docker compose -f docker-compose.yml -f docker-compose.e2e.yml up
 ```
 
 This will start the Pokeshop Demo HTTP API on `http://localhost:8081/`.
@@ -273,7 +298,7 @@ This will start the Pokeshop Demo HTTP API on `http://localhost:8081/`.
 Having the full setup ready, the final step is to run the k6 script. To do that, run the following command:
 
 ```bash
-XK6_TRACETEST_API_TOKEN=<your-environment-token> ./k6 run ./import-pokemon.js -o xk6-tracetest
+XK6_TRACETEST_API_TOKEN=<TRACETEST_API_TOKEN> ./k6 run ./test/k6/import-pokemon.js -o xk6-tracetest
 context menu
 
 

docs/docs/tools-and-integrations/playwright.mdx

@@ -59,9 +59,30 @@ The [`@tracetest/playwright`](https://www.npmjs.com/package/@tracetest/playwrigh
 - Create an [environment token](/concepts/environment-tokens).
 - Have access to the environment's [agent API key](/configuration/agent).
 
-**Pokeshop Demo:** Clone the official [Tracetest Pokeshop Demo App Repo](https://github.com/kubeshop/pokeshop) to your local machine.
+**Docker**:
 
-**Docker**: Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
+- Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine.
+
+## Run This Quckstart Example
+
+Clone the official [Tracetest Pokeshop Demo App Repo](https://github.com/kubeshop/pokeshop) to your local machine.
+
+```bash
+git clone https://github.com/kubeshop/pokeshop.git
+cd pokeshop
+```
+
+Follow these instructions to run the Cypress example:
+
+1. Copy the `.env.template` file to `.env`.
+2. Log into the [Tracetest app](https://app.tracetest.io/).
+3. This example is configured to use the OpenTelemetry Collector. Ensure the environment you will be utilizing to run this example is also configured to use the OpenTelemetry Tracing Backend by clicking on Settings, Tracing Backend, OpenTelemetry, Save.
+4. Fill out the [token](https://docs.tracetest.io/concepts/environment-tokens) and [agent API key](https://docs.tracetest.io/concepts/agent) details by editing your `.env` file. You can find these values in the Settings area for your environment.
+5. Run `docker compose -f docker-compose.yml -f docker-compose.e2e.yml up -d`.
+6. Run `npm i` in the root folder to install the dependencies.
+7. Run `npm run pw:run` or `npm run pw:open`.
+
+Follow along with the sections below for an in detail breakdown of what the example you just ran did and how it works.
 
 ## Project Structure
 
@@ -251,7 +272,19 @@ test("Playwright: deletes a pokemon", async ({ page }) => {
 
 ### Setting the Environment Variables
 
-Copy the `.env.template` file to `.env` and add the Tracetest API token and agent tokens to the `TRACETEST_API_TOKEN` and `TRACETEST_AGENT_API_KEY` variables.
+Copy the `.env.template` content into a new `.env` file.
+
+```bash title=Terminal
+cp .env.template .env
+```
+
+Add the [Tracetest API Token](/concepts/environment-tokens) and [Tracetest Agent API Key](/configuration/agent) to the `TRACETEST_API_TOKEN` and `TRACETEST_AGENT_API_KEY` variables.
+
+```bash title=.env
+TRACETEST_API_TOKEN=<YOUR_API_TOKEN>
+TRACETEST_AGENT_API_KEY=<YOUR_AGENT_API_KEY>
+POKESHOP_DEMO_URL=http://localhost:8081
+```
 
 ### Starting the Pokeshop Demo App
 

docs/docs/tools-and-integrations/testkube.mdx

@@ -122,7 +122,7 @@ kubectl testkube create test --file my/file/location.yaml --type "tracetest/test
 
 Note: In case you are doing a port forward to your Tracetest instance and you want to have the correct Tracetest URL in your results printed by the Testkube output, you can also provide an optional `TRACETEST_OUTPUT_ENDPOINT` variable (e.g. `--variable TRACETEST_OUTPUT_ENDPOINT=http://localhost:11633`).
 
-- **If you are using [Tracetest](https://docs.tracetest.io/getting-started/installation/) on `app.tracetest.io` **: Define your [token](../concepts/environment-token.mdx), [environment](../concepts/environments.mdx) and [organization](../concepts/organizations.mdx) using the `TRACETEST_TOKEN`, `TRACETEST_ENVIRONMENT` and `TRACETEST_ORGANIZATION` variables
+- **If you are using [Tracetest](https://docs.tracetest.io/getting-started/installation/) on `app.tracetest.io`**: Define your [token](../concepts/environment-token.mdx), [environment](../concepts/environments.mdx) and [organization](../concepts/organizations.mdx) using the `TRACETEST_TOKEN`, `TRACETEST_ENVIRONMENT` and `TRACETEST_ORGANIZATION` variables
 
 ```bash
 kubectl testkube create test --file my/file/location.yaml --type "tracetest/test" --name pokeshop-tracetest-test --variable TRACETEST_TOKEN=your-token --variable TRACETEST_ENVIRONMENT=your-environment-id --variable TRACETEST_ORGANIZATION=your-organization-id

docs/sidebars.js

@@ -363,7 +363,7 @@ const sidebars = {
         {
           type: "doc",
           id: "tools-and-integrations/typescript",
-          label: "Typescript",
+          label: "TypeScript",
         },
         {
           type: "doc",