Testing Plugin

The testingPlugin is a built-in Coralite utility activated when the mode: 'development' configuration option is set. It is designed to assist in End-to-End (E2E) testing by providing deterministic selectors for DOM elements.

Automatic data-testid Generation #

In development mode, the testing plugin automatically duplicates all ref="xyz" attributes into data-testid attributes. Because Coralite isolates references across component instances, these data-testid properties are resolved into a strict namespace pattern.

Namespace Pattern #

The generated data-testid follows this format:

[componentId]__[refName]-[instanceIndex]

Example:

<!-- Source Component Template (my-button.html) -->
<template id="my-button">
  <button ref="btn">Click me</button>
</template>

<!-- Rendered Output (Development Mode) -->
<button ref="my-button__btn-0" data-testid="my-button__btn-0">Click me</button>

E2E Testing Usage #

When using a testing framework like Playwright, you can use these deterministic IDs to select elements even if they are deeply nested or part of multiple component instances.

  // Playwright example
  test('should click the button', async ({ page }) => {
    await page.goto('/');
    // Await hydration
    await page.evaluate(() => window.__coralite_ready__);
  
    // Select using the namespaced test ID
    await page.getByTestId('my-button__btn-0').click();
  });

Key Points #

• Dev-Only: The plugin only runs when mode is 'development'. It does not bloat your production HTML.
• Automatic: No manual configuration is required; it hooks into onComponentSet and onPageSet.
• Deterministic: Provides a reliable way to target specific component instances in complex layouts.