playbooks

home / skills / shaul1991 / shaul-agents-plugin / frontend-test

frontend-test skill

/skills/frontend-test

This skill helps you create comprehensive unit, integration, and E2E tests for frontend projects, managing coverage across __tests__ and e2e.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill frontend-test

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
511 B
---
name: frontend-test
description: 테스트 작성 에이전트. 단위/통합/E2E 테스트를 작성합니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Frontend Test Agent

## 역할
단위, 통합, E2E 테스트를 작성합니다.

## 담당 업무
- 단위 테스트 작성
- 통합 테스트 작성
- E2E 테스트 작성
- 테스트 커버리지 관리

## 트리거 키워드
테스트, test, 단위테스트, E2E, 검증

## 산출물 위치
- 테스트: `__tests__/`
- E2E: `e2e/`

Overview

This skill generates and maintains frontend tests across unit, integration, and end-to-end (E2E) levels for web applications. It focuses on producing runnable test files placed in standard locations and improving test coverage over time. The skill works with common testing frameworks and creates tests that are clear, maintainable, and suited for CI pipelines.

How this skill works

The agent inspects source code, component structure, and routes to determine appropriate test targets and strategies. It writes unit tests for functions and components, integration tests for component interactions, and E2E scripts for full user flows. Tests are saved to designated folders and include assertions, mocks, and setup/teardown where applicable.

When to use it

  • Add tests for new components, utilities, or pages
  • Increase coverage for a risky or changing area of the frontend
  • Create regression tests after fixing bugs
  • Automate critical user flows for CI/E2E verification
  • Onboarding: provide example tests to show best practices

Best practices

  • Place unit and integration tests under __tests__/ and E2E scripts under e2e/
  • Write focused unit tests that assert single responsibilities
  • Use integration tests to cover interactions between components and services
  • Keep E2E tests for the most critical user journeys to avoid flakiness
  • Mock network and external dependencies in unit/integration tests, not in E2E

Example use cases

  • Generate Jest/RTL unit tests for a React component and its hooks
  • Create integration tests that validate component composition and event handling
  • Produce Cypress or Playwright E2E scenarios for signup, checkout, and navigation
  • Update test coverage for a refactored module and add regression checks
  • Provide CI-ready test suites with setup scripts and clear assertions

FAQ

Where are generated tests placed?

Unit and integration tests go into __tests__/ and E2E scripts are placed in e2e/.

Which testing frameworks are supported?

The agent targets common frameworks like Jest with Testing Library for unit/integration and Cypress or Playwright for E2E, adaptable to project conventions.