Skip to content

Commit

Permalink
Couple changes on the Cypress docs (#3545)
Browse files Browse the repository at this point in the history
* Couple changes on the Cypress docs

Explicitly highlighted the npm i as I did not see it when it was in the sentence. Also switched to a different syntax on th egit clone commend - I see an error for it (which I could fix)... I think this one may work more universally (but I could be wrong).
I also missed the copying of the env file, so pulled it into a code block to make it obvious,.

* docs(cy): copyedits

---------

Co-authored-by: Adnan Rahic <[email protected]>
  • Loading branch information
kdhamric and adnanrahic authored Jan 19, 2024
1 parent ce23a1d commit c1b0e95
Showing 1 changed file with 29 additions and 12 deletions.
41 changes: 29 additions & 12 deletions docs/docs/tools-and-integrations/cypress.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand All @@ -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") || "";
Expand All @@ -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;
Expand All @@ -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),
Expand All @@ -158,15 +163,15 @@ 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());
});
```

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') || '';
Expand Down Expand Up @@ -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=<YOUR_API_TOKEN>
TRACETEST_AGENT_API_KEY=<YOUR_AGENT_API_KEY>
POKESHOP_DEMO_URL=http://localhost:8081
```

### Starting the Pokeshop Demo App

Expand Down Expand Up @@ -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)

Expand Down

0 comments on commit c1b0e95

Please sign in to comment.