[Automation] TSVB doesn't allow to perform basic functions showing no fields available (#47860) (#47932)

test/functional/apps/visualize/_tsvb_chart.ts

@@ -59,6 +59,16 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
         const value = await PageObjects.visualBuilder.getMetricValue();
         expect(value).to.eql('157');
       });
+
+      it('should populate fields for basic functions', async () => {
+        const { visualBuilder } = PageObjects;
+
+        await visualBuilder.selectAggType('Average');
+        await visualBuilder.setFieldForAggregation('machine.ram');
+        const isFieldForAggregationValid = await visualBuilder.checkFieldForAggregationValidity();
+
+        expect(isFieldForAggregationValid).to.be(true);
+      });
     });
 
     // FLAKY: https://github.com/elastic/kibana/issues/46677

test/functional/apps/visualize/_tsvb_table.ts

@@ -49,7 +49,9 @@ export default function({ getPageObjects }: FtrProviderContext) {
         await visualBuilder.setLabel('Cardinality');
         await visualBuilder.selectAggType('Cardinality');
         await visualBuilder.setFieldForAggregation('machine.ram');
+        const isFieldForAggregationValid = await visualBuilder.checkFieldForAggregationValidity();
         const tableData = await visualBuilder.getViewTable();
+        expect(isFieldForAggregationValid).to.be(true);
         expect(tableData).to.be(EXPECTED);
       });
     });

test/functional/page_objects/visual_builder_page.ts

@@ -457,10 +457,22 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
      * @memberof VisualBuilderPage
      */
     public async setFieldForAggregation(field: string, aggNth: number = 0): Promise<void> {
+      const fieldEl = await this.getFieldForAggregation(aggNth);
+
+      await comboBox.setElement(fieldEl, field);
+    }
+
+    public async checkFieldForAggregationValidity(aggNth: number = 0): Promise<boolean> {
+      const fieldEl = await this.getFieldForAggregation(aggNth);
+
+      return await comboBox.checkValidity(fieldEl);
+    }
+
+    public async getFieldForAggregation(aggNth: number = 0): Promise<WebElementWrapper> {
       const labels = await testSubjects.findAll('aggRow');
       const label = labels[aggNth];
-      const fieldEl = (await label.findAllByCssSelector('[data-test-subj = "comboBoxInput"]'))[1];
-      await comboBox.setElement(fieldEl, field);
+
+      return (await label.findAllByCssSelector('[data-test-subj = "comboBoxInput"]'))[1];
     }
 
     public async clickColorPicker(): Promise<void> {

test/functional/services/combo_box.ts

@@ -236,6 +236,12 @@ export function ComboBoxProvider({ getService, getPageObjects }: FtrProviderCont
       return found.length > 0;
     }
 
+    public async checkValidity(comboBoxElement: WebElementWrapper): Promise<boolean> {
+      const invalidClassName = 'euiComboBox-isInvalid';
+
+      return !(await comboBoxElement.elementHasClass(invalidClassName));
+    }
+
     /**
      * Closes options list
      *

test/functional/services/lib/web_element_wrapper/web_element_wrapper.ts

@@ -219,6 +219,17 @@ export class WebElementWrapper {
     });
   }
 
+  /**
+   * Check if webelement wrapper has a specific class.
+   *
+   * @return {Promise<boolean>}
+   */
+  public async elementHasClass(className: string): Promise<boolean> {
+    const classes: string = await this._webElement.getAttribute('class');
+
+    return classes.includes(className);
+  }
+
   /**
    * Clear the value of this element. This command has no effect if the underlying DOM element
    * is neither a text INPUT element nor a TEXTAREA element.