Skip to content

Consolidate UI Cov + a11y config when shared #6079

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 15, 2025
Merged

Consolidate UI Cov + a11y config when shared #6079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2706e52
Consolidate UI Cov + a11y config when shared
jennifer-shehane Jan 15, 2025
2c67e2d
lint
jennifer-shehane Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 1 addition & 166 deletions docs/accessibility/configuration/elementfilters.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,169 +9,4 @@ sidebar_position: 20

# elementFilters

:::info

**Note:** setting `elementFilters` impacts both Accessibility and UI Coverage
reports if set at the root of the configuration. Nesting this property under an `accessibility` or `uiCoverage` key is
supported, if you need to split them up.
:::

The `elementFilters` property allows you to specify selectors for elements that should be excluded from Cypress Accessibility.

The first `elementFilters` rule to match the `selector` property determines whether or not an element is included or excluded from the report. Elements that do not match any rules are included by default.

## Syntax - globally applied to both UI Coverage and Cypress Accessibility

```typescript
{
"elementFilters": [
{
"selector": string,
"include": boolean
}
]
}
```

## Syntax - accessibility-specific

```typescript
{
"accessibility": {
"elementFilters": [
{
"selector": string,
"include": boolean
}
]
}
}
```

### elementFilters

_Optional._ Object\[]

An array of objects specifying the elements to exclude from Cypress Accessibility. _**Each object can have the following properties:**_

### selector

_Required._ String (CSS Selector)

Used to match elements.

### include

_Optional._ Boolean

_Default:_ `true`

A boolean that represents whether or not a matched element should be included in Cypress Accessibility.

## Examples

### Excluding a specific element

#### Config

```json
{
"elementFilters": [
{
"selector": "#button-2",
"include": false
}
]
}
```

#### HTML

```xml
<body>
<button id="button-1">Included</button>
<button id="button-2">Excluded</button>
</body>
```

#### Elements shown in UI

```
#button-1
```

---

### Excluding all elements in a container

#### Config

```json
{
"elementFilters": [
{
"selector": "footer *",
"include": false
}
]
}
```

#### HTML

```xml
<body>
<main>
<button id="start">Included</button>
</main>
<footer>
<a href="#">Excluded</a>
</footer>
</body>
```

#### Elements shown in UI

```
#start
```

---

### Including only elements in a container

#### Config

```json
{
"elementFilters": [
{
"selector": "#form *",
"include": true
},
{
"selector": "*",
"include": false
}
]
}
```

#### HTML

```xml
<body>
<form id="form">
<input id="name" />
</form>
<footer>
<a href="#">Excluded</a>
</footer>
</body>
```

#### Elements shown in UI

```
#name
```
<ElementFilters />
110 changes: 1 addition & 109 deletions docs/accessibility/configuration/viewfilters.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,112 +9,4 @@ sidebar_position: 30

# viewFilters

:::info
Note: setting `viewFilters` impacts both Accessibility and UI Coverage reports.
This cannot be nested.
:::

By default, every URL that is visited within a run is included in the Accessibility report. The `viewFilters` property allows you to specify URL patterns for URLs that should be excluded from Accessibility. Excluding a URL also excludes all links to that URL.

For every URL visited by Cypress in a run and every link element found, the first `viewFilters` rule for which the `pattern` property matches the URL is used to either include or exclude the URL based on the `include` value. URLs that do not match any rules are included by default.

## Syntax

```typescript
{
"viewFilters": [
{
"pattern": string,
"include": boolean
}
]
}
```

### viewFilters

_Optional._ Object\[]

An array of objects used to specify URLs to exclude from Accessibility. _**Each object can have the following properties:**_

### pattern

_Required._ String (URL Pattern)

Used to match URLs. Uses [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) syntax.

### include

_Optional._ Boolean

_Default:_ `true`

A boolean that represents whether or not a matched URL should be included in Accessibility.

## Examples

### Excluding URLs by hostname

**Config**

```json
{
"viewFilters": [
{
"pattern": "https://app.okta.com/*",
"include": false
}
]
}
```

**Visited URLs**

```
https://app.okta.com/login
https://cypress.io/home
https://cypress.io/about
```

**Views shown in UI**

```
https://cypress.io/home
https://cypress.io/about
```

### Including only specific URLs

**Config**

```json
{
"viewFilters": [
{
"pattern": "https://cypress.io/dashboards*",
"include": true
},
{
"pattern": "*",
"include": false
}
]
}
```

**Visited URLs**

```
https://cypress.io/dashboards
https://cypress.io/dashboards/1
https://cypress.io/dashboards/2
https://cypress.io/home
https://cypress.io/login
```

**Views shown in UI**

```
https://cypress.io/dashboards
https://cypress.io/dashboards/*
```
<ViewFilters />
Loading