Ready-to-Use Code Examples

Code Examples

Explore real-world test examples generated by Raiken's AI. Each example shows the JSON test specification input and the generated Playwright test code - copy, paste, and adapt these patterns for your own testing needs.

Simple Page Test

Featured

Basic test generated by Raiken AI to verify page elements are visible.

Beginner

page

visibility

basic

JSON Test Specification

{
  "type": "ui-test",
  "name": "Simple Page Test",
  "description": "Test that the page loads and shows the user information text",
  "steps": [
    {
      "action": "navigate",
      "url": "http://localhost:3002"
    }
  ],
  "assertions": [
    {
      "type": "element",
      "selector": "text",
      "condition": "User Information text should be visible",
      "text": "User Information"
    }
  ]
}

typescript

JSON → Playwright

import { test, expect } from "@playwright/test";

test("simple test 1", async ({ page }) => {
  await page.goto("http://localhost:3002");
  await expect(page.getByText("User Information")).toBeVisible();
});

Live Demo

Open in CodeSandbox

View Full Example

Contact Form Test

Featured

AI-generated test for a landing page contact form interaction.

Intermediate

forms

contact

ai-generated

JSON Test Specification

{
  "type": "ui-test",
  "name": "Wakiti Contact Form Test",
  "description": "Test the contact form functionality on the Wakiti landing page including form validation and submission",
  "steps": [
    {
      "action": "navigate",
      "url": "https://wakiti.com"
    },
    {
      "action": "wait",
      "ms": 2000
    },
    {
      "action": "click",
      "element": "button",
      "selector": "contact-us-btn"
    },
    {
      "action": "type",
      "element": "input",
      "value": "John Doe",
      "name": "name"
    },
    {
      "action": "type", 
      "element": "input",
      "value": "john.doe@example.com",
      "type": "email"
    },
    {
      "action": "type",
      "element": "input", 
      "value": "Test Company Inc.",
      "name": "company"
    },
    {
      "action": "type",
      "element": "textarea",
      "value": "I am interested in learning more about your services.",
      "name": "message"
    },
    {
      "action": "click",
      "element": "checkbox",
      "name": "terms"
    },
    {
      "action": "click",
      "element": "button",
      "type": "submit"
    }
  ],
  "assertions": [
    {
      "type": "element",
      "selector": ".success-message",
      "condition": "Success message should be visible",
      "timeout": 10000
    },
    {
      "type": "url",
      "condition": "URL should contain thank-you",
      "pattern": "/thank-you/"
    }
  ]
}

typescript

JSON → Playwright

import { test, expect } from '@playwright/test';

test.describe('Wakiti Landing Page Contact Form Test', () => {
  test('Test the contact form functionality', async ({ page }) => {
    // Navigate to the Wakiti website
    await page.goto('https://wakiti.com');

    // Wait for page to fully load
    await page.waitForTimeout(2000);

    // Click the contact us button to open the form
    await page.click('button[data-testid="contact-us-btn"], .contact-button, button:text-is("Contact")');

    // Wait for contact form to appear
    await page.waitForSelector('form, .contact-form, [data-testid="contact-form"]', { timeout: 5000 });

    // Fill in the form fields
    await page.type('input[name="name"], input[placeholder*="name"], #name', 'John Doe');
    await page.type('input[name="email"], input[type="email"]', 'john.doe@example.com');
    await page.type('input[name="company"], #company', 'Test Company Inc.');
    await page.type('textarea[name="message"], #message', 'I am interested in learning more about your services.');

    // Accept terms and conditions
    await page.check('input[type="checkbox"][name="terms"], .terms-checkbox');

    // Submit the contact form
    await page.click('button[type="submit"], .submit-button, button:text-is("Send")');

    // Wait for success confirmation
    await page.waitForSelector('.success-message, .thank-you, [data-testid="success"]', { timeout: 10000 });

    // Assertions
    await expect(page.locator('.success-message, .thank-you')).toBeVisible({ timeout: 10000 });
    await expect(page).toHaveURL(/thank-you/);
  });
});

Live Demo

Open in CodeSandbox

View Full Example

Raiken Examples App Test

Test for the Raiken examples application with form interactions.

Beginner

examples

app

forms

JSON Test Specification

{
  "type": "ui-test",
  "name": "Raiken Examples App Test",
  "description": "Basic test for the Raiken Examples application",
  "steps": [
    {
      "action": "navigate",
      "url": "http://localhost:3002"
    },
    {
      "action": "wait",
      "ms": 2000
    },
    {
      "action": "type",
      "element": "input",
      "value": "test input",
      "id": "firstName"
    },
    {
      "action": "wait", 
      "ms": 1000
    },
    {
      "action": "click",
      "element": "button",
      "selector": "Purple button with save written on it"
    }
  ],
  "assertions": [
    {
      "type": "element",
      "selector": "inputs",
      "condition": "All the inputs should be visible",
      "timeout": 3000
    }
  ]
}

typescript

JSON → Playwright

import { test, expect } from '@playwright/test';

test.describe('Raiken Examples App Test', () => {
  test('Basic test for the Raiken Examples application', async ({ page }) => {
    // Navigate to the application
    await page.goto('http://localhost:3002');

    // Wait for 2 seconds
    await page.waitForTimeout(2000);

    // Type "test input" into the input field with id "firstName"
    await page.getByLabel('First Name').fill('test input');

    // Wait for 1 second
    await page.waitForTimeout(1000);

    // Click the "Purple button with save written on it"
    await page.getByRole('button', { name: 'Save' }).click();

    // Assertion: All the inputs should be visible within 3 seconds
    await expect(page.getByRole('textbox')).toBeVisible({ timeout: 3000 });
  });
});

Live Demo

Open in CodeSandbox

View Full Example

Simple Navigation Test

Basic navigation test verifying page navigation and element visibility.

Beginner

navigation

basic

page

JSON Test Specification

{
  "type": "ui-test",
  "name": "Simple Navigation Test", 
  "description": "Test basic navigation by clicking a navigation link and verifying the content changes",
  "steps": [
    {
      "action": "navigate",
      "url": "http://localhost:3002"
    },
    {
      "action": "click",
      "element": "link",
      "testId": "nav-link"
    }
  ],
  "assertions": [
    {
      "type": "element",
      "selector": "text",
      "condition": "Section Content should be visible",
      "text": "Section Content"
    },
    {
      "type": "url",
      "condition": "URL should contain #section",
      "pattern": "#section"
    }
  ]
}

typescript

JSON → Playwright

import { test, expect } from "@playwright/test";

test("simple test 2", async ({ page }) => {
  await page.goto("http://localhost:3002");
  
  // Navigate to different section
  await page.click('[data-testid="nav-link"]');
  await expect(page.getByText("Section Content")).toBeVisible();
  
  // Verify navigation worked
  await expect(page.url()).toContain('#section');
});

Live Demo

Open in CodeSandbox

View Full Example