> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Cypress Testing

## Overview

Knapsack easily integrates with Cypress, providing a powerful testing framework for your design system components. In this documentation, we illustrate how you can leverage the pattern manifest alongside a custom utility function to streamline your testing process. These examples demonstrate effective strategies for dynamically accessing and validating your component variations within Cypress.

### Example Utility Function: ksDemo()

This example `ksDemo()` function is a helper that parses the Knapsack pattern manifest and retrieves the URL for a specific variation based on the provided identifiers. It assumes the `cypress` directory is in the root alongside the Knapsack `dist` directory (where the manifest resides).

```js
// Import all Knapsack demo variations
import variations from '../../dist/meta/ks-meta.json'

// Define the ksDemo function to filter and return the specific variation URL
export const ksDemo = (
  patternId,
  templateId,
  demoId,
  assetSetId = 'default'
) => {
  const specificVariation = variations.demoUrls.filter((item) => {
    return (
      item.templateId === templateId &&
      item.demoId === demoId &&
      item.assetSetId === assetSetId &&
      item.patternId === patternId
    )
  })
  return specificVariation[0].url
}
```

Implementation in Cypress:

```js
/// <reference types="cypress" />

import { ksDemo } from '../../support/knapsack'

describe('Button component (React > Main)', () => {
  beforeEach(() => {
    cy.visit(ksDemo('button', 'react', 'YsCbuprpiV'))
  })

  it('contains text (is not empty)', () => {
    cy.get('.MuiButtonBase').should('not.be.empty')
  })
})
```

### Finding the Pattern ID

To determine the pattern ID necessary for testing, you can extract it from the URL query string parameters.

**For example, given the following URL:**

`https://app.knapsack.cloud/site/acme-design-system/latest/pattern/button?templateId=react&demoId=YsCbuprpiV`

The pattern ID for the **React** **Button** component's **main demo** is `YsCbuprpiV`:

```js
ksDemo('button', 'react', 'YsCbuprpiV');
```