# Qyrus Journeys

![Banner](/files/Cy6Mhhq1AvXjkMwSqisy)

## What is Qyrus Journeys?

**Qyrus Journeys** is an intelligent testing solution associated with Qyrus that transforms how you approach quality assurance by learning from real user behavior. Instead of writing tests based on assumptions, Qyrus Journeys analyzes actual user interactions in your applications to automatically generate comprehensive, robust test cases that reflect real-world usage patterns.

### How It Works

Qyrus Journeys captures user interactions through a lightweight JavaScript library that you integrate into your application. This data is then processed by our intelligent platform to:

* **Discover Common User Workflows** – Identify frequently used navigation patterns and user journeys
* **Generate Smart Test Cases** – Create automated tests based on real user behavior, not theoretical scenarios
* **Detect Issues Automatically** – Spot problems and UX issues as they happen in real user sessions
* **Build Element Memory** – Continuously evolve a repository of UI elements for more robust test automation
* **Provide Natural Language Insights** – Interact with your testing data using conversational queries

### Key Benefits

🎯 **Real User Insights** – Generate tests from actual user behavior patterns, ensuring comprehensive coverage of real-world scenarios

📊 **Smarter Test Automation** – Reduce manual testing effort with AI-generated test cases that adapt to user behavior

🔍 **Proactive Issue Detection** – Identify UX problems and bugs before they impact more users

🧠 **Continuously Evolving Element Repository** – Automatically updated database of UI elements that improves test reliability over time

⚡ **Framework Agnostic** – Works seamlessly with React, Vue, Angular, Next.js, and any JavaScript framework

🚀 **Easy Integration** – Get started in minutes with simple NPM package installation

## The NPM Package

The `@qyrus/journeys` NPM package is your gateway to intelligent test automation. This lightweight library integrates seamlessly into your existing application to collect user interaction data, which is then processed by the Qyrus platform to generate valuable testing insights and automated test cases.

## Getting Started

Transform your testing approach in just 3 simple steps! Follow this guide to start collecting real user insights that will revolutionize your QA process.

### Step 1: Get Your API Key 🔑

Your API key connects your application to the Qyrus Journeys platform for intelligent test generation.

1. **Login to Qyrus Platform**: Navigate to [Qyrus Application](https://app.qyrus.com) and sign in with your credentials.
2. **Access Profile Settings**: Click on the profile dropdown in the top-right corner and select your profile icon.
3. **Navigate to AI Token Section**: In the Profile Settings page, scroll down to find the "AI Token" section.
4. **Generate AI Token**:
   * If you don't have an existing token, click on "Generate New Token"
   * This is your API Key for Qyrus Journeys
   * If you have an existing token, you can use it or regenerate a new one
   * Make sure the token status is set to "Active"
5. **Copy Your API Key**: Once generated, copy the AI token (API Key) and store it securely.

> **⚠️ Important:** Your API Key expires in 90 days. Regenerate it before expiration to avoid service interruption.

![Getting your API Key](/files/1ZhZfihxIfrQP0u2wEzv)

### Step 2: Install the NPM Package 📦

Add the Qyrus Journeys library to your project using your preferred package manager:

**Using NPM:**

```bash
npm install @qyrus/journeys
```

**Using Yarn:**

```bash
yarn add @qyrus/journeys
```

**Using PNPM:**

```bash
pnpm add @qyrus/journeys
```

### Step 3: Integrate with Your Application ⚡

Add Qyrus Journeys to your application's main entry point. The integration is framework-agnostic and works with any JavaScript application.

#### Basic Integration (Vanilla JavaScript/TypeScript)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';

// Initialize Qyrus Journeys - that's it!
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});
```

**For production applications, use environment variables:**

```javascript
QyrusJourneys.init({
  apiKey: process.env.QYRUS_API_KEY
});
```

That's it! 🎉 Your application is now collecting user interaction data that will be transformed into intelligent test cases.

## Privacy & Data Protection 🔒

**Your users' privacy is our top priority.** Qyrus Journeys is designed with privacy-first principles to ensure sensitive data protection while still delivering powerful testing insights.

### Automatic Data Masking

* **All Input Data is Masked**: Any text entered by users in forms, search boxes, or input fields is automatically masked and anonymized
* **No Sensitive Information Stored**: Personal data, passwords, credit card numbers, and other sensitive information are never captured or stored
* **Privacy-Safe Analytics**: Our analysis focuses on interaction patterns, not the actual content users input
* **GDPR & Privacy Compliant**: Built to comply with data protection regulations while providing valuable testing insights

### What We Collect vs. What We Don't

**✅ What We DO Collect:**

* Element interactions (clicks, scrolls, navigation)
* User journey patterns and workflows
* Performance metrics and timing data
* UI element properties and structure

**❌ What We DON'T Collect:**

* Actual text input from users
* Personal information or sensitive data
* Passwords or authentication details
* Private or confidential content

You can confidently integrate Qyrus Journeys knowing that your users' privacy is fully protected while you gain valuable insights to improve your testing strategy.

## What You'll Get: Powerful Advantages 🚀

### Immediate Benefits

🎯 **Real-World Test Coverage**

* Generate tests based on actual user behavior, not assumptions
* Cover edge cases and workflows you might have missed
* Ensure your tests reflect real user journeys

📊 **Intelligent Test Automation**

* Reduce manual test writing by up to 80%
* AI-generated test cases that adapt to user patterns
* Automated test maintenance as your UI evolves

🔍 **Proactive Issue Detection**

* Identify UX problems before they impact more users
* Spot performance bottlenecks in real user sessions
* Get alerts when users encounter unexpected errors

### Long-Term Value

🧠 **Continuously Evolving Element Repository**

* Automatically maintained database of your UI elements
* Self-updating selectors that adapt to UI changes
* Improved test reliability and reduced maintenance

💬 **Natural Language Insights**

* Ask questions about user behavior in plain English
* Get instant insights: "Show me common checkout abandonment points"
* Search through user sessions using conversational queries

📈 **Data-Driven Decision Making**

* Understand which features users actually use
* Optimize user flows based on real behavior patterns
* Make informed product decisions backed by user data

### Use Cases That Transform Teams

**E-commerce Platforms**

* Test checkout flows based on real purchase patterns
* Identify cart abandonment points
* Validate payment and shipping workflows

**SaaS Applications**

* Optimize user onboarding flows
* Test feature adoption patterns
* Validate workflow efficiency improvements

**Web Applications**

* Comprehensive testing of critical user journeys
* Cross-browser compatibility based on real usage
* Mobile vs desktop behavior analysis

## Framework-Specific Configuration

Qyrus Journeys works seamlessly with all popular JavaScript frameworks. Below are specific integration examples for different frameworks. Choose your framework and follow the simple setup instructions:

**Quick Navigation:**

* [React](#react) | [Next.js](#nextjs) | [Vue.js](#vuejs) | [Angular](#angular)
* [Svelte](#svelte) | [SvelteKit](#sveltekit) | [Nuxt.js](#nuxtjs) | [Remix](#remix)
* [Gatsby](#gatsby) | [Solid.js](#solidjs) | [Astro](#astro) | [Vite](#vite) | [Webpack](#webpack-vanilla-js)

### React

**File to update/add:** `src/index.js` or `src/index.tsx` (main entry point)

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QyrusJourneys } from '@qyrus/journeys';
import App from './App';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### Next.js

**File to update/add:** `pages/_app.js` or `pages/_app.tsx` (App.js for Pages Router) or `app/layout.tsx` (for App Router)

#### Pages Router (`pages/_app.js`)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Initialize Qyrus Journeys on client side only
    QyrusJourneys.init({
      apiKey: 'your-api-key-here'
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;
```

#### App Router (`app/layout.tsx`)

```typescript
'use client';

import { QyrusJourneys } from '@qyrus/journeys';
import { useEffect } from 'react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    // Initialize Qyrus Journeys on client side only
    QyrusJourneys.init({
      apiKey: 'your-api-key-here'
    });
  }, []);

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

### Vue.js

**File to update/add:** `src/main.js` or `src/main.ts` (main entry point)

```javascript
import { createApp } from 'vue';
import { QyrusJourneys } from '@qyrus/journeys';
import App from './App.vue';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

createApp(App).mount('#app');
```

### Angular

**File to update/add:** `src/main.ts` (main entry point)

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { QyrusJourneys } from '@qyrus/journeys';
import { AppComponent } from './app/app.component';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

bootstrapApplication(AppComponent);
```

**Alternative:** For older Angular versions with modules, add to `src/app/app.module.ts`:

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QyrusJourneys } from '@qyrus/journeys';
import { AppComponent } from './app.component';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### Svelte

**File to update/add:** `src/main.js` or `src/main.ts` (main entry point)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';
import App from './App.svelte';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

const app = new App({
  target: document.getElementById('app')
});

export default app;
```

### SvelteKit

**File to update/add:** `src/app.html` (add script tag) or `src/hooks.client.js`

#### Using `src/hooks.client.js`:

```javascript
import { QyrusJourneys } from '@qyrus/journeys';

// Initialize Qyrus Journeys on client side
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});
```

### Nuxt.js

**File to update/add:** `plugins/qyrus-journeys.client.js` (client-side only plugin)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';

export default defineNuxtPlugin(() => {
  // Initialize Qyrus Journeys on client side only
  QyrusJourneys.init({
    apiKey: 'your-api-key-here'
  });
});
```

**Then add to** `nuxt.config.js`:

```javascript
export default defineNuxtConfig({
  plugins: [
    '~/plugins/qyrus-journeys.client.js'
  ]
});
```

### Remix

**File to update/add:** `app/root.tsx` (root layout)

```typescript
import { QyrusJourneys } from '@qyrus/journeys';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    // Initialize Qyrus Journeys on client side only
    QyrusJourneys.init({
      apiKey: 'your-api-key-here'
    });
  }, []);

  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
      </head>
      <body>
        <Outlet />
      </body>
    </html>
  );
}
```

### Gatsby

**File to update/add:** `gatsby-browser.js` (browser APIs)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';

// Initialize Qyrus Journeys when the client-side app starts
export const onClientEntry = () => {
  QyrusJourneys.init({
    apiKey: 'your-api-key-here'
  });
};
```

### Solid.js

**File to update/add:** `src/index.js` or `src/index.tsx` (main entry point)

```javascript
import { render } from 'solid-js/web';
import { QyrusJourneys } from '@qyrus/journeys';
import App from './App';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

render(() => <App />, document.getElementById('root'));
```

### Astro

**File to update/add:** `src/layouts/Layout.astro` (main layout)

```astro
---
// Layout.astro
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>
    <slot />
  </body>
</html>

<script>
  import { QyrusJourneys } from '@qyrus/journeys';
  
  // Initialize Qyrus Journeys
  QyrusJourneys.init({
    apiKey: 'your-api-key-here'
  });
</script>
```

### Vite

**File to update/add:** `src/main.js` or `src/main.ts` (main entry point)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';
import './style.css';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

// Your app code here
document.querySelector('#app').innerHTML = `
  <div>
    <h1>Hello Vite!</h1>
  </div>
`;
```

### Webpack (Vanilla JS)

**File to update/add:** `src/index.js` (main entry point)

```javascript
import { QyrusJourneys } from '@qyrus/journeys';

// Initialize Qyrus Journeys
QyrusJourneys.init({
  apiKey: 'your-api-key-here'
});

// Your application code
console.log('App started with Qyrus Journeys');
```

## Important Implementation Notes

### Client-Side Only Initialization

Qyrus Journeys must be initialized on the client-side (browser environment) only. For Server-Side Rendering (SSR) frameworks like Next.js, Nuxt.js, and SvelteKit, ensure you initialize it in client-side code or use appropriate hooks/plugins as shown in the framework examples above.

### Environment Variables Best Practices

For production applications, always store your API key securely in environment variables:

```javascript
// For most frameworks
QyrusJourneys.init({
  apiKey: process.env.QYRUS_API_KEY
});

// For Next.js (client-side)
QyrusJourneys.init({
  apiKey: process.env.NEXT_PUBLIC_QYRUS_API_KEY
});
```

### Multiple Environments

Use different API keys for different environments to process them separately::

* **Development**: `QYRUS_API_KEY_DEV`
* **Staging**: `QYRUS_API_KEY_STAGING`
* **Production**: `QYRUS_API_KEY_PROD`

This ensures proper data isolation and security across your deployment pipeline.

## Support & Next Steps

### Get Help

* 💬 **Support Team**: Contact our support team for integration assistance
* 🐛 **Issues**: Report bugs or request features through our support channels

### What's Next?

After integrating Qyrus Journeys:

1. **Monitor Data Collection**: Log into your Qyrus dashboard to see user interaction data flowing in
2. **Review Generated Tests**: Watch as AI-generated test cases appear based on real user behavior
3. **Explore Insights**: Use natural language queries to understand user patterns
4. **Optimize Your Testing**: Leverage insights to improve your QA processes and user experience

### Ready to Transform Your Testing?

Start your journey to intelligent test automation today. Your users are already showing you how they interact with your application—now let Qyrus Journeys help you turn those interactions into comprehensive, reliable tests.

***

**Questions?** We're here to help you succeed with intelligent test automation. Reach out to our team for personalized assistance with your integration.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.qyrus.com/aiverse/qyrusjourneysconfig.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.