diff --git a/docs/docs/tools-and-integrations/cypress.mdx b/docs/docs/tools-and-integrations/cypress.mdx index 7c85b26298..ed39750d09 100644 --- a/docs/docs/tools-and-integrations/cypress.mdx +++ b/docs/docs/tools-and-integrations/cypress.mdx @@ -57,10 +57,16 @@ The `@tracetest/cypress` npm package is a Cypress plugin that allows you to run Clone the official [Tracetest Pokeshop Demo App Repo](https://github.com/kubeshop/pokeshop) to your local machine. ```bash -git clone git@github.com:kubeshop/pokeshop.git +git clone https://github.com/kubeshop/pokeshop.git cd pokeshop ``` +Before moving forward, run `npm i` in the root folder to install the dependencies. + +```bash +npm i +``` + **Docker**: - Have [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed on your machine. @@ -105,11 +111,9 @@ module.exports = defineConfig({ }); ``` -Before moving forward, run `npm i` in the root folder to install the dependencies. - -### The `home.cy` Test Script +### The `home.cy.ts` Test Script -The `cypress/e2e/1-getting-started/home.cy` test script contains three different tests based on the Pokeshop Demo UI fetures, which are: +The `cypress/e2e/1-getting-started/home.cy.ts` test script contains three different tests based on the Pokeshop Demo UI fetures, which are: 1. Create a Pokemon 2. Import a Pokemon (using an async process) @@ -118,9 +122,10 @@ The `cypress/e2e/1-getting-started/home.cy` test script contains three different ### Tracetest Library Setup If you go to the `package.json` file you will find the inclusion of a Tracetest package for Cypress `@tracetest/cypress`. + The first thing the test script does is import the package, grab the Tracetest API token from the environment variables and create the Tracetest instance. -```typescript +```typescript title=cypress/e2e/1-getting-started/home.cy.ts import Tracetest, { Types } from "@tracetest/cypress"; const TRACETEST_API_TOKEN = Cypress.env("TRACETEST_API_TOKEN") || ""; @@ -129,7 +134,7 @@ let tracetest: Types.TracetestCypress | undefined = undefined; Afterward, during the `before` hook, create the Tracetest instance with the API token. -```typescript +```typescript title=cypress/e2e/1-getting-started/home.cy.ts before((done) => { Tracetest({ apiToken: TRACETEST_API_TOKEN }).then((instance) => { tracetest = instance; @@ -148,7 +153,7 @@ before((done) => { Then, during the `beforeEach` hook, the script **captures** the document to inject the `traceparent` to the meta tag. -```typescript +```typescript title=cypress/e2e/1-getting-started/home.cy.ts beforeEach(() => { cy.visit("/", { onBeforeLoad: (win) => tracetest.capture(win.document), @@ -158,7 +163,7 @@ beforeEach(() => { **OPTIONAL**: If you want to wait for the test to finish and break the Cypress execution based on a failed Tracetest test, you can add the `after` hook and call the `summary` method. -```typescript +```typescript title=cypress/e2e/1-getting-started/home.cy.ts after((done) => { tracetest.summary().then(() => done()); }); @@ -166,7 +171,7 @@ after((done) => { The rest of the test script is the Cypress test definitions for the test cases mentioned above. The complete test script looks like this: -```typescript +```typescript title=cypress/e2e/1-getting-started/home.cy.ts import Tracetest, { Types } from '@tracetest/cypress'; const TRACETEST_API_TOKEN = Cypress.env('TRACETEST_API_TOKEN') || ''; @@ -248,7 +253,19 @@ describe('Home', { defaultCommandTimeout: 60000 }, () => { ### Setting the Environment Variables -Copy the `.env.template` content into a new `.env` file. 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. +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= +TRACETEST_AGENT_API_KEY= +POKESHOP_DEMO_URL=http://localhost:8081 +``` ### Starting the Pokeshop Demo App @@ -344,7 +361,7 @@ To run the tests using the Cypress UI, run the following command from the root d npm run cy:open ``` -Then, navigate your way to the `e2e` section and select the `home.cy` test script. +Then, navigate your way to the `e2e` section and select the `home.cy.ts` test script. ![Cypress UI](./img/cypress-scripts.png)