Skip to content

Latest commit

 

History

History
154 lines (115 loc) · 3.02 KB

coveragerules.mdx

File metadata and controls

154 lines (115 loc) · 3.02 KB
title description sidebar_label
Coverage Rules | Cypress UI Coverage
The `coverageRules` configuration property allows you to customize which elements are tracked and what commands count as coverage in UI Coverage.
coverageRules

coverageRules

UI Coverage has default rules for determining which elements are interactive and what commands count as interactions. The coverageRules configuration property allows you to define additional rules for what elements should be tracked and which commands constitute coverage for those elements.

These rules augment (rather than replace) the default interactive element detection, which is based on HTML semantics and WHATWG standards. This allows you to extend UI Coverage to track custom components or count specific commands as coverage without modifying your application code.

Syntax

{
  "uiCoverage": {
    "coverageRules": [
      {
        "selector": string,
        "commands": string[]
      }
    ]
  }
}

coverageRules

Optional. Object[]

An array of objects used to define custom coverage rules for UI Coverage. Each object can have the following properties:

selector

Required. String (CSS Selector)

A CSS selector that identifies elements that should be tracked for coverage. The selector can match any valid CSS selector syntax.

commands

Required. String[]

An array of Cypress command names that should count as coverage for elements matching the selector.

Examples

Track Custom Components

Config

{
  "uiCoverage": {
    "coverageRules": [
      {
        "selector": ".custom-button",
        "commands": ["click"]
      }
    ]
  }
}

HTML

<body>
  <div class="custom-button">Click Me</div>
</body>

Elements tracked in UI Coverage

.custom-button

Count Assertions as Coverage

Config

{
  "uiCoverage": {
    "coverageRules": [
      {
        "selector": "h1, h2",
        "commands": ["should"]
      }
    ]
  }
}

Test Code

cy.get('h1').should('be.visible')
cy.get('h2').should('contain', 'Welcome')

Both headings will be marked as tested in UI Coverage reports.

Multiple Rules for Different Elements

Config

{
  "uiCoverage": {
    "coverageRules": [
      {
        "selector": "[data-testid='custom-dropdown']",
        "commands": ["click"]
      },
      {
        "selector": ".status-indicator",
        "commands": ["should"]
      }
    ]
  }
}

HTML

<body>
  <div data-testid="custom-dropdown" class="dropdown">
    <div class="dropdown-value">Select an option</div>
    <div class="dropdown-options">
      <div class="option">One</div>
      <div class="option">Two</div>
    </div>
  </div>
  <div class="status-indicator">Active</div>
</body>

Test Code

cy.get('[data-testid="custom-dropdown"]').click()
cy.get('.status-indicator').should('contain', 'Active')

Both elements will be tracked and marked as tested when the specified commands are used.