[ML] Add initial docs screenshot generation (elastic#121495)

This PR utilizes the functional test runner to walk through the UI and take a couple screenshots for use in the documentation.
kibanamachine · Dec 20, 2021 · d79eb2a · d79eb2a
1 parent 842adfd
commit d79eb2a
Show file tree

Hide file tree

Showing 34 changed files with 1,555 additions and 129 deletions.
diff --git a/test/functional/services/common/screenshots.ts b/test/functional/services/common/screenshots.ts
@@ -74,8 +74,8 @@ export class ScreenshotsService extends FtrService {
     }
   }
 
-  async take(name: string, el?: WebElementWrapper) {
-    const path = resolve(this.SESSION_DIRECTORY, `${name}.png`);
+  async take(name: string, el?: WebElementWrapper, subDirectories: string[] = []) {
+    const path = resolve(this.SESSION_DIRECTORY, ...subDirectories, `${name}.png`);
     await this.capture(path, el);
     this.failureMetadata.addScreenshot(name, path);
   }

diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
@@ -91,7 +91,7 @@ export function getColumns(
                 })
           }
           data-row-id={item.rowId}
-          data-test-subj="mlJobListRowDetailsToggle"
+          data-test-subj="mlAnomaliesListRowDetailsToggle"
         />
       ),
     },

diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js
@@ -313,7 +313,10 @@ export class AnomalyDetails extends Component {
           }),
           content: (
             <Fragment>
-              <div className="ml-anomalies-table-details">
+              <div
+                className="ml-anomalies-table-details"
+                data-test-subj="mlAnomaliesListRowDetails"
+              >
                 {this.renderDescription()}
                 <EuiSpacer size="m" />
                 {this.renderDetails()}
@@ -633,7 +636,7 @@ export class AnomalyDetails extends Component {
       );
     } else {
       return (
-        <div className="ml-anomalies-table-details">
+        <div className="ml-anomalies-table-details" data-test-subj="mlAnomaliesListRowDetails">
           {this.renderDescription()}
           <EuiSpacer size="m" />
           {this.renderDetails()}

diff --git a/...nalytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx b/...nalytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
@@ -84,6 +84,7 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
               iconType={isExpanded ? 'arrowUp' : 'arrowDown'}
               iconSide="right"
               flush="left"
+              data-test-subj={`mlDFExpandableSection-${dataTestId}-toggle-button`}
             >
               {title}
             </EuiButtonEmpty>
@@ -126,7 +127,12 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
         )}
       </div>
       {isExpanded && (
-        <div className={contentPadding ? 'mlExpandableSection-contentPadding' : ''}>{content}</div>
+        <div
+          className={contentPadding ? 'mlExpandableSection-contentPadding' : ''}
+          data-test-subj={`mlDFExpandableSection-${dataTestId}-content`}
+        >
+          {content}
+        </div>
       )}
     </EuiPanel>
   );

diff --git a/...cs/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx b/...cs/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
@@ -192,7 +192,7 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
                     })
               }
               disableAutoFocus={true}
-              dataTestSubj="transformQueryInput"
+              dataTestSubj="mlDFAnalyticsQueryInput"
               languageSwitcherPopoverAnchorPosition="rightDown"
             />
           </EuiFlexItem>

diff --git a/x-pack/plugins/ml/public/application/explorer/anomalies_map.tsx b/x-pack/plugins/ml/public/application/explorer/anomalies_map.tsx
@@ -222,7 +222,7 @@ export const AnomaliesMap: FC<Props> = ({ anomalies, jobIds }) => {
 
   return (
     <>
-      <EuiPanel>
+      <EuiPanel data-test-subj="mlAnomaliesMapContainer">
         <EuiAccordion
           id="mlAnomalyExplorerAnomaliesMapAccordionId"
           initialIsOpen={true}

diff --git a/x-pack/plugins/ml/readme.md b/x-pack/plugins/ml/readme.md
@@ -141,6 +141,20 @@ and Kibana instance that the tests will be run against.
 
     ML accessibility tests are located in `x-pack/test/accessibility/apps`.
 
+## Generating docs screenshots
+
+The screenshot generation uses the functional test runner described in the
+`Functional tests` section above.
+
+Run the following commands from the `x-pack` directory and use separate terminals
+for test server and test runner. The test server command starts an Elasticsearch
+and Kibana instance that the tests will be run against.
+
+    node scripts/functional_tests_server.js --config test/screenshot_creation/config.ts
+    node scripts/functional_test_runner.js --config test/screenshot_creation/config.ts --include-tag mlqa
+
+The generated screenshots are stored in `x-pack/test/functional/screenshots/session/ml_docs`.
+ML screenshot generation tests are located in `x-pack/test/screenshot_creation/apps/ml_docs`.
 ## Shared functions
 
 You can find the ML shared functions in the following files in GitHub:

diff --git a/x-pack/test/functional/apps/ml/anomaly_detection/custom_urls.ts b/x-pack/test/functional/apps/ml/anomaly_detection/custom_urls.ts
@@ -7,31 +7,12 @@
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
 import { Job, Datafeed } from '../../../../../plugins/ml/common/types/anomaly_detection_jobs';
-import {
-  TimeRangeType,
-  TIME_RANGE_TYPE,
-} from '../../../../../plugins/ml/public/application/jobs/components/custom_url_editor/constants';
-
-interface DiscoverUrlConfig {
-  label: string;
-  indexPattern: string;
-  queryEntityFieldNames: string[];
-  timeRange: TimeRangeType;
-  timeRangeInterval?: string;
-}
-
-interface DashboardUrlConfig {
-  label: string;
-  dashboardName: string;
-  queryEntityFieldNames: string[];
-  timeRange: TimeRangeType;
-  timeRangeInterval?: string;
-}
-
-interface OtherUrlConfig {
-  label: string;
-  url: string;
-}
+import { TIME_RANGE_TYPE } from '../../../../../plugins/ml/public/application/jobs/components/custom_url_editor/constants';
+import type {
+  DiscoverUrlConfig,
+  DashboardUrlConfig,
+  OtherUrlConfig,
+} from '../../../services/ml/job_table';
 
 // @ts-expect-error doesn't implement the full interface
 const JOB_CONFIG: Job = {

diff --git a/x-pack/test/functional/page_objects/gis_page.ts b/x-pack/test/functional/page_objects/gis_page.ts
@@ -286,6 +286,14 @@ export class GisPageObject extends FtrService {
     await this.testSubjects.click('layerVisibilityToggleButton');
   }
 
+  async openLegend() {
+    const isOpen = await this.testSubjects.exists('mapLayerTOC');
+    if (isOpen === false) {
+      await this.testSubjects.click('mapExpandLayerControlButton');
+      await this.testSubjects.existOrFail('mapLayerTOC');
+    }
+  }
+
   async closeLegend() {
     const isOpen = await this.testSubjects.exists('mapLayerTOC');
     if (isOpen) {
@@ -294,6 +302,12 @@ export class GisPageObject extends FtrService {
     }
   }
 
+  async clickFitToData() {
+    this.log.debug('Fit to data');
+    await this.testSubjects.click('fitToData');
+    await this.waitForMapPanAndZoom();
+  }
+
   async clickFitToBounds(layerName: string) {
     this.log.debug(`Fit to bounds, layer: ${layerName}`);
     const origView = await this.getView();

diff --git a/x-pack/test/functional/services/ml/anomalies_table.ts b/x-pack/test/functional/services/ml/anomalies_table.ts
@@ -149,5 +149,29 @@ export function MachineLearningAnomaliesTableProvider({ getService }: FtrProvide
       await testSubjects.click(`tablePagination-${rowsNumber}-rows`);
       await this.assertRowsNumberPerPage(rowsNumber);
     },
+
+    async ensureDetailsOpen(rowIndex: number) {
+      await retry.tryForTime(10 * 1000, async () => {
+        const rowSubj = await this.getRowSubjByRowIndex(rowIndex);
+        if (!(await testSubjects.exists('mlAnomaliesListRowDetails'))) {
+          await testSubjects.click(`${rowSubj} > mlAnomaliesListRowDetailsToggle`);
+          await testSubjects.existOrFail('mlAnomaliesListRowDetails', { timeout: 1000 });
+        }
+      });
+    },
+
+    async ensureDetailsClosed(rowIndex: number) {
+      await retry.tryForTime(10 * 1000, async () => {
+        const rowSubj = await this.getRowSubjByRowIndex(rowIndex);
+        if (await testSubjects.exists('mlAnomaliesListRowDetails')) {
+          await testSubjects.click(`${rowSubj} > mlAnomaliesListRowDetailsToggle`);
+          await testSubjects.missingOrFail('mlAnomaliesListRowDetails', { timeout: 1000 });
+        }
+      });
+    },
+
+    async scrollTableIntoView() {
+      await testSubjects.scrollIntoView('mlAnomaliesTable');
+    },
   };
 }
diff --git a/x-pack/test/functional/services/ml/anomaly_explorer.ts b/x-pack/test/functional/services/ml/anomaly_explorer.ts
@@ -174,5 +174,13 @@ export function MachineLearningAnomalyExplorerProvider({
         `Expect ${expectedChartsCount} charts to appear, got ${actualChartsCount}`
       );
     },
+
+    async scrollChartsContainerIntoView() {
+      await testSubjects.scrollIntoView('mlExplorerChartsContainer');
+    },
+
+    async scrollMapContainerIntoView() {
+      await testSubjects.scrollIntoView('mlAnomaliesMapContainer');
+    },
   };
 }
diff --git a/x-pack/test/functional/services/ml/api.ts b/x-pack/test/functional/services/ml/api.ts
@@ -936,11 +936,11 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
       log.debug('> DFA job started.');
     },
 
-    async createAndRunDFAJob(dfaConfig: DataFrameAnalyticsConfig) {
+    async createAndRunDFAJob(dfaConfig: DataFrameAnalyticsConfig, timeout?: number) {
       await this.createDataFrameAnalyticsJob(dfaConfig);
       await this.runDFAJob(dfaConfig.id);
       await this.waitForDFAJobTrainingRecordCountToBePositive(dfaConfig.id);
-      await this.waitForAnalyticsState(dfaConfig.id, DATA_FRAME_TASK_STATE.STOPPED);
+      await this.waitForAnalyticsState(dfaConfig.id, DATA_FRAME_TASK_STATE.STOPPED, timeout);
     },
 
     async updateJobSpaces(

diff --git a/x-pack/test/functional/services/ml/data_frame_analytics_creation.ts b/x-pack/test/functional/services/ml/data_frame_analytics_creation.ts
@@ -23,6 +23,8 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
   mlApi: MlApi
 ) {
   const headerPage = getPageObject('header');
+  const commonPage = getPageObject('common');
+
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
   const retry = getService('retry');
@@ -33,6 +35,10 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
       await testSubjects.existOrFail('mlAnalyticsCreateJobWizardJobTypeSelect');
     },
 
+    async scrollJobTypeSelectionIntoView() {
+      await testSubjects.scrollIntoView('mlAnalyticsCreateJobWizardJobTypeSelect');
+    },
+
     async assertJobTypeSelection(jobTypeAttribute: string) {
       await retry.tryForTime(5000, async () => {
         await testSubjects.existOrFail(`${jobTypeAttribute} selectedJobType`);
@@ -324,16 +330,24 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
       await this.assertDependentVariableSelection([dependentVariable]);
     },
 
-    async assertScatterplotMatrix(expectedValue: CanvasElementColorStats) {
+    async assertScatterplotMatrixLoaded() {
       await testSubjects.existOrFail(
         'mlAnalyticsCreateJobWizardScatterplotMatrixPanel > mlScatterplotMatrix loaded',
         {
           timeout: 5000,
         }
       );
+    },
+
+    async scrollScatterplotMatrixIntoView() {
       await testSubjects.scrollIntoView(
         'mlAnalyticsCreateJobWizardScatterplotMatrixPanel > mlScatterplotMatrix loaded'
       );
+    },
+
+    async assertScatterplotMatrix(expectedValue: CanvasElementColorStats) {
+      await this.assertScatterplotMatrixLoaded();
+      await this.scrollScatterplotMatrixIntoView();
       await mlCommonUI.assertColorsInCanvasElement(
         'mlAnalyticsCreateJobWizardScatterplotMatrixPanel',
         expectedValue,
@@ -672,5 +686,21 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
       await testSubjects.click('analyticsWizardCardManagement');
       await testSubjects.existOrFail('mlPageDataFrameAnalytics');
     },
+
+    async assertQueryBarValue(expectedValue: string) {
+      const actualQuery = await testSubjects.getAttribute('mlDFAnalyticsQueryInput', 'value');
+      expect(actualQuery).to.eql(
+        expectedValue,
+        `Query should be '${expectedValue}' (got '${actualQuery}')`
+      );
+    },
+
+    async setQueryBarValue(query: string) {
+      await mlCommonUI.setValueWithChecks('mlDFAnalyticsQueryInput', query, {
+        clearWithKeyboard: true,
+      });
+      await commonPage.pressEnterKey();
+      await this.assertQueryBarValue(query);
+    },
   };
 }
diff --git a/x-pack/test/functional/services/ml/data_frame_analytics_results.ts b/x-pack/test/functional/services/ml/data_frame_analytics_results.ts
@@ -33,6 +33,10 @@ export function MachineLearningDataFrameAnalyticsResultsProvider(
       await testSubjects.existOrFail('mlDFAnalyticsExplorationTablePanel');
     },
 
+    async scrollRocCurveChartIntoView() {
+      await testSubjects.scrollIntoView('mlDFAnalyticsClassificationExplorationRocCurveChart');
+    },
+
     async assertClassificationEvaluatePanelElementsExists() {
       await testSubjects.existOrFail('mlDFExpandableSection-ClassificationEvaluation');
       await testSubjects.existOrFail('mlDFAnalyticsClassificationExplorationConfusionMatrix');
@@ -125,11 +129,15 @@ export function MachineLearningDataFrameAnalyticsResultsProvider(
       });
     },
 
-    async assertScatterplotMatrix(expectedValue: CanvasElementColorStats) {
+    async assertScatterplotMatrixLoaded() {
       await testSubjects.existOrFail('mlDFExpandableSection-splom > mlScatterplotMatrix loaded', {
         timeout: 5000,
       });
-      await testSubjects.scrollIntoView('mlDFExpandableSection-splom > mlScatterplotMatrix loaded');
+    },
+
+    async assertScatterplotMatrix(expectedValue: CanvasElementColorStats) {
+      await this.assertScatterplotMatrixLoaded();
+      await this.scrollScatterplotMatrixIntoView();
       await mlCommonUI.assertColorsInCanvasElement(
         'mlDFExpandableSection-splom',
         expectedValue,
@@ -242,5 +250,47 @@ export function MachineLearningDataFrameAnalyticsResultsProvider(
     async scrollResultsIntoView() {
       await this.scrollContentSectionIntoView('results');
     },
+
+    async expandContentSection(sectionId: string, shouldExpand: boolean) {
+      const contentSubj = `mlDFExpandableSection-${sectionId}-content`;
+      const expandableContentExists = await testSubjects.exists(contentSubj, { timeout: 1000 });
+
+      if (expandableContentExists !== shouldExpand) {
+        await retry.tryForTime(5 * 1000, async () => {
+          await testSubjects.clickWhenNotDisabled(
+            `mlDFExpandableSection-${sectionId}-toggle-button`
+          );
+          if (shouldExpand) {
+            await testSubjects.existOrFail(contentSubj, { timeout: 1000 });
+          } else {
+            await testSubjects.missingOrFail(contentSubj, { timeout: 1000 });
+          }
+        });
+      }
+    },
+
+    async expandAnalysisSection(shouldExpand: boolean) {
+      await this.expandContentSection('analysis', shouldExpand);
+    },
+
+    async expandRegressionEvaluationSection(shouldExpand: boolean) {
+      await this.expandContentSection('RegressionEvaluation', shouldExpand);
+    },
+
+    async expandClassificationEvaluationSection(shouldExpand: boolean) {
+      await this.expandContentSection('ClassificationEvaluation', shouldExpand);
+    },
+
+    async expandFeatureImportanceSection(shouldExpand: boolean) {
+      await this.expandContentSection('FeatureImportanceSummary', shouldExpand);
+    },
+
+    async expandScatterplotMatrixSection(shouldExpand: boolean) {
+      await this.expandContentSection('splom', shouldExpand);
+    },
+
+    async expandResultsSection(shouldExpand: boolean) {
+      await this.expandContentSection('results', shouldExpand);
+    },
   };
 }
diff --git a/x-pack/test/functional/services/ml/data_visualizer_table.ts b/x-pack/test/functional/services/ml/data_visualizer_table.ts
@@ -295,7 +295,7 @@ export function MachineLearningDataVisualizerTableProvider(
     }
 
     public async setSampleSizeInputValue(
-      sampleSize: number,
+      sampleSize: number | 'all',
       fieldName: string,
       docCountFormatted: string
     ) {