Qyrus Journeys

Banner

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 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

Step 2: Install the NPM Package 📦

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

Using NPM:

npm install @qyrus/journeys

Using Yarn:

yarn add @qyrus/journeys

Using PNPM:

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)

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

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

For production applications, use environment variables:

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 | Next.js | Vue.js | Angular

• Svelte | SvelteKit | Nuxt.js | Remix

• Gatsby | Solid.js | Astro | Vite | Webpack

React

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

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)

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)

'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)

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)

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:

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)

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:

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)

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:

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

Remix

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

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)

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)

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)

---
// 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)

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)

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:

// 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.