From 07e5634e6c21c2d797031052e7e26005204ede88 Mon Sep 17 00:00:00 2001 From: Peter Stakoun Date: Fri, 13 Dec 2024 16:26:45 -0500 Subject: [PATCH 1/3] Add proposed coverageRules docs --- .../configuration/coveragerules.mdx | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 docs/ui-coverage/configuration/coveragerules.mdx diff --git a/docs/ui-coverage/configuration/coveragerules.mdx b/docs/ui-coverage/configuration/coveragerules.mdx new file mode 100644 index 0000000000..f4055e4d3b --- /dev/null +++ b/docs/ui-coverage/configuration/coveragerules.mdx @@ -0,0 +1,151 @@ +--- +title: 'Coverage Rules | Cypress UI Coverage' +description: 'The `coverageRules` configuration property allows you to customize which elements are tracked and what commands count as coverage in UI Coverage.' +sidebar_label: 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 + +```json +{ + "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 + +```json +{ + "uiCoverage": { + "coverageRules": [ + { + "selector": ".custom-button", + "commands": ["click"] + } + ] + } +} +``` + +#### HTML + +```xml + +
Click Me
+ +``` + +#### Elements tracked in UI Coverage + +``` +.custom-button +``` + +--- + +### Count Assertions as Coverage + +#### Config + +```json +{ + "uiCoverage": { + "coverageRules": [ + { + "selector": "h1, h2", + "commands": ["should"] + } + ] + } +} +``` + +#### Test Code + +```javascript +cy.get('h1').should('be.visible') +cy.get('h2').should('contain', 'Welcome') +``` + +Both headings will be marked as covered in UI Coverage reports. + +--- + +### Multiple Rules for Different Elements + +#### Config + +```json +{ + "uiCoverage": { + "coverageRules": [ + { + "selector": "[data-testid='dropdown']", + "commands": ["select", "click"] + }, + { + "selector": ".status-indicator", + "commands": ["should"] + } + ] + } +} +``` + +#### HTML + +```xml + + +
Active
+ +``` + +#### Test Code + +```javascript +cy.get('[data-testid="dropdown"]').select('One') +cy.get('.status-indicator').should('contain', 'Active') +``` + +Both elements will be tracked and marked as covered when the specified commands are used. \ No newline at end of file From 1fc718f4c0c1b4bc60750bf000ef5dcb8b2be635 Mon Sep 17 00:00:00 2001 From: Peter Stakoun Date: Fri, 13 Dec 2024 16:50:33 -0500 Subject: [PATCH 2/3] Update example --- .../configuration/coveragerules.mdx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/docs/ui-coverage/configuration/coveragerules.mdx b/docs/ui-coverage/configuration/coveragerules.mdx index f4055e4d3b..b18e73bb2d 100644 --- a/docs/ui-coverage/configuration/coveragerules.mdx +++ b/docs/ui-coverage/configuration/coveragerules.mdx @@ -117,8 +117,8 @@ Both headings will be marked as covered in UI Coverage reports. "uiCoverage": { "coverageRules": [ { - "selector": "[data-testid='dropdown']", - "commands": ["select", "click"] + "selector": "[data-testid='custom-dropdown']", + "commands": ["click"] }, { "selector": ".status-indicator", @@ -133,10 +133,13 @@ Both headings will be marked as covered in UI Coverage reports. ```xml - +
+
Select an option
+
+
One
+
Two
+
+
Active
``` @@ -144,8 +147,8 @@ Both headings will be marked as covered in UI Coverage reports. #### Test Code ```javascript -cy.get('[data-testid="dropdown"]').select('One') +cy.get('[data-testid="custom-dropdown"]').click() cy.get('.status-indicator').should('contain', 'Active') ``` -Both elements will be tracked and marked as covered when the specified commands are used. \ No newline at end of file +Both elements will be tracked and marked as covered when the specified commands are used. From b8d2afaf7aec9fde1d78cb33163466a4cd02b16d Mon Sep 17 00:00:00 2001 From: Peter Stakoun Date: Fri, 13 Dec 2024 17:29:59 -0500 Subject: [PATCH 3/3] Update language --- docs/ui-coverage/configuration/coveragerules.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ui-coverage/configuration/coveragerules.mdx b/docs/ui-coverage/configuration/coveragerules.mdx index b18e73bb2d..c319c6773a 100644 --- a/docs/ui-coverage/configuration/coveragerules.mdx +++ b/docs/ui-coverage/configuration/coveragerules.mdx @@ -104,7 +104,7 @@ cy.get('h1').should('be.visible') cy.get('h2').should('contain', 'Welcome') ``` -Both headings will be marked as covered in UI Coverage reports. +Both headings will be marked as tested in UI Coverage reports. --- @@ -151,4 +151,4 @@ cy.get('[data-testid="custom-dropdown"]').click() cy.get('.status-indicator').should('contain', 'Active') ``` -Both elements will be tracked and marked as covered when the specified commands are used. +Both elements will be tracked and marked as tested when the specified commands are used.