Implementation:Cypress io Cypress TestingTypeCards Vue

Knowledge Sources	Cypress
Domains	UI, Vue
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete Vue 3 component for presenting testing type selection cards in the Cypress Launchpad UI.

Description

The TestingTypeCards component (packages/launchpad/src/setup/TestingTypeCards.vue) renders two cards for E2E and Component testing. When a user clicks a card, it triggers a GraphQL mutation (setAndLoadCurrentTestingType) that updates the project state and initiates downstream configuration. The Launchpad app is bootstrapped in packages/launchpad/src/main.ts with Vue 3, Pinia, vue-i18n, and URQL for GraphQL.

Usage

This component is rendered on the Launchpad home screen when a user first opens Cypress or when switching testing types.

Code Reference

Source Location

• Repository: cypress-io/cypress
• Files:
  • packages/launchpad/src/setup/TestingTypeCards.vue:L1-49
  • packages/launchpad/src/main.ts:L1-41 (app bootstrap)

Signature

// Vue 3 SFC component
// TestingTypeCards.vue
// Emits: selectTestingType(testingType: 'e2e' | 'component')
// GraphQL Mutation: setAndLoadCurrentTestingType(testingType)

Import

// Internal Launchpad component
import TestingTypeCards from './setup/TestingTypeCards.vue'

I/O Contract

Inputs

Name	Type	Required	Description
User click	Event	Yes	Click on E2E or Component testing card

Outputs

Name	Type	Description
GraphQL mutation	void	Sets currentTestingType on project state
Route change	void	Navigates to framework detection (component) or spec list (E2E)

Usage Examples

Launchpad Flow

1. User opens Cypress → Launchpad renders TestingTypeCards
2. User clicks "Component Testing" card
3. GraphQL mutation: setAndLoadCurrentTestingType('component')
4. Launchpad navigates to framework detection step

Related Pages

Implements Principle

• Principle:Cypress_io_Cypress_Testing_Type_Selection