installation.md

Installation

Documentation for Installation of Echoed.

Table of Contents

• Jest
• Playwright
• Cypress

Jest

Echoed offers two installation methods, choose one that suits your needs:

Option 1. Create From Template

1. Initialize a new directory using our template:

   mkdir my_test_directory && cd my_test_directory
   npm create echoed@latest

2. Install dependencies:

   npm install

3. Start server in the example directory:

   cd example
   make start

4. Run test from project root directory after compiling YAML tests:

   cd ../
   npm run compile && npm run test

5. After test, you can view the HTML report in report/result.html (specified in .echoed.yml):

   open report/result.html

6. Stop server:

   cd example
   make stop

7. Once you're familiar, remove the example directory and begin crafting your own tests:

   rm -rf ./example

Option 2. Integrate with Existing Tests

1. Install package:

   npm install echoed

2. Update Jest configuration for Echoed
   Modify your jest.config.js to include Echoed in testEnvironment and reporters:

   module.exports = {
     // ... other configurations
     testEnvironment: "echoed/jest/nodeEnvironment",
     reporters: [
       "default",
       "echoed/jest/reporter"
     ],
   };

3. Create .echoed.yml.
   To integrate Echoed, create a configuration file named .echoed.yml.
   The minimal required option is output, specifying where to write the result. Refer to the Configuration for other options.

   For example:

   output: "report/result.html"

4. Update your OpenTelemetry endpoint to send data to Echoed.
   If you are using the OpenTelemetry Collector, modify its settings as shown below:

   exporters:
     otlphttp/local:
       endpoint: http://host.docker.internal:3000 # Default port of Echoed is 3000
   
   service:
     pipelines:
       traces:
         exporters: [otlphttp/local]
       logs:
         exporters: [otlphttp/local]

Playwright

Echoed offers two installation methods, choose one that suits your needs:

Option 1. Create From Template

1. Initialize a new directory using our Playwright template:

   mkdir my_test_directory && cd my_test_directory
   npm create echoed@latest -- --template playwright

2. Install dependencies:

   npm install
   npx playwright install
   sudo npx playwright install-deps

3. Start server in the example directory:

   cd example
   make start

4. Run test from project root directory after compiling YAML tests:

   cd ../
   npm run compile && npm run test

5. After test, you can view the HTML report in report/result.html (specified in .echoed.yml):

   open report/result.html

6. Stop server:

   cd example
   make stop

7. Once you're familiar, remove the example directory and begin crafting your own tests:

   rm -rf ./example

Option 2. Integrate with Existing Tests

1. Install package:

   npm install echoed

2. Update Playwright configuration for Echoed
   Modify your playwright.config.ts to include Echoed in reporter and globalSetup:

   module.exports = {
     // ... other configurations
     reporter: [["html"], ["echoed/playwright/reporter"]],
     globalSetup: "echoed/playwright/globalSetup",
   };

3. Create .echoed.yml.
   To integrate Echoed, create a configuration file named .echoed.yml.
   The minimal required option is output, specifying where to write the result. Refer to the Configuration for other options.

   For example:

   output: "report/result.html"

4. Update your OpenTelemetry endpoint to send data to Echoed.
   If you are using the OpenTelemetry Collector, modify its settings as shown below:

   exporters:
     otlphttp/local:
       endpoint: http://host.docker.internal:3000 # Default port of Echoed is 3000
   
   service:
     pipelines:
       traces:
         exporters: [otlphttp/local]
       logs:
         exporters: [otlphttp/local]

Cypress

Echoed offers two installation methods, choose one that suits your needs:

Option 1. Create From Template

1. Initialize a new directory using our Playwright template:

   mkdir my_test_directory && cd my_test_directory
   npm create echoed@latest -- --template cypress

2. Install dependencies:

   npm install

3. Start server in the example directory:

   cd example
   make start

4. Run test from project root directory:

   cd ../
   npm run test

5. After test, you can view the HTML report in report/result.html (specified in .echoed.yml):

   open report/result.html

6. Stop server:

   cd example
   make stop

7. Once you're familiar, remove the example and cypress/e2e/example directory and begin crafting your own tests:

   rm -rf ./example ./cypress/e2e/example

Option 2. Integrate with Existing Tests

1. Install package:

   npm install echoed

2. Update Cypress configuration for Echoed
   Modify your cypress.config.ts to include Echoed in reporter and setupNodeEvents:

   import { defineConfig } from "cypress";
   import { install } from "echoed/cypress/nodeEvents";
   
   module.exports = defineConfig({
     reporter: "echoed/cypressReporter.js", // <- Add reporter
     e2e: {
       setupNodeEvents: async (
         on: Cypress.PluginEvents,
         options: Cypress.PluginConfigOptions,
       ) => {
         return install(on, options);  // <- Run `install` to collect data for reporter
       },
     },
   });

3. Update Support file
   Modify your ./cypress/support/e2e.js to add commands by Echoed:

   import { install } from "echoed/cypress/support";
   
   install();

4. Create .echoed.yml.
   To integrate Echoed, create a configuration file named .echoed.yml.
   The minimal required option is output, specifying where to write the result. Refer to the Configuration for other options.

   For example:

   output: "report/result.html"

5. Update your OpenTelemetry endpoint to send data to Echoed.
   If you are using the OpenTelemetry Collector, modify its settings as shown below:

   exporters:
     otlphttp/local:
       endpoint: http://host.docker.internal:3000 # Default port of Echoed is 3000
   
   service:
     pipelines:
       traces:
         exporters: [otlphttp/local]
       logs:
         exporters: [otlphttp/local]