Write E2E Tests

What it does

When your agent uses it

• Fixing E2E tests
• Keyboard interactions
• Accessibility attributes
• CSS custom properties for bq- components

Example prompts

• “/write-e2e-tests”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

1. 1Read the full testing instructions
2. 2Read the component's .tsx file to understand all @Prop(), @Event(), @Method(), and @Listen() members
3. 3Check an existing well-tested file for patterns, e.g. packages/beeq/src/components/button/tests/bq-button.e2e.tsx

What it can do on your machine

Read from SKILL.md and the folder at commit 5f4728d. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • pnpm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Write E2E Tests loads about 1.3k tokens when it runs. Until then it costs about 94 tokens; SKILL.md has 276 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~94

When it runs · the whole SKILL.md, loaded when a task matches

~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Endava/BEEQ at commit 5f4728d, republished under its Apache-2.0 licence (© Endava). 276 words, ~1,348 tokens.

name

write-e2e-tests

description

Write E2E tests for BEEQ StencilJS components using @stencil/vitest in browser mode (Playwright/Chromium). Use for: adding or fixing E2E tests, covering props, events, slots, methods, keyboard interactions, accessibility attributes, and CSS custom properties for bq-* components. Files live at packages/beeq/src/components/<name>/__tests__/bq-<name>.e2e.tsx.

argument-hint

Component name (e.g. "bq-button") or path to the component tsx file

metadata.internal

true

packages/beeq/src/components/<component-name>/__tests__/bq-<component-name>.e2e.tsx

import { h } from '@stencil/core'; // always keep — required for JSX

// Core test utilities
import { afterEach, describe, expect, it, render, vi, waitForStable } from '@stencil/vitest';
import { userEvent } from 'vitest/browser'; // only for keyboard/mouse interactions

// BEEQ shared helpers
import { computedStyle } from '../../../shared/test-utils/computedStyle';  // CSS assertions
import { getTextContent } from '../../../shared/utils/slot';               // slot text assertions

describe('bq-<component>', () => {
  it('should render', async () => {
    const { root } = await render(<bq-component />);
    expect(root).not.toBeNull();
  });

  it('should have shadow root', async () => {
    const { root } = await render(<bq-component />);
    expect(root).toHaveShadowRoot(); // ✅ always toHaveShadowRoot(), never .shadowRoot !== null
  });

const getInput = (el: HTMLBqCheckboxElement) =>
  el.shadowRoot?.querySelector<HTMLInputElement>('[part="input"]');
const getBase = (el: HTMLBqCheckboxElement) =>
  el.shadowRoot?.querySelector<HTMLElement>('[part="base"]');

// ✅ correct
const bqButton = root as HTMLBqButtonElement;
const btn = getButtonElement(bqButton);

// ❌ wrong — root is HTMLElement, not the concrete type
const btn = getButtonElement(root);

// ✅ correct
const input = bqToggle.shadowRoot?.querySelector<HTMLInputElement>('input');

// ❌ wrong — returns Element, not HTMLInputElement
const input = bqToggle.shadowRoot?.querySelector('input') as HTMLInputElement;

// ✅ preferred
const { root, setProps } = await render(<bq-drawer />);
await setProps({ open: true });

// ✅ also correct
const { root, waitForChanges } = await render(<bq-drawer />);
(root as HTMLBqDrawerElement).open = true;
await waitForChanges();

// After async operations (icon load, animation, slot change):
await waitForStable(root);

// After setting an attribute:
root.setAttribute('name', 'check');
await waitForChanges();
await waitForStable(root);

afterEach(() => {
  vi.restoreAllMocks();
});

# Run all unit tests
pnpm exec nx run beeq:e2e

# Run tests for a specific file
pnpm exec nx run beeq:e2e -- bq-<component>.e2e.tsx

# Watch mode
pnpm exec nx run beeq:e2e -- bq-<component>.e2e.tsx --watch

© Endava, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/write-e2e-tests of Endava/BEEQ.

Open the folder on GitHubat commit 5f4728d