You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2026/06/16 09:17:13 UTC

(streampipes) branch add-tests-for-value-progress-chart created (now 85e0ea86a7)

This is an automated email from the ASF dual-hosted git repository.

dominikriemer pushed a change to branch add-tests-for-value-progress-chart
in repository https://gitbox.apache.org/repos/asf/streampipes.git


      at 85e0ea86a7 test: Add cypress tests for progress bar and value card

This branch includes the following new commits:

     new 85e0ea86a7 test: Add cypress tests for progress bar and value card

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



(streampipes) 01/01: test: Add cypress tests for progress bar and value card

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dominikriemer pushed a commit to branch add-tests-for-value-progress-chart
in repository https://gitbox.apache.org/repos/asf/streampipes.git

commit 85e0ea86a75a1a0bf6835ca6fa5e1b3fab3a2950
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jun 16 11:16:51 2026 +0200

    test: Add cypress tests for progress bar and value card
---
 ui/cypress/support/utils/chart/ChartBtns.ts        | 118 ++++++++++++++++++++-
 .../support/utils/chart/ChartWidgetTableUtils.ts   |   8 ++
 .../tests/chart/chart-types/progress-bar.spec.ts   |  58 ++++++++++
 ui/cypress/tests/chart/chart-types/table.spec.ts   |  18 ++++
 .../{table.spec.ts => value-card.spec.ts}          |  28 +++--
 .../progress-bar-widget-config.component.html      |  48 +++++----
 .../progress-bar-widget.component.html             |  38 +++++--
 .../charts/table/table-widget.component.html       |  11 +-
 .../config/value-card-widget-config.component.html |   3 +
 .../value-card/value-card-widget.component.html    |  30 ++++--
 .../result-label-configuration.component.html      |   4 +
 11 files changed, 322 insertions(+), 42 deletions(-)

diff --git a/ui/cypress/support/utils/chart/ChartBtns.ts b/ui/cypress/support/utils/chart/ChartBtns.ts
index 70bf1499dd..5b24ae3e95 100644
--- a/ui/cypress/support/utils/chart/ChartBtns.ts
+++ b/ui/cypress/support/utils/chart/ChartBtns.ts
@@ -120,7 +120,7 @@ export class ChartBtns {
     }
 
     public static editDataViewButton(dataViewName: string) {
-        return cy.dataCy('edit-data-view-' + dataViewName.replaceAll(' ', ''));
+        return cy.dataCy('edit-data-view-' + dataViewName.replace(/ /g, ''));
     }
 
     public static chartSyncProblemIcon() {
@@ -213,6 +213,112 @@ export class ChartBtns {
             .find('input[type="checkbox"]');
     }
 
+    public static valueCardWidget() {
+        return cy.dataCy('value-card-widget');
+    }
+
+    public static valueCardTitleInput() {
+        return cy.dataCy('data-explorer-value-card-title-input');
+    }
+
+    public static valueCardDescriptionInput() {
+        return cy.dataCy('data-explorer-value-card-description-input');
+    }
+
+    public static valueCardShowTimestampCheckbox() {
+        return cy
+            .dataCy('data-explorer-value-card-show-timestamp')
+            .find('input[type="checkbox"]');
+    }
+
+    public static valueCardTitle() {
+        return cy.dataCy('value-card-title');
+    }
+
+    public static valueCardDescription() {
+        return cy.dataCy('value-card-description');
+    }
+
+    public static valueCardTimestamp() {
+        return cy.dataCy('value-card-timestamp');
+    }
+
+    public static valueCardItems() {
+        return cy.dataCy('value-card-item', {}, true);
+    }
+
+    public static valueCardItemLabels() {
+        return cy.dataCy('value-card-item-label', {}, true);
+    }
+
+    public static valueCardItemValues() {
+        return cy.dataCy('value-card-item-value', {}, true);
+    }
+
+    public static progressBarWidget() {
+        return cy.dataCy('progress-bar-widget');
+    }
+
+    public static progressBarTitleInput() {
+        return cy.dataCy('data-explorer-progress-title-input');
+    }
+
+    public static progressBarDescriptionInput() {
+        return cy.dataCy('data-explorer-progress-description-input');
+    }
+
+    public static progressBarTargetSource() {
+        return cy.dataCy('data-explorer-progress-target-source');
+    }
+
+    public static progressBarTargetValueInput() {
+        return cy.dataCy('data-explorer-progress-target-value');
+    }
+
+    public static progressBarDisplayMode() {
+        return cy.dataCy('data-explorer-progress-display-mode');
+    }
+
+    public static progressBarInvertCheckbox() {
+        return cy
+            .dataCy('data-explorer-progress-invert')
+            .find('input[type="checkbox"]');
+    }
+
+    public static progressBarShowLabelCheckbox() {
+        return cy
+            .dataCy('data-explorer-progress-show-label')
+            .find('input[type="checkbox"]');
+    }
+
+    public static progressBarTitle() {
+        return cy.dataCy('progress-bar-title');
+    }
+
+    public static progressBarDescription() {
+        return cy.dataCy('progress-bar-description');
+    }
+
+    public static progressBarStatus() {
+        return cy.dataCy('progress-bar-status');
+    }
+
+    public static progressBarPercent() {
+        return cy.dataCy('progress-bar-percent');
+    }
+
+    public static progressBarFill() {
+        return cy.dataCy('progress-bar-fill');
+    }
+
+    public static progressBarPrimaryLabel() {
+        return cy.dataCy('progress-bar-primary-label');
+    }
+
+    public static progressBarSecondaryLabel() {
+        return cy.dataCy('progress-bar-secondary-label');
+    }
+
     public static addNewWidgetBtn() {
         return cy.dataCy('add-new-widget', { timeout: 10000 });
     }
@@ -305,6 +411,16 @@ export class ChartBtns {
         return cy.dataCy('data-explorer-table-paginator');
     }
 
+    public static resultLabelInput(fieldName: string) {
+        return cy.get(
+            `[data-cy="data-explorer-result-label-input-${fieldName}"]`,
+        );
+    }
+
+    public static tableHeader(fieldName: string) {
+        return cy.get(`[data-cy="data-explorer-table-header-${fieldName}"]`);
+    }
+
     public static matOptionByText(text: string | RegExp) {
         return cy.get('mat-option').contains(text);
     }
diff --git a/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts b/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts
index 9c58916837..68b4893b93 100644
--- a/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts
+++ b/ui/cypress/support/utils/chart/ChartWidgetTableUtils.ts
@@ -16,6 +16,8 @@
  *
  */
 
+import { ChartBtns } from './ChartBtns';
+
 export class ChartWidgetTableUtils {
     public static chartTableRows() {
         return cy
@@ -45,4 +47,10 @@ export class ChartWidgetTableUtils {
     public static checkTotalAmountOfRows(amount: number) {
         this.paginatorRangeLabel().should('contain.text', amount.toString());
     }
+
+    public static checkHeaderLabel(fieldName: string, expectedLabel: string) {
+        ChartBtns.tableHeader(fieldName).should($header => {
+            expect($header.text().trim()).to.equal(expectedLabel);
+        });
+    }
 }
diff --git a/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts b/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts
new file mode 100644
index 0000000000..924f744214
--- /dev/null
+++ b/ui/cypress/tests/chart/chart-types/progress-bar.spec.ts
@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { ChartUtils } from '../../../support/utils/chart/ChartUtils';
+import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils';
+import { ChartBtns } from '../../../support/utils/chart/ChartBtns';
+
+describe('Test Progress Bar View in Charts', () => {
+    beforeEach('Setup Test', () => {
+        ChartUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        ChartUtils.addDataViewAndWidget(
+            PrepareTestDataUtils.dataName,
+            'progress-bar',
+        );
+
+        ChartUtils.openVisualizationConfig();
+        ChartBtns.progressBarTitleInput().type('Job Progress');
+        ChartBtns.progressBarDescriptionInput().type(
+            'Progress against the configured target value.',
+        );
+        ChartBtns.progressBarTargetValueInput().clear().type('50');
+        ChartBtns.progressBarInvertCheckbox()
+            .check({ force: true })
+            .should('be.checked');
+
+        ChartBtns.progressBarWidget().should('be.visible');
+        ChartBtns.progressBarTitle().should('contain.text', 'Job Progress');
+        ChartBtns.progressBarDescription().should(
+            'contain.text',
+            'Progress against the configured target value.',
+        );
+        ChartBtns.progressBarStatus().should('contain.text', 'Remaining');
+        ChartBtns.progressBarPercent().should('contain.text', '%');
+        ChartBtns.progressBarPrimaryLabel().should('contain.text', '%');
+        ChartBtns.progressBarSecondaryLabel().should('contain.text', '/');
+        ChartBtns.progressBarFill()
+            .invoke('attr', 'style')
+            .should('match', /width:\s*[0-9.]+%/);
+    });
+});
diff --git a/ui/cypress/tests/chart/chart-types/table.spec.ts b/ui/cypress/tests/chart/chart-types/table.spec.ts
index 2b775f0793..0b543a7e7b 100644
--- a/ui/cypress/tests/chart/chart-types/table.spec.ts
+++ b/ui/cypress/tests/chart/chart-types/table.spec.ts
@@ -17,6 +17,7 @@
  */
 
 import { ChartUtils } from '../../../support/utils/chart/ChartUtils';
+import { ChartBtns } from '../../../support/utils/chart/ChartBtns';
 import { ChartWidgetTableUtils } from '../../../support/utils/chart/ChartWidgetTableUtils';
 import { ChartWidget } from '../../../support/model/ChartWidget';
 import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils';
@@ -35,4 +36,21 @@ describe('Test Table View in Charts', () => {
         // Check if table is displayed correctly
         ChartWidgetTableUtils.checkAmountOfRows(10);
     });
+
+    it('Renames table field labels', () => {
+        ChartUtils.addDataViewAndWidget(
+            PrepareTestDataUtils.dataName,
+            ChartWidget.TABLE,
+        );
+
+        ChartUtils.selectDataConfig();
+        ChartBtns.resultLabelInput('randomnumber')
+            .clear()
+            .type('Random Number Label');
+
+        ChartWidgetTableUtils.checkHeaderLabel(
+            'randomnumber',
+            'Random Number Label',
+        );
+    });
 });
diff --git a/ui/cypress/tests/chart/chart-types/table.spec.ts b/ui/cypress/tests/chart/chart-types/value-card.spec.ts
similarity index 52%
copy from ui/cypress/tests/chart/chart-types/table.spec.ts
copy to ui/cypress/tests/chart/chart-types/value-card.spec.ts
index 2b775f0793..713a184c6a 100644
--- a/ui/cypress/tests/chart/chart-types/table.spec.ts
+++ b/ui/cypress/tests/chart/chart-types/value-card.spec.ts
@@ -17,11 +17,10 @@
  */
 
 import { ChartUtils } from '../../../support/utils/chart/ChartUtils';
-import { ChartWidgetTableUtils } from '../../../support/utils/chart/ChartWidgetTableUtils';
-import { ChartWidget } from '../../../support/model/ChartWidget';
 import { PrepareTestDataUtils } from '../../../support/utils/PrepareTestDataUtils';
+import { ChartBtns } from '../../../support/utils/chart/ChartBtns';
 
-describe('Test Table View in Charts', () => {
+describe('Test Value Card View in Charts', () => {
     beforeEach('Setup Test', () => {
         ChartUtils.initDataLakeTests();
     });
@@ -29,10 +28,27 @@ describe('Test Table View in Charts', () => {
     it('Perform Test', () => {
         ChartUtils.addDataViewAndWidget(
             PrepareTestDataUtils.dataName,
-            ChartWidget.TABLE,
+            'value-card',
         );
 
-        // Check if table is displayed correctly
-        ChartWidgetTableUtils.checkAmountOfRows(10);
+        ChartUtils.openVisualizationConfig();
+        ChartBtns.valueCardShowTimestampCheckbox()
+            .check({ force: true })
+            .should('be.checked');
+        ChartBtns.valueCardTitleInput().type('Current Snapshot');
+        ChartBtns.valueCardDescriptionInput().type(
+            'First returned values from the data view.',
+        );
+
+        ChartBtns.valueCardWidget().should('be.visible');
+        ChartBtns.valueCardTitle().should('contain.text', 'Current Snapshot');
+        ChartBtns.valueCardDescription().should(
+            'contain.text',
+            'First returned values from the data view.',
+        );
+        ChartBtns.valueCardTimestamp().should('be.visible');
+        ChartBtns.valueCardItems().should('have.length.greaterThan', 0);
+        ChartBtns.valueCardItemLabels().first().should('not.be.empty');
+        ChartBtns.valueCardItemValues().first().should('not.be.empty');
     });
 });
diff --git a/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html b/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html
index 07eef853c4..c92351b128 100644
--- a/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html
+++ b/ui/src/app/chart-shared/components/charts/progress-bar/config/progress-bar-widget-config.component.html
@@ -23,19 +23,22 @@
 >
     <sp-split-section [level]="3" [title]="'Values' | translate">
         <sp-form-field [level]="3" [label]="'Current value field' | translate">
-            <sp-select-single-property-config
-                [availableProperties]="availableNumericFields"
-                [selectedProperty]="
-                    currentlyConfiguredWidget.visualizationConfig
-                        .currentValueField
-                "
-                (changeSelectedProperty)="setCurrentValueField($event)"
-            >
-            </sp-select-single-property-config>
+            <div data-cy="data-explorer-progress-current-field">
+                <sp-select-single-property-config
+                    [availableProperties]="availableNumericFields"
+                    [selectedProperty]="
+                        currentlyConfiguredWidget.visualizationConfig
+                            .currentValueField
+                    "
+                    (changeSelectedProperty)="setCurrentValueField($event)"
+                >
+                </sp-select-single-property-config>
+            </div>
         </sp-form-field>
 
         <sp-form-field [level]="3" [label]="'Target source' | translate">
             <mat-radio-group
+                data-cy="data-explorer-progress-target-source"
                 [ngModel]="
                     currentlyConfiguredWidget.visualizationConfig.targetSource
                 "
@@ -55,20 +58,23 @@
             'field'
         ) {
             <sp-form-field [level]="3" [label]="'Target field' | translate">
-                <sp-select-single-property-config
-                    [availableProperties]="availableNumericFields"
-                    [selectedProperty]="
-                        currentlyConfiguredWidget.visualizationConfig
-                            .targetField
-                    "
-                    (changeSelectedProperty)="setTargetField($event)"
-                >
-                </sp-select-single-property-config>
+                <div data-cy="data-explorer-progress-target-field">
+                    <sp-select-single-property-config
+                        [availableProperties]="availableNumericFields"
+                        [selectedProperty]="
+                            currentlyConfiguredWidget.visualizationConfig
+                                .targetField
+                        "
+                        (changeSelectedProperty)="setTargetField($event)"
+                    >
+                    </sp-select-single-property-config>
+                </div>
             </sp-form-field>
         } @else {
             <sp-form-field [level]="3" [label]="'Target value' | translate">
                 <mat-form-field fxFlex="100">
                     <input
+                        data-cy="data-explorer-progress-target-value"
                         matInput
                         type="number"
                         [ngModel]="
@@ -85,6 +91,7 @@
     <sp-split-section [level]="3" [title]="'Behavior' | translate">
         <sp-form-field [level]="3" [label]="'Display mode' | translate">
             <mat-radio-group
+                data-cy="data-explorer-progress-display-mode"
                 [ngModel]="
                     currentlyConfiguredWidget.visualizationConfig.displayMode
                 "
@@ -103,6 +110,7 @@
         </sp-form-field>
 
         <mat-checkbox
+            data-cy="data-explorer-progress-show-label"
             [checked]="currentlyConfiguredWidget.visualizationConfig.showLabel"
             (change)="setShowLabel($event.checked)"
         >
@@ -110,6 +118,7 @@
         </mat-checkbox>
 
         <mat-checkbox
+            data-cy="data-explorer-progress-invert"
             [checked]="
                 currentlyConfiguredWidget.visualizationConfig.invertProgress
             "
@@ -119,6 +128,7 @@
         </mat-checkbox>
 
         <mat-checkbox
+            data-cy="data-explorer-progress-clamp"
             [checked]="
                 currentlyConfiguredWidget.visualizationConfig.clampProgress
             "
@@ -132,6 +142,7 @@
         <sp-form-field [level]="3" [label]="'Title' | translate">
             <mat-form-field fxFlex="100">
                 <input
+                    data-cy="data-explorer-progress-title-input"
                     matInput
                     type="text"
                     [(ngModel)]="
@@ -145,6 +156,7 @@
         <sp-form-field [level]="3" [label]="'Description' | translate">
             <mat-form-field fxFlex="100">
                 <textarea
+                    data-cy="data-explorer-progress-description-input"
                     matInput
                     rows="3"
                     [(ngModel)]="
diff --git a/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html b/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html
index e5dc11771b..ecde77583c 100644
--- a/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html
+++ b/ui/src/app/chart-shared/components/charts/progress-bar/progress-bar-widget.component.html
@@ -50,13 +50,19 @@
             @if (titleText || descriptionText) {
                 <div class="progress-copy" fxLayout="column">
                     @if (titleText) {
-                        <div class="progress-title">
+                        <div
+                            class="progress-title"
+                            data-cy="progress-bar-title"
+                        >
                             {{ titleText }}
                         </div>
                     }
 
                     @if (descriptionText) {
-                        <div class="progress-description">
+                        <div
+                            class="progress-description"
+                            data-cy="progress-bar-description"
+                        >
                             {{ descriptionText }}
                         </div>
                     }
@@ -68,18 +74,24 @@
                 fxLayout="row"
                 fxLayoutAlign="space-between center"
             >
-                <span class="progress-status">{{
+                <span class="progress-status" data-cy="progress-bar-status">{{
                     progressView.statusLabel
                 }}</span>
                 @if (showLabel) {
-                    <span class="progress-percent">{{
-                        progressView.percentLabel
-                    }}</span>
+                    <span
+                        class="progress-percent"
+                        data-cy="progress-bar-percent"
+                        >{{ progressView.percentLabel }}</span
+                    >
                 }
             </div>
 
-            <div class="progress-track">
-                <div class="progress-fill" [style.width]="progressWidth"></div>
+            <div class="progress-track" data-cy="progress-bar-track">
+                <div
+                    class="progress-fill"
+                    data-cy="progress-bar-fill"
+                    [style.width]="progressWidth"
+                ></div>
             </div>
 
             @if (showLabel) {
@@ -90,7 +102,10 @@
                         dataExplorerWidget.visualizationConfig.displayMode ===
                             'percent-and-value'
                     ) {
-                        <div class="progress-primary-label">
+                        <div
+                            class="progress-primary-label"
+                            data-cy="progress-bar-primary-label"
+                        >
                             {{ progressView.percentLabel }}
                         </div>
                     }
@@ -101,7 +116,10 @@
                         dataExplorerWidget.visualizationConfig.displayMode ===
                             'percent-and-value'
                     ) {
-                        <div class="progress-secondary-label">
+                        <div
+                            class="progress-secondary-label"
+                            data-cy="progress-bar-secondary-label"
+                        >
                             {{ progressView.valueLabel }}
                         </div>
                     }
diff --git a/ui/src/app/chart-shared/components/charts/table/table-widget.component.html b/ui/src/app/chart-shared/components/charts/table/table-widget.component.html
index d64f8316c5..15473d5ab6 100644
--- a/ui/src/app/chart-shared/components/charts/table/table-widget.component.html
+++ b/ui/src/app/chart-shared/components/charts/table/table-widget.component.html
@@ -90,7 +90,16 @@
                                                 @if (column === 'time') {
                                                     {{ 'Time' | translate }}
                                                 } @else {
-                                                    {{ headerLabel(column) }}
+                                                    <span
+                                                        [attr.data-cy]="
+                                                            'data-explorer-table-header-' +
+                                                            column
+                                                        "
+                                                    >
+                                                        {{
+                                                            headerLabel(column)
+                                                        }}
+                                                    </span>
                                                 }
                                             </span>
                                             <mat-icon class="sort-icon">
diff --git a/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html b/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html
index 6f5acf1961..54f0165138 100644
--- a/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html
+++ b/ui/src/app/chart-shared/components/charts/value-card/config/value-card-widget-config.component.html
@@ -43,6 +43,7 @@
     <sp-split-section [level]="3" [title]="'Content' | translate">
         <sp-form-field [level]="3" [label]="'Timestamp' | translate">
             <mat-checkbox
+                data-cy="data-explorer-value-card-show-timestamp"
                 [checked]="
                     currentlyConfiguredWidget.visualizationConfig.showTimestamp
                 "
@@ -59,6 +60,7 @@
         <sp-form-field [level]="3" [label]="'Title' | translate">
             <mat-form-field fxFlex="100">
                 <input
+                    data-cy="data-explorer-value-card-title-input"
                     matInput
                     type="text"
                     [(ngModel)]="
@@ -72,6 +74,7 @@
         <sp-form-field [level]="3" [label]="'Description' | translate">
             <mat-form-field fxFlex="100">
                 <textarea
+                    data-cy="data-explorer-value-card-description-input"
                     matInput
                     rows="3"
                     [(ngModel)]="
diff --git a/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html b/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html
index 943033f6e4..5d269da2aa 100644
--- a/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html
+++ b/ui/src/app/chart-shared/components/charts/value-card/value-card-widget.component.html
@@ -50,13 +50,19 @@
             @if (titleText || descriptionText) {
                 <div class="value-card-copy" fxLayout="column">
                     @if (titleText) {
-                        <div class="value-card-title">
+                        <div
+                            class="value-card-title"
+                            data-cy="value-card-title"
+                        >
                             {{ titleText }}
                         </div>
                     }
 
                     @if (descriptionText) {
-                        <div class="value-card-description">
+                        <div
+                            class="value-card-description"
+                            data-cy="value-card-description"
+                        >
                             {{ descriptionText }}
                         </div>
                     }
@@ -64,7 +70,10 @@
             }
 
             @if (showTimestamp) {
-                <div class="value-card-timestamp">
+                <div
+                    class="value-card-timestamp"
+                    data-cy="value-card-timestamp"
+                >
                     {{ latestTimestampLabel }}
                 </div>
             }
@@ -75,11 +84,20 @@
                     [style.--value-card-list-columns]="valueListColumns"
                 >
                     @for (card of valueCards; track trackCard($index, card)) {
-                        <section class="value-card-item">
-                            <div class="value-card-item-label">
+                        <section
+                            class="value-card-item"
+                            data-cy="value-card-item"
+                        >
+                            <div
+                                class="value-card-item-label"
+                                data-cy="value-card-item-label"
+                            >
                                 {{ card.label }}
                             </div>
-                            <div class="value-card-item-value">
+                            <div
+                                class="value-card-item-value"
+                                data-cy="value-card-item-value"
+                            >
                                 {{ card.value }}
                             </div>
                         </section>
diff --git a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html
index f4dbb538c0..57866571ee 100644
--- a/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html
+++ b/ui/src/app/chart/components/chart-view/designer-panel/data-settings/result-label-configuration/result-label-configuration.component.html
@@ -36,6 +36,10 @@
                         >
                             <input
                                 matInput
+                                [attr.data-cy]="
+                                    'data-explorer-result-label-input-' +
+                                    field.fullDbName
+                                "
                                 [ngModel]="getLabel(field)"
                                 (ngModelChange)="updateLabel(field, $event)"
                                 [placeholder]="field.fullDbName"