nala-test-generation

Nala E2E Test Generation Standards

APPLY: "Generate Nala tests" or "Write E2E tests" queries

Automated Nala Test Generation

Based on the Nala Testing Framework, this rule generates comprehensive end-to-end tests for AEM Edge Delivery Services blocks and pages.

Test Generation Patterns

1. Block-Level Test Structure

// ✅ STANDARD: Generated Nala test for blocks
import { test, expect } from '@playwright/test';

test.describe('[BlockName] Block Tests', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/express/');
    await page.waitForLoadState('networkidle');
  });

  test('should display core elements correctly', async ({ page }) => {
    const block = page.locator('.block-name');
    await expect(block).toBeVisible();
    
    // Test headline presence and content
    const headline = block.locator('h1, h2, h3').first();
    await expect(headline).toBeVisible();
    await expect(headline).not.toBeEmpty();
    
    // Test CTA functionality
    const cta = block.locator('.cta a, .button').first();
    if (await cta.count() > 0) {
      await expect(cta).toBeVisible();
      await expect(cta).toHaveAttribute('href');
    }
  });

  test('should be accessible', async ({ page }) => {
    const block = page.locator('.block-name');
    
    // Check ARIA labels and semantic structure
    await expect(block.locator('h1, h2, h3')).toHaveCount(1); // One main heading
    
    // Check keyboard navigation
    await page.keyboard.press('Tab');
    const focusedElement = page.locator(':focus');
    await expect(focusedElement).toBeVisible();
  });

  test('should be responsive', async ({ page }) => {
    const block = page.locator('.block-name');
    
    // Mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    await page.reload();
    await expect(block).toBeVisible();
    
    // Tablet viewport
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.reload();
    await expect(block).toBeVisible();
    
    // Desktop viewport
    await page.setViewportSize({ width: 1200, height: 800 });
    await page.reload();
    await expect(block).toBeVisible();
  });
});