diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index 0d4cf322d2a4..bf57306df569 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -123,6 +123,7 @@ export class ColorMapSelect extends Component {
       {
         value: CUSTOM_COLOR_MAP,
         inputDisplay: this.props.customOptionLabel,
+        'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`,
       },
       ...this.props.colorMapOptions,
     ];
@@ -150,6 +151,7 @@ export class ColorMapSelect extends Component {
             onChange={this._onColorMapSelect}
             valueOfSelected={valueOfSelected}
             hasDividers={true}
+            data-test-subj={`colorMapSelect_${this.props.styleProperty.getStyleName()}`}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
index 124c2bf0cff5..edf230b0a945 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
@@ -63,6 +63,7 @@ export const ColorStopsCategorical = ({
         getValueSuggestions={getValueSuggestions}
         value={stopValue}
         onChange={onStopChange}
+        dataTestSubj={`colorStopInput${index}`}
       />
     );
   };
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index c6b68b7e9440..a1c15e27c9eb 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -123,6 +123,7 @@ export function DynamicColorForm({
         </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
+            styleName={styleProperty.getStyleName()}
             fields={fields}
             selectedFieldName={styleProperty.getFieldName()}
             onChange={onFieldChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
index cf0ec5589d6b..2f5de507657a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
@@ -72,7 +72,7 @@ function groupFieldsByOrigin(fields) {
   return optionGroups;
 }
 
-export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
+export function FieldSelect({ fields, selectedFieldName, onChange, styleName, ...rest }) {
   const onFieldChange = selectedFields => {
     onChange({
       field: selectedFields.length > 0 ? selectedFields[0].value : null,
@@ -98,6 +98,7 @@ export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
         defaultMessage: 'Select a field',
       })}
       renderOption={renderOption}
+      data-test-subj={`styleFieldSelect_${styleName}`}
       {...rest}
     />
   );
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
index 0c9011b811f3..bbba6705f7de 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -27,6 +27,7 @@ export function DynamicLabelForm({
       </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
+          styleName={styleProperty.getStyleName()}
           fields={fields}
           selectedFieldName={styleProperty.getFieldName()}
           onChange={onFieldChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
index 5879e9499105..70f10e8e2567 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -30,6 +30,7 @@ export function DynamicOrientationForm({
       </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
+          styleName={styleProperty.getStyleName()}
           fields={fields}
           selectedFieldName={styleProperty.getFieldName()}
           onChange={onFieldChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
index 4918c2d906ee..6d8a88e1195d 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -50,6 +50,7 @@ export function DynamicSizeForm({
         </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
+            styleName={styleProperty.getStyleName()}
             fields={fields}
             selectedFieldName={styleProperty.getFieldName()}
             onChange={onFieldChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
index d12a3d77d0b2..93d937597254 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
@@ -119,6 +119,7 @@ export class StopInput extends Component {
         isClearable={false}
         isLoading={this.state.isLoadingSuggestions}
         onFocus={this._onFocus}
+        data-test-subj={this.props.dataTestSubj}
         compressed
       />
     );
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
index 752e0e421321..005bc11aa1bd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
@@ -77,6 +77,7 @@ export class StylePropEditor extends Component {
           defaultMessage: 'Select to style by fixed value or by data value',
         })}
         compressed
+        data-test-subj={`staticDynamicSelect_${this.props.styleProperty.getStyleName()}`}
       />
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
index 9065102dc8bd..6b79ac17f2e2 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -59,6 +59,7 @@ export function DynamicIconForm({
         </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
+            styleName={styleProperty.getStyleName()}
             fields={fields}
             selectedFieldName={_.get(styleOptions, 'field.name')}
             onChange={onFieldChange}
diff --git a/x-pack/test/functional/apps/maps/index.js b/x-pack/test/functional/apps/maps/index.js
index 58c211724b28..c9e39011fda3 100644
--- a/x-pack/test/functional/apps/maps/index.js
+++ b/x-pack/test/functional/apps/maps/index.js
@@ -31,6 +31,7 @@ export default function({ loadTestFile, getService }) {
       this.tags('ciGroup7');
       loadTestFile(require.resolve('./documents_source'));
       loadTestFile(require.resolve('./blended_vector_layer'));
+      loadTestFile(require.resolve('./vector_styling'));
       loadTestFile(require.resolve('./saved_object_management'));
       loadTestFile(require.resolve('./sample_data'));
       loadTestFile(require.resolve('./feature_controls/maps_security'));
diff --git a/x-pack/test/functional/apps/maps/vector_styling.js b/x-pack/test/functional/apps/maps/vector_styling.js
new file mode 100644
index 000000000000..78898f1d1a4d
--- /dev/null
+++ b/x-pack/test/functional/apps/maps/vector_styling.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+
+export default function({ getPageObjects }) {
+  const PageObjects = getPageObjects(['maps']);
+
+  describe('vector styling', () => {
+    before(async () => {
+      await PageObjects.maps.loadSavedMap('document example');
+    });
+
+    describe('categorical styling', () => {
+      before(async () => {
+        await PageObjects.maps.openLayerPanel('logstash');
+      });
+
+      it('should provide auto complete suggestions', async () => {
+        await PageObjects.maps.setStyleByValue('fillColor', 'machine.os.raw');
+        await PageObjects.maps.selectCustomColorRamp('fillColor');
+        const suggestions = await PageObjects.maps.getCategorySuggestions();
+        expect(
+          suggestions
+            .trim()
+            .split('\n')
+            .join()
+        ).to.equal('win 8,win xp,win 7,ios,osx');
+      });
+    });
+  });
+}
diff --git a/x-pack/test/functional/page_objects/gis_page.js b/x-pack/test/functional/page_objects/gis_page.js
index 1d0e231d7dc5..537d9a29f201 100644
--- a/x-pack/test/functional/page_objects/gis_page.js
+++ b/x-pack/test/functional/page_objects/gis_page.js
@@ -638,6 +638,22 @@ export function GisPageProvider({ getService, getPageObjects }) {
         }
       });
     }
+
+    async setStyleByValue(styleName, fieldName) {
+      await testSubjects.selectValue(`staticDynamicSelect_${styleName}`, 'DYNAMIC');
+      await comboBox.set(`styleFieldSelect_${styleName}`, fieldName);
+    }
+
+    async selectCustomColorRamp(styleName) {
+      // open super select menu
+      await testSubjects.click(`colorMapSelect_${styleName}`);
+      // Click option
+      await testSubjects.click(`colorMapSelectOption_CUSTOM_COLOR_MAP`);
+    }
+
+    async getCategorySuggestions() {
+      return await comboBox.getOptionsList(`colorStopInput1`);
+    }
   }
   return new GisPage();
 }