diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js
index 3caab3db44cb3..3b9e404e9b94d 100644
--- a/test/functional/apps/dashboard/dashboard_state.js
+++ b/test/functional/apps/dashboard/dashboard_state.js
@@ -27,7 +27,14 @@ import {
 } from '../../../../src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_constants';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']);
+  const PageObjects = getPageObjects([
+    'dashboard',
+    'visualize',
+    'header',
+    'discover',
+    'tileMap',
+    'visChart',
+  ]);
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
   const queryBar = getService('queryBar');
@@ -58,14 +65,14 @@ export default function({ getService, getPageObjects }) {
 
       await PageObjects.dashboard.switchToEditMode();
 
-      await PageObjects.visualize.openLegendOptionColors('Count');
-      await PageObjects.visualize.selectNewLegendColorChoice('#EA6460');
+      await PageObjects.visChart.openLegendOptionColors('Count');
+      await PageObjects.visChart.selectNewLegendColorChoice('#EA6460');
 
       await PageObjects.dashboard.saveDashboard('Overridden colors');
 
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.loadSavedDashboard('Overridden colors');
-      const colorChoiceRetained = await PageObjects.visualize.doesSelectedLegendColorExist(
+      const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist(
         '#EA6460'
       );
 
@@ -153,10 +160,10 @@ export default function({ getService, getPageObjects }) {
       await dashboardPanelActions.openContextMenu();
       await dashboardPanelActions.clickEdit();
 
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
 
       await PageObjects.visualize.saveVisualizationExpectSuccess('Visualization TileMap');
 
@@ -225,8 +232,8 @@ export default function({ getService, getPageObjects }) {
       describe('for embeddable config color parameters on a visualization', () => {
         it('updates a pie slice color on a soft refresh', async function() {
           await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME);
-          await PageObjects.visualize.openLegendOptionColors('80,000');
-          await PageObjects.visualize.selectNewLegendColorChoice('#F9D9F9');
+          await PageObjects.visChart.openLegendOptionColors('80,000');
+          await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9');
           const currentUrl = await browser.getCurrentUrl();
           const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF');
           await browser.get(newUrl.toString(), false);
@@ -248,7 +255,7 @@ export default function({ getService, getPageObjects }) {
         // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed.
         it.skip('and updates the pie slice legend color', async function() {
           await retry.try(async () => {
-            const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#FFFFFF');
+            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#FFFFFF');
             expect(colorExists).to.be(true);
           });
         });
@@ -269,7 +276,7 @@ export default function({ getService, getPageObjects }) {
         // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed.
         it.skip('resets the legend color as well', async function() {
           await retry.try(async () => {
-            const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#57c17b');
+            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#57c17b');
             expect(colorExists).to.be(true);
           });
         });
diff --git a/test/functional/apps/getting_started/_shakespeare.js b/test/functional/apps/getting_started/_shakespeare.js
index 04d81f4b46083..5af1676cf423f 100644
--- a/test/functional/apps/getting_started/_shakespeare.js
+++ b/test/functional/apps/getting_started/_shakespeare.js
@@ -23,7 +23,14 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const retry = getService('retry');
-  const PageObjects = getPageObjects(['console', 'common', 'settings', 'visualize']);
+  const PageObjects = getPageObjects([
+    'console',
+    'common',
+    'settings',
+    'visualize',
+    'visEditor',
+    'visChart',
+  ]);
 
   // https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
 
@@ -63,11 +70,11 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickVerticalBarChart();
       await PageObjects.visualize.clickNewSearch('shakes*');
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
 
       const expectedChartValues = [111396];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Count');
+        const data = await PageObjects.visChart.getBarChartData('Count');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data[0] - expectedChartValues[0]).to.be.lessThan(5);
@@ -84,22 +91,22 @@ export default function({ getService, getPageObjects }) {
     it('should configure metric Unique Count Speaking Parts', async function() {
       log.debug('Metric = Unique Count, speaker, Speaking Parts');
       // this first change to the YAxis metric agg uses the default aggIndex of 1
-      await PageObjects.visualize.selectYAxisAggregation(
+      await PageObjects.visEditor.selectYAxisAggregation(
         'Unique Count',
         'speaker',
         'Speaking Parts'
       );
       // then increment the aggIndex for the next one we create
       aggIndex = aggIndex + 1;
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
       const expectedChartValues = [935];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
       });
-      const title = await PageObjects.visualize.getYAxisTitle();
+      const title = await PageObjects.visChart.getYAxisTitle();
       expect(title).to.be('Speaking Parts');
     });
 
@@ -110,23 +117,23 @@ export default function({ getService, getPageObjects }) {
     5. Click Apply changes images/apply-changes-button.png to view the results.
     */
     it('should configure Terms aggregation on play_name', async function() {
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Aggregation = Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       aggIndex = aggIndex + 1;
       log.debug('Field = play_name');
-      await PageObjects.visualize.selectField('play_name');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('play_name');
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
       });
 
-      const labels = await PageObjects.visualize.getXAxisLabels();
+      const labels = await PageObjects.visChart.getXAxisLabels();
       expect(labels).to.eql([
         'Richard III',
         'Henry VI Part 2',
@@ -145,21 +152,21 @@ export default function({ getService, getPageObjects }) {
     2. Choose the Max aggregation and select the speech_number field.
     */
     it('should configure Max aggregation metric on speech_number', async function() {
-      await PageObjects.visualize.clickBucket('Y-axis', 'metrics');
+      await PageObjects.visEditor.clickBucket('Y-axis', 'metrics');
       log.debug('Aggregation = Max');
-      await PageObjects.visualize.selectYAxisAggregation(
+      await PageObjects.visEditor.selectYAxisAggregation(
         'Max',
         'speech_number',
         'Max Speaking Parts',
         aggIndex
       );
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       const expectedChartValues2 = [177, 106, 153, 132, 162];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);
@@ -168,7 +175,7 @@ export default function({ getService, getPageObjects }) {
         expect(data2).to.eql(expectedChartValues2);
       });
 
-      const labels = await PageObjects.visualize.getXAxisLabels();
+      const labels = await PageObjects.visChart.getXAxisLabels();
       expect(labels).to.eql([
         'Richard III',
         'Henry VI Part 2',
@@ -184,15 +191,15 @@ export default function({ getService, getPageObjects }) {
     4. Click Apply changes images/apply-changes-button.png. Your chart should now look like this:
     */
     it('should configure change options to normal bars', async function() {
-      await PageObjects.visualize.clickMetricsAndAxes();
-      await PageObjects.visualize.selectChartMode('normal');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickMetricsAndAxes();
+      await PageObjects.visEditor.selectChartMode('normal');
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       const expectedChartValues2 = [177, 106, 153, 132, 162];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);
@@ -210,15 +217,15 @@ export default function({ getService, getPageObjects }) {
     Save this chart with the name Bar Example.
     */
     it('should change the Y-Axis extents', async function() {
-      await PageObjects.visualize.setAxisExtents('50', '250');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setAxisExtents('50', '250');
+      await PageObjects.visEditor.clickGo();
 
       // same values as previous test except scaled down by the 50 for Y-Axis min
       const expectedChartValues = [21, 15, 12, 5, 5];
       const expectedChartValues2 = [127, 56, 103, 82, 112];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js
index b8fa253f72104..e52cfdf478c33 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.js
@@ -24,7 +24,14 @@ export default function({ getService, getPageObjects }) {
   const inspector = getService('inspector');
   const browser = getService('browser');
   const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'header',
+    'timePicker',
+  ]);
 
   describe('area charts', function indexPatternCreation() {
     const vizName1 = 'Visualization AreaChart Name Test';
@@ -38,17 +45,17 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Click X-axis');
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Click Date Histogram');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
       log.debug('Check field value');
-      const fieldValues = await PageObjects.visualize.getField();
+      const fieldValues = await PageObjects.visEditor.getField();
       log.debug('fieldValue = ' + fieldValues);
       expect(fieldValues[0]).to.be('@timestamp');
-      const intervalValue = await PageObjects.visualize.getInterval();
+      const intervalValue = await PageObjects.visEditor.getInterval();
       log.debug('intervalValue = ' + intervalValue);
       expect(intervalValue[0]).to.be('Auto');
-      return PageObjects.visualize.clickGo();
+      return PageObjects.visEditor.clickGo();
     };
 
     before(initAreaChart);
@@ -70,7 +77,7 @@ export default function({ getService, getPageObjects }) {
     it('should save and load', async function() {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -113,14 +120,14 @@ export default function({ getService, getPageObjects }) {
       ];
 
       await retry.try(async function tryingForTime() {
-        const labels = await PageObjects.visualize.getXAxisLabels();
+        const labels = await PageObjects.visChart.getXAxisLabels();
         log.debug('X-Axis labels = ' + labels);
         expect(labels).to.eql(xAxisLabels);
       });
-      const labels = await PageObjects.visualize.getYAxisLabels();
+      const labels = await PageObjects.visChart.getYAxisLabels();
       log.debug('Y-Axis labels = ' + labels);
       expect(labels).to.eql(yAxisLabels);
-      const paths = await PageObjects.visualize.getAreaChartData('Count');
+      const paths = await PageObjects.visChart.getAreaChartData('Count');
       log.debug('expectedAreaChartData = ' + expectedAreaChartData);
       log.debug('actual chart data =     ' + paths);
       expect(paths).to.eql(expectedAreaChartData);
@@ -185,9 +192,9 @@ export default function({ getService, getPageObjects }) {
           ['2015-09-20 19:00', '55'],
         ];
 
-        await PageObjects.visualize.toggleOpenEditor(2);
-        await PageObjects.visualize.setInterval('Second');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleOpenEditor(2);
+        await PageObjects.visEditor.setInterval('Second');
+        await PageObjects.visEditor.clickGo();
         await inspector.open();
         await inspector.expectTableData(expectedTableData);
         await inspector.close();
@@ -217,9 +224,9 @@ export default function({ getService, getPageObjects }) {
           ['2015-09-20 19:00', '0.015'],
         ];
 
-        await PageObjects.visualize.toggleAdvancedParams('2');
-        await PageObjects.visualize.toggleScaleMetrics();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleAdvancedParams('2');
+        await PageObjects.visEditor.toggleScaleMetrics();
+        await PageObjects.visEditor.clickGo();
         await inspector.open();
         await inspector.expectTableData(expectedTableData);
         await inspector.close();
@@ -249,11 +256,11 @@ export default function({ getService, getPageObjects }) {
           ['2015-09-20 19:00', '55', '2.053KB'],
         ];
 
-        await PageObjects.visualize.clickBucket('Y-axis', 'metrics');
-        await PageObjects.visualize.selectAggregation('Top Hit', 'metrics');
-        await PageObjects.visualize.selectField('bytes', 'metrics');
-        await PageObjects.visualize.selectAggregateWith('average');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Y-axis', 'metrics');
+        await PageObjects.visEditor.selectAggregation('Top Hit', 'metrics');
+        await PageObjects.visEditor.selectField('bytes', 'metrics');
+        await PageObjects.visEditor.selectAggregateWith('average');
+        await PageObjects.visEditor.clickGo();
         await inspector.open();
         await inspector.expectTableData(expectedTableData);
         await inspector.close();
@@ -285,13 +292,13 @@ export default function({ getService, getPageObjects }) {
       const axisId = 'ValueAxis-1';
 
       it('should show ticks on selecting log scale', async () => {
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions(axisId);
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
-        await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -317,9 +324,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting log scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -345,10 +352,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '0',
           '200',
@@ -364,18 +371,18 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
         const expectedLabels = [
           '0',
@@ -392,9 +399,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
@@ -412,16 +419,16 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch('long-window-logstash-*');
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
         log.debug('Click X-axis');
-        await PageObjects.visualize.clickBucket('X-axis');
+        await PageObjects.visEditor.clickBucket('X-axis');
         log.debug('Click Date Histogram');
-        await PageObjects.visualize.selectAggregation('Date Histogram');
-        await PageObjects.visualize.selectField('@timestamp');
-        await PageObjects.visualize.setInterval('Yearly');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.selectAggregation('Date Histogram');
+        await PageObjects.visEditor.selectField('@timestamp');
+        await PageObjects.visEditor.setInterval('Yearly');
+        await PageObjects.visEditor.clickGo();
         // This svg area is composed by 7 years (2013 - 2019).
         // 7 points are used to draw the upper line (usually called y1)
         // 7 points compose the lower line (usually called y0)
-        const paths = await PageObjects.visualize.getAreaChartPaths('Count');
+        const paths = await PageObjects.visChart.getAreaChartPaths('Count');
         log.debug('actual chart data =     ' + paths);
         const numberOfSegments = 7 * 2;
         expect(paths.length).to.eql(numberOfSegments);
@@ -435,17 +442,17 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch('long-window-logstash-*');
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
         log.debug('Click X-axis');
-        await PageObjects.visualize.clickBucket('X-axis');
+        await PageObjects.visEditor.clickBucket('X-axis');
         log.debug('Click Date Histogram');
-        await PageObjects.visualize.selectAggregation('Date Histogram');
-        await PageObjects.visualize.selectField('@timestamp');
-        await PageObjects.visualize.setInterval('Monthly');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.selectAggregation('Date Histogram');
+        await PageObjects.visEditor.selectField('@timestamp');
+        await PageObjects.visEditor.setInterval('Monthly');
+        await PageObjects.visEditor.clickGo();
         // This svg area is composed by 67 months 3 (2013) + 5 * 12 + 4 (2019)
         // 67 points are used to draw the upper line (usually called y1)
         // 67 points compose the lower line (usually called y0)
         const numberOfSegments = 67 * 2;
-        const paths = await PageObjects.visualize.getAreaChartPaths('Count');
+        const paths = await PageObjects.visChart.getAreaChartPaths('Count');
         log.debug('actual chart data =     ' + paths);
         expect(paths.length).to.eql(numberOfSegments);
       });
diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js
index e8fe8fb656877..0a9ff1e77a2ef 100644
--- a/test/functional/apps/visualize/_data_table.js
+++ b/test/functional/apps/visualize/_data_table.js
@@ -22,9 +22,10 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const inspector = getService('inspector');
+  const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'timePicker', 'visEditor', 'visChart']);
 
   describe('data table', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable';
@@ -38,27 +39,27 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = Split rows');
-      await PageObjects.visualize.clickBucket('Split rows');
+      await PageObjects.visEditor.clickBucket('Split rows');
       log.debug('Aggregation = Histogram');
-      await PageObjects.visualize.selectAggregation('Histogram');
+      await PageObjects.visEditor.selectAggregation('Histogram');
       log.debug('Field = bytes');
-      await PageObjects.visualize.selectField('bytes');
+      await PageObjects.visEditor.selectField('bytes');
       log.debug('Interval = 2000');
-      await PageObjects.visualize.setNumericInterval('2000');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setInterval('2000', { type: 'numeric' });
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should allow applying changed params', async () => {
-      await PageObjects.visualize.setNumericInterval('1', { append: true });
-      const interval = await PageObjects.visualize.getNumericInterval();
+      await PageObjects.visEditor.setInterval('1', { type: 'numeric', append: true });
+      const interval = await PageObjects.visEditor.getNumericInterval();
       expect(interval).to.be('20001');
-      const isApplyButtonEnabled = await PageObjects.visualize.isApplyEnabled();
+      const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled();
       expect(isApplyButtonEnabled).to.be(true);
     });
 
     it('should allow reseting changed params', async () => {
-      await PageObjects.visualize.clickReset();
-      const interval = await PageObjects.visualize.getNumericInterval();
+      await PageObjects.visEditor.clickReset();
+      const interval = await PageObjects.visEditor.getNumericInterval();
       expect(interval).to.be('2000');
     });
 
@@ -66,7 +67,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -96,7 +97,7 @@ export default function({ getService, getPageObjects }) {
 
     it('should show percentage columns', async () => {
       async function expectValidTableData() {
-        const data = await PageObjects.visualize.getTableVisData();
+        const data = await PageObjects.visChart.getTableVisData();
         expect(data.trim().split('\n')).to.be.eql([
           '≥ 0 and < 1000',
           '1,351 64.7%',
@@ -110,16 +111,16 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Range');
-      await PageObjects.visualize.selectField('bytes');
-      await PageObjects.visualize.clickGo();
-      await PageObjects.visualize.clickOptionsTab();
-      await PageObjects.visualize.setSelectByOptionText(
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Range');
+      await PageObjects.visEditor.selectField('bytes');
+      await PageObjects.visEditor.clickGo();
+      await PageObjects.visEditor.clickOptionsTab();
+      await PageObjects.visEditor.setSelectByOptionText(
         'datatableVisualizationPercentageCol',
         'Count'
       );
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
 
       await expectValidTableData();
 
@@ -128,20 +129,20 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(SAVE_NAME);
 
       await PageObjects.visualize.loadSavedVisualization(SAVE_NAME);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
 
       await expectValidTableData();
 
       // check that it works after selecting a column that's deleted
-      await PageObjects.visualize.clickData();
-      await PageObjects.visualize.clickBucket('Metric', 'metrics');
-      await PageObjects.visualize.selectAggregation('Average', 'metrics');
-      await PageObjects.visualize.selectField('bytes', 'metrics');
-      await PageObjects.visualize.removeDimension(1);
-      await PageObjects.visualize.clickGo();
-      await PageObjects.visualize.clickOptionsTab();
-
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickDataTab();
+      await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Average', 'metrics');
+      await PageObjects.visEditor.selectField('bytes', 'metrics');
+      await PageObjects.visEditor.removeDimension(1);
+      await PageObjects.visEditor.clickGo();
+      await PageObjects.visEditor.clickOptionsTab();
+
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql([
         '≥ 0 and < 1000',
         '344.094B',
@@ -155,12 +156,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickBucket('Metric', 'metrics');
-      await PageObjects.visualize.selectAggregation('Average Bucket', 'metrics');
-      await PageObjects.visualize.selectAggregation('Terms', 'metrics', 'buckets');
-      await PageObjects.visualize.selectField('geo.src', 'metrics', 'buckets');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Terms', 'metrics', 'buckets');
+      await PageObjects.visEditor.selectField('geo.src', 'metrics', 'buckets');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       log.debug(data.split('\n'));
       expect(data.trim().split('\n')).to.be.eql(['14,004 1,412.6']);
     });
@@ -170,12 +171,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
-      await PageObjects.visualize.selectField('@timestamp');
-      await PageObjects.visualize.setInterval('Daily');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectField('@timestamp');
+      await PageObjects.visEditor.setInterval('Daily');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       log.debug(data.split('\n'));
       expect(data.trim().split('\n')).to.be.eql([
         '2015-09-20',
@@ -192,12 +193,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
-      await PageObjects.visualize.selectField('@timestamp');
-      await PageObjects.visualize.setInterval('Daily');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectField('@timestamp');
+      await PageObjects.visEditor.setInterval('Daily');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql([
         '2015-09-20',
         '4,757',
@@ -210,15 +211,15 @@ export default function({ getService, getPageObjects }) {
 
     it('should correctly filter for applied time filter on the main timefield', async () => {
       await filterBar.addFilter('@timestamp', 'is between', '2015-09-19', '2015-09-21');
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']);
     });
 
     it('should correctly filter for pinned filters', async () => {
       await filterBar.toggleFilterPinned('@timestamp');
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']);
     });
 
@@ -227,11 +228,11 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickMetricEditor();
-      await PageObjects.visualize.selectAggregation('Top Hit', 'metrics');
-      await PageObjects.visualize.selectField('agent.raw', 'metrics');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickMetricEditor();
+      await PageObjects.visEditor.selectAggregation('Top Hit', 'metrics');
+      await PageObjects.visEditor.selectField('agent.raw', 'metrics');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       log.debug(data);
       expect(data.length).to.be.greaterThan(0);
     });
@@ -241,11 +242,11 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickDataTable();
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Range');
-      await PageObjects.visualize.selectField('bytes');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Range');
+      await PageObjects.visEditor.selectField('bytes');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql([
         '≥ 0 and < 1000',
         '1,351',
@@ -260,19 +261,19 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickDataTable();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('extension.raw');
-        await PageObjects.visualize.setSize(2);
-        await PageObjects.visualize.clickGo();
-
-        await PageObjects.visualize.toggleOtherBucket();
-        await PageObjects.visualize.toggleMissingBucket();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('extension.raw');
+        await PageObjects.visEditor.setSize(2);
+        await PageObjects.visEditor.clickGo();
+
+        await PageObjects.visEditor.toggleOtherBucket();
+        await PageObjects.visEditor.toggleMissingBucket();
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should show correct data', async () => {
-        const data = await PageObjects.visualize.getTableVisContent();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['jpg', '9,109'],
           ['css', '2,159'],
@@ -281,9 +282,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should apply correct filter', async () => {
-        await PageObjects.visualize.filterOnTableCell(1, 3);
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-        const data = await PageObjects.visualize.getTableVisContent();
+        await PageObjects.visChart.filterOnTableCell(1, 3);
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['png', '1,373'],
           ['gif', '918'],
@@ -298,20 +299,20 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickDataTable();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('extension.raw');
-        await PageObjects.visualize.setSize(2);
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('geo.dest');
-        await PageObjects.visualize.toggleOpenEditor(3, 'false');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('extension.raw');
+        await PageObjects.visEditor.setSize(2);
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('geo.dest');
+        await PageObjects.visEditor.toggleOpenEditor(3, 'false');
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should show correct data without showMetricsAtAllLevels', async () => {
-        const data = await PageObjects.visualize.getTableVisContent();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['jpg', 'CN', '1,718'],
           ['jpg', 'IN', '1,511'],
@@ -327,10 +328,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show correct data without showMetricsAtAllLevels even if showPartialRows is selected', async () => {
-        await PageObjects.visualize.clickOptionsTab();
-        await PageObjects.visualize.checkCheckbox('showPartialRows');
-        await PageObjects.visualize.clickGo();
-        const data = await PageObjects.visualize.getTableVisContent();
+        await PageObjects.visEditor.clickOptionsTab();
+        await testSubjects.setCheckbox('showPartialRows', 'check');
+        await PageObjects.visEditor.clickGo();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['jpg', 'CN', '1,718'],
           ['jpg', 'IN', '1,511'],
@@ -346,10 +347,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show metrics on each level', async () => {
-        await PageObjects.visualize.clickOptionsTab();
-        await PageObjects.visualize.checkCheckbox('showMetricsAtAllLevels');
-        await PageObjects.visualize.clickGo();
-        const data = await PageObjects.visualize.getTableVisContent();
+        await PageObjects.visEditor.clickOptionsTab();
+        await testSubjects.setCheckbox('showMetricsAtAllLevels', 'check');
+        await PageObjects.visEditor.clickGo();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['jpg', '9,109', 'CN', '1,718'],
           ['jpg', '9,109', 'IN', '1,511'],
@@ -365,12 +366,12 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show metrics other than count on each level', async () => {
-        await PageObjects.visualize.clickData();
-        await PageObjects.visualize.clickBucket('Metric', 'metrics');
-        await PageObjects.visualize.selectAggregation('Average', 'metrics');
-        await PageObjects.visualize.selectField('bytes', 'metrics');
-        await PageObjects.visualize.clickGo();
-        const data = await PageObjects.visualize.getTableVisContent();
+        await PageObjects.visEditor.clickDataTab();
+        await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+        await PageObjects.visEditor.selectAggregation('Average', 'metrics');
+        await PageObjects.visEditor.selectField('bytes', 'metrics');
+        await PageObjects.visEditor.clickGo();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           ['jpg', '9,109', '5.469KB', 'CN', '1,718', '5.477KB'],
           ['jpg', '9,109', '5.469KB', 'IN', '1,511', '5.456KB'],
@@ -392,26 +393,26 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickDataTable();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        await PageObjects.visualize.clickBucket('Split table');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('extension.raw');
-        await PageObjects.visualize.setSize(2);
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('geo.dest');
-        await PageObjects.visualize.setSize(3, 3);
-        await PageObjects.visualize.toggleOpenEditor(3, 'false');
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('geo.src');
-        await PageObjects.visualize.setSize(3, 4);
-        await PageObjects.visualize.toggleOpenEditor(4, 'false');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split table');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('extension.raw');
+        await PageObjects.visEditor.setSize(2);
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('geo.dest');
+        await PageObjects.visEditor.setSize(3, 3);
+        await PageObjects.visEditor.toggleOpenEditor(3, 'false');
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('geo.src');
+        await PageObjects.visEditor.setSize(3, 4);
+        await PageObjects.visEditor.toggleOpenEditor(4, 'false');
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should have a splitted table', async () => {
-        const data = await PageObjects.visualize.getTableVisContent();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           [
             ['CN', 'CN', '330'],
@@ -439,10 +440,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show metrics for split bucket when using showMetricsAtAllLevels', async () => {
-        await PageObjects.visualize.clickOptionsTab();
-        await PageObjects.visualize.checkCheckbox('showMetricsAtAllLevels');
-        await PageObjects.visualize.clickGo();
-        const data = await PageObjects.visualize.getTableVisContent();
+        await PageObjects.visEditor.clickOptionsTab();
+        await testSubjects.setCheckbox('showMetricsAtAllLevels', 'check');
+        await PageObjects.visEditor.clickGo();
+        const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([
           [
             ['CN', '1,718', 'CN', '330'],
diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.js b/test/functional/apps/visualize/_data_table_nontimeindex.js
index 77478f5d10edc..3db3cd094a81b 100644
--- a/test/functional/apps/visualize/_data_table_nontimeindex.js
+++ b/test/functional/apps/visualize/_data_table_nontimeindex.js
@@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const filterBar = getService('filterBar');
   const renderable = getService('renderable');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'header', 'visChart']);
 
   describe.skip('data table with index without time filter', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable without time filter';
@@ -40,27 +40,27 @@ export default function({ getService, getPageObjects }) {
         PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED
       );
       log.debug('Bucket = Split Rows');
-      await PageObjects.visualize.clickBucket('Split rows');
+      await PageObjects.visEditor.clickBucket('Split rows');
       log.debug('Aggregation = Histogram');
-      await PageObjects.visualize.selectAggregation('Histogram');
+      await PageObjects.visEditor.selectAggregation('Histogram');
       log.debug('Field = bytes');
-      await PageObjects.visualize.selectField('bytes');
+      await PageObjects.visEditor.selectField('bytes');
       log.debug('Interval = 2000');
-      await PageObjects.visualize.setNumericInterval('2000');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setInterval('2000', { type: 'numeric' });
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should allow applying changed params', async () => {
-      await PageObjects.visualize.setNumericInterval('1', { append: true });
-      const interval = await PageObjects.visualize.getNumericInterval();
+      await PageObjects.visEditor.setInterval('1', { type: 'numeric', append: true });
+      const interval = await PageObjects.visEditor.getNumericInterval();
       expect(interval).to.be('20001');
-      const isApplyButtonEnabled = await PageObjects.visualize.isApplyEnabled();
+      const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled();
       expect(isApplyButtonEnabled).to.be(true);
     });
 
     it('should allow reseting changed params', async () => {
-      await PageObjects.visualize.clickReset();
-      const interval = await PageObjects.visualize.getNumericInterval();
+      await PageObjects.visEditor.clickReset();
+      const interval = await PageObjects.visEditor.getNumericInterval();
       expect(interval).to.be('2000');
     });
 
@@ -68,7 +68,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -102,12 +102,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch(
         PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED
       );
-      await PageObjects.visualize.clickBucket('Metric', 'metrics');
-      await PageObjects.visualize.selectAggregation('Average Bucket', 'metrics');
-      await PageObjects.visualize.selectAggregation('Terms', 'metrics', 'buckets');
-      await PageObjects.visualize.selectField('geo.src', 'metrics', 'buckets');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Terms', 'metrics', 'buckets');
+      await PageObjects.visEditor.selectField('geo.src', 'metrics', 'buckets');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       log.debug(data.split('\n'));
       expect(data.trim().split('\n')).to.be.eql(['14,004 1,412.6']);
     });
@@ -118,12 +118,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch(
         PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED
       );
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
-      await PageObjects.visualize.selectField('@timestamp');
-      await PageObjects.visualize.setInterval('Daily');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectField('@timestamp');
+      await PageObjects.visEditor.setInterval('Daily');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       log.debug(data.split('\n'));
       expect(data.trim().split('\n')).to.be.eql([
         '2015-09-20',
@@ -141,12 +141,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch(
         PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED
       );
-      await PageObjects.visualize.clickBucket('Split rows');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
-      await PageObjects.visualize.selectField('@timestamp');
-      await PageObjects.visualize.setInterval('Daily');
-      await PageObjects.visualize.clickGo();
-      const data = await PageObjects.visualize.getTableVisData();
+      await PageObjects.visEditor.clickBucket('Split rows');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectField('@timestamp');
+      await PageObjects.visEditor.setInterval('Daily');
+      await PageObjects.visEditor.clickGo();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql([
         '2015-09-20',
         '4,757',
@@ -161,7 +161,7 @@ export default function({ getService, getPageObjects }) {
       await filterBar.addFilter('@timestamp', 'is between', '2015-09-19', '2015-09-21');
       await PageObjects.header.waitUntilLoadingHasFinished();
       await renderable.waitForRender();
-      const data = await PageObjects.visualize.getTableVisData();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']);
     });
 
@@ -169,7 +169,7 @@ export default function({ getService, getPageObjects }) {
       await filterBar.toggleFilterPinned('@timestamp');
       await PageObjects.header.waitUntilLoadingHasFinished();
       await renderable.waitForRender();
-      const data = await PageObjects.visualize.getTableVisData();
+      const data = await PageObjects.visChart.getTableVisData();
       expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']);
     });
   });
diff --git a/test/functional/apps/visualize/_embedding_chart.js b/test/functional/apps/visualize/_embedding_chart.js
index c16dc3b1279ff..940aa3eb5d462 100644
--- a/test/functional/apps/visualize/_embedding_chart.js
+++ b/test/functional/apps/visualize/_embedding_chart.js
@@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const renderable = getService('renderable');
   const embedding = getService('embedding');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'visualize',
+    'visEditor',
+    'visChart',
+    'header',
+    'timePicker',
+  ]);
 
   describe('embedding', () => {
     describe('a data table', () => {
@@ -33,22 +39,22 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickDataTable();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Date Histogram');
-        await PageObjects.visualize.selectField('@timestamp');
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split rows');
-        await PageObjects.visualize.selectAggregation('Histogram');
-        await PageObjects.visualize.selectField('bytes');
-        await PageObjects.visualize.setNumericInterval('2000', undefined, 3);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Date Histogram');
+        await PageObjects.visEditor.selectField('@timestamp');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split rows');
+        await PageObjects.visEditor.selectAggregation('Histogram');
+        await PageObjects.visEditor.selectField('bytes');
+        await PageObjects.visEditor.setInterval('2000', { type: 'numeric', aggNth: 3 });
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should allow opening table vis in embedded mode', async () => {
         await embedding.openInEmbeddedMode();
         await renderable.waitForRender();
 
-        const data = await PageObjects.visualize.getTableVisData();
+        const data = await PageObjects.visChart.getTableVisData();
         log.debug(data.split('\n'));
         expect(data.trim().split('\n')).to.be.eql([
           '2015-09-20 00:00',
@@ -89,7 +95,7 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.header.waitUntilLoadingHasFinished();
         await renderable.waitForRender();
 
-        const data = await PageObjects.visualize.getTableVisData();
+        const data = await PageObjects.visChart.getTableVisData();
         log.debug(data.split('\n'));
         expect(data.trim().split('\n')).to.be.eql([
           '2015-09-21 00:00',
@@ -126,11 +132,11 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should allow to change timerange from the visualization in embedded mode', async () => {
-        await PageObjects.visualize.filterOnTableCell(1, 7);
+        await PageObjects.visChart.filterOnTableCell(1, 7);
         await PageObjects.header.waitUntilLoadingHasFinished();
         await renderable.waitForRender();
 
-        const data = await PageObjects.visualize.getTableVisData();
+        const data = await PageObjects.visChart.getTableVisData();
         log.debug(data.split('\n'));
         expect(data.trim().split('\n')).to.be.eql([
           '03:00',
diff --git a/test/functional/apps/visualize/_experimental_vis.js b/test/functional/apps/visualize/_experimental_vis.js
index ae364244b4f5c..2ce15cf913eff 100644
--- a/test/functional/apps/visualize/_experimental_vis.js
+++ b/test/functional/apps/visualize/_experimental_vis.js
@@ -21,7 +21,7 @@ import expect from '@kbn/expect';
 
 export default ({ getService, getPageObjects }) => {
   const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'visualize']);
+  const PageObjects = getPageObjects(['visualize']);
 
   describe('visualize app', function() {
     this.tags('smoke');
diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.js
index 2b9033d1ae9d2..7ebb4548f967b 100644
--- a/test/functional/apps/visualize/_gauge_chart.js
+++ b/test/functional/apps/visualize/_gauge_chart.js
@@ -24,7 +24,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const inspector = getService('inspector');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   // FLAKY: https://github.com/elastic/kibana/issues/45089
   describe('gauge chart', function indexPatternCreation() {
@@ -50,24 +50,24 @@ export default function({ getService, getPageObjects }) {
 
       // initial metric of "Count" is selected by default
       return retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getGaugeValue();
+        const metricValue = await PageObjects.visChart.getGaugeValue();
         expect(expectedCount).to.eql(metricValue);
       });
     });
 
     it('should show Split Gauges', async function() {
       log.debug('Bucket = Split Group');
-      await PageObjects.visualize.clickBucket('Split group');
+      await PageObjects.visEditor.clickBucket('Split group');
       log.debug('Aggregation = Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       log.debug('Field = machine.os.raw');
-      await PageObjects.visualize.selectField('machine.os.raw');
+      await PageObjects.visEditor.selectField('machine.os.raw');
       log.debug('Size = 4');
-      await PageObjects.visualize.setSize('4');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setSize('4');
+      await PageObjects.visEditor.clickGo();
 
       await retry.try(async () => {
-        expect(await PageObjects.visualize.getGaugeValue()).to.eql([
+        expect(await PageObjects.visChart.getGaugeValue()).to.eql([
           '2,904',
           'win 8',
           '2,858',
@@ -83,34 +83,34 @@ export default function({ getService, getPageObjects }) {
     it('should show correct values for fields with fieldFormatters', async function() {
       const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes'];
 
-      await PageObjects.visualize.selectAggregation('Terms');
-      await PageObjects.visualize.selectField('machine.os.raw');
-      await PageObjects.visualize.setSize('1');
-      await PageObjects.visualize.clickBucket('Metric', 'metrics');
-      await PageObjects.visualize.selectAggregation('Min', 'metrics');
-      await PageObjects.visualize.selectField('bytes', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectAggregation('Terms');
+      await PageObjects.visEditor.selectField('machine.os.raw');
+      await PageObjects.visEditor.setSize('1');
+      await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Min', 'metrics');
+      await PageObjects.visEditor.selectField('bytes', 'metrics');
+      await PageObjects.visEditor.clickGo();
 
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getGaugeValue();
+        const metricValue = await PageObjects.visChart.getGaugeValue();
         expect(expectedTexts).to.eql(metricValue);
       });
     });
 
     it('should format the metric correctly in percentage mode', async function() {
       await initGaugeVis();
-      await PageObjects.visualize.clickMetricEditor();
-      await PageObjects.visualize.selectAggregation('Average', 'metrics');
-      await PageObjects.visualize.selectField('bytes', 'metrics');
-      await PageObjects.visualize.clickOptionsTab();
+      await PageObjects.visEditor.clickMetricEditor();
+      await PageObjects.visEditor.selectAggregation('Average', 'metrics');
+      await PageObjects.visEditor.selectField('bytes', 'metrics');
+      await PageObjects.visEditor.clickOptionsTab();
       await testSubjects.setValue('gaugeColorRange2__to', '10000');
       await testSubjects.click('gaugePercentageMode');
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+      await PageObjects.visEditor.clickGo();
 
       await retry.try(async function tryingForTime() {
         const expectedTexts = ['57.273%', 'Average bytes'];
-        const metricValue = await PageObjects.visualize.getGaugeValue();
+        const metricValue = await PageObjects.visChart.getGaugeValue();
         expect(expectedTexts).to.eql(metricValue);
       });
     });
diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js
index 226e490a6b232..2cea861d0f64d 100644
--- a/test/functional/apps/visualize/_heatmap_chart.js
+++ b/test/functional/apps/visualize/_heatmap_chart.js
@@ -22,7 +22,7 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('heatmap chart', function indexPatternCreation() {
     this.tags('smoke');
@@ -36,20 +36,20 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = X-Axis');
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Aggregation = Date Histogram');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
       log.debug('Field = @timestamp');
-      await PageObjects.visualize.selectField('@timestamp');
+      await PageObjects.visEditor.selectField('@timestamp');
       // leaving Interval set to Auto
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should save and load', async function() {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -87,16 +87,16 @@ export default function({ getService, getPageObjects }) {
     });
 
     it('should show 4 color ranges as default colorNumbers param', async function() {
-      const legends = await PageObjects.visualize.getLegendEntries();
+      const legends = await PageObjects.visChart.getLegendEntries();
       const expectedLegends = ['0 - 400', '400 - 800', '800 - 1,200', '1,200 - 1,600'];
       expect(legends).to.eql(expectedLegends);
     });
 
     it('should show 6 color ranges if changed on options', async function() {
-      await PageObjects.visualize.clickOptionsTab();
-      await PageObjects.visualize.changeHeatmapColorNumbers(6);
-      await PageObjects.visualize.clickGo();
-      const legends = await PageObjects.visualize.getLegendEntries();
+      await PageObjects.visEditor.clickOptionsTab();
+      await PageObjects.visEditor.changeHeatmapColorNumbers(6);
+      await PageObjects.visEditor.clickGo();
+      const legends = await PageObjects.visChart.getLegendEntries();
       const expectedLegends = [
         '0 - 267',
         '267 - 534',
@@ -108,23 +108,23 @@ export default function({ getService, getPageObjects }) {
       expect(legends).to.eql(expectedLegends);
     });
     it('should show 6 custom color ranges', async function() {
-      await PageObjects.visualize.clickOptionsTab();
-      await PageObjects.visualize.clickEnableCustomRanges();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
-      await PageObjects.visualize.clickAddRange();
+      await PageObjects.visEditor.clickOptionsTab();
+      await PageObjects.visEditor.clickEnableCustomRanges();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
+      await PageObjects.visEditor.clickAddRange();
 
       log.debug('customize 2 last ranges');
-      await PageObjects.visualize.setCustomRangeByIndex(6, '650', '720');
-      await PageObjects.visualize.setCustomRangeByIndex(7, '800', '905');
+      await PageObjects.visEditor.setCustomRangeByIndex(6, '650', '720');
+      await PageObjects.visEditor.setCustomRangeByIndex(7, '800', '905');
 
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-      await PageObjects.visualize.clickGo();
-      const legends = await PageObjects.visualize.getLegendEntries();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+      await PageObjects.visEditor.clickGo();
+      const legends = await PageObjects.visChart.getLegendEntries();
       const expectedLegends = [
         '0 - 100',
         '100 - 200',
diff --git a/test/functional/apps/visualize/_histogram_request_start.js b/test/functional/apps/visualize/_histogram_request_start.js
index a601e370a568f..a74fa8856a3b3 100644
--- a/test/functional/apps/visualize/_histogram_request_start.js
+++ b/test/functional/apps/visualize/_histogram_request_start.js
@@ -22,7 +22,13 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'timePicker',
+  ]);
 
   describe('histogram agg onSearchRequestStart', function() {
     before(async function() {
@@ -33,21 +39,21 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = Split Rows');
-      await PageObjects.visualize.clickBucket('Split rows');
+      await PageObjects.visEditor.clickBucket('Split rows');
       log.debug('Aggregation = Histogram');
-      await PageObjects.visualize.selectAggregation('Histogram');
+      await PageObjects.visEditor.selectAggregation('Histogram');
       log.debug('Field = machine.ram');
-      await PageObjects.visualize.selectField('machine.ram');
+      await PageObjects.visEditor.selectField('machine.ram');
     });
 
     describe('interval parameter uses autoBounds', function() {
       it('should use provided value when number of generated buckets is less than histogram:maxBars', async function() {
         const providedInterval = 2400000000;
         log.debug(`Interval = ${providedInterval}`);
-        await PageObjects.visualize.setNumericInterval(providedInterval);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.setInterval(providedInterval, { type: 'numeric' });
+        await PageObjects.visEditor.clickGo();
         await retry.try(async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           const dataArray = data.replace(/,/g, '').split('\n');
           expect(dataArray.length).to.eql(20);
           const bucketStart = parseInt(dataArray[0], 10);
@@ -60,11 +66,11 @@ export default function({ getService, getPageObjects }) {
       it('should scale value to round number when number of generated buckets is greater than histogram:maxBars', async function() {
         const providedInterval = 100;
         log.debug(`Interval = ${providedInterval}`);
-        await PageObjects.visualize.setNumericInterval(providedInterval);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.setInterval(providedInterval, { type: 'numeric' });
+        await PageObjects.visEditor.clickGo();
         await PageObjects.common.sleep(1000); //fix this
         await retry.try(async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           const dataArray = data.replace(/,/g, '').split('\n');
           expect(dataArray.length).to.eql(20);
           const bucketStart = parseInt(dataArray[0], 10);
diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.js
index 76b75f62b5f2a..84f955d9c7879 100644
--- a/test/functional/apps/visualize/_inspector.js
+++ b/test/functional/apps/visualize/_inspector.js
@@ -21,7 +21,7 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const inspector = getService('inspector');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('inspector', function describeIndexTests() {
     this.tags('smoke');
@@ -39,10 +39,10 @@ export default function({ getService, getPageObjects }) {
         await inspector.expectTableHeaders(['Count']);
 
         log.debug('Add Average Metric on machine.ram field');
-        await PageObjects.visualize.clickBucket('Y-axis', 'metrics');
-        await PageObjects.visualize.selectAggregation('Average', 'metrics');
-        await PageObjects.visualize.selectField('machine.ram', 'metrics');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Y-axis', 'metrics');
+        await PageObjects.visEditor.selectAggregation('Average', 'metrics');
+        await PageObjects.visEditor.selectField('machine.ram', 'metrics');
+        await PageObjects.visEditor.clickGo();
         await inspector.open();
         await inspector.expectTableHeaders(['Count', 'Average machine.ram']);
       });
@@ -50,23 +50,23 @@ export default function({ getService, getPageObjects }) {
       describe('filtering on inspector table values', function() {
         before(async function() {
           log.debug('Add X-axis terms agg on machine.os.raw');
-          await PageObjects.visualize.clickBucket('X-axis');
-          await PageObjects.visualize.selectAggregation('Terms');
-          await PageObjects.visualize.selectField('machine.os.raw');
-          await PageObjects.visualize.setSize(2);
-          await PageObjects.visualize.toggleOtherBucket(3);
-          await PageObjects.visualize.clickGo();
+          await PageObjects.visEditor.clickBucket('X-axis');
+          await PageObjects.visEditor.selectAggregation('Terms');
+          await PageObjects.visEditor.selectField('machine.os.raw');
+          await PageObjects.visEditor.setSize(2);
+          await PageObjects.visEditor.toggleOtherBucket(3);
+          await PageObjects.visEditor.clickGo();
         });
 
         beforeEach(async function() {
           await inspector.open();
-          await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+          await PageObjects.visChart.waitForVisualizationRenderingStabilized();
         });
 
         afterEach(async function() {
           await inspector.close();
           await filterBar.removeFilter('machine.os.raw');
-          await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+          await PageObjects.visChart.waitForVisualizationRenderingStabilized();
         });
 
         it('should allow filtering for values', async function() {
diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js
index 6a0a21e76924d..becf66f0fd5b1 100644
--- a/test/functional/apps/visualize/_line_chart.js
+++ b/test/functional/apps/visualize/_line_chart.js
@@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) {
   const inspector = getService('inspector');
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'timePicker',
+  ]);
 
   describe('line charts', function() {
     const vizName1 = 'Visualization LineChart';
@@ -37,14 +43,14 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = Split chart');
-      await PageObjects.visualize.clickBucket('Split chart');
+      await PageObjects.visEditor.clickBucket('Split chart');
       log.debug('Aggregation = Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       log.debug('Field = extension');
-      await PageObjects.visualize.selectField('extension.raw');
+      await PageObjects.visEditor.selectField('extension.raw');
       log.debug('switch from Rows to Columns');
-      await PageObjects.visualize.clickSplitDirection('Columns');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickSplitDirection('Columns');
+      await PageObjects.visEditor.clickGo();
     };
 
     before(initLineChart);
@@ -60,7 +66,7 @@ export default function({ getService, getPageObjects }) {
 
       // sleep a bit before trying to get the chart data
       await PageObjects.common.sleep(3000);
-      const data = await PageObjects.visualize.getLineChartData();
+      const data = await PageObjects.visChart.getLineChartData();
       log.debug('data=' + data);
       const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
       for (let x = 0; x < data.length; x++) {
@@ -91,10 +97,10 @@ export default function({ getService, getPageObjects }) {
       const expectedChartData = ['png 1,373', 'php 445', 'jpg 9,109', 'gif 918', 'css 2,159'];
 
       log.debug('Order By = Term');
-      await PageObjects.visualize.selectOrderByMetric(2, '_key');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectOrderByMetric(2, '_key');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function() {
-        const data = await PageObjects.visualize.getLineChartData();
+        const data = await PageObjects.visChart.getLineChartData();
         log.debug('data=' + data);
         const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
         for (let x = 0; x < data.length; x++) {
@@ -172,7 +178,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     describe.skip('switch between Y axis scale types', () => {
@@ -180,13 +186,13 @@ export default function({ getService, getPageObjects }) {
       const axisId = 'ValueAxis-1';
 
       it('should show ticks on selecting log scale', async () => {
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions(axisId);
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
-        await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -212,9 +218,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting log scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -240,36 +246,36 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show filtered ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['2,000', '4,000', '6,000', '8,000'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
         const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show filtered ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['2,000', '4,000', '6,000', '8,000'];
         expect(labels).to.eql(expectedLabels);
       });
diff --git a/test/functional/apps/visualize/_linked_saved_searches.js b/test/functional/apps/visualize/_linked_saved_searches.js
index 9bbe8c9d2147c..37ec3f06f2ecd 100644
--- a/test/functional/apps/visualize/_linked_saved_searches.js
+++ b/test/functional/apps/visualize/_linked_saved_searches.js
@@ -22,7 +22,14 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const filterBar = getService('filterBar');
   const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'discover', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'discover',
+    'visualize',
+    'header',
+    'timePicker',
+    'visChart',
+  ]);
 
   describe('visualize app', function describeIndexTests() {
     describe('linked saved searched', () => {
@@ -43,7 +50,7 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickSavedSearch(savedSearchName);
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         await retry.waitFor('wait for count to equal 9,109', async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           return data.trim() === '9,109';
         });
       });
@@ -54,7 +61,7 @@ export default function({ getService, getPageObjects }) {
           'Sep 21, 2015 @ 10:00:00.000'
         );
         await retry.waitFor('wait for count to equal 3,950', async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           return data.trim() === '3,950';
         });
       });
@@ -63,7 +70,7 @@ export default function({ getService, getPageObjects }) {
         await filterBar.addFilter('bytes', 'is between', '100', '3000');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.waitFor('wait for count to equal 707', async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           return data.trim() === '707';
         });
       });
@@ -71,7 +78,7 @@ export default function({ getService, getPageObjects }) {
       it('should allow unlinking from a linked search', async () => {
         await PageObjects.visualize.clickUnlinkSavedSearch();
         await retry.waitFor('wait for count to equal 707', async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           return data.trim() === '707';
         });
         // The filter on the saved search should now be in the editor
@@ -82,7 +89,7 @@ export default function({ getService, getPageObjects }) {
         await filterBar.toggleFilterEnabled('extension.raw');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.waitFor('wait for count to equal 1,293', async () => {
-          const unfilteredData = await PageObjects.visualize.getTableVisData();
+          const unfilteredData = await PageObjects.visChart.getTableVisData();
           return unfilteredData.trim() === '1,293';
         });
       });
@@ -91,7 +98,7 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.saveVisualizationExpectSuccess('Unlinked before saved');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.waitFor('wait for count to equal 1,293', async () => {
-          const data = await PageObjects.visualize.getTableVisData();
+          const data = await PageObjects.visChart.getTableVisData();
           return data.trim() === '1,293';
         });
       });
diff --git a/test/functional/apps/visualize/_markdown_vis.js b/test/functional/apps/visualize/_markdown_vis.js
index 870c465f2de37..51c03c90f507b 100644
--- a/test/functional/apps/visualize/_markdown_vis.js
+++ b/test/functional/apps/visualize/_markdown_vis.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getPageObjects, getService }) {
-  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'header']);
   const find = getService('find');
   const inspector = getService('inspector');
   const markdown = `
@@ -33,8 +33,8 @@ export default function({ getPageObjects, getService }) {
     before(async function() {
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickMarkdownWidget();
-      await PageObjects.visualize.setMarkdownTxt(markdown);
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setMarkdownTxt(markdown);
+      await PageObjects.visEditor.clickGo();
     });
 
     describe('markdown vis', () => {
@@ -43,29 +43,29 @@ export default function({ getPageObjects, getService }) {
       });
 
       it('should render markdown as html', async function() {
-        const h1Txt = await PageObjects.visualize.getMarkdownBodyDescendentText('h1');
+        const h1Txt = await PageObjects.visChart.getMarkdownBodyDescendentText('h1');
         expect(h1Txt).to.equal('Heading 1');
       });
 
       it('should not render html in markdown as html', async function() {
         const expected = 'Heading 1\n<h3>Inline HTML that should not be rendered as html</h3>';
-        const actual = await PageObjects.visualize.getMarkdownText();
+        const actual = await PageObjects.visChart.getMarkdownText();
         expect(actual).to.equal(expected);
       });
 
       it('should auto apply changes if auto mode is turned on', async function() {
         const markdown2 = '## Heading 2';
-        await PageObjects.visualize.toggleAutoMode();
-        await PageObjects.visualize.setMarkdownTxt(markdown2);
+        await PageObjects.visEditor.toggleAutoMode();
+        await PageObjects.visEditor.setMarkdownTxt(markdown2);
         await PageObjects.header.waitUntilLoadingHasFinished();
-        const h1Txt = await PageObjects.visualize.getMarkdownBodyDescendentText('h2');
+        const h1Txt = await PageObjects.visChart.getMarkdownBodyDescendentText('h2');
         expect(h1Txt).to.equal('Heading 2');
       });
 
       it('should resize the editor', async function() {
         const editorSidebar = await find.byCssSelector('.visEditor__sidebar');
         const initialSize = await editorSidebar.getSize();
-        await PageObjects.visualize.sizeUpEditor();
+        await PageObjects.visEditor.sizeUpEditor();
         const afterSize = await editorSidebar.getSize();
         expect(afterSize.width).to.be.greaterThan(initialSize.width);
       });
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js
index 31140a1718cfe..6a95f7553943c 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.js
@@ -24,7 +24,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const filterBar = getService('filterBar');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('metric chart', function() {
     before(async function() {
@@ -45,21 +45,21 @@ export default function({ getService, getPageObjects }) {
 
       // initial metric of "Count" is selected by default
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(expectedCount).to.eql(metricValue);
       });
     });
 
     it('should show Average', async function() {
       const avgMachineRam = ['13,104,036,080.615', 'Average machine.ram'];
-      await PageObjects.visualize.clickMetricEditor();
+      await PageObjects.visEditor.clickMetricEditor();
       log.debug('Aggregation = Average');
-      await PageObjects.visualize.selectAggregation('Average', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Average', 'metrics');
       log.debug('Field = machine.ram');
-      await PageObjects.visualize.selectField('machine.ram', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('machine.ram', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(avgMachineRam).to.eql(metricValue);
       });
     });
@@ -67,12 +67,12 @@ export default function({ getService, getPageObjects }) {
     it('should show Sum', async function() {
       const sumPhpMemory = ['85,865,880', 'Sum of phpmemory'];
       log.debug('Aggregation = Sum');
-      await PageObjects.visualize.selectAggregation('Sum', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Sum', 'metrics');
       log.debug('Field = phpmemory');
-      await PageObjects.visualize.selectField('phpmemory', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('phpmemory', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(sumPhpMemory).to.eql(metricValue);
       });
     });
@@ -81,12 +81,12 @@ export default function({ getService, getPageObjects }) {
       const medianBytes = ['5,565.263', '50th percentile of bytes'];
       //  For now, only comparing the text label part of the metric
       log.debug('Aggregation = Median');
-      await PageObjects.visualize.selectAggregation('Median', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Median', 'metrics');
       log.debug('Field = bytes');
-      await PageObjects.visualize.selectField('bytes', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('bytes', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         // only comparing the text label!
         expect(medianBytes[1]).to.eql(metricValue[1]);
       });
@@ -95,12 +95,12 @@ export default function({ getService, getPageObjects }) {
     it('should show Min', async function() {
       const minTimestamp = ['Sep 20, 2015 @ 00:00:00.000', 'Min @timestamp'];
       log.debug('Aggregation = Min');
-      await PageObjects.visualize.selectAggregation('Min', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Min', 'metrics');
       log.debug('Field = @timestamp');
-      await PageObjects.visualize.selectField('@timestamp', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('@timestamp', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(minTimestamp).to.eql(metricValue);
       });
     });
@@ -111,12 +111,12 @@ export default function({ getService, getPageObjects }) {
         'Max relatedContent.article:modified_time',
       ];
       log.debug('Aggregation = Max');
-      await PageObjects.visualize.selectAggregation('Max', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Max', 'metrics');
       log.debug('Field = relatedContent.article:modified_time');
-      await PageObjects.visualize.selectField('relatedContent.article:modified_time', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('relatedContent.article:modified_time', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(maxRelatedContentArticleModifiedTime).to.eql(metricValue);
       });
     });
@@ -124,12 +124,12 @@ export default function({ getService, getPageObjects }) {
     it('should show Unique Count', async function() {
       const uniqueCountClientip = ['1,000', 'Unique count of clientip'];
       log.debug('Aggregation = Unique Count');
-      await PageObjects.visualize.selectAggregation('Unique Count', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Unique Count', 'metrics');
       log.debug('Field = clientip');
-      await PageObjects.visualize.selectField('clientip', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('clientip', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(uniqueCountClientip).to.eql(metricValue);
       });
     });
@@ -153,12 +153,12 @@ export default function({ getService, getPageObjects }) {
       ];
 
       log.debug('Aggregation = Percentiles');
-      await PageObjects.visualize.selectAggregation('Percentiles', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Percentiles', 'metrics');
       log.debug('Field =  machine.ram');
-      await PageObjects.visualize.selectField('machine.ram', 'metrics');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('machine.ram', 'metrics');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(percentileMachineRam).to.eql(metricValue);
       });
     });
@@ -166,14 +166,14 @@ export default function({ getService, getPageObjects }) {
     it('should show Percentile Ranks', async function() {
       const percentileRankBytes = ['2.036%', 'Percentile rank 99 of "memory"'];
       log.debug('Aggregation = Percentile Ranks');
-      await PageObjects.visualize.selectAggregation('Percentile Ranks', 'metrics');
+      await PageObjects.visEditor.selectAggregation('Percentile Ranks', 'metrics');
       log.debug('Field =  bytes');
-      await PageObjects.visualize.selectField('memory', 'metrics');
+      await PageObjects.visEditor.selectField('memory', 'metrics');
       log.debug('Values =  99');
-      await PageObjects.visualize.setValue('99');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setValue('99');
+      await PageObjects.visEditor.clickGo();
       await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visualize.getMetric();
+        const metricValue = await PageObjects.visChart.getMetric();
         expect(percentileRankBytes).to.eql(metricValue);
       });
     });
@@ -183,7 +183,7 @@ export default function({ getService, getPageObjects }) {
         let filterCount = 0;
         await retry.try(async function tryingForTime() {
           // click first metric bucket
-          await PageObjects.visualize.clickMetricByIndex(0);
+          await PageObjects.visEditor.clickMetricByIndex(0);
           filterCount = await filterBar.getFilterCount();
         });
         expect(filterCount).to.equal(0);
@@ -191,17 +191,17 @@ export default function({ getService, getPageObjects }) {
 
       it('should allow filtering with buckets', async function() {
         log.debug('Bucket = Split Group');
-        await PageObjects.visualize.clickBucket('Split group');
+        await PageObjects.visEditor.clickBucket('Split group');
         log.debug('Aggregation = Terms');
-        await PageObjects.visualize.selectAggregation('Terms');
+        await PageObjects.visEditor.selectAggregation('Terms');
         log.debug('Field = machine.os.raw');
-        await PageObjects.visualize.selectField('machine.os.raw');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        await PageObjects.visEditor.clickGo();
 
         let filterCount = 0;
         await retry.try(async function tryingForTime() {
           // click first metric bucket
-          await PageObjects.visualize.clickMetricByIndex(0);
+          await PageObjects.visEditor.clickMetricByIndex(0);
           filterCount = await filterBar.getFilterCount();
         });
         await filterBar.removeAllFilters();
diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js
index 03067bb2182c5..313a4e39e5030 100644
--- a/test/functional/apps/visualize/_pie_chart.js
+++ b/test/functional/apps/visualize/_pie_chart.js
@@ -24,7 +24,14 @@ export default function({ getService, getPageObjects }) {
   const filterBar = getService('filterBar');
   const pieChart = getService('pieChart');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'header',
+    'timePicker',
+  ]);
 
   describe('pie chart', function() {
     const vizName1 = 'Visualization PieChart';
@@ -36,24 +43,24 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('select bucket Split slices');
-      await PageObjects.visualize.clickBucket('Split slices');
+      await PageObjects.visEditor.clickBucket('Split slices');
       log.debug('Click aggregation Histogram');
-      await PageObjects.visualize.selectAggregation('Histogram');
+      await PageObjects.visEditor.selectAggregation('Histogram');
       log.debug('Click field memory');
-      await PageObjects.visualize.selectField('memory');
+      await PageObjects.visEditor.selectField('memory');
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.common.sleep(1003);
       log.debug('setNumericInterval 4000');
-      await PageObjects.visualize.setNumericInterval('40000');
+      await PageObjects.visEditor.setInterval('40000', { type: 'numeric' });
       log.debug('clickGo');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should save and load', async function() {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -93,15 +100,15 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
+        await PageObjects.visEditor.clickBucket('Split slices');
         log.debug('Click aggregation Terms');
-        await PageObjects.visualize.selectAggregation('Terms');
+        await PageObjects.visEditor.selectAggregation('Terms');
         log.debug('Click field machine.os.raw');
-        await PageObjects.visualize.selectField('machine.os.raw');
-        await PageObjects.visualize.toggleOtherBucket(2);
-        await PageObjects.visualize.toggleMissingBucket(2);
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        await PageObjects.visEditor.toggleOtherBucket(2);
+        await PageObjects.visEditor.toggleMissingBucket(2);
         log.debug('clickGo');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         await pieChart.expectPieChartLabels(expectedTableData);
       });
 
@@ -109,20 +116,20 @@ export default function({ getService, getPageObjects }) {
         const expectedTableData = ['Missing', 'osx'];
 
         await pieChart.filterOnPieSlice('Other');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
         await pieChart.expectPieChartLabels(expectedTableData);
         await filterBar.removeFilter('machine.os.raw');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
       });
 
       it('should apply correct filter on other bucket by clicking on a legend', async () => {
         const expectedTableData = ['Missing', 'osx'];
 
-        await PageObjects.visualize.filterLegend('Other');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.filterLegend('Other');
+        await PageObjects.visChart.waitForVisualization();
         await pieChart.expectPieChartLabels(expectedTableData);
         await filterBar.removeFilter('machine.os.raw');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
       });
 
       it('should show two levels of other buckets', async () => {
@@ -171,15 +178,15 @@ export default function({ getService, getPageObjects }) {
           'Other',
         ];
 
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split slices');
-        await PageObjects.visualize.selectAggregation('Terms');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split slices');
+        await PageObjects.visEditor.selectAggregation('Terms');
         log.debug('Click field geo.src');
-        await PageObjects.visualize.selectField('geo.src');
-        await PageObjects.visualize.toggleOtherBucket(3);
-        await PageObjects.visualize.toggleMissingBucket(3);
+        await PageObjects.visEditor.selectField('geo.src');
+        await PageObjects.visEditor.toggleOtherBucket(3);
+        await PageObjects.visEditor.toggleMissingBucket(3);
         log.debug('clickGo');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         await pieChart.expectPieChartLabels(expectedTableData);
       });
     });
@@ -187,17 +194,17 @@ export default function({ getService, getPageObjects }) {
     describe('disabled aggs', () => {
       before(async () => {
         await PageObjects.visualize.loadSavedVisualization(vizName1);
-        await PageObjects.visualize.waitForRenderingCount();
+        await PageObjects.visChart.waitForRenderingCount();
       });
 
       it('should show correct result with one agg disabled', async () => {
         const expectedTableData = ['win 8', 'win xp', 'win 7', 'ios', 'osx'];
 
-        await PageObjects.visualize.clickBucket('Split slices');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('machine.os.raw');
-        await PageObjects.visualize.toggleDisabledAgg(2);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split slices');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        await PageObjects.visEditor.toggleDisabledAgg(2);
+        await PageObjects.visEditor.clickGo();
 
         await pieChart.expectPieChartLabels(expectedTableData);
       });
@@ -206,15 +213,15 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
         await PageObjects.visualize.loadSavedVisualization(vizName1);
-        await PageObjects.visualize.waitForRenderingCount();
+        await PageObjects.visChart.waitForRenderingCount();
 
         const expectedTableData = ['win 8', 'win xp', 'win 7', 'ios', 'osx'];
         await pieChart.expectPieChartLabels(expectedTableData);
       });
 
       it('should show correct result when agg is re-enabled', async () => {
-        await PageObjects.visualize.toggleDisabledAgg(2);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleDisabledAgg(2);
+        await PageObjects.visEditor.clickGo();
 
         const expectedTableData = [
           '0',
@@ -291,24 +298,24 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
+        await PageObjects.visEditor.clickBucket('Split slices');
         log.debug('Click aggregation Filters');
-        await PageObjects.visualize.selectAggregation('Filters');
+        await PageObjects.visEditor.selectAggregation('Filters');
         log.debug('Set the 1st filter value');
-        await PageObjects.visualize.setFilterAggregationValue('geo.dest:"US"');
+        await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"US"');
         log.debug('Add new filter');
-        await PageObjects.visualize.addNewFilterAggregation();
+        await PageObjects.visEditor.addNewFilterAggregation();
         log.debug('Set the 2nd filter value');
-        await PageObjects.visualize.setFilterAggregationValue('geo.dest:"CN"', 1);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"CN"', 1);
+        await PageObjects.visEditor.clickGo();
         const emptyFromTime = 'Sep 19, 2016 @ 06:31:44.000';
         const emptyToTime = 'Sep 23, 2016 @ 18:31:44.000';
         log.debug(
           'Switch to a different time range from "' + emptyFromTime + '" to "' + emptyToTime + '"'
         );
         await PageObjects.timePicker.setAbsoluteRange(emptyFromTime, emptyToTime);
-        await PageObjects.visualize.waitForVisualization();
-        await PageObjects.visualize.expectError();
+        await PageObjects.visChart.waitForVisualization();
+        await PageObjects.visChart.expectError();
       });
     });
     describe('multi series slice', () => {
@@ -327,22 +334,22 @@ export default function({ getService, getPageObjects }) {
         );
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
+        await PageObjects.visEditor.clickBucket('Split slices');
         log.debug('Click aggregation Histogram');
-        await PageObjects.visualize.selectAggregation('Histogram');
+        await PageObjects.visEditor.selectAggregation('Histogram');
         log.debug('Click field memory');
-        await PageObjects.visualize.selectField('memory');
+        await PageObjects.visEditor.selectField('memory');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.common.sleep(1003);
         log.debug('setNumericInterval 4000');
-        await PageObjects.visualize.setNumericInterval('40000');
+        await PageObjects.visEditor.setInterval('40000', { type: 'numeric' });
         log.debug('Toggle previous editor');
-        await PageObjects.visualize.toggleAggregationEditor(2);
+        await PageObjects.visEditor.toggleAggregationEditor(2);
         log.debug('select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('geo.dest');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split slices');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('geo.dest');
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should show correct chart', async () => {
@@ -428,11 +435,11 @@ export default function({ getService, getPageObjects }) {
           '360,000',
           'CN',
         ];
-        await PageObjects.visualize.filterLegend('CN');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.filterLegend('CN');
+        await PageObjects.visChart.waitForVisualization();
         await pieChart.expectPieChartLabels(expectedTableData);
         await filterBar.removeFilter('geo.dest');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
       });
 
       it('should still showing pie chart when a subseries have zero data', async function() {
@@ -442,21 +449,21 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
+        await PageObjects.visEditor.clickBucket('Split slices');
         log.debug('Click aggregation Filters');
-        await PageObjects.visualize.selectAggregation('Filters');
+        await PageObjects.visEditor.selectAggregation('Filters');
         log.debug('Set the 1st filter value');
-        await PageObjects.visualize.setFilterAggregationValue('geo.dest:"US"');
+        await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"US"');
         log.debug('Toggle previous editor');
-        await PageObjects.visualize.toggleAggregationEditor(2);
+        await PageObjects.visEditor.toggleAggregationEditor(2);
         log.debug('Add a new series, select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
+        await PageObjects.visEditor.clickBucket('Split slices');
         log.debug('Click aggregation Filters');
-        await PageObjects.visualize.selectAggregation('Filters');
+        await PageObjects.visEditor.selectAggregation('Filters');
         log.debug('Set the 1st filter value of the aggregation id 3');
-        await PageObjects.visualize.setFilterAggregationValue('geo.dest:"UX"', 0, 3);
-        await PageObjects.visualize.clickGo();
-        const legends = await PageObjects.visualize.getLegendEntries();
+        await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"UX"', 0, 3);
+        await PageObjects.visEditor.clickGo();
+        const legends = await PageObjects.visChart.getLegendEntries();
         const expectedLegends = ['geo.dest:"US"', 'geo.dest:"UX"'];
         expect(legends).to.eql(expectedLegends);
       });
@@ -469,15 +476,15 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Split chart');
-        await PageObjects.visualize.clickBucket('Split chart');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('machine.os.raw');
-        await PageObjects.visualize.toggleAggregationEditor(2);
+        await PageObjects.visEditor.clickBucket('Split chart');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        await PageObjects.visEditor.toggleAggregationEditor(2);
         log.debug('Add a new series, select bucket Split slices');
-        await PageObjects.visualize.clickBucket('Split slices');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('geo.src');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickBucket('Split slices');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('geo.src');
+        await PageObjects.visEditor.clickGo();
       });
 
       it('shows correct split chart', async () => {
@@ -522,7 +529,7 @@ export default function({ getService, getPageObjects }) {
           ['ios', '478', 'CN', '478'],
           ['osx', '228', 'CN', '228'],
         ];
-        await PageObjects.visualize.filterLegend('CN');
+        await PageObjects.visChart.filterLegend('CN');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await inspector.open();
         await inspector.setTablePageSize(50);
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
index 2d496cb575db7..e7ce5808554b4 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.js
@@ -25,11 +25,12 @@ export default function({ getService, getPageObjects }) {
   const kibanaServer = getService('kibanaServer');
   const browser = getService('browser');
   const PageObjects = getPageObjects([
-    'common',
     'visualize',
     'header',
     'pointSeries',
     'timePicker',
+    'visEditor',
+    'visChart',
   ]);
   const pointSeriesVis = PageObjects.pointSeries;
   const inspector = getService('inspector');
@@ -42,18 +43,18 @@ export default function({ getService, getPageObjects }) {
     await PageObjects.visualize.clickNewSearch();
     await PageObjects.timePicker.setDefaultAbsoluteRange();
     log.debug('Bucket = X-axis');
-    await PageObjects.visualize.clickBucket('X-axis');
+    await PageObjects.visEditor.clickBucket('X-axis');
     log.debug('Aggregation = Date Histogram');
-    await PageObjects.visualize.selectAggregation('Date Histogram');
+    await PageObjects.visEditor.selectAggregation('Date Histogram');
     log.debug('Field = @timestamp');
-    await PageObjects.visualize.selectField('@timestamp');
+    await PageObjects.visEditor.selectField('@timestamp');
     // add another metrics
     log.debug('Metric = Value Axis');
-    await PageObjects.visualize.clickBucket('Y-axis', 'metrics');
+    await PageObjects.visEditor.clickBucket('Y-axis', 'metrics');
     log.debug('Aggregation = Average');
-    await PageObjects.visualize.selectAggregation('Average', 'metrics');
+    await PageObjects.visEditor.selectAggregation('Average', 'metrics');
     log.debug('Field = memory');
-    await PageObjects.visualize.selectField('machine.ram', 'metrics');
+    await PageObjects.visEditor.selectField('machine.ram', 'metrics');
     // go to options page
     log.debug('Going to axis options');
     await pointSeriesVis.clickAxisOptions();
@@ -61,11 +62,11 @@ export default function({ getService, getPageObjects }) {
     log.debug('adding axis');
     await pointSeriesVis.clickAddAxis();
     // set average count to use second value axis
-    await PageObjects.visualize.toggleAccordion('visEditorSeriesAccordion3');
+    await PageObjects.visEditor.toggleAccordion('visEditorSeriesAccordion3');
     log.debug('Average memory value axis - ValueAxis-2');
     await pointSeriesVis.setSeriesAxis(1, 'ValueAxis-2');
-    await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-    await PageObjects.visualize.clickGo();
+    await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+    await PageObjects.visEditor.clickGo();
   }
 
   describe('point series', function describeIndexTests() {
@@ -129,14 +130,14 @@ export default function({ getService, getPageObjects }) {
         ];
 
         await retry.try(async () => {
-          const data = await PageObjects.visualize.getLineChartData('Count');
+          const data = await PageObjects.visChart.getLineChartData('Count');
           log.debug('count data=' + data);
           log.debug('data.length=' + data.length);
           expect(data).to.eql(expectedChartValues[0]);
         });
 
         await retry.try(async () => {
-          const avgMemoryData = await PageObjects.visualize.getLineChartData(
+          const avgMemoryData = await PageObjects.visChart.getLineChartData(
             'Average machine.ram',
             'ValueAxis-2'
           );
@@ -158,7 +159,7 @@ export default function({ getService, getPageObjects }) {
     describe('multiple chart types', function() {
       it('should change average series type to histogram', async function() {
         await pointSeriesVis.setSeriesType(1, 'histogram');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         const length = await pointSeriesVis.getHistogramSeries();
         expect(length).to.be(1);
       });
@@ -166,12 +167,12 @@ export default function({ getService, getPageObjects }) {
 
     describe('grid lines', function() {
       before(async function() {
-        await pointSeriesVis.clickOptions();
+        await PageObjects.visEditor.clickOptionsTab();
       });
 
       it('should show category grid lines', async function() {
         await pointSeriesVis.toggleGridCategoryLines();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         const gridLines = await pointSeriesVis.getGridLines();
         expect(gridLines.length).to.be(9);
         gridLines.forEach(gridLine => {
@@ -182,7 +183,7 @@ export default function({ getService, getPageObjects }) {
       it('should show value axis grid lines', async function() {
         await pointSeriesVis.setGridValueAxis('ValueAxis-2');
         await pointSeriesVis.toggleGridCategoryLines();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         const gridLines = await pointSeriesVis.getGridLines();
         expect(gridLines.length).to.be(9);
         gridLines.forEach(gridLine => {
@@ -199,36 +200,36 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.navigateToNewVisualization();
         await PageObjects.visualize.clickLineChart();
         await PageObjects.visualize.clickNewSearch();
-        await PageObjects.visualize.selectYAxisAggregation('Average', 'bytes', customLabel, 1);
-        await PageObjects.visualize.clickGo();
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions('ValueAxis-1');
+        await PageObjects.visEditor.selectYAxisAggregation('Average', 'bytes', customLabel, 1);
+        await PageObjects.visEditor.clickGo();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions('ValueAxis-1');
       });
 
       it('should render a custom label when one is set', async function() {
-        const title = await PageObjects.visualize.getYAxisTitle();
+        const title = await PageObjects.visChart.getYAxisTitle();
         expect(title).to.be(customLabel);
       });
 
       it('should render a custom axis title when one is set, overriding the custom label', async function() {
         await pointSeriesVis.setAxisTitle(axisTitle);
-        await PageObjects.visualize.clickGo();
-        const title = await PageObjects.visualize.getYAxisTitle();
+        await PageObjects.visEditor.clickGo();
+        const title = await PageObjects.visChart.getYAxisTitle();
         expect(title).to.be(axisTitle);
       });
 
       it('should preserve saved axis titles after a vis is saved and reopened', async function() {
         await PageObjects.visualize.saveVisualizationExpectSuccess(visName);
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
         await PageObjects.visualize.loadSavedVisualization(visName);
-        await PageObjects.visualize.waitForRenderingCount();
-        await PageObjects.visualize.clickData();
-        await PageObjects.visualize.toggleOpenEditor(1);
-        await PageObjects.visualize.setCustomLabel('test', 1);
-        await PageObjects.visualize.clickGo();
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions('ValueAxis-1');
-        const title = await PageObjects.visualize.getYAxisTitle();
+        await PageObjects.visChart.waitForRenderingCount();
+        await PageObjects.visEditor.clickDataTab();
+        await PageObjects.visEditor.toggleOpenEditor(1);
+        await PageObjects.visEditor.setCustomLabel('test', 1);
+        await PageObjects.visEditor.clickGo();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions('ValueAxis-1');
+        const title = await PageObjects.visChart.getYAxisTitle();
         expect(title).to.be(axisTitle);
       });
     });
@@ -238,7 +239,7 @@ export default function({ getService, getPageObjects }) {
 
       it('should show round labels in default timezone', async function() {
         await initChart();
-        const labels = await PageObjects.visualize.getXAxisLabels();
+        const labels = await PageObjects.visChart.getXAxisLabels();
         expect(labels.join()).to.contain(expectedLabels.join());
       });
 
@@ -248,7 +249,7 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.header.awaitKibanaChrome();
         await initChart();
 
-        const labels = await PageObjects.visualize.getXAxisLabels();
+        const labels = await PageObjects.visChart.getXAxisLabels();
 
         expect(labels.join()).to.contain(expectedLabels.join());
       });
@@ -258,10 +259,10 @@ export default function({ getService, getPageObjects }) {
         const toTime = 'Sep 22, 2015 @ 16:08:34.554';
         // note that we're setting the absolute time range while we're in 'America/Phoenix' tz
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
-        await PageObjects.visualize.waitForRenderingCount();
+        await PageObjects.visChart.waitForRenderingCount();
 
         await retry.waitFor('wait for x-axis labels to match expected for Phoenix', async () => {
-          const labels = await PageObjects.visualize.getXAxisLabels();
+          const labels = await PageObjects.visChart.getXAxisLabels();
           log.debug(`Labels: ${labels}`);
           return (
             labels.toString() === ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'].toString()
@@ -303,11 +304,11 @@ export default function({ getService, getPageObjects }) {
         await browser.refresh();
         // wait some time before trying to check for rendering count
         await PageObjects.header.awaitKibanaChrome();
-        await PageObjects.visualize.waitForRenderingCount();
+        await PageObjects.visChart.waitForRenderingCount();
         log.debug('getXAxisLabels');
 
         await retry.waitFor('wait for x-axis labels to match expected for UTC', async () => {
-          const labels2 = await PageObjects.visualize.getXAxisLabels();
+          const labels2 = await PageObjects.visChart.getXAxisLabels();
           log.debug(`Labels: ${labels2}`);
           return (
             labels2.toString() === ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'].toString()
diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.js
index f6c81dab5921f..10cbd9913c70c 100644
--- a/test/functional/apps/visualize/_region_map.js
+++ b/test/functional/apps/visualize/_region_map.js
@@ -24,7 +24,7 @@ export default function({ getService, getPageObjects }) {
     const inspector = getService('inspector');
     const log = getService('log');
     const find = getService('find');
-    const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'settings']);
+    const PageObjects = getPageObjects(['visualize', 'visEditor', 'timePicker']);
 
     before(async function() {
       log.debug('navigateToApp visualize');
@@ -34,12 +34,12 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = Shape field');
-      await PageObjects.visualize.clickBucket('Shape field');
+      await PageObjects.visEditor.clickBucket('Shape field');
       log.debug('Aggregation = Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       log.debug('Field = geo.src');
-      await PageObjects.visualize.selectField('geo.src');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('geo.src');
+      await PageObjects.visEditor.clickGo();
     });
 
     describe('vector map', function indexPatternCreation() {
@@ -60,26 +60,26 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should change results after changing layer to world', async function() {
-        await PageObjects.visualize.clickOptions();
-        await PageObjects.visualize.setSelectByOptionText(
+        await PageObjects.visEditor.clickOptionsTab();
+        await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectLayer',
           'World Countries'
         );
 
         //ensure all fields are there
-        await PageObjects.visualize.setSelectByOptionText(
+        await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'ISO 3166-1 alpha-2 code'
         );
-        await PageObjects.visualize.setSelectByOptionText(
+        await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'ISO 3166-1 alpha-3 code'
         );
-        await PageObjects.visualize.setSelectByOptionText(
+        await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'name'
         );
-        await PageObjects.visualize.setSelectByOptionText(
+        await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'ISO 3166-1 alpha-2 code'
         );
diff --git a/test/functional/apps/visualize/_tag_cloud.js b/test/functional/apps/visualize/_tag_cloud.js
index 97b8036b30503..4f921cec1fdf1 100644
--- a/test/functional/apps/visualize/_tag_cloud.js
+++ b/test/functional/apps/visualize/_tag_cloud.js
@@ -26,7 +26,16 @@ export default function({ getService, getPageObjects }) {
   const browser = getService('browser');
   const retry = getService('retry');
   const find = getService('find');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'header',
+    'settings',
+    'timePicker',
+    'tagCloud',
+  ]);
 
   describe('tag cloud chart', function() {
     const vizName1 = 'Visualization tagCloud';
@@ -40,15 +49,15 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('select Tags');
-      await PageObjects.visualize.clickBucket('Tags');
+      await PageObjects.visEditor.clickBucket('Tags');
       log.debug('Click aggregation Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       log.debug('Click field machine.ram');
       await retry.try(async function tryingForTime() {
-        await PageObjects.visualize.selectField(termsField);
+        await PageObjects.visEditor.selectField(termsField);
       });
-      await PageObjects.visualize.selectOrderByMetric(2, '_key');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectOrderByMetric(2, '_key');
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should have inspector enabled', async function() {
@@ -56,7 +65,7 @@ export default function({ getService, getPageObjects }) {
     });
 
     it('should show correct tag cloud data', async function() {
-      const data = await PageObjects.visualize.getTextTag();
+      const data = await PageObjects.tagCloud.getTextTag();
       log.debug(data);
       expect(data).to.eql([
         '32,212,254,720',
@@ -69,22 +78,22 @@ export default function({ getService, getPageObjects }) {
 
     it('should collapse the sidebar', async function() {
       const editorSidebar = await find.byCssSelector('.collapsible-sidebar');
-      await PageObjects.visualize.clickEditorSidebarCollapse();
+      await PageObjects.visEditor.clickEditorSidebarCollapse();
       // Give d3 tag cloud some time to rearrange tags
       await PageObjects.common.sleep(1000);
       const afterSize = await editorSidebar.getSize();
       expect(afterSize.width).to.be(0);
-      await PageObjects.visualize.clickEditorSidebarCollapse();
+      await PageObjects.visEditor.clickEditorSidebarCollapse();
     });
 
     it('should still show all tags after sidebar has been collapsed', async function() {
-      await PageObjects.visualize.clickEditorSidebarCollapse();
+      await PageObjects.visEditor.clickEditorSidebarCollapse();
       // Give d3 tag cloud some time to rearrange tags
       await PageObjects.common.sleep(1000);
-      await PageObjects.visualize.clickEditorSidebarCollapse();
+      await PageObjects.visEditor.clickEditorSidebarCollapse();
       // Give d3 tag cloud some time to rearrange tags
       await PageObjects.common.sleep(1000);
-      const data = await PageObjects.visualize.getTextTag();
+      const data = await PageObjects.tagCloud.getTextTag();
       log.debug(data);
       expect(data).to.eql([
         '32,212,254,720',
@@ -100,7 +109,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.common.sleep(1000);
       await browser.setWindowSize(1200, 800);
       await PageObjects.common.sleep(1000);
-      const data = await PageObjects.visualize.getTextTag();
+      const data = await PageObjects.tagCloud.getTextTag();
       expect(data).to.eql([
         '32,212,254,720',
         '21,474,836,480',
@@ -114,11 +123,11 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should show the tags and relative size', function() {
-      return PageObjects.visualize.getTextSizes().then(function(results) {
+      return PageObjects.tagCloud.getTextSizes().then(function(results) {
         log.debug('results here ' + results);
         expect(results).to.eql(['72px', '63px', '25px', '32px', '18px']);
       });
@@ -153,7 +162,7 @@ export default function({ getService, getPageObjects }) {
         });
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
       });
 
       after(async function() {
@@ -168,15 +177,15 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should format tags with field formatter', async function() {
-        const data = await PageObjects.visualize.getTextTag();
+        const data = await PageObjects.tagCloud.getTextTag();
         log.debug(data);
         expect(data).to.eql(['30GB', '20GB', '19GB', '18GB', '17GB']);
       });
 
       it('should apply filter with unformatted value', async function() {
-        await PageObjects.visualize.selectTagCloudTag('30GB');
+        await PageObjects.tagCloud.selectTagCloudTag('30GB');
         await PageObjects.header.waitUntilLoadingHasFinished();
-        const data = await PageObjects.visualize.getTextTag();
+        const data = await PageObjects.tagCloud.getTextTag();
         expect(data).to.eql(['30GB']);
       });
     });
diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.js
index e2946339b1f08..397eaeb0f3013 100644
--- a/test/functional/apps/visualize/_tile_map.js
+++ b/test/functional/apps/visualize/_tile_map.js
@@ -27,7 +27,14 @@ export default function({ getService, getPageObjects }) {
   const filterBar = getService('filterBar');
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'settings']);
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'timePicker',
+    'tileMap',
+  ]);
 
   describe('tile map visualize app', function() {
     describe('incomplete config', function describeIndexTests() {
@@ -45,8 +52,8 @@ export default function({ getService, getPageObjects }) {
 
       it('should be able to zoom in twice', async () => {
         //should not throw
-        await PageObjects.visualize.clickMapZoomIn();
-        await PageObjects.visualize.clickMapZoomIn();
+        await PageObjects.tileMap.clickMapZoomIn();
+        await PageObjects.tileMap.clickMapZoomIn();
       });
     });
 
@@ -61,14 +68,14 @@ export default function({ getService, getPageObjects }) {
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         log.debug('select bucket Geo Coordinates');
-        await PageObjects.visualize.clickBucket('Geo coordinates');
+        await PageObjects.visEditor.clickBucket('Geo coordinates');
         log.debug('Click aggregation Geohash');
-        await PageObjects.visualize.selectAggregation('Geohash');
+        await PageObjects.visEditor.selectAggregation('Geohash');
         log.debug('Click field geo.coordinates');
         await retry.try(async function tryingForTime() {
-          await PageObjects.visualize.selectField('geo.coordinates');
+          await PageObjects.visEditor.selectField('geo.coordinates');
         });
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
       });
 
       /**
@@ -106,9 +113,9 @@ export default function({ getService, getPageObjects }) {
             ['-', '8', '108', { lat: 18, lon: -157 }],
           ];
           //level 1
-          await PageObjects.visualize.clickMapZoomOut();
+          await PageObjects.tileMap.clickMapZoomOut();
           //level 0
-          await PageObjects.visualize.clickMapZoomOut();
+          await PageObjects.tileMap.clickMapZoomOut();
 
           await inspector.open();
           await inspector.setTablePageSize(50);
@@ -118,8 +125,8 @@ export default function({ getService, getPageObjects }) {
         });
 
         it('should not be able to zoom out beyond 0', async function() {
-          await PageObjects.visualize.zoomAllTheWayOut();
-          const enabled = await PageObjects.visualize.getMapZoomOutEnabled();
+          await PageObjects.tileMap.zoomAllTheWayOut();
+          const enabled = await PageObjects.tileMap.getMapZoomOutEnabled();
           expect(enabled).to.be(false);
         });
 
@@ -148,7 +155,7 @@ export default function({ getService, getPageObjects }) {
             ['-', 'b7', '167', { lat: 64, lon: -163 }],
           ];
 
-          await PageObjects.visualize.clickMapFitDataBounds();
+          await PageObjects.tileMap.clickMapFitDataBounds();
           await inspector.open();
           const data = await inspector.getTableData();
           await inspector.close();
@@ -164,8 +171,8 @@ export default function({ getService, getPageObjects }) {
 
           await filterBar.addFilter('bytes', 'is between', '19980', '19990');
           await filterBar.toggleFilterPinned('bytes');
-          await PageObjects.visualize.zoomAllTheWayOut();
-          await PageObjects.visualize.clickMapFitDataBounds();
+          await PageObjects.tileMap.zoomAllTheWayOut();
+          await PageObjects.tileMap.clickMapFitDataBounds();
 
           await inspector.open();
           const data = await inspector.getTableData();
@@ -178,15 +185,15 @@ export default function({ getService, getPageObjects }) {
         it('Newly saved visualization retains map bounds', async () => {
           const vizName1 = 'Visualization TileMap';
 
-          await PageObjects.visualize.clickMapZoomIn();
-          await PageObjects.visualize.clickMapZoomIn();
+          await PageObjects.tileMap.clickMapZoomIn();
+          await PageObjects.tileMap.clickMapZoomIn();
 
-          const mapBounds = await PageObjects.visualize.getMapBounds();
+          const mapBounds = await PageObjects.tileMap.getMapBounds();
           await inspector.close();
 
           await PageObjects.visualize.saveVisualizationExpectSuccess(vizName1);
 
-          const afterSaveMapBounds = await PageObjects.visualize.getMapBounds();
+          const afterSaveMapBounds = await PageObjects.tileMap.getMapBounds();
 
           await inspector.close();
           // For some reason the values are slightly different, so we can't check that they are equal. But we did
@@ -207,17 +214,17 @@ export default function({ getService, getPageObjects }) {
         });
 
         it('when not checked does not add filters to aggregation', async () => {
-          await PageObjects.visualize.toggleOpenEditor(2);
-          await PageObjects.visualize.setIsFilteredByCollarCheckbox(false);
-          await PageObjects.visualize.clickGo();
+          await PageObjects.visEditor.toggleOpenEditor(2);
+          await PageObjects.visEditor.setIsFilteredByCollarCheckbox(false);
+          await PageObjects.visEditor.clickGo();
           await inspector.open();
           await inspector.expectTableHeaders(['geohash_grid', 'Count', 'Geo Centroid']);
           await inspector.close();
         });
 
         after(async () => {
-          await PageObjects.visualize.setIsFilteredByCollarCheckbox(true);
-          await PageObjects.visualize.clickGo();
+          await PageObjects.visEditor.setIsFilteredByCollarCheckbox(true);
+          await PageObjects.visEditor.clickGo();
         });
       });
     });
@@ -245,18 +252,18 @@ export default function({ getService, getPageObjects }) {
 
         const zoomLevel = 9;
         for (let i = 0; i < zoomLevel; i++) {
-          await PageObjects.visualize.clickMapZoomIn();
+          await PageObjects.tileMap.clickMapZoomIn();
         }
       });
 
       beforeEach(async function() {
-        await PageObjects.visualize.clickMapZoomIn(waitForLoading);
+        await PageObjects.tileMap.clickMapZoomIn(waitForLoading);
       });
 
       afterEach(async function() {
         if (!last) {
           await PageObjects.common.sleep(toastDefaultLife);
-          await PageObjects.visualize.clickMapZoomOut(waitForLoading);
+          await PageObjects.tileMap.clickMapZoomOut(waitForLoading);
         }
       });
 
@@ -270,11 +277,11 @@ export default function({ getService, getPageObjects }) {
 
       it('should suppress zoom warning if suppress warnings button clicked', async () => {
         last = true;
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
         await find.clickByCssSelector('[data-test-subj="suppressZoomWarnings"]');
-        await PageObjects.visualize.clickMapZoomOut(waitForLoading);
+        await PageObjects.tileMap.clickMapZoomOut(waitForLoading);
         await testSubjects.waitForDeleted('suppressZoomWarnings');
-        await PageObjects.visualize.clickMapZoomIn(waitForLoading);
+        await PageObjects.tileMap.clickMapZoomIn(waitForLoading);
 
         await testSubjects.missingOrFail('maxZoomWarning');
       });
diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
index 3ce12a49a1daa..0204e5d74bb80 100644
--- a/test/functional/apps/visualize/_tsvb_chart.ts
+++ b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const log = getService('log');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['visualize', 'visualBuilder', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visualBuilder', 'timePicker', 'visChart']);
 
   describe('visual builder', function describeIndexTests() {
     this.tags('smoke');
@@ -80,7 +80,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should verify gauge label and count display', async () => {
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
         const labelString = await PageObjects.visualBuilder.getGaugeLabel();
         expect(labelString).to.be('Count');
         const gaugeCount = await PageObjects.visualBuilder.getGaugeCount();
@@ -96,7 +96,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should verify topN label and count display', async () => {
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
         const labelString = await PageObjects.visualBuilder.getTopNLabel();
         expect(labelString).to.be('Count');
         const gaugeCount = await PageObjects.visualBuilder.getTopNCount();
diff --git a/test/functional/apps/visualize/_tsvb_table.ts b/test/functional/apps/visualize/_tsvb_table.ts
index a36b6facb3039..5808212559b18 100644
--- a/test/functional/apps/visualize/_tsvb_table.ts
+++ b/test/functional/apps/visualize/_tsvb_table.ts
@@ -21,7 +21,11 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function({ getPageObjects }: FtrProviderContext) {
-  const { visualBuilder, visualize } = getPageObjects(['visualBuilder', 'visualize']);
+  const { visualBuilder, visualize, visChart } = getPageObjects([
+    'visualBuilder',
+    'visualize',
+    'visChart',
+  ]);
 
   describe('visual builder', function describeIndexTests() {
     describe('table', () => {
@@ -32,7 +36,7 @@ export default function({ getPageObjects }: FtrProviderContext) {
         await visualBuilder.checkTableTabIsPresent();
         await visualBuilder.selectGroupByField('machine.os.raw');
         await visualBuilder.setColumnLabelValue('OS');
-        await visualize.waitForVisualizationRenderingStabilized();
+        await visChart.waitForVisualizationRenderingStabilized();
       });
 
       it('should display correct values on changing group by field and column name', async () => {
diff --git a/test/functional/apps/visualize/_vega_chart.js b/test/functional/apps/visualize/_vega_chart.js
index 224dec7ef2a71..df0603c7f95f5 100644
--- a/test/functional/apps/visualize/_vega_chart.js
+++ b/test/functional/apps/visualize/_vega_chart.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['common', 'header', 'timePicker', 'visualize']);
+  const PageObjects = getPageObjects(['timePicker', 'visualize', 'visChart', 'vegaChart']);
   const filterBar = getService('filterBar');
   const inspector = getService('inspector');
   const log = getService('log');
@@ -40,7 +40,7 @@ export default function({ getService, getPageObjects }) {
         });
 
         it.skip('should have some initial vega spec text', async function() {
-          const vegaSpec = await PageObjects.visualize.getVegaSpec();
+          const vegaSpec = await PageObjects.vegaChart.getSpec();
           expect(vegaSpec)
             .to.contain('{')
             .and.to.contain('data');
@@ -48,7 +48,7 @@ export default function({ getService, getPageObjects }) {
         });
 
         it('should have view and control containers', async function() {
-          const view = await PageObjects.visualize.getVegaViewContainer();
+          const view = await PageObjects.vegaChart.getViewContainer();
           expect(view).to.be.ok();
           const size = await view.getSize();
           expect(size)
@@ -57,7 +57,7 @@ export default function({ getService, getPageObjects }) {
           expect(size.width).to.be.above(0);
           expect(size.height).to.be.above(0);
 
-          const controls = await PageObjects.visualize.getVegaControlContainer();
+          const controls = await PageObjects.vegaChart.getControlContainer();
           expect(controls).to.be.ok();
         });
       });
@@ -73,9 +73,9 @@ export default function({ getService, getPageObjects }) {
         });
 
         it.skip('should render different data in response to filter change', async function() {
-          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart');
+          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart');
           await filterBar.addFilter('@tags.raw', 'is', 'error');
-          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart_filtered');
+          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart_filtered');
         });
       });
     });
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
index 9828c5718db17..a13ac3012e829 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -23,8 +23,9 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
+  const testSubjects = getService('testSubjects');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('vertical bar chart', function() {
     const vizName1 = 'Visualization VerticalBarChart';
@@ -37,13 +38,13 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch();
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       log.debug('Bucket = X-Axis');
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Aggregation = Date Histogram');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
       log.debug('Field = @timestamp');
-      await PageObjects.visualize.selectField('@timestamp');
+      await PageObjects.visEditor.selectField('@timestamp');
       // leaving Interval set to Auto
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
     };
 
     before(initBarChart);
@@ -52,7 +53,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -91,7 +92,7 @@ export default function({ getService, getPageObjects }) {
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
       // try sleeping a bit before getting that data
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData();
+        const data = await PageObjects.visChart.getBarChartData();
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
@@ -202,15 +203,15 @@ export default function({ getService, getPageObjects }) {
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
       // try sleeping a bit before getting that data
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData();
+        const data = await PageObjects.visChart.getBarChartData();
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
       });
 
-      await PageObjects.visualize.toggleOpenEditor(2);
-      await PageObjects.visualize.clickDropPartialBuckets();
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.toggleOpenEditor(2);
+      await PageObjects.visEditor.clickDropPartialBuckets();
+      await PageObjects.visEditor.clickGo();
 
       expectedChartValues = [
         218,
@@ -278,7 +279,7 @@ export default function({ getService, getPageObjects }) {
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
       // try sleeping a bit before getting that data
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData();
+        const data = await PageObjects.visChart.getBarChartData();
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
@@ -290,13 +291,13 @@ export default function({ getService, getPageObjects }) {
       const axisId = 'ValueAxis-1';
 
       it('should show ticks on selecting log scale', async () => {
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions(axisId);
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
-        await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -322,9 +323,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting log scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -350,10 +351,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '0',
           '200',
@@ -369,18 +370,18 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
         const expectedLabels = [
           '0',
@@ -397,9 +398,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
@@ -408,11 +409,11 @@ export default function({ getService, getPageObjects }) {
     describe('vertical bar in percent mode', async () => {
       it('should show ticks with percentage values', async function() {
         const axisId = 'ValueAxis-1';
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions(axisId);
-        await PageObjects.visualize.selectYAxisMode('percentage');
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisMode('percentage');
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         expect(labels[0]).to.eql('0%');
         expect(labels[labels.length - 1]).to.eql('100%');
       });
@@ -422,36 +423,36 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('response.raw');
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('response.raw');
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+        await PageObjects.visEditor.clickGo();
 
         const expectedEntries = ['200', '404', '503'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
 
       it('should allow custom sorting of series', async () => {
-        await PageObjects.visualize.toggleOpenEditor(1, 'false');
-        await PageObjects.visualize.selectCustomSortMetric(3, 'Min', 'bytes');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleOpenEditor(1, 'false');
+        await PageObjects.visEditor.selectCustomSortMetric(3, 'Min', 'bytes');
+        await PageObjects.visEditor.clickGo();
 
         const expectedEntries = ['404', '200', '503'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
 
       it('should correctly filter by legend', async () => {
-        await PageObjects.visualize.filterLegend('200');
-        await PageObjects.visualize.waitForVisualization();
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        await PageObjects.visChart.filterLegend('200');
+        await PageObjects.visChart.waitForVisualization();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         const expectedEntries = ['200'];
         expect(legendEntries).to.eql(expectedEntries);
         await filterBar.removeFilter('response.raw');
-        await PageObjects.visualize.waitForVisualization();
+        await PageObjects.visChart.waitForVisualization();
       });
     });
 
@@ -459,18 +460,18 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('response.raw');
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-
-        await PageObjects.visualize.toggleOpenEditor(3, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('machine.os');
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('response.raw');
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+
+        await PageObjects.visEditor.toggleOpenEditor(3, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('machine.os');
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+        await PageObjects.visEditor.clickGo();
 
         const expectedEntries = [
           '200 - win 8',
@@ -489,18 +490,18 @@ export default function({ getService, getPageObjects }) {
           '404 - win 8',
           '404 - win xp',
         ];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
 
       it('should show correct series when disabling first agg', async function() {
         // this will avoid issues with the play tooltip covering the disable agg button
-        await PageObjects.visualize.scrollSubjectIntoView('metricsAggGroup');
-        await PageObjects.visualize.toggleDisabledAgg(3);
-        await PageObjects.visualize.clickGo();
+        await testSubjects.scrollIntoView('metricsAggGroup');
+        await PageObjects.visEditor.toggleDisabledAgg(3);
+        await PageObjects.visEditor.clickGo();
 
         const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
     });
@@ -509,24 +510,24 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.toggleOpenEditor(1);
-        await PageObjects.visualize.selectAggregation('Derivative', 'metrics');
-        await PageObjects.visualize.waitForVisualizationRenderingStabilized();
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.toggleOpenEditor(1);
+        await PageObjects.visEditor.selectAggregation('Derivative', 'metrics');
+        await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+        await PageObjects.visEditor.clickGo();
 
         const expectedEntries = ['Derivative of Count'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
 
       it('should show an error if last bucket aggregation is terms', async () => {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('response.raw');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('response.raw');
 
-        const errorMessage = await PageObjects.visualize.getBucketErrorMessage();
+        const errorMessage = await PageObjects.visEditor.getBucketErrorMessage();
         expect(errorMessage).to.contain('Last bucket aggregation must be "Date Histogram"');
       });
     });
diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
index ddfe80635c509..5a7e86d1a107f 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
@@ -23,7 +23,7 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'visEditor', 'visChart']);
 
   describe.skip('vertical bar chart with index without time filter', function() {
     const vizName1 = 'Visualization VerticalBarChart without time filter';
@@ -38,13 +38,13 @@ export default function({ getService, getPageObjects }) {
       );
       await PageObjects.common.sleep(500);
       log.debug('Bucket = X-Axis');
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Aggregation = Date Histogram');
-      await PageObjects.visualize.selectAggregation('Date Histogram');
+      await PageObjects.visEditor.selectAggregation('Date Histogram');
       log.debug('Field = @timestamp');
-      await PageObjects.visualize.selectField('@timestamp');
-      await PageObjects.visualize.setCustomInterval('3h');
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visEditor.selectField('@timestamp');
+      await PageObjects.visEditor.setInterval('3h', { type: 'custom' });
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
     };
 
     before(initBarChart);
@@ -53,7 +53,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
 
       await PageObjects.visualize.loadSavedVisualization(vizName1);
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
     });
 
     it('should have inspector enabled', async function() {
@@ -92,7 +92,7 @@ export default function({ getService, getPageObjects }) {
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
       // try sleeping a bit before getting that data
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData();
+        const data = await PageObjects.visChart.getBarChartData();
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
@@ -133,13 +133,13 @@ export default function({ getService, getPageObjects }) {
       const axisId = 'ValueAxis-1';
 
       it('should show ticks on selecting log scale', async () => {
-        await PageObjects.visualize.clickMetricsAndAxes();
-        await PageObjects.visualize.clickYAxisOptions(axisId);
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'log');
-        await PageObjects.visualize.clickYAxisAdvancedOptions(axisId);
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId);
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -165,9 +165,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting log scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '2',
           '3',
@@ -193,10 +193,10 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = [
           '0',
           '200',
@@ -212,18 +212,18 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting square root scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
 
       it('should show ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear');
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
         const expectedLabels = [
           '0',
@@ -240,9 +240,9 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should show filtered ticks on selecting linear scale', async () => {
-        await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true);
-        await PageObjects.visualize.clickGo();
-        const labels = await PageObjects.visualize.getYAxisLabels();
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
         expect(labels).to.eql(expectedLabels);
       });
@@ -252,18 +252,18 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('response.raw');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('response.raw');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         await PageObjects.common.sleep(1003);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const expectedEntries = ['200', '404', '503'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
     });
@@ -272,20 +272,20 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('response.raw');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('response.raw');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
-        await PageObjects.visualize.toggleOpenEditor(3, 'false');
-        await PageObjects.visualize.clickBucket('Split series');
-        await PageObjects.visualize.selectAggregation('Terms');
-        await PageObjects.visualize.selectField('machine.os');
+        await PageObjects.visEditor.toggleOpenEditor(3, 'false');
+        await PageObjects.visEditor.clickBucket('Split series');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('machine.os');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         await PageObjects.common.sleep(1003);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const expectedEntries = [
@@ -305,17 +305,17 @@ export default function({ getService, getPageObjects }) {
           '404 - win 8',
           '404 - win xp',
         ];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
 
       it('should show correct series when disabling first agg', async function() {
-        await PageObjects.visualize.toggleDisabledAgg(3);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.toggleDisabledAgg(3);
+        await PageObjects.visEditor.clickGo();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
     });
@@ -324,17 +324,17 @@ export default function({ getService, getPageObjects }) {
       before(initBarChart);
 
       it('should show correct series', async function() {
-        await PageObjects.visualize.toggleOpenEditor(2, 'false');
-        await PageObjects.visualize.toggleOpenEditor(1);
-        await PageObjects.visualize.selectAggregation('Derivative', 'metrics');
+        await PageObjects.visEditor.toggleOpenEditor(2, 'false');
+        await PageObjects.visEditor.toggleOpenEditor(1);
+        await PageObjects.visEditor.selectAggregation('Derivative', 'metrics');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         await PageObjects.common.sleep(1003);
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const expectedEntries = ['Derivative of Count'];
-        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        const legendEntries = await PageObjects.visChart.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
     });
diff --git a/test/functional/apps/visualize/_visualize_listing.js b/test/functional/apps/visualize/_visualize_listing.js
index 63a8a8310d2c1..e277c3c7d104d 100644
--- a/test/functional/apps/visualize/_visualize_listing.js
+++ b/test/functional/apps/visualize/_visualize_listing.js
@@ -19,8 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function({ getPageObjects }) {
-  const PageObjects = getPageObjects(['visualize', 'header', 'common']);
+export default function({ getService, getPageObjects }) {
+  const PageObjects = getPageObjects(['visualize', 'visEditor']);
+  const listingTable = getService('listingTable');
 
   // FLAKY: https://github.com/elastic/kibana/issues/40912
   describe.skip('visualize listing page', function describeIndexTests() {
@@ -36,7 +37,7 @@ export default function({ getPageObjects }) {
         // type markdown is used for simplicity
         await PageObjects.visualize.createSimpleMarkdownViz(vizName);
         await PageObjects.visualize.gotoVisualizationLandingPage();
-        const visCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        const visCount = await listingTable.getItemsCount('visualize');
         expect(visCount).to.equal(1);
       });
 
@@ -45,11 +46,11 @@ export default function({ getPageObjects }) {
         await PageObjects.visualize.createSimpleMarkdownViz(vizName + '2');
         await PageObjects.visualize.gotoVisualizationLandingPage();
 
-        let visCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        let visCount = await listingTable.getItemsCount('visualize');
         expect(visCount).to.equal(3);
 
         await PageObjects.visualize.deleteAllVisualizations();
-        visCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        visCount = await listingTable.getItemsCount('visualize');
         expect(visCount).to.equal(0);
       });
     });
@@ -60,45 +61,45 @@ export default function({ getPageObjects }) {
         await PageObjects.visualize.gotoVisualizationLandingPage();
         await PageObjects.visualize.navigateToNewVisualization();
         await PageObjects.visualize.clickMarkdownWidget();
-        await PageObjects.visualize.setMarkdownTxt('HELLO');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.setMarkdownTxt('HELLO');
+        await PageObjects.visEditor.clickGo();
         await PageObjects.visualize.saveVisualization('Hello World');
         await PageObjects.visualize.gotoVisualizationLandingPage();
       });
 
       it('matches on the first word', async function() {
-        await PageObjects.visualize.searchForItemWithName('Hello');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('Hello');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(1);
       });
 
       it('matches the second word', async function() {
-        await PageObjects.visualize.searchForItemWithName('World');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('World');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(1);
       });
 
       it('matches the second word prefix', async function() {
-        await PageObjects.visualize.searchForItemWithName('Wor');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('Wor');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(1);
       });
 
       it('does not match mid word', async function() {
-        await PageObjects.visualize.searchForItemWithName('orld');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('orld');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(0);
       });
 
       it('is case insensitive', async function() {
-        await PageObjects.visualize.searchForItemWithName('hello world');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('hello world');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(1);
       });
 
       it('is using AND operator', async function() {
-        await PageObjects.visualize.searchForItemWithName('hello banana');
-        const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable();
+        await listingTable.searchForItemWithName('hello banana');
+        const itemCount = await listingTable.getItemsCount('visualize');
         expect(itemCount).to.equal(0);
       });
     });
diff --git a/test/functional/apps/visualize/input_control_vis/chained_controls.js b/test/functional/apps/visualize/input_control_vis/chained_controls.js
index 96d9dae519b51..b56a37218aba5 100644
--- a/test/functional/apps/visualize/input_control_vis/chained_controls.js
+++ b/test/functional/apps/visualize/input_control_vis/chained_controls.js
@@ -21,7 +21,7 @@ import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
   const find = getService('find');
   const comboBox = getService('comboBox');
@@ -65,7 +65,7 @@ export default function({ getService, getPageObjects }) {
     it('should create a seperate filter pill for parent control and child control', async () => {
       await comboBox.set('listControlSelect1', '14.61.182.136');
 
-      await PageObjects.visualize.inputControlSubmit();
+      await PageObjects.visEditor.inputControlSubmit();
 
       const hasParentControlFilter = await filterBar.hasFilter('geo.src', 'BR');
       expect(hasParentControlFilter).to.equal(true);
diff --git a/test/functional/apps/visualize/input_control_vis/dynamic_options.js b/test/functional/apps/visualize/input_control_vis/dynamic_options.js
index 2354855f12079..d78c780a728a7 100644
--- a/test/functional/apps/visualize/input_control_vis/dynamic_options.js
+++ b/test/functional/apps/visualize/input_control_vis/dynamic_options.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const comboBox = getService('comboBox');
 
   describe('dynamic options', () => {
@@ -55,7 +55,7 @@ export default function({ getService, getPageObjects }) {
 
       it('should not fetch new options when non-string is filtered', async () => {
         await comboBox.set('fieldSelect-0', 'clientip');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
 
         const initialOptions = await comboBox.getOptionsList('listControlSelect0');
         expect(
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.js
index 1c3f63e94ae75..8e8891ac585b3 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_options.js
+++ b/test/functional/apps/visualize/input_control_vis/input_control_options.js
@@ -21,7 +21,7 @@ import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
   const inspector = getService('inspector');
   const find = getService('find');
@@ -38,11 +38,11 @@ export default function({ getService, getPageObjects }) {
         'Jan 1, 2017 @ 00:00:00.000',
         'Jan 1, 2017 @ 00:00:00.000'
       );
-      await PageObjects.visualize.clickVisEditorTab('controls');
-      await PageObjects.visualize.addInputControl();
+      await PageObjects.visEditor.clickVisEditorTab('controls');
+      await PageObjects.visEditor.addInputControl();
       await comboBox.set('indexPatternSelect-0', 'logstash- ');
       await comboBox.set('fieldSelect-0', FIELD_NAME);
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
     });
 
     it('should not have inspector enabled', async function() {
@@ -89,7 +89,7 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should add filter pill when submit button is clicked', async () => {
-        await PageObjects.visualize.inputControlSubmit();
+        await PageObjects.visEditor.inputControlSubmit();
 
         const hasFilter = await filterBar.hasFilter(FIELD_NAME, 'ios');
         expect(hasFilter).to.equal(true);
@@ -98,7 +98,7 @@ export default function({ getService, getPageObjects }) {
       it('should replace existing filter pill(s) when new item is selected', async () => {
         await comboBox.clear('listControlSelect0');
         await comboBox.set('listControlSelect0', 'osx');
-        await PageObjects.visualize.inputControlSubmit();
+        await PageObjects.visEditor.inputControlSubmit();
         await PageObjects.common.sleep(1000);
 
         const hasOldFilter = await filterBar.hasFilter(FIELD_NAME, 'ios');
@@ -117,11 +117,11 @@ export default function({ getService, getPageObjects }) {
 
       it('should clear form when Clear button is clicked but not remove filter pill', async () => {
         await comboBox.set('listControlSelect0', 'ios');
-        await PageObjects.visualize.inputControlSubmit();
+        await PageObjects.visEditor.inputControlSubmit();
         const hasFilterBeforeClearBtnClicked = await filterBar.hasFilter(FIELD_NAME, 'ios');
         expect(hasFilterBeforeClearBtnClicked).to.equal(true);
 
-        await PageObjects.visualize.inputControlClear();
+        await PageObjects.visEditor.inputControlClear();
         const hasValue = await comboBox.doesComboBoxHaveSelectedOptions('listControlSelect0');
         expect(hasValue).to.equal(false);
 
@@ -130,7 +130,7 @@ export default function({ getService, getPageObjects }) {
       });
 
       it('should remove filter pill when cleared form is submitted', async () => {
-        await PageObjects.visualize.inputControlSubmit();
+        await PageObjects.visEditor.inputControlSubmit();
         const hasFilter = await filterBar.hasFilter(FIELD_NAME, 'ios');
         expect(hasFilter).to.equal(false);
       });
@@ -138,17 +138,17 @@ export default function({ getService, getPageObjects }) {
 
     describe('updateFiltersOnChange is true', () => {
       before(async () => {
-        await PageObjects.visualize.clickVisEditorTab('options');
-        await PageObjects.visualize.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickVisEditorTab('options');
+        await PageObjects.visEditor.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
+        await PageObjects.visEditor.clickGo();
       });
 
       after(async () => {
-        await PageObjects.visualize.clickVisEditorTab('options');
-        await PageObjects.visualize.uncheckSwitch(
+        await PageObjects.visEditor.clickVisEditorTab('options');
+        await PageObjects.visEditor.uncheckSwitch(
           'inputControlEditorUpdateFiltersOnChangeCheckbox'
         );
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickGo();
       });
 
       it('should not display staging control buttons', async () => {
@@ -173,9 +173,9 @@ export default function({ getService, getPageObjects }) {
 
     describe('useTimeFilter', () => {
       it('should use global time filter when getting terms', async () => {
-        await PageObjects.visualize.clickVisEditorTab('options');
-        await PageObjects.visualize.checkCheckbox('inputControlEditorUseTimeFilterCheckbox');
-        await PageObjects.visualize.clickGo();
+        await PageObjects.visEditor.clickVisEditorTab('options');
+        await testSubjects.setCheckbox('inputControlEditorUseTimeFilterCheckbox', 'check');
+        await PageObjects.visEditor.clickGo();
 
         // Expect control to be disabled because no terms could be gathered with time filter applied
         const input = await find.byCssSelector('[data-test-subj="inputControl0"] input');
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_range.ts b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
index 2d6550de5dec9..f48ba7b54daf1 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_range.ts
+++ b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
@@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const find = getService('find');
-  const { visualize } = getPageObjects(['visualize']);
+  const { visualize, visEditor } = getPageObjects(['visualize', 'visEditor']);
 
   describe('input control range', () => {
     before(async () => {
@@ -35,36 +35,22 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should add filter with scripted field', async () => {
-      await visualize.addInputControl('range');
-      await visualize.setFilterParams({
-        indexPattern: 'kibana_sample_data_flights',
-        field: 'hour_of_day',
-      });
-      await visualize.clickGo();
-      await visualize.setFilterRange({
-        min: '7',
-        max: '10',
-      });
-      await visualize.inputControlSubmit();
+      await visEditor.addInputControl('range');
+      await visEditor.setFilterParams(0, 'kibana_sample_data_flights', 'hour_of_day');
+      await visEditor.clickGo();
+      await visEditor.setFilterRange(0, '7', '10');
+      await visEditor.inputControlSubmit();
       const controlFilters = await find.allByCssSelector('[data-test-subj^="filter"]');
       expect(controlFilters).to.have.length(1);
       expect(await controlFilters[0].getVisibleText()).to.equal('hour_of_day: 7 to 10');
     });
 
     it('should add filter with price field', async () => {
-      await visualize.addInputControl('range');
-      await visualize.setFilterParams({
-        aggNth: 1,
-        indexPattern: 'kibana_sample_data_flights',
-        field: 'AvgTicketPrice',
-      });
-      await visualize.clickGo();
-      await visualize.setFilterRange({
-        aggNth: 1,
-        min: '400',
-        max: '999',
-      });
-      await visualize.inputControlSubmit();
+      await visEditor.addInputControl('range');
+      await visEditor.setFilterParams(1, 'kibana_sample_data_flights', 'AvgTicketPrice');
+      await visEditor.clickGo();
+      await visEditor.setFilterRange(1, '400', '999');
+      await visEditor.inputControlSubmit();
       const controlFilters = await find.allByCssSelector('[data-test-subj^="filter"]');
       expect(controlFilters).to.have.length(2);
       expect(await controlFilters[1].getVisibleText()).to.equal('AvgTicketPrice: $400 to $999');
diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts
index 5a104c8d17bf2..5526243ea2bbd 100644
--- a/test/functional/page_objects/index.ts
+++ b/test/functional/page_objects/index.ts
@@ -39,7 +39,6 @@ import { NewsfeedPageProvider } from './newsfeed_page';
 import { PointSeriesPageProvider } from './point_series_page';
 // @ts-ignore not TS yet
 import { SettingsPageProvider } from './settings_page';
-// @ts-ignore not TS yet
 import { SharePageProvider } from './share_page';
 // @ts-ignore not TS yet
 import { ShieldPageProvider } from './shield_page';
@@ -48,8 +47,12 @@ import { TimePickerPageProvider } from './time_picker';
 // @ts-ignore not TS yet
 import { TimelionPageProvider } from './timelion_page';
 import { VisualBuilderPageProvider } from './visual_builder_page';
-// @ts-ignore not TS yet
 import { VisualizePageProvider } from './visualize_page';
+import { VisualizeEditorPageProvider } from './visualize_editor_page';
+import { VisualizeChartPageProvider } from './visualize_chart_page';
+import { TileMapPageProvider } from './tile_map_page';
+import { TagCloudPageProvider } from './tag_cloud_page';
+import { VegaChartPageProvider } from './vega_chart_page';
 
 export const pageObjects = {
   common: CommonPageProvider,
@@ -70,4 +73,9 @@ export const pageObjects = {
   timePicker: TimePickerPageProvider,
   visualBuilder: VisualBuilderPageProvider,
   visualize: VisualizePageProvider,
+  visEditor: VisualizeEditorPageProvider,
+  visChart: VisualizeChartPageProvider,
+  tileMap: TileMapPageProvider,
+  tagCloud: TagCloudPageProvider,
+  vegaChart: VegaChartPageProvider,
 };
diff --git a/test/functional/page_objects/point_series_page.js b/test/functional/page_objects/point_series_page.js
index 9172809eb73e5..74bf07b59bc38 100644
--- a/test/functional/page_objects/point_series_page.js
+++ b/test/functional/page_objects/point_series_page.js
@@ -23,10 +23,6 @@ export function PointSeriesPageProvider({ getService }) {
   const find = getService('find');
 
   class PointSeriesVis {
-    async clickOptions() {
-      return await testSubjects.click('visEditorTaboptions');
-    }
-
     async clickAxisOptions() {
       return await testSubjects.click('visEditorTabadvanced');
     }
diff --git a/test/functional/page_objects/share_page.ts b/test/functional/page_objects/share_page.ts
index 906effcb54a26..fc8db9b78a03f 100644
--- a/test/functional/page_objects/share_page.ts
+++ b/test/functional/page_objects/share_page.ts
@@ -19,10 +19,9 @@
 
 import { FtrProviderContext } from '../ftr_provider_context';
 
-export function SharePageProvider({ getService, getPageObjects }: FtrProviderContext) {
+export function SharePageProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
-  const PageObjects = getPageObjects(['visualize', 'common']);
   const log = getService('log');
 
   class SharePage {
@@ -78,7 +77,7 @@ export function SharePageProvider({ getService, getPageObjects }: FtrProviderCon
 
     async checkShortenUrl() {
       const shareForm = await testSubjects.find('shareUrlForm');
-      await PageObjects.visualize.checkCheckbox('useShortUrl');
+      await testSubjects.setCheckbox('useShortUrl', 'check');
       await shareForm.waitForDeletedByCssSelector('.euiLoadingSpinner');
     }
 
diff --git a/test/functional/page_objects/tag_cloud_page.ts b/test/functional/page_objects/tag_cloud_page.ts
new file mode 100644
index 0000000000000..7d87caa39b2fb
--- /dev/null
+++ b/test/functional/page_objects/tag_cloud_page.ts
@@ -0,0 +1,52 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { FtrProviderContext } from '../ftr_provider_context';
+import { WebElementWrapper } from '../services/lib/web_element_wrapper';
+
+export function TagCloudPageProvider({ getService, getPageObjects }: FtrProviderContext) {
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const { header, visChart } = getPageObjects(['header', 'visChart']);
+
+  class TagCloudPage {
+    public async selectTagCloudTag(tagDisplayText: string) {
+      await testSubjects.click(tagDisplayText);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async getTextTag() {
+      await visChart.waitForVisualization();
+      const elements = await find.allByCssSelector('text');
+      return await Promise.all(elements.map(async element => await element.getVisibleText()));
+    }
+
+    public async getTextSizes() {
+      const tags = await find.allByCssSelector('text');
+      async function returnTagSize(tag: WebElementWrapper) {
+        const style = await tag.getAttribute('style');
+        const fontSize = style.match(/font-size: ([^;]*);/);
+        return fontSize ? fontSize[1] : '';
+      }
+      return await Promise.all(tags.map(returnTagSize));
+    }
+  }
+
+  return new TagCloudPage();
+}
diff --git a/test/functional/page_objects/tile_map_page.ts b/test/functional/page_objects/tile_map_page.ts
new file mode 100644
index 0000000000000..b41578f782af4
--- /dev/null
+++ b/test/functional/page_objects/tile_map_page.ts
@@ -0,0 +1,102 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { FtrProviderContext } from '../ftr_provider_context';
+
+export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderContext) {
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const log = getService('log');
+  const inspector = getService('inspector');
+  const { header } = getPageObjects(['header']);
+
+  class TileMapPage {
+    public async getZoomSelectors(zoomSelector: string) {
+      return await find.allByCssSelector(zoomSelector);
+    }
+
+    public async clickMapButton(zoomSelector: string, waitForLoading?: boolean) {
+      await retry.try(async () => {
+        const zooms = await this.getZoomSelectors(zoomSelector);
+        await Promise.all(zooms.map(async zoom => await zoom.click()));
+        if (waitForLoading) {
+          await header.waitUntilLoadingHasFinished();
+        }
+      });
+    }
+
+    public async getVisualizationRequest() {
+      log.debug('getVisualizationRequest');
+      await inspector.open();
+      await testSubjects.click('inspectorViewChooser');
+      await testSubjects.click('inspectorViewChooserRequests');
+      await testSubjects.click('inspectorRequestDetailRequest');
+      return await testSubjects.getVisibleText('inspectorRequestBody');
+    }
+
+    public async getMapBounds(): Promise<object> {
+      const request = await this.getVisualizationRequest();
+      const requestObject = JSON.parse(request);
+      return requestObject.aggs.filter_agg.filter.geo_bounding_box['geo.coordinates'];
+    }
+
+    public async clickMapZoomIn(waitForLoading = true) {
+      await this.clickMapButton('a.leaflet-control-zoom-in', waitForLoading);
+    }
+
+    public async clickMapZoomOut(waitForLoading = true) {
+      await this.clickMapButton('a.leaflet-control-zoom-out', waitForLoading);
+    }
+
+    public async getMapZoomEnabled(zoomSelector: string): Promise<boolean> {
+      const zooms = await this.getZoomSelectors(zoomSelector);
+      const classAttributes = await Promise.all(
+        zooms.map(async zoom => await zoom.getAttribute('class'))
+      );
+      return !classAttributes.join('').includes('leaflet-disabled');
+    }
+
+    public async zoomAllTheWayOut(): Promise<void> {
+      // we can tell we're at level 1 because zoom out is disabled
+      return await retry.try(async () => {
+        await this.clickMapZoomOut();
+        const enabled = await this.getMapZoomOutEnabled();
+        // should be able to zoom more as current config has 0 as min level.
+        if (enabled) {
+          throw new Error('Not fully zoomed out yet');
+        }
+      });
+    }
+
+    public async getMapZoomInEnabled() {
+      return await this.getMapZoomEnabled('a.leaflet-control-zoom-in');
+    }
+
+    public async getMapZoomOutEnabled() {
+      return await this.getMapZoomEnabled('a.leaflet-control-zoom-out');
+    }
+
+    public async clickMapFitDataBounds() {
+      return await this.clickMapButton('a.fa-crop');
+    }
+  }
+
+  return new TileMapPage();
+}
diff --git a/test/functional/page_objects/vega_chart_page.ts b/test/functional/page_objects/vega_chart_page.ts
new file mode 100644
index 0000000000000..9931ebebef6ef
--- /dev/null
+++ b/test/functional/page_objects/vega_chart_page.ts
@@ -0,0 +1,91 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export function VegaChartPageProvider({
+  getService,
+  getPageObjects,
+  updateBaselines,
+}: FtrProviderContext & { updateBaselines: boolean }) {
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const browser = getService('browser');
+  const screenshot = getService('screenshots');
+  const log = getService('log');
+  const { visEditor, visChart } = getPageObjects(['visEditor', 'visChart']);
+
+  class VegaChartPage {
+    public async getSpec() {
+      // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file?
+      const editor = await testSubjects.find('vega-editor');
+      const lines = await editor.findAllByClassName('ace_line_group');
+      const linesText = await Promise.all(
+        lines.map(async line => {
+          return await line.getVisibleText();
+        })
+      );
+      return linesText.join('\n');
+    }
+
+    public async getViewContainer() {
+      return await find.byCssSelector('div.vgaVis__view');
+    }
+
+    public async getControlContainer() {
+      return await find.byCssSelector('div.vgaVis__controls');
+    }
+
+    /**
+     * Removes chrome and takes a small screenshot of a vis to compare against a baseline.
+     * @param {string} name The name of the baseline image.
+     * @param {object} opts Options object.
+     * @param {number} opts.threshold Threshold for allowed variance when comparing images.
+     */
+    public async expectVisToMatchScreenshot(name: string, opts = { threshold: 0.05 }) {
+      log.debug(`expectVisToMatchScreenshot(${name})`);
+
+      // Collapse sidebar and inject some CSS to hide the nav so we have a focused screenshot
+      await visEditor.clickEditorSidebarCollapse();
+      await visChart.waitForVisualizationRenderingStabilized();
+      await browser.execute(`
+          var el = document.createElement('style');
+          el.id = '__data-test-style';
+          el.innerHTML = '[data-test-subj="headerGlobalNav"] { display: none; } ';
+          el.innerHTML += '[data-test-subj="top-nav"] { display: none; } ';
+          el.innerHTML += '[data-test-subj="experimentalVisInfo"] { display: none; } ';
+          document.body.appendChild(el);
+        `);
+
+      const percentDifference = await screenshot.compareAgainstBaseline(name, updateBaselines);
+
+      // Reset the chart to its original state
+      await browser.execute(`
+          var el = document.getElementById('__data-test-style');
+          document.body.removeChild(el);
+        `);
+      await visEditor.clickEditorSidebarCollapse();
+      await visChart.waitForVisualizationRenderingStabilized();
+      expect(percentDifference).to.be.lessThan(opts.threshold);
+    }
+  }
+
+  return new VegaChartPage();
+}
diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
index 97d5787350376..2fa59d5fd89d8 100644
--- a/test/functional/page_objects/visual_builder_page.ts
+++ b/test/functional/page_objects/visual_builder_page.ts
@@ -26,7 +26,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
-  const PageObjects = getPageObjects(['common', 'header', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'header', 'visualize', 'timePicker', 'visChart']);
 
   type Duration =
     | 'Milliseconds'
@@ -101,7 +101,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     }
 
     public async getMetricValue() {
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
       const metricValue = await find.byCssSelector('.tvbVisMetric__value--primary');
       return metricValue.getVisibleText();
     }
@@ -110,7 +110,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       const input = await find.byCssSelector('.tvbMarkdownEditor__editor textarea');
       await this.clearMarkdown();
       await input.type(markdown, { charByChar: true });
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
     }
 
     public async clearMarkdown() {
@@ -304,7 +304,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     }
 
     public async getRhythmChartLegendValue(nth = 0) {
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
       const metricValue = (
         await find.allByCssSelector(`.echLegendItem .echLegendItem__displayValue`)
       )[nth];
@@ -348,7 +348,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       const prevAggs = await testSubjects.findAll('aggSelector');
       const elements = await testSubjects.findAll('addMetricAddBtn');
       await elements[nth].click();
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
       await retry.waitFor('new agg is added', async () => {
         const currentAggs = await testSubjects.findAll('aggSelector');
         return currentAggs.length > prevAggs.length;
@@ -485,7 +485,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await this.checkColorPickerPopUpIsPresent();
       await find.setValue('.tvbColorPickerPopUp input', colorHex);
       await this.clickColorPicker();
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
     }
 
     public async checkColorPickerPopUpIsPresent(): Promise<void> {
@@ -494,10 +494,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     }
 
     public async changePanelPreview(nth: number = 0): Promise<void> {
-      const prevRenderingCount = await PageObjects.visualize.getVisualizationRenderingCount();
+      const prevRenderingCount = await PageObjects.visChart.getVisualizationRenderingCount();
       const changePreviewBtnArray = await testSubjects.findAll('AddActivatePanelBtn');
       await changePreviewBtnArray[nth].click();
-      await PageObjects.visualize.waitForRenderingCount(prevRenderingCount + 1);
+      await PageObjects.visChart.waitForRenderingCount(prevRenderingCount + 1);
     }
 
     public async checkPreviewIsDisabled(): Promise<void> {
@@ -508,7 +508,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     public async cloneSeries(nth: number = 0): Promise<void> {
       const cloneBtnArray = await testSubjects.findAll('AddCloneBtn');
       await cloneBtnArray[nth].click();
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
     }
 
     /**
@@ -525,10 +525,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     }
 
     public async deleteSeries(nth: number = 0): Promise<void> {
-      const prevRenderingCount = await PageObjects.visualize.getVisualizationRenderingCount();
+      const prevRenderingCount = await PageObjects.visChart.getVisualizationRenderingCount();
       const cloneBtnArray = await testSubjects.findAll('AddDeleteBtn');
       await cloneBtnArray[nth].click();
-      await PageObjects.visualize.waitForRenderingCount(prevRenderingCount + 1);
+      await PageObjects.visChart.waitForRenderingCount(prevRenderingCount + 1);
     }
 
     public async getLegendItems(): Promise<WebElementWrapper[]> {
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
new file mode 100644
index 0000000000000..138e5758ede7c
--- /dev/null
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -0,0 +1,386 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { FtrProviderContext } from '../ftr_provider_context';
+
+export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const config = getService('config');
+  const find = getService('find');
+  const log = getService('log');
+  const retry = getService('retry');
+  const table = getService('table');
+  const defaultFindTimeout = config.get('timeouts.find');
+  const { common } = getPageObjects(['common']);
+
+  class VisualizeChart {
+    public async getYAxisTitle() {
+      const title = await find.byCssSelector('.y-axis-div .y-axis-title text');
+      return await title.getVisibleText();
+    }
+
+    public async getXAxisLabels() {
+      const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom');
+      const $ = await xAxis.parseDomContent();
+      return $('.x > g > text')
+        .toArray()
+        .map(tick =>
+          $(tick)
+            .text()
+            .trim()
+        );
+    }
+
+    public async getYAxisLabels() {
+      const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left');
+      const $ = await yAxis.parseDomContent();
+      return $('.y > g > text')
+        .toArray()
+        .map(tick =>
+          $(tick)
+            .text()
+            .trim()
+        );
+    }
+
+    /**
+     * Gets the chart data and scales it based on chart height and label.
+     * @param dataLabel data-label value
+     * @param axis  axis value, 'ValueAxis-1' by default
+     *
+     * Returns an array of height values
+     */
+    public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') {
+      const yAxisRatio = await this.getChartYAxisRatio(axis);
+
+      const rectangle = await find.byCssSelector('rect.background');
+      const yAxisHeight = Number(await rectangle.getAttribute('height'));
+      log.debug(`height --------- ${yAxisHeight}`);
+
+      const path = await retry.try(
+        async () =>
+          await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
+      );
+      const data = await path.getAttribute('d');
+      log.debug(data);
+      // This area chart data starts with a 'M'ove to a x,y location, followed
+      // by a bunch of 'L'ines from that point to the next.  Those points are
+      // the values we're going to use to calculate the data values we're testing.
+      // So git rid of the one 'M' and split the rest on the 'L's.
+      const tempArray = data
+        .replace('M ', '')
+        .replace('M', '')
+        .replace(/ L /g, 'L')
+        .replace(/ /g, ',')
+        .split('L');
+      const chartSections = tempArray.length / 2;
+      const chartData = [];
+      for (let i = 0; i < chartSections; i++) {
+        chartData[i] = Math.round((yAxisHeight - Number(tempArray[i].split(',')[1])) * yAxisRatio);
+        log.debug('chartData[i] =' + chartData[i]);
+      }
+      return chartData;
+    }
+
+    /**
+     * Returns the paths that compose an area chart.
+     * @param dataLabel data-label value
+     */
+    public async getAreaChartPaths(dataLabel: string) {
+      const path = await retry.try(
+        async () =>
+          await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
+      );
+      const data = await path.getAttribute('d');
+      log.debug(data);
+      // This area chart data starts with a 'M'ove to a x,y location, followed
+      // by a bunch of 'L'ines from that point to the next.  Those points are
+      // the values we're going to use to calculate the data values we're testing.
+      // So git rid of the one 'M' and split the rest on the 'L's.
+      return data.split('L');
+    }
+
+    /**
+     * Gets the dots and normalizes their height.
+     * @param dataLabel data-label value
+     * @param axis axis value, 'ValueAxis-1' by default
+     */
+    public async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      // 1). get the range/pixel ratio
+      const yAxisRatio = await this.getChartYAxisRatio(axis);
+      // 2). find and save the y-axis pixel size (the chart height)
+      const rectangle = await find.byCssSelector('clipPath rect');
+      const yAxisHeight = Number(await rectangle.getAttribute('height'));
+      // 3). get the visWrapper__chart elements
+      const chartTypes = await retry.try(
+        async () =>
+          await find.allByCssSelector(
+            `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`,
+            defaultFindTimeout * 2
+          )
+      );
+      // 4). for each chart element, find the green circle, then the cy position
+      const chartData = await Promise.all(
+        chartTypes.map(async chart => {
+          const cy = Number(await chart.getAttribute('cy'));
+          // the point_series_options test has data in the billions range and
+          // getting 11 digits of precision with these calculations is very hard
+          return Math.round(Number(((yAxisHeight - cy) * yAxisRatio).toPrecision(6)));
+        })
+      );
+
+      return chartData;
+    }
+
+    /**
+     * Returns bar chart data in pixels
+     * @param dataLabel data-label value
+     * @param axis axis value, 'ValueAxis-1' by default
+     */
+    public async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      const yAxisRatio = await this.getChartYAxisRatio(axis);
+      const svg = await find.byCssSelector('div.chart');
+      const $ = await svg.parseDomContent();
+      const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`)
+        .toArray()
+        .map(chart => {
+          const barHeight = Number($(chart).attr('height'));
+          return Math.round(barHeight * yAxisRatio);
+        });
+
+      return chartData;
+    }
+
+    /**
+     * Returns the range/pixel ratio
+     * @param axis axis value, 'ValueAxis-1' by default
+     */
+    private async getChartYAxisRatio(axis = 'ValueAxis-1') {
+      // 1). get the maximum chart Y-Axis marker value and Y position
+      const maxYAxisChartMarker = await retry.try(
+        async () =>
+          await find.byCssSelector(
+            `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick`
+          )
+      );
+      const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, '');
+      const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y;
+      log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`);
+
+      // 2). get the minimum chart Y-Axis marker value and Y position
+      const minYAxisChartMarker = await find.byCssSelector(
+        'div.visAxis__column--y.visAxis__column--left  > div > div > svg:nth-child(2) > g > g:nth-child(1).tick'
+      );
+      const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', '');
+      const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y;
+      return (Number(maxYLabel) - Number(minYLabel)) / (minYLabelYPosition - maxYLabelYPosition);
+    }
+
+    public async toggleLegend(show = true) {
+      await retry.try(async () => {
+        const isVisible = find.byCssSelector('.visLegend');
+        if ((show && !isVisible) || (!show && isVisible)) {
+          await testSubjects.click('vislibToggleLegend');
+        }
+      });
+    }
+
+    public async filterLegend(name: string) {
+      await this.toggleLegend();
+      await testSubjects.click(`legend-${name}`);
+      const filters = await testSubjects.find(`legend-${name}-filters`);
+      const [filterIn] = await filters.findAllByCssSelector(`input`);
+      await filterIn.click();
+      await this.waitForVisualizationRenderingStabilized();
+    }
+
+    public async doesLegendColorChoiceExist(color: string) {
+      return await testSubjects.exists(`legendSelectColor-${color}`);
+    }
+
+    public async selectNewLegendColorChoice(color: string) {
+      await testSubjects.click(`legendSelectColor-${color}`);
+    }
+
+    public async doesSelectedLegendColorExist(color: string) {
+      return await testSubjects.exists(`legendSelectedColor-${color}`);
+    }
+
+    public async expectError() {
+      await testSubjects.existOrFail('visLibVisualizeError');
+    }
+
+    public async getVisualizationRenderingCount() {
+      const visualizationLoader = await testSubjects.find('visualizationLoader');
+      const renderingCount = await visualizationLoader.getAttribute('data-rendering-count');
+      return Number(renderingCount);
+    }
+
+    public async waitForRenderingCount(minimumCount = 1) {
+      await retry.waitFor(
+        `rendering count to be greater than or equal to [${minimumCount}]`,
+        async () => {
+          const currentRenderingCount = await this.getVisualizationRenderingCount();
+          log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
+          return currentRenderingCount >= minimumCount;
+        }
+      );
+    }
+
+    public async waitForVisualizationRenderingStabilized() {
+      // assuming rendering is done when data-rendering-count is constant within 1000 ms
+      await retry.waitFor('rendering count to stabilize', async () => {
+        const firstCount = await this.getVisualizationRenderingCount();
+        log.debug(`-- firstCount=${firstCount}`);
+
+        await common.sleep(1000);
+
+        const secondCount = await this.getVisualizationRenderingCount();
+        log.debug(`-- secondCount=${secondCount}`);
+
+        return firstCount === secondCount;
+      });
+    }
+
+    public async waitForVisualization() {
+      await this.waitForVisualizationRenderingStabilized();
+      await find.byCssSelector('.visualization');
+    }
+
+    public async getLegendEntries() {
+      const legendEntries = await find.allByCssSelector(
+        '.visLegend__button',
+        defaultFindTimeout * 2
+      );
+      return await Promise.all(
+        legendEntries.map(async chart => await chart.getAttribute('data-label'))
+      );
+    }
+
+    public async openLegendOptionColors(name: string) {
+      await this.waitForVisualizationRenderingStabilized();
+      await retry.try(async () => {
+        // This click has been flaky in opening the legend, hence the retry.  See
+        // https://github.com/elastic/kibana/issues/17468
+        await testSubjects.click(`legend-${name}`);
+        await this.waitForVisualizationRenderingStabilized();
+        // arbitrary color chosen, any available would do
+        const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
+        if (!isOpen) {
+          throw new Error('legend color selector not open');
+        }
+      });
+    }
+
+    public async filterOnTableCell(column: string, row: string) {
+      await retry.try(async () => {
+        const tableVis = await testSubjects.find('tableVis');
+        const cell = await tableVis.findByCssSelector(
+          `tbody tr:nth-child(${row}) td:nth-child(${column})`
+        );
+        await cell.moveMouseTo();
+        const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell);
+        await filterBtn.click();
+      });
+    }
+
+    public async getMarkdownText() {
+      const markdownContainer = await testSubjects.find('markdownBody');
+      return markdownContainer.getVisibleText();
+    }
+
+    public async getMarkdownBodyDescendentText(selector: string) {
+      const markdownContainer = await testSubjects.find('markdownBody');
+      const element = await find.descendantDisplayedByCssSelector(selector, markdownContainer);
+      return element.getVisibleText();
+    }
+
+    /**
+     * If you are writing new tests, you should rather look into getTableVisContent method instead.
+     */
+    public async getTableVisData() {
+      return await testSubjects.getVisibleText('paginated-table-body');
+    }
+
+    /**
+     * This function is the newer function to retrieve data from within a table visualization.
+     * It uses a better return format, than the old getTableVisData, by properly splitting
+     * cell values into arrays. Please use this function for newer tests.
+     */
+    public async getTableVisContent({ stripEmptyRows = true } = {}) {
+      return await retry.try(async () => {
+        const container = await testSubjects.find('tableVis');
+        const allTables = await testSubjects.findAllDescendant('paginated-table-body', container);
+
+        if (allTables.length === 0) {
+          return [];
+        }
+
+        const allData = await Promise.all(
+          allTables.map(async t => {
+            let data = await table.getDataFromElement(t);
+            if (stripEmptyRows) {
+              data = data.filter(row => row.length > 0 && row.some(cell => cell.trim().length > 0));
+            }
+            return data;
+          })
+        );
+
+        if (allTables.length === 1) {
+          // If there was only one table we return only the data for that table
+          // This prevents an unnecessary array around that single table, which
+          // is the case we have in most tests.
+          return allData[0];
+        }
+
+        return allData;
+      });
+    }
+
+    public async getMetric() {
+      const elements = await find.allByCssSelector(
+        '[data-test-subj="visualizationLoader"] .mtrVis__container'
+      );
+      const values = await Promise.all(
+        elements.map(async element => {
+          const text = await element.getVisibleText();
+          return text;
+        })
+      );
+      return values
+        .filter(item => item.length > 0)
+        .reduce((arr: string[], item) => arr.concat(item.split('\n')), []);
+    }
+
+    public async getGaugeValue() {
+      const elements = await find.allByCssSelector(
+        '[data-test-subj="visualizationLoader"] .chart svg text'
+      );
+      const values = await Promise.all(
+        elements.map(async element => {
+          const text = await element.getVisibleText();
+          return text;
+        })
+      );
+      return values.filter(item => item.length > 0);
+    }
+  }
+
+  return new VisualizeChart();
+}
diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
new file mode 100644
index 0000000000000..7e512975356f3
--- /dev/null
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -0,0 +1,462 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 expect from '@kbn/expect/expect.js';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrProviderContext) {
+  const find = getService('find');
+  const log = getService('log');
+  const retry = getService('retry');
+  const browser = getService('browser');
+  const testSubjects = getService('testSubjects');
+  const comboBox = getService('comboBox');
+  const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']);
+
+  interface IntervalOptions {
+    type?: 'default' | 'numeric' | 'custom';
+    aggNth?: number;
+    append?: boolean;
+  }
+
+  class VisualizeEditorPage {
+    public async clickDataTab() {
+      await testSubjects.click('visualizeEditDataLink');
+    }
+
+    public async clickOptionsTab() {
+      await testSubjects.click('visEditorTaboptions');
+    }
+
+    public async clickMetricsAndAxes() {
+      await testSubjects.click('visEditorTabadvanced');
+    }
+
+    public async clickVisEditorTab(tabName: string) {
+      await testSubjects.click('visEditorTab' + tabName);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async addInputControl(type?: string) {
+      if (type) {
+        const selectInput = await testSubjects.find('selectControlType');
+        await selectInput.type(type);
+      }
+      await testSubjects.click('inputControlEditorAddBtn');
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async inputControlClear() {
+      await testSubjects.click('inputControlClearBtn');
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async inputControlSubmit() {
+      await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn');
+      await visChart.waitForVisualizationRenderingStabilized();
+    }
+
+    public async clickGo() {
+      const prevRenderingCount = await visChart.getVisualizationRenderingCount();
+      log.debug(`Before Rendering count ${prevRenderingCount}`);
+      await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
+      await visChart.waitForRenderingCount(prevRenderingCount + 1);
+    }
+
+    public async removeDimension(aggNth: number) {
+      await testSubjects.click(`visEditorAggAccordion${aggNth} > removeDimensionBtn`);
+    }
+
+    public async setFilterParams(aggNth: number, indexPattern: string, field: string) {
+      await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern);
+      await comboBox.set(`fieldSelect-${aggNth}`, field);
+    }
+
+    public async setFilterRange(aggNth: number, min: string, max: string) {
+      const control = await testSubjects.find(`inputControl${aggNth}`);
+      const inputMin = await control.findByCssSelector('[name$="minValue"]');
+      await inputMin.type(min);
+      const inputMax = await control.findByCssSelector('[name$="maxValue"]');
+      await inputMax.type(max);
+    }
+
+    public async clickSplitDirection(direction: string) {
+      const control = await testSubjects.find('visEditorSplitBy');
+      const radioBtn = await control.findByCssSelector(`[title="${direction}"]`);
+      await radioBtn.click();
+    }
+
+    /**
+     * Adds new bucket
+     * @param bucketName bucket name, like 'X-axis', 'Split rows', 'Split series'
+     * @param type aggregation type, like 'buckets', 'metrics'
+     */
+    public async clickBucket(bucketName: string, type = 'buckets') {
+      await testSubjects.click(`visEditorAdd_${type}`);
+      await find.clickByCssSelector(`[data-test-subj="visEditorAdd_${type}_${bucketName}"`);
+    }
+
+    public async clickEnableCustomRanges() {
+      await testSubjects.click('heatmapUseCustomRanges');
+    }
+
+    public async clickAddRange() {
+      await testSubjects.click(`heatmapColorRange__addRangeButton`);
+    }
+
+    public async setCustomRangeByIndex(index: string, from: string, to: string) {
+      await testSubjects.setValue(`heatmapColorRange${index}__from`, from);
+      await testSubjects.setValue(`heatmapColorRange${index}__to`, to);
+    }
+
+    public async changeHeatmapColorNumbers(value = 6) {
+      const input = await testSubjects.find(`heatmapColorsNumber`);
+      await input.clearValueWithKeyboard();
+      await input.type(`${value}`);
+    }
+
+    public async getBucketErrorMessage() {
+      const error = await find.byCssSelector(
+        '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText'
+      );
+      const errorMessage = await error.getAttribute('innerText');
+      log.debug(errorMessage);
+      return errorMessage;
+    }
+
+    public async addNewFilterAggregation() {
+      await testSubjects.click('visEditorAddFilterButton');
+    }
+
+    public async selectField(
+      fieldValue: string,
+      groupName = 'buckets',
+      childAggregationType = false
+    ) {
+      log.debug(`selectField ${fieldValue}`);
+      const selector = `
+          [group-name="${groupName}"]
+          [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
+          [data-test-subj="visAggEditorParams"]
+          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          [data-test-subj="visDefaultEditorField"]
+        `;
+      const fieldEl = await find.byCssSelector(selector);
+      await comboBox.setElement(fieldEl, fieldValue);
+    }
+
+    public async selectOrderByMetric(aggNth: number, metric: string) {
+      const sortSelect = await testSubjects.find(`visEditorOrderBy${aggNth}`);
+      const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`);
+      await sortMetric.click();
+    }
+
+    public async selectCustomSortMetric(aggNth: number, metric: string, field: string) {
+      await this.selectOrderByMetric(aggNth, 'custom');
+      await this.selectAggregation(metric, 'buckets', true);
+      await this.selectField(field, 'buckets', true);
+    }
+
+    public async selectAggregation(
+      aggValue: string,
+      groupName = 'buckets',
+      childAggregationType = false
+    ) {
+      const comboBoxElement = await find.byCssSelector(`
+          [group-name="${groupName}"]
+          [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
+          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          [data-test-subj="defaultEditorAggSelect"]
+        `);
+
+      await comboBox.setElement(comboBoxElement, aggValue);
+      await common.sleep(500);
+    }
+
+    /**
+     * Set the test for a filter aggregation.
+     * @param {*} filterValue the string value of the filter
+     * @param {*} filterIndex used when multiple filters are configured on the same aggregation
+     * @param {*} aggregationId the ID if the aggregation. On Tests, it start at from 2
+     */
+    public async setFilterAggregationValue(
+      filterValue: string,
+      filterIndex = 0,
+      aggregationId = 2
+    ) {
+      await testSubjects.setValue(
+        `visEditorFilterInput_${aggregationId}_${filterIndex}`,
+        filterValue
+      );
+    }
+
+    public async setValue(newValue: string) {
+      const input = await find.byCssSelector('[data-test-subj="visEditorPercentileRanks"] input');
+      await input.clearValue();
+      await input.type(newValue);
+    }
+
+    public async clickEditorSidebarCollapse() {
+      await testSubjects.click('collapseSideBarButton');
+    }
+
+    public async clickDropPartialBuckets() {
+      await testSubjects.click('dropPartialBucketsCheckbox');
+    }
+
+    public async setMarkdownTxt(markdownTxt: string) {
+      const input = await testSubjects.find('markdownTextarea');
+      await input.clearValue();
+      await input.type(markdownTxt);
+    }
+
+    public async isSwitchChecked(selector: string) {
+      const checkbox = await testSubjects.find(selector);
+      const isChecked = await checkbox.getAttribute('aria-checked');
+      return isChecked === 'true';
+    }
+
+    public async checkSwitch(selector: string) {
+      const isChecked = await this.isSwitchChecked(selector);
+      if (!isChecked) {
+        log.debug(`checking switch ${selector}`);
+        await testSubjects.click(selector);
+      }
+    }
+
+    public async uncheckSwitch(selector: string) {
+      const isChecked = await this.isSwitchChecked(selector);
+      if (isChecked) {
+        log.debug(`unchecking switch ${selector}`);
+        await testSubjects.click(selector);
+      }
+    }
+
+    public async setIsFilteredByCollarCheckbox(value = true) {
+      await retry.try(async () => {
+        const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox');
+        if (isChecked !== value) {
+          await testSubjects.click('isFilteredByCollarCheckbox');
+          throw new Error('isFilteredByCollar not set correctly');
+        }
+      });
+    }
+
+    public async setCustomLabel(label: string, index = 1) {
+      const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`);
+      customLabel.type(label);
+    }
+
+    public async selectYAxisAggregation(agg: string, field: string, label: string, index = 1) {
+      // index starts on the first "count" metric at 1
+      // Each new metric or aggregation added to a visualization gets the next index.
+      // So to modify a metric or aggregation tests need to keep track of the
+      // order they are added.
+      await this.toggleOpenEditor(index);
+
+      // select our agg
+      const aggSelect = await find.byCssSelector(
+        `#visEditorAggAccordion${index} [data-test-subj="defaultEditorAggSelect"]`
+      );
+      await comboBox.setElement(aggSelect, agg);
+
+      const fieldSelect = await find.byCssSelector(
+        `#visEditorAggAccordion${index} [data-test-subj="visDefaultEditorField"]`
+      );
+      // select our field
+      await comboBox.setElement(fieldSelect, field);
+      // enter custom label
+      await this.setCustomLabel(label, index);
+    }
+
+    public async getField() {
+      return await comboBox.getComboBoxSelectedOptions('visDefaultEditorField');
+    }
+
+    public async sizeUpEditor() {
+      await testSubjects.click('visualizeEditorResizer');
+      await browser.pressKeys(browser.keys.ARROW_RIGHT);
+    }
+
+    public async toggleDisabledAgg(agg: string) {
+      await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async toggleAggregationEditor(agg: string) {
+      await find.clickByCssSelector(
+        `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button`
+      );
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async toggleOtherBucket(agg = 2) {
+      await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`);
+    }
+
+    public async toggleMissingBucket(agg = 2) {
+      await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`);
+    }
+
+    public async toggleScaleMetrics() {
+      await testSubjects.click('scaleMetricsSwitch');
+    }
+
+    public async toggleAutoMode() {
+      await testSubjects.click('visualizeEditorAutoButton');
+    }
+
+    public async isApplyEnabled() {
+      const applyButton = await testSubjects.find('visualizeEditorRenderButton');
+      return await applyButton.isEnabled();
+    }
+
+    public async toggleAccordion(id: string, toState = 'true') {
+      const toggle = await find.byCssSelector(`button[aria-controls="${id}"]`);
+      const toggleOpen = await toggle.getAttribute('aria-expanded');
+      log.debug(`toggle ${id} expand = ${toggleOpen}`);
+      if (toggleOpen !== toState) {
+        log.debug(`toggle ${id} click()`);
+        await toggle.click();
+      }
+    }
+
+    public async toggleOpenEditor(index: number, toState = 'true') {
+      // index, see selectYAxisAggregation
+      await this.toggleAccordion(`visEditorAggAccordion${index}`, toState);
+    }
+
+    public async toggleAdvancedParams(aggId: string) {
+      const accordion = await testSubjects.find(`advancedParams-${aggId}`);
+      const accordionButton = await find.descendantDisplayedByCssSelector('button', accordion);
+      await accordionButton.click();
+    }
+
+    public async clickReset() {
+      await testSubjects.click('visualizeEditorResetButton');
+      await visChart.waitForVisualization();
+    }
+
+    public async clickYAxisOptions(axisId: string) {
+      await testSubjects.click(`toggleYAxisOptions-${axisId}`);
+    }
+
+    public async clickYAxisAdvancedOptions(axisId: string) {
+      await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`);
+    }
+
+    public async changeYAxisFilterLabelsCheckbox(axisId: string, enabled: boolean) {
+      const selector = `yAxisFilterLabelsCheckbox-${axisId}`;
+      await testSubjects.setCheckbox(selector, enabled ? 'check' : 'uncheck');
+    }
+
+    public async setSize(newValue: string, aggId: string) {
+      const dataTestSubj = aggId
+        ? `visEditorAggAccordion${aggId} > sizeParamEditor`
+        : 'sizeParamEditor';
+      await testSubjects.setValue(dataTestSubj, String(newValue));
+    }
+
+    public async selectChartMode(mode: string) {
+      const selector = await find.byCssSelector(`#seriesMode0 > option[value="${mode}"]`);
+      await selector.click();
+    }
+
+    public async selectYAxisScaleType(axisId: string, scaleType: string) {
+      const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`);
+      const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`);
+      await selector.click();
+    }
+
+    public async selectYAxisMode(mode: string) {
+      const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`);
+      await selector.click();
+    }
+
+    public async setAxisExtents(min: string, max: string, axisId = 'ValueAxis-1') {
+      await this.toggleAccordion(`yAxisAccordion${axisId}`);
+      await this.toggleAccordion(`yAxisOptionsAccordion${axisId}`);
+
+      await testSubjects.click('yAxisSetYExtents');
+      await testSubjects.setValue('yAxisYExtentsMax', max);
+      await testSubjects.setValue('yAxisYExtentsMin', min);
+    }
+
+    public async selectAggregateWith(fieldValue: string) {
+      await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue);
+    }
+
+    public async setInterval(newValue: string, options: IntervalOptions = {}) {
+      const { type = 'default', aggNth = 2, append = false } = options;
+      log.debug(`visEditor.setInterval(${newValue}, {${type}, ${aggNth}, ${append}})`);
+      if (type === 'default') {
+        await comboBox.set('visEditorInterval', newValue);
+      } else if (type === 'custom') {
+        await comboBox.setCustom('visEditorInterval', newValue);
+      } else {
+        if (append) {
+          await testSubjects.append(`visEditorInterval${aggNth}`, String(newValue));
+        } else {
+          await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValue));
+        }
+      }
+    }
+
+    public async getInterval() {
+      return await comboBox.getComboBoxSelectedOptions('visEditorInterval');
+    }
+
+    public async getNumericInterval(agg = 2) {
+      return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value');
+    }
+
+    public async clickMetricEditor() {
+      await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button');
+    }
+
+    public async clickMetricByIndex(index: number) {
+      const metrics = await find.allByCssSelector(
+        '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container'
+      );
+      expect(metrics.length).greaterThan(index);
+      await metrics[index].click();
+    }
+
+    public async setSelectByOptionText(selectId: string, optionText: string) {
+      const selectField = await find.byCssSelector(`#${selectId}`);
+      const options = await find.allByCssSelector(`#${selectId} > option`);
+      const $ = await selectField.parseDomContent();
+      const optionsText = $('option')
+        .toArray()
+        .map(option => $(option).text());
+      const optionIndex = optionsText.indexOf(optionText);
+
+      if (optionIndex === -1) {
+        throw new Error(
+          `Unable to find option '${optionText}' in select ${selectId}. Available options: ${optionsText.join(
+            ','
+          )}`
+        );
+      }
+      await options[optionIndex].click();
+    }
+  }
+
+  return new VisualizeEditorPage();
+}
diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
deleted file mode 100644
index c1ea8be9be98b..0000000000000
--- a/test/functional/page_objects/visualize_page.js
+++ /dev/null
@@ -1,1402 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. 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 { VisualizeConstants } from '../../../src/legacy/core_plugins/kibana/public/visualize/np_ready/visualize_constants';
-import Bluebird from 'bluebird';
-import expect from '@kbn/expect';
-
-export function VisualizePageProvider({ getService, getPageObjects, updateBaselines }) {
-  const browser = getService('browser');
-  const config = getService('config');
-  const testSubjects = getService('testSubjects');
-  const retry = getService('retry');
-  const find = getService('find');
-  const log = getService('log');
-  const inspector = getService('inspector');
-  const screenshot = getService('screenshots');
-  const table = getService('table');
-  const globalNav = getService('globalNav');
-  const PageObjects = getPageObjects(['common', 'header']);
-  const defaultFindTimeout = config.get('timeouts.find');
-  const comboBox = getService('comboBox');
-
-  class VisualizePage {
-    get index() {
-      return {
-        LOGSTASH_TIME_BASED: 'logstash-*',
-        LOGSTASH_NON_TIME_BASED: 'logstash*',
-      };
-    }
-
-    async gotoVisualizationLandingPage() {
-      log.debug('gotoVisualizationLandingPage');
-      await PageObjects.common.navigateToApp('visualize');
-    }
-
-    async checkListingSelectAllCheckbox() {
-      const element = await testSubjects.find('checkboxSelectAll');
-      const isSelected = await element.isSelected();
-      if (!isSelected) {
-        log.debug(`checking checkbox "checkboxSelectAll"`);
-        await testSubjects.click('checkboxSelectAll');
-      }
-    }
-
-    async navigateToNewVisualization() {
-      log.debug('navigateToApp visualize');
-      await PageObjects.common.navigateToApp('visualize');
-      await this.clickNewVisualization();
-      await this.waitForVisualizationSelectPage();
-    }
-
-    async clickNewVisualization() {
-      // newItemButton button is only visible when there are items in the listing table is displayed.
-      let exists = await testSubjects.exists('newItemButton');
-      if (exists) {
-        return await testSubjects.click('newItemButton');
-      }
-
-      exists = await testSubjects.exists('createVisualizationPromptButton');
-      // no viz exist, click createVisualizationPromptButton to create new dashboard
-      return await this.createVisualizationPromptButton();
-    }
-
-    /*
-    This method should use retry loop to delete visualizations from multiple pages until we find the createVisualizationPromptButton.
-    Perhaps it *could* set the page size larger than the default 10, but it might still need to loop anyway.
-    */
-    async deleteAllVisualizations() {
-      await retry.try(async () => {
-        await this.checkListingSelectAllCheckbox();
-        await this.clickDeleteSelected();
-        await PageObjects.common.clickConfirmOnModal();
-        await testSubjects.find('createVisualizationPromptButton');
-      });
-    }
-
-    async createSimpleMarkdownViz(vizName) {
-      await this.gotoVisualizationLandingPage();
-      await this.navigateToNewVisualization();
-      await this.clickMarkdownWidget();
-      await this.setMarkdownTxt(vizName);
-      await this.clickGo();
-      await this.saveVisualization(vizName);
-    }
-
-    async createVisualizationPromptButton() {
-      await testSubjects.click('createVisualizationPromptButton');
-    }
-
-    async getSearchFilter() {
-      const searchFilter = await find.allByCssSelector('.euiFieldSearch');
-      return searchFilter[0];
-    }
-
-    async clearFilter() {
-      const searchFilter = await this.getSearchFilter();
-      await searchFilter.clearValue();
-      await searchFilter.click();
-    }
-
-    async searchForItemWithName(name) {
-      log.debug(`searchForItemWithName: ${name}`);
-
-      await retry.try(async () => {
-        const searchFilter = await this.getSearchFilter();
-        await searchFilter.clearValue();
-        await searchFilter.click();
-        // Note: this replacement of - to space is to preserve original logic but I'm not sure why or if it's needed.
-        await searchFilter.type(name.replace('-', ' '));
-        await PageObjects.common.pressEnterKey();
-      });
-
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async clickDeleteSelected() {
-      await testSubjects.click('deleteSelectedItems');
-    }
-
-    async getCreatePromptExists() {
-      log.debug('getCreatePromptExists');
-      return await testSubjects.exists('createVisualizationPromptButton');
-    }
-
-    async getCountOfItemsInListingTable() {
-      const elements = await find.allByCssSelector('[data-test-subj^="visListingTitleLink"]');
-      return elements.length;
-    }
-
-    async waitForVisualizationSelectPage() {
-      await retry.try(async () => {
-        const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes');
-        if (!(await visualizeSelectTypePage.isDisplayed())) {
-          throw new Error('wait for visualization select page');
-        }
-      });
-    }
-
-    async clickVisType(type) {
-      await testSubjects.click(`visType-${type}`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async clickAreaChart() {
-      await this.clickVisType('area');
-    }
-
-    async clickDataTable() {
-      await this.clickVisType('table');
-    }
-
-    async clickLineChart() {
-      await this.clickVisType('line');
-    }
-
-    async clickRegionMap() {
-      await this.clickVisType('region_map');
-    }
-
-    async clickMarkdownWidget() {
-      await this.clickVisType('markdown');
-    }
-
-    // clickBucket(bucketName) 'X-axis', 'Split area', 'Split chart'
-    async clickBucket(bucketName, type = 'buckets') {
-      await testSubjects.click(`visEditorAdd_${type}`);
-      await find.clickByCssSelector(`[data-test-subj="visEditorAdd_${type}_${bucketName}"`);
-    }
-
-    async clickMetric() {
-      await this.clickVisType('metric');
-    }
-
-    async clickGauge() {
-      await this.clickVisType('gauge');
-    }
-
-    async clickPieChart() {
-      await this.clickVisType('pie');
-    }
-
-    async clickTileMap() {
-      await this.clickVisType('tile_map');
-    }
-
-    async clickTagCloud() {
-      await this.clickVisType('tagcloud');
-    }
-
-    async clickVega() {
-      await this.clickVisType('vega');
-    }
-
-    async clickVisualBuilder() {
-      await this.clickVisType('metrics');
-    }
-
-    async clickEditorSidebarCollapse() {
-      await testSubjects.click('collapseSideBarButton');
-    }
-
-    async selectTagCloudTag(tagDisplayText) {
-      await testSubjects.click(tagDisplayText);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async getTextTag() {
-      await this.waitForVisualization();
-      const elements = await find.allByCssSelector('text');
-      return await Promise.all(elements.map(async element => await element.getVisibleText()));
-    }
-
-    async getTextSizes() {
-      const tags = await find.allByCssSelector('text');
-      async function returnTagSize(tag) {
-        const style = await tag.getAttribute('style');
-        return style.match(/font-size: ([^;]*);/)[1];
-      }
-      return await Promise.all(tags.map(returnTagSize));
-    }
-
-    async clickVerticalBarChart() {
-      await this.clickVisType('histogram');
-    }
-
-    async clickHeatmapChart() {
-      await this.clickVisType('heatmap');
-    }
-
-    async clickInputControlVis() {
-      await this.clickVisType('input_control_vis');
-    }
-
-    async getChartTypes() {
-      const chartTypeField = await testSubjects.find('visNewDialogTypes');
-      const chartTypes = await chartTypeField.findAllByTagName('button');
-      async function getChartType(chart) {
-        const label = await testSubjects.findDescendant('visTypeTitle', chart);
-        return await label.getVisibleText();
-      }
-      const getChartTypesPromises = chartTypes.map(getChartType);
-      return await Promise.all(getChartTypesPromises);
-    }
-
-    async selectVisSourceIfRequired() {
-      log.debug('selectVisSourceIfRequired');
-      const selectPage = await testSubjects.findAll('visualizeSelectSearch');
-      if (selectPage.length) {
-        log.debug('a search is required for this visualization');
-        await this.clickNewSearch();
-      }
-    }
-
-    async isBetaInfoShown() {
-      return await testSubjects.exists('betaVisInfo');
-    }
-
-    async getBetaTypeLinks() {
-      return await find.allByCssSelector('[data-vis-stage="beta"]');
-    }
-
-    async getExperimentalTypeLinks() {
-      return await find.allByCssSelector('[data-vis-stage="experimental"]');
-    }
-
-    async isExperimentalInfoShown() {
-      return await testSubjects.exists('experimentalVisInfo');
-    }
-
-    async getExperimentalInfo() {
-      return await testSubjects.find('experimentalVisInfo');
-    }
-
-    async clickAbsoluteButton() {
-      await find.clickByCssSelector(
-        'ul.nav.nav-pills.nav-stacked.kbn-timepicker-modes:contains("absolute")',
-        defaultFindTimeout * 2
-      );
-    }
-
-    async clickDropPartialBuckets() {
-      return await testSubjects.click('dropPartialBucketsCheckbox');
-    }
-
-    async setMarkdownTxt(markdownTxt) {
-      const input = await testSubjects.find('markdownTextarea');
-      await input.clearValue();
-      await input.type(markdownTxt);
-    }
-
-    async getMarkdownText() {
-      const markdownContainer = await testSubjects.find('markdownBody');
-      return markdownContainer.getVisibleText();
-    }
-
-    async getMarkdownBodyDescendentText(selector) {
-      const markdownContainer = await testSubjects.find('markdownBody');
-      const element = await find.descendantDisplayedByCssSelector(selector, markdownContainer);
-      return element.getVisibleText();
-    }
-
-    async getVegaSpec() {
-      // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file?
-      const editor = await testSubjects.find('vega-editor');
-      const lines = await editor.findAllByClassName('ace_line_group');
-      const linesText = await Bluebird.map(lines, l => l.getVisibleText());
-      return linesText.join('\n');
-    }
-
-    async getVegaViewContainer() {
-      return await find.byCssSelector('div.vgaVis__view');
-    }
-
-    async getVegaControlContainer() {
-      return await find.byCssSelector('div.vgaVis__controls');
-    }
-
-    async addInputControl(type) {
-      if (type) {
-        const selectInput = await testSubjects.find('selectControlType');
-        await selectInput.type(type);
-      }
-      await testSubjects.click('inputControlEditorAddBtn');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async inputControlSubmit() {
-      await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn');
-      await this.waitForVisualizationRenderingStabilized();
-    }
-
-    async inputControlClear() {
-      await testSubjects.click('inputControlClearBtn');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async isChecked(selector) {
-      const checkbox = await testSubjects.find(selector);
-      return await checkbox.isSelected();
-    }
-
-    async checkCheckbox(selector) {
-      const isChecked = await this.isChecked(selector);
-      if (!isChecked) {
-        log.debug(`checking checkbox ${selector}`);
-        await testSubjects.click(selector);
-      }
-    }
-
-    async uncheckCheckbox(selector) {
-      const isChecked = await this.isChecked(selector);
-      if (isChecked) {
-        log.debug(`unchecking checkbox ${selector}`);
-        await testSubjects.click(selector);
-      }
-    }
-
-    async isSwitchChecked(selector) {
-      const checkbox = await testSubjects.find(selector);
-      const isChecked = await checkbox.getAttribute('aria-checked');
-      return isChecked === 'true';
-    }
-
-    async checkSwitch(selector) {
-      const isChecked = await this.isSwitchChecked(selector);
-      if (!isChecked) {
-        log.debug(`checking switch ${selector}`);
-        await testSubjects.click(selector);
-      }
-    }
-
-    async uncheckSwitch(selector) {
-      const isChecked = await this.isSwitchChecked(selector);
-      if (isChecked) {
-        log.debug(`unchecking switch ${selector}`);
-        await testSubjects.click(selector);
-      }
-    }
-
-    async setSelectByOptionText(selectId, optionText) {
-      const selectField = await find.byCssSelector(`#${selectId}`);
-      const options = await find.allByCssSelector(`#${selectId} > option`);
-      const $ = await selectField.parseDomContent();
-      const optionsText = $('option')
-        .toArray()
-        .map(option => $(option).text());
-      const optionIndex = optionsText.indexOf(optionText);
-
-      if (optionIndex === -1) {
-        throw new Error(
-          `Unable to find option '${optionText}' in select ${selectId}. Available options: ${optionsText.join(
-            ','
-          )}`
-        );
-      }
-      await options[optionIndex].click();
-    }
-
-    async getSideEditorExists() {
-      return await find.existsByCssSelector('.collapsible-sidebar');
-    }
-
-    async setInspectorTablePageSize(size) {
-      const panel = await testSubjects.find('inspectorPanel');
-      await find.clickByButtonText('Rows per page: 20', panel);
-      // The buttons for setting table page size are in a popover element. This popover
-      // element appears as if it's part of the inspectorPanel but it's really attached
-      // to the body element by a portal.
-      const tableSizesPopover = await find.byCssSelector('.euiPanel');
-      await find.clickByButtonText(`${size} rows`, tableSizesPopover);
-    }
-
-    async getMetric() {
-      const elements = await find.allByCssSelector(
-        '[data-test-subj="visualizationLoader"] .mtrVis__container'
-      );
-      const values = await Promise.all(
-        elements.map(async element => {
-          const text = await element.getVisibleText();
-          return text;
-        })
-      );
-      return values
-        .filter(item => item.length > 0)
-        .reduce((arr, item) => arr.concat(item.split('\n')), []);
-    }
-
-    async getGaugeValue() {
-      const elements = await find.allByCssSelector(
-        '[data-test-subj="visualizationLoader"] .chart svg text'
-      );
-      const values = await Promise.all(
-        elements.map(async element => {
-          const text = await element.getVisibleText();
-          return text;
-        })
-      );
-      return values.filter(item => item.length > 0);
-    }
-
-    async clickMetricEditor() {
-      await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button');
-    }
-
-    async clickMetricByIndex(index) {
-      log.debug(`clickMetricByIndex(${index})`);
-      const metrics = await find.allByCssSelector(
-        '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container'
-      );
-      expect(metrics.length).greaterThan(index);
-      await metrics[index].click();
-    }
-
-    async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) {
-      await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async clickSavedSearch(savedSearchName) {
-      await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async clickUnlinkSavedSearch() {
-      await testSubjects.doubleClick('unlinkSavedSearch');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async setValue(newValue) {
-      const input = await find.byCssSelector('[data-test-subj="visEditorPercentileRanks"] input');
-      await input.clearValue();
-      await input.type(newValue);
-    }
-
-    async selectSearch(searchName) {
-      await find.clickByLinkText(searchName);
-    }
-
-    async getErrorMessage() {
-      const element = await find.byCssSelector('.item>h4');
-      return await element.getVisibleText();
-    }
-
-    async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) {
-      const comboBoxElement = await find.byCssSelector(`
-        [group-name="${groupName}"]
-        [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
-        ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
-        [data-test-subj="defaultEditorAggSelect"]
-      `);
-
-      await comboBox.setElement(comboBoxElement, myString);
-      await PageObjects.common.sleep(500);
-    }
-
-    async applyFilters() {
-      return await testSubjects.click('filterBarApplyFilters');
-    }
-    /**
-     * Set the test for a filter aggregation.
-     * @param {*} filterValue the string value of the filter
-     * @param {*} filterIndex used when multiple filters are configured on the same aggregation
-     * @param {*} aggregationId the ID if the aggregation. On Tests, it start at from 2
-     */
-    async setFilterAggregationValue(filterValue, filterIndex = 0, aggregationId = 2) {
-      await testSubjects.setValue(
-        `visEditorFilterInput_${aggregationId}_${filterIndex}`,
-        filterValue
-      );
-    }
-
-    async addNewFilterAggregation() {
-      return await testSubjects.click('visEditorAddFilterButton');
-    }
-
-    async toggleOpenEditor(index, toState = 'true') {
-      // index, see selectYAxisAggregation
-      await this.toggleAccordion(`visEditorAggAccordion${index}`, toState);
-    }
-
-    async toggleAccordion(id, toState = 'true') {
-      const toggle = await find.byCssSelector(`button[aria-controls="${id}"]`);
-      const toggleOpen = await toggle.getAttribute('aria-expanded');
-      log.debug(`toggle ${id} expand = ${toggleOpen}`);
-      if (toggleOpen !== toState) {
-        log.debug(`toggle ${id} click()`);
-        await toggle.click();
-      }
-    }
-
-    async toggleAdvancedParams(aggId) {
-      const accordion = await testSubjects.find(`advancedParams-${aggId}`);
-      const accordionButton = await find.descendantDisplayedByCssSelector('button', accordion);
-      await accordionButton.click();
-    }
-
-    async selectYAxisAggregation(agg, field, label, index = 1) {
-      // index starts on the first "count" metric at 1
-      // Each new metric or aggregation added to a visualization gets the next index.
-      // So to modify a metric or aggregation tests need to keep track of the
-      // order they are added.
-      await this.toggleOpenEditor(index);
-
-      // select our agg
-      const aggSelect = await find.byCssSelector(
-        `#visEditorAggAccordion${index} [data-test-subj="defaultEditorAggSelect"]`
-      );
-      await comboBox.setElement(aggSelect, agg);
-
-      const fieldSelect = await find.byCssSelector(
-        `#visEditorAggAccordion${index} [data-test-subj="visDefaultEditorField"]`
-      );
-      // select our field
-      await comboBox.setElement(fieldSelect, field);
-      // enter custom label
-      await this.setCustomLabel(label, index);
-    }
-
-    async setCustomLabel(label, index = 1) {
-      const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`);
-      customLabel.type(label);
-    }
-
-    async setAxisExtents(min, max, axisId = 'ValueAxis-1') {
-      await this.toggleAccordion(`yAxisAccordion${axisId}`);
-      await this.toggleAccordion(`yAxisOptionsAccordion${axisId}`);
-
-      await testSubjects.click('yAxisSetYExtents');
-      await testSubjects.setValue('yAxisYExtentsMax', max);
-      await testSubjects.setValue('yAxisYExtentsMin', min);
-    }
-
-    async getField() {
-      return await comboBox.getComboBoxSelectedOptions('visDefaultEditorField');
-    }
-
-    async selectField(fieldValue, groupName = 'buckets', childAggregationType = null) {
-      log.debug(`selectField ${fieldValue}`);
-      const selector = `
-        [group-name="${groupName}"]
-        [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
-        [data-test-subj="visAggEditorParams"]
-        ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
-        [data-test-subj="visDefaultEditorField"]
-      `;
-      const fieldEl = await find.byCssSelector(selector);
-      await comboBox.setElement(fieldEl, fieldValue);
-    }
-
-    async selectAggregateWith(fieldValue) {
-      await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue);
-    }
-
-    async getInterval() {
-      return await comboBox.getComboBoxSelectedOptions('visEditorInterval');
-    }
-
-    async setInterval(newValue) {
-      log.debug(`Visualize.setInterval(${newValue})`);
-      return await comboBox.set('visEditorInterval', newValue);
-    }
-
-    async setCustomInterval(newValue) {
-      log.debug(`Visualize.setCustomInterval(${newValue})`);
-      return await comboBox.setCustom('visEditorInterval', newValue);
-    }
-
-    async getNumericInterval(agg = 2) {
-      return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value');
-    }
-
-    async setNumericInterval(newValue, { append } = {}, agg = 2) {
-      if (append) {
-        await testSubjects.append(`visEditorInterval${agg}`, String(newValue));
-      } else {
-        await testSubjects.setValue(`visEditorInterval${agg}`, String(newValue));
-      }
-    }
-
-    async setSize(newValue, aggId) {
-      const dataTestSubj = aggId
-        ? `visEditorAggAccordion${aggId} > sizeParamEditor`
-        : 'sizeParamEditor';
-      await testSubjects.setValue(dataTestSubj, String(newValue));
-    }
-
-    async toggleDisabledAgg(agg) {
-      await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async toggleAggregationEditor(agg) {
-      await find.clickByCssSelector(
-        `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button`
-      );
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async toggleOtherBucket(agg = 2) {
-      return await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`);
-    }
-
-    async toggleMissingBucket(agg = 2) {
-      return await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`);
-    }
-
-    async toggleScaleMetrics() {
-      return await testSubjects.click('scaleMetricsSwitch');
-    }
-
-    async isApplyEnabled() {
-      const applyButton = await testSubjects.find('visualizeEditorRenderButton');
-      return await applyButton.isEnabled();
-    }
-
-    async clickGo() {
-      const prevRenderingCount = await this.getVisualizationRenderingCount();
-      log.debug(`Before Rendering count ${prevRenderingCount}`);
-      await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
-      await this.waitForRenderingCount(prevRenderingCount + 1);
-    }
-
-    async clickReset() {
-      await testSubjects.click('visualizeEditorResetButton');
-      await this.waitForVisualization();
-    }
-
-    async toggleAutoMode() {
-      await testSubjects.click('visualizeEditorAutoButton');
-    }
-
-    async sizeUpEditor() {
-      await testSubjects.click('visualizeEditorResizer');
-      await browser.pressKeys(browser.keys.ARROW_RIGHT);
-    }
-
-    async clickOptions() {
-      await find.clickByPartialLinkText('Options');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async changeHeatmapColorNumbers(value = 6) {
-      const input = await testSubjects.find(`heatmapColorsNumber`);
-      await input.clearValueWithKeyboard();
-      await input.type(`${value}`);
-    }
-
-    async clickMetricsAndAxes() {
-      await testSubjects.click('visEditorTabadvanced');
-    }
-
-    async clickOptionsTab() {
-      await testSubjects.click('visEditorTaboptions');
-    }
-
-    async clickEnableCustomRanges() {
-      await testSubjects.click('heatmapUseCustomRanges');
-    }
-
-    async clickAddRange() {
-      await testSubjects.click(`heatmapColorRange__addRangeButton`);
-    }
-
-    async setCustomRangeByIndex(index, from, to) {
-      await testSubjects.setValue(`heatmapColorRange${index}__from`, from);
-      await testSubjects.setValue(`heatmapColorRange${index}__to`, to);
-    }
-
-    async clickYAxisOptions(axisId) {
-      await testSubjects.click(`toggleYAxisOptions-${axisId}`);
-    }
-
-    async clickYAxisAdvancedOptions(axisId) {
-      await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`);
-    }
-
-    async changeYAxisFilterLabelsCheckbox(axisId, enabled) {
-      const selector = `yAxisFilterLabelsCheckbox-${axisId}`;
-      enabled ? await this.checkCheckbox(selector) : await this.uncheckCheckbox(selector);
-    }
-
-    async selectChartMode(mode) {
-      const selector = await find.byCssSelector(`#seriesMode0 > option[value="${mode}"]`);
-      await selector.click();
-    }
-
-    async selectYAxisScaleType(axisId, scaleType) {
-      const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`);
-      const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`);
-      await selector.click();
-    }
-
-    async selectYAxisMode(mode) {
-      const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`);
-      await selector.click();
-    }
-
-    async clickData() {
-      await testSubjects.click('visualizeEditDataLink');
-    }
-
-    async clickVisEditorTab(tabName) {
-      await testSubjects.click('visEditorTab' + tabName);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async selectWMS() {
-      await find.clickByCssSelector('input[name="wms.enabled"]');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async ensureSavePanelOpen() {
-      log.debug('ensureSavePanelOpen');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 });
-      if (!isOpen) {
-        await testSubjects.click('visualizeSaveButton');
-      }
-    }
-
-    async saveVisualization(vizName, { saveAsNew = false } = {}) {
-      await this.ensureSavePanelOpen();
-      await testSubjects.setValue('savedObjectTitle', vizName);
-      if (saveAsNew) {
-        log.debug('Check save as new visualization');
-        await testSubjects.click('saveAsNewCheckbox');
-      }
-      log.debug('Click Save Visualization button');
-
-      await testSubjects.click('confirmSaveSavedObjectButton');
-
-      // Confirm that the Visualization has actually been saved
-      await testSubjects.existOrFail('saveVisualizationSuccess');
-      const message = await PageObjects.common.closeToast();
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.common.waitForSaveModalToClose();
-
-      return message;
-    }
-
-    async saveVisualizationExpectSuccess(vizName, { saveAsNew = false } = {}) {
-      const saveMessage = await this.saveVisualization(vizName, { saveAsNew });
-      if (!saveMessage) {
-        throw new Error(
-          `Expected saveVisualization to respond with the saveMessage from the toast, got ${saveMessage}`
-        );
-      }
-    }
-
-    async saveVisualizationExpectSuccessAndBreadcrumb(vizName, { saveAsNew = false } = {}) {
-      await this.saveVisualizationExpectSuccess(vizName, { saveAsNew });
-      await retry.waitFor(
-        'last breadcrumb to have new vis name',
-        async () => (await globalNav.getLastBreadcrumb()) === vizName
-      );
-    }
-
-    async clickLoadSavedVisButton() {
-      // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb
-      // element as a child instead of building the breadcrumbs dynamically.
-      await find.clickByCssSelector('[href="#/visualize"]');
-    }
-
-    async filterVisByName(vizName) {
-      const input = await find.byCssSelector('input[name="filter"]');
-      await input.click();
-      // can't uses dashes in saved visualizations when filtering
-      // or extended character sets
-      // https://github.com/elastic/kibana/issues/6300
-      await input.type(vizName.replace('-', ' '));
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async clickVisualizationByName(vizName) {
-      log.debug('clickVisualizationByLinkText(' + vizName + ')');
-      return find.clickByPartialLinkText(vizName);
-    }
-
-    async loadSavedVisualization(vizName, { navigateToVisualize = true } = {}) {
-      if (navigateToVisualize) {
-        await this.clickLoadSavedVisButton();
-      }
-      await this.openSavedVisualization(vizName);
-    }
-
-    async openSavedVisualization(vizName) {
-      await this.clickVisualizationByName(vizName);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
-
-    async getXAxisLabels() {
-      const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom');
-      const $ = await xAxis.parseDomContent();
-      return $('.x > g > text')
-        .toArray()
-        .map(tick =>
-          $(tick)
-            .text()
-            .trim()
-        );
-    }
-
-    async getYAxisLabels() {
-      const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left');
-      const $ = await yAxis.parseDomContent();
-      return $('.y > g > text')
-        .toArray()
-        .map(tick =>
-          $(tick)
-            .text()
-            .trim()
-        );
-    }
-
-    /**
-     * Removes chrome and takes a small screenshot of a vis to compare against a baseline.
-     * @param {string} name The name of the baseline image.
-     * @param {object} opts Options object.
-     * @param {number} opts.threshold Threshold for allowed variance when comparing images.
-     */
-    async expectVisToMatchScreenshot(name, opts = { threshold: 0.05 }) {
-      log.debug(`expectVisToMatchScreenshot(${name})`);
-
-      // Collapse sidebar and inject some CSS to hide the nav so we have a focused screenshot
-      await this.clickEditorSidebarCollapse();
-      await this.waitForVisualizationRenderingStabilized();
-      await browser.execute(`
-        var el = document.createElement('style');
-        el.id = '__data-test-style';
-        el.innerHTML = '[data-test-subj="headerGlobalNav"] { display: none; } ';
-        el.innerHTML += '[data-test-subj="top-nav"] { display: none; } ';
-        el.innerHTML += '[data-test-subj="experimentalVisInfo"] { display: none; } ';
-        document.body.appendChild(el);
-      `);
-
-      const percentDifference = await screenshot.compareAgainstBaseline(name, updateBaselines);
-
-      // Reset the chart to its original state
-      await browser.execute(`
-        var el = document.getElementById('__data-test-style');
-        document.body.removeChild(el);
-      `);
-      await this.clickEditorSidebarCollapse();
-      await this.waitForVisualizationRenderingStabilized();
-      expect(percentDifference).to.be.lessThan(opts.threshold);
-    }
-
-    /*
-     ** This method gets the chart data and scales it based on chart height and label.
-     ** Returns an array of height values
-     */
-    async getAreaChartData(dataLabel, axis = 'ValueAxis-1') {
-      const yAxisRatio = await this.getChartYAxisRatio(axis);
-
-      const rectangle = await find.byCssSelector('rect.background');
-      const yAxisHeight = await rectangle.getAttribute('height');
-      log.debug(`height --------- ${yAxisHeight}`);
-
-      const path = await retry.try(
-        async () =>
-          await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
-      );
-      const data = await path.getAttribute('d');
-      log.debug(data);
-      // This area chart data starts with a 'M'ove to a x,y location, followed
-      // by a bunch of 'L'ines from that point to the next.  Those points are
-      // the values we're going to use to calculate the data values we're testing.
-      // So git rid of the one 'M' and split the rest on the 'L's.
-      const tempArray = data
-        .replace('M ', '')
-        .replace('M', '')
-        .replace(/ L /g, 'L')
-        .replace(/ /g, ',')
-        .split('L');
-      const chartSections = tempArray.length / 2;
-      // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel);
-      const chartData = [];
-      for (let i = 0; i < chartSections; i++) {
-        chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) * yAxisRatio);
-        log.debug('chartData[i] =' + chartData[i]);
-      }
-      return chartData;
-    }
-
-    /*
-     ** This method returns the paths that compose an area chart.
-     */
-    async getAreaChartPaths(dataLabel) {
-      const path = await retry.try(
-        async () =>
-          await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
-      );
-      const data = await path.getAttribute('d');
-      log.debug(data);
-      // This area chart data starts with a 'M'ove to a x,y location, followed
-      // by a bunch of 'L'ines from that point to the next.  Those points are
-      // the values we're going to use to calculate the data values we're testing.
-      // So git rid of the one 'M' and split the rest on the 'L's.
-      return data.split('L');
-    }
-
-    // The current test shows dots, not a line.  This function gets the dots and normalizes their height.
-    async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
-      // 1). get the range/pixel ratio
-      const yAxisRatio = await this.getChartYAxisRatio(axis);
-      // 2). find and save the y-axis pixel size (the chart height)
-      const rectangle = await find.byCssSelector('clipPath rect');
-      const yAxisHeight = await rectangle.getAttribute('height');
-      // 3). get the visWrapper__chart elements
-      const chartTypes = await retry.try(
-        async () =>
-          await find.allByCssSelector(
-            `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`,
-            defaultFindTimeout * 2
-          )
-      );
-      // 4). for each chart element, find the green circle, then the cy position
-      const chartData = await Promise.all(
-        chartTypes.map(async chart => {
-          const cy = await chart.getAttribute('cy');
-          // the point_series_options test has data in the billions range and
-          // getting 11 digits of precision with these calculations is very hard
-          return Math.round(((yAxisHeight - cy) * yAxisRatio).toPrecision(6));
-        })
-      );
-
-      return chartData;
-    }
-
-    // this is ALMOST identical to DiscoverPage.getBarChartData
-    async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
-      // 1). get the range/pixel ratio
-      const yAxisRatio = await this.getChartYAxisRatio(axis);
-      // 3). get the visWrapper__chart elements
-      const svg = await find.byCssSelector('div.chart');
-      const $ = await svg.parseDomContent();
-      const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`)
-        .toArray()
-        .map(chart => {
-          const barHeight = $(chart).attr('height');
-          return Math.round(barHeight * yAxisRatio);
-        });
-
-      return chartData;
-    }
-
-    // Returns value per pixel
-    async getChartYAxisRatio(axis = 'ValueAxis-1') {
-      // 1). get the maximum chart Y-Axis marker value and Y position
-      const maxYAxisChartMarker = await retry.try(
-        async () =>
-          await find.byCssSelector(
-            `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick`
-          )
-      );
-      const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, '');
-      const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y;
-      log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`);
-
-      // 2). get the minimum chart Y-Axis marker value and Y position
-      const minYAxisChartMarker = await find.byCssSelector(
-        'div.visAxis__column--y.visAxis__column--left  > div > div > svg:nth-child(2) > g > g:nth-child(1).tick'
-      );
-      const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', '');
-      const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y;
-      return (maxYLabel - minYLabel) / (minYLabelYPosition - maxYLabelYPosition);
-    }
-
-    async getHeatmapData() {
-      const chartTypes = await retry.try(
-        async () => await find.allByCssSelector('svg > g > g.series rect', defaultFindTimeout * 2)
-      );
-      log.debug('rects=' + chartTypes);
-      async function getChartType(chart) {
-        return await chart.getAttribute('data-label');
-      }
-      const getChartTypesPromises = chartTypes.map(getChartType);
-      return await Promise.all(getChartTypesPromises);
-    }
-
-    async expectError() {
-      return await testSubjects.existOrFail('visLibVisualizeError');
-    }
-
-    async getChartAreaWidth() {
-      const rect = await retry.try(async () => find.byCssSelector('clipPath rect'));
-      return await rect.getAttribute('width');
-    }
-
-    async getChartAreaHeight() {
-      const rect = await retry.try(async () => find.byCssSelector('clipPath rect'));
-      return await rect.getAttribute('height');
-    }
-
-    /**
-     * If you are writing new tests, you should rather look into getTableVisContent method instead.
-     */
-    async getTableVisData() {
-      return await testSubjects.getVisibleText('paginated-table-body');
-    }
-
-    /**
-     * This function is the newer function to retrieve data from within a table visualization.
-     * It uses a better return format, than the old getTableVisData, by properly splitting
-     * cell values into arrays. Please use this function for newer tests.
-     */
-    async getTableVisContent({ stripEmptyRows = true } = {}) {
-      return await retry.try(async () => {
-        const container = await testSubjects.find('tableVis');
-        const allTables = await testSubjects.findAllDescendant('paginated-table-body', container);
-
-        if (allTables.length === 0) {
-          return [];
-        }
-
-        const allData = await Promise.all(
-          allTables.map(async t => {
-            let data = await table.getDataFromElement(t);
-            if (stripEmptyRows) {
-              data = data.filter(row => row.length > 0 && row.some(cell => cell.trim().length > 0));
-            }
-            return data;
-          })
-        );
-
-        if (allTables.length === 1) {
-          // If there was only one table we return only the data for that table
-          // This prevents an unnecessary array around that single table, which
-          // is the case we have in most tests.
-          return allData[0];
-        }
-
-        return allData;
-      });
-    }
-
-    async toggleIsFilteredByCollarCheckbox() {
-      await testSubjects.click('isFilteredByCollarCheckbox');
-    }
-
-    async setIsFilteredByCollarCheckbox(value = true) {
-      await retry.try(async () => {
-        const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox');
-        if (isChecked !== value) {
-          await testSubjects.click('isFilteredByCollarCheckbox');
-          throw new Error('isFilteredByCollar not set correctly');
-        }
-      });
-    }
-
-    async getMarkdownData() {
-      const markdown = await retry.try(async () => find.byCssSelector('visualize'));
-      return await markdown.getVisibleText();
-    }
-
-    async getVisualizationRenderingCount() {
-      const visualizationLoader = await testSubjects.find('visualizationLoader');
-      const renderingCount = await visualizationLoader.getAttribute('data-rendering-count');
-      return Number(renderingCount);
-    }
-
-    async waitForRenderingCount(minimumCount = 1) {
-      await retry.waitFor(
-        `rendering count to be greater than or equal to [${minimumCount}]`,
-        async () => {
-          const currentRenderingCount = await this.getVisualizationRenderingCount();
-          log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
-          return currentRenderingCount >= minimumCount;
-        }
-      );
-    }
-
-    async waitForVisualizationRenderingStabilized() {
-      //assuming rendering is done when data-rendering-count is constant within 1000 ms
-      await retry.waitFor('rendering count to stabilize', async () => {
-        const firstCount = await this.getVisualizationRenderingCount();
-        log.debug(`-- firstCount=${firstCount}`);
-
-        await PageObjects.common.sleep(1000);
-
-        const secondCount = await this.getVisualizationRenderingCount();
-        log.debug(`-- secondCount=${secondCount}`);
-
-        return firstCount === secondCount;
-      });
-    }
-
-    async waitForVisualization() {
-      await this.waitForVisualizationRenderingStabilized();
-      return await find.byCssSelector('.visualization');
-    }
-
-    async waitForVisualizationSavedToastGone() {
-      return await testSubjects.waitForDeleted('saveVisualizationSuccess');
-    }
-
-    async getZoomSelectors(zoomSelector) {
-      return await find.allByCssSelector(zoomSelector);
-    }
-
-    async clickMapButton(zoomSelector, waitForLoading) {
-      await retry.try(async () => {
-        const zooms = await this.getZoomSelectors(zoomSelector);
-        await Promise.all(zooms.map(async zoom => await zoom.click()));
-        if (waitForLoading) {
-          await PageObjects.header.waitUntilLoadingHasFinished();
-        }
-      });
-    }
-
-    async getVisualizationRequest() {
-      log.debug('getVisualizationRequest');
-      await inspector.open();
-      await testSubjects.click('inspectorViewChooser');
-      await testSubjects.click('inspectorViewChooserRequests');
-      await testSubjects.click('inspectorRequestDetailRequest');
-      return await testSubjects.getVisibleText('inspectorRequestBody');
-    }
-
-    async getVisualizationResponse() {
-      log.debug('getVisualizationResponse');
-      await inspector.open();
-      await testSubjects.click('inspectorViewChooser');
-      await testSubjects.click('inspectorViewChooserRequests');
-      await testSubjects.click('inspectorRequestDetailResponse');
-      return await testSubjects.getVisibleText('inspectorResponseBody');
-    }
-
-    async getMapBounds() {
-      const request = await this.getVisualizationRequest();
-      const requestObject = JSON.parse(request);
-      return requestObject.aggs.filter_agg.filter.geo_bounding_box['geo.coordinates'];
-    }
-
-    async clickMapZoomIn(waitForLoading = true) {
-      await this.clickMapButton('a.leaflet-control-zoom-in', waitForLoading);
-    }
-
-    async clickMapZoomOut(waitForLoading = true) {
-      await this.clickMapButton('a.leaflet-control-zoom-out', waitForLoading);
-    }
-
-    async getMapZoomEnabled(zoomSelector) {
-      const zooms = await this.getZoomSelectors(zoomSelector);
-      const classAttributes = await Promise.all(
-        zooms.map(async zoom => await zoom.getAttribute('class'))
-      );
-      return !classAttributes.join('').includes('leaflet-disabled');
-    }
-
-    async zoomAllTheWayOut() {
-      // we can tell we're at level 1 because zoom out is disabled
-      return await retry.try(async () => {
-        await this.clickMapZoomOut();
-        const enabled = await this.getMapZoomOutEnabled();
-        //should be able to zoom more as current config has 0 as min level.
-        if (enabled) {
-          throw new Error('Not fully zoomed out yet');
-        }
-      });
-    }
-
-    async getMapZoomInEnabled() {
-      return await this.getMapZoomEnabled('a.leaflet-control-zoom-in');
-    }
-
-    async getMapZoomOutEnabled() {
-      return await this.getMapZoomEnabled('a.leaflet-control-zoom-out');
-    }
-
-    async clickMapFitDataBounds() {
-      return await this.clickMapButton('a.fa-crop');
-    }
-
-    async clickLandingPageBreadcrumbLink() {
-      log.debug('clickLandingPageBreadcrumbLink');
-      await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`);
-    }
-
-    /**
-     * Returns true if already on the landing page (that page doesn't have a link to itself).
-     * @returns {Promise<boolean>}
-     */
-    async onLandingPage() {
-      log.debug(`VisualizePage.onLandingPage`);
-      const exists = await testSubjects.exists('visualizeLandingPage');
-      return exists;
-    }
-
-    async gotoLandingPage() {
-      log.debug('VisualizePage.gotoLandingPage');
-      const onPage = await this.onLandingPage();
-      if (!onPage) {
-        await retry.try(async () => {
-          await this.clickLandingPageBreadcrumbLink();
-          const onLandingPage = await this.onLandingPage();
-          if (!onLandingPage) throw new Error('Not on the landing page.');
-        });
-      }
-    }
-
-    async getLegendEntries() {
-      const legendEntries = await find.allByCssSelector(
-        '.visLegend__button',
-        defaultFindTimeout * 2
-      );
-      return await Promise.all(
-        legendEntries.map(async chart => await chart.getAttribute('data-label'))
-      );
-    }
-
-    async openLegendOptionColors(name) {
-      await this.waitForVisualizationRenderingStabilized();
-      await retry.try(async () => {
-        // This click has been flaky in opening the legend, hence the retry.  See
-        // https://github.com/elastic/kibana/issues/17468
-        await testSubjects.click(`legend-${name}`);
-        await this.waitForVisualizationRenderingStabilized();
-        // arbitrary color chosen, any available would do
-        const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
-        if (!isOpen) {
-          throw new Error('legend color selector not open');
-        }
-      });
-    }
-
-    async filterOnTableCell(column, row) {
-      await retry.try(async () => {
-        const table = await testSubjects.find('tableVis');
-        const cell = await table.findByCssSelector(
-          `tbody tr:nth-child(${row}) td:nth-child(${column})`
-        );
-        await cell.moveMouseTo();
-        const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell);
-        await filterBtn.click();
-      });
-    }
-
-    async toggleLegend(show = true) {
-      await retry.try(async () => {
-        const isVisible = find.byCssSelector('.visLegend');
-        if ((show && !isVisible) || (!show && isVisible)) {
-          await testSubjects.click('vislibToggleLegend');
-        }
-      });
-    }
-
-    async filterLegend(name) {
-      await this.toggleLegend();
-      await testSubjects.click(`legend-${name}`);
-      const filters = await testSubjects.find(`legend-${name}-filters`);
-      const [filterIn] = await filters.findAllByCssSelector(`input`);
-      await filterIn.click();
-      await this.waitForVisualizationRenderingStabilized();
-    }
-
-    async doesLegendColorChoiceExist(color) {
-      return await testSubjects.exists(`legendSelectColor-${color}`);
-    }
-
-    async selectNewLegendColorChoice(color) {
-      await testSubjects.click(`legendSelectColor-${color}`);
-    }
-
-    async doesSelectedLegendColorExist(color) {
-      return await testSubjects.exists(`legendSelectedColor-${color}`);
-    }
-
-    async getYAxisTitle() {
-      const title = await find.byCssSelector('.y-axis-div .y-axis-title text');
-      return await title.getVisibleText();
-    }
-
-    async selectBucketType(type) {
-      const bucketType = await find.byCssSelector(`[data-test-subj="${type}"]`);
-      return await bucketType.click();
-    }
-
-    async getBucketErrorMessage() {
-      const error = await find.byCssSelector(
-        '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText'
-      );
-      const errorMessage = await error.getAttribute('innerText');
-      log.debug(errorMessage);
-      return errorMessage;
-    }
-
-    async selectOrderByMetric(agg, metric) {
-      const sortSelect = await testSubjects.find(`visEditorOrderBy${agg}`);
-      const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`);
-      await sortMetric.click();
-    }
-
-    async selectCustomSortMetric(agg, metric, field) {
-      await this.selectOrderByMetric(agg, 'custom');
-      await this.selectAggregation(metric, 'buckets', true);
-      await this.selectField(field, 'buckets', true);
-    }
-
-    async clickSplitDirection(direction) {
-      const control = await testSubjects.find('visEditorSplitBy');
-      const radioBtn = await control.findByCssSelector(`[title="${direction}"]`);
-      await radioBtn.click();
-    }
-
-    async countNestedTables() {
-      const vis = await testSubjects.find('tableVis');
-      const result = [];
-
-      for (let i = 1; true; i++) {
-        const selector = new Array(i).fill('.kbnAggTable__group').join(' ');
-        const tables = await vis.findAllByCssSelector(selector);
-        if (tables.length === 0) {
-          break;
-        }
-        result.push(tables.length);
-      }
-
-      return result;
-    }
-
-    async removeDimension(agg) {
-      await testSubjects.click(`visEditorAggAccordion${agg} > removeDimensionBtn`);
-    }
-
-    async setFilterParams({ aggNth = 0, indexPattern, field }) {
-      await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern);
-      await comboBox.set(`fieldSelect-${aggNth}`, field);
-    }
-
-    async setFilterRange({ aggNth = 0, min, max }) {
-      const control = await testSubjects.find(`inputControl${aggNth}`);
-      const inputMin = await control.findByCssSelector('[name$="minValue"]');
-      await inputMin.type(min);
-      const inputMax = await control.findByCssSelector('[name$="maxValue"]');
-      await inputMax.type(max);
-    }
-
-    async scrollSubjectIntoView(subject) {
-      const element = await testSubjects.find(subject);
-      await element.scrollIntoViewIfNecessary();
-    }
-  }
-
-  return new VisualizePage();
-}
diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts
new file mode 100644
index 0000000000000..1562cf9745f2d
--- /dev/null
+++ b/test/functional/page_objects/visualize_page.ts
@@ -0,0 +1,328 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. 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 { FtrProviderContext } from '../ftr_provider_context';
+import { VisualizeConstants } from '../../../src/legacy/core_plugins/kibana/public/visualize/np_ready/visualize_constants';
+
+export function VisualizePageProvider({ getService, getPageObjects }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const find = getService('find');
+  const log = getService('log');
+  const globalNav = getService('globalNav');
+  const listingTable = getService('listingTable');
+  const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']);
+
+  /**
+   * This page object contains the visualization type selection, the landing page,
+   * and the open/save dialog functions
+   */
+  class VisualizePage {
+    index = {
+      LOGSTASH_TIME_BASED: 'logstash-*',
+      LOGSTASH_NON_TIME_BASED: 'logstash*',
+    };
+
+    public async gotoVisualizationLandingPage() {
+      await common.navigateToApp('visualize');
+    }
+
+    public async clickNewVisualization() {
+      // newItemButton button is only visible when there are items in the listing table is displayed.
+      let exists = await testSubjects.exists('newItemButton');
+      if (exists) {
+        return await testSubjects.click('newItemButton');
+      }
+
+      exists = await testSubjects.exists('createVisualizationPromptButton');
+      // no viz exist, click createVisualizationPromptButton to create new dashboard
+      return await this.createVisualizationPromptButton();
+    }
+
+    public async createVisualizationPromptButton() {
+      await testSubjects.click('createVisualizationPromptButton');
+    }
+
+    public async getChartTypes() {
+      const chartTypeField = await testSubjects.find('visNewDialogTypes');
+      const $ = await chartTypeField.parseDomContent();
+      return $('button')
+        .toArray()
+        .map(chart =>
+          $(chart)
+            .findTestSubject('visTypeTitle')
+            .text()
+            .trim()
+        );
+    }
+
+    public async waitForVisualizationSelectPage() {
+      await retry.try(async () => {
+        const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes');
+        if (!(await visualizeSelectTypePage.isDisplayed())) {
+          throw new Error('wait for visualization select page');
+        }
+      });
+    }
+
+    public async navigateToNewVisualization() {
+      await common.navigateToApp('visualize');
+      await this.clickNewVisualization();
+      await this.waitForVisualizationSelectPage();
+    }
+
+    public async clickVisType(type: string) {
+      await testSubjects.click(`visType-${type}`);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async clickAreaChart() {
+      await this.clickVisType('area');
+    }
+
+    public async clickDataTable() {
+      await this.clickVisType('table');
+    }
+
+    public async clickLineChart() {
+      await this.clickVisType('line');
+    }
+
+    public async clickRegionMap() {
+      await this.clickVisType('region_map');
+    }
+
+    public async clickMarkdownWidget() {
+      await this.clickVisType('markdown');
+    }
+
+    public async clickMetric() {
+      await this.clickVisType('metric');
+    }
+
+    public async clickGauge() {
+      await this.clickVisType('gauge');
+    }
+
+    public async clickPieChart() {
+      await this.clickVisType('pie');
+    }
+
+    public async clickTileMap() {
+      await this.clickVisType('tile_map');
+    }
+
+    public async clickTagCloud() {
+      await this.clickVisType('tagcloud');
+    }
+
+    public async clickVega() {
+      await this.clickVisType('vega');
+    }
+
+    public async clickVisualBuilder() {
+      await this.clickVisType('metrics');
+    }
+
+    public async clickVerticalBarChart() {
+      await this.clickVisType('histogram');
+    }
+
+    public async clickHeatmapChart() {
+      await this.clickVisType('heatmap');
+    }
+
+    public async clickInputControlVis() {
+      await this.clickVisType('input_control_vis');
+    }
+
+    public async createSimpleMarkdownViz(vizName: string) {
+      await this.gotoVisualizationLandingPage();
+      await this.navigateToNewVisualization();
+      await this.clickMarkdownWidget();
+      await visEditor.setMarkdownTxt(vizName);
+      await visEditor.clickGo();
+      await this.saveVisualization(vizName);
+    }
+
+    public async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) {
+      await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async selectVisSourceIfRequired() {
+      log.debug('selectVisSourceIfRequired');
+      const selectPage = await testSubjects.findAll('visualizeSelectSearch');
+      if (selectPage.length) {
+        log.debug('a search is required for this visualization');
+        await this.clickNewSearch();
+      }
+    }
+
+    /**
+     * Deletes all existing visualizations
+     */
+    public async deleteAllVisualizations() {
+      await retry.try(async () => {
+        await listingTable.checkListingSelectAllCheckbox();
+        await listingTable.clickDeleteSelected();
+        await common.clickConfirmOnModal();
+        await testSubjects.find('createVisualizationPromptButton');
+      });
+    }
+
+    public async isBetaInfoShown() {
+      return await testSubjects.exists('betaVisInfo');
+    }
+
+    public async getBetaTypeLinks() {
+      return await find.allByCssSelector('[data-vis-stage="beta"]');
+    }
+
+    public async getExperimentalTypeLinks() {
+      return await find.allByCssSelector('[data-vis-stage="experimental"]');
+    }
+
+    public async isExperimentalInfoShown() {
+      return await testSubjects.exists('experimentalVisInfo');
+    }
+
+    public async getExperimentalInfo() {
+      return await testSubjects.find('experimentalVisInfo');
+    }
+
+    public async getSideEditorExists() {
+      return await find.existsByCssSelector('.collapsible-sidebar');
+    }
+
+    public async clickSavedSearch(savedSearchName: string) {
+      await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async clickUnlinkSavedSearch() {
+      await testSubjects.doubleClick('unlinkSavedSearch');
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async ensureSavePanelOpen() {
+      log.debug('ensureSavePanelOpen');
+      await header.waitUntilLoadingHasFinished();
+      const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 });
+      if (!isOpen) {
+        await testSubjects.click('visualizeSaveButton');
+      }
+    }
+
+    public async clickLoadSavedVisButton() {
+      // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb
+      // element as a child instead of building the breadcrumbs dynamically.
+      await find.clickByCssSelector('[href="#/visualize"]');
+    }
+
+    public async clickVisualizationByName(vizName: string) {
+      log.debug('clickVisualizationByLinkText(' + vizName + ')');
+      await find.clickByPartialLinkText(vizName);
+    }
+
+    public async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) {
+      if (navigateToVisualize) {
+        await this.clickLoadSavedVisButton();
+      }
+      await this.openSavedVisualization(vizName);
+    }
+
+    public async openSavedVisualization(vizName: string) {
+      await this.clickVisualizationByName(vizName);
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async waitForVisualizationSavedToastGone() {
+      await testSubjects.waitForDeleted('saveVisualizationSuccess');
+    }
+
+    public async clickLandingPageBreadcrumbLink() {
+      log.debug('clickLandingPageBreadcrumbLink');
+      await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`);
+    }
+
+    /**
+     * Returns true if already on the landing page (that page doesn't have a link to itself).
+     * @returns {Promise<boolean>}
+     */
+    public async onLandingPage() {
+      log.debug(`VisualizePage.onLandingPage`);
+      return await testSubjects.exists('visualizeLandingPage');
+    }
+
+    public async gotoLandingPage() {
+      log.debug('VisualizePage.gotoLandingPage');
+      const onPage = await this.onLandingPage();
+      if (!onPage) {
+        await retry.try(async () => {
+          await this.clickLandingPageBreadcrumbLink();
+          const onLandingPage = await this.onLandingPage();
+          if (!onLandingPage) throw new Error('Not on the landing page.');
+        });
+      }
+    }
+
+    public async saveVisualization(vizName: string, { saveAsNew = false } = {}) {
+      await this.ensureSavePanelOpen();
+      await testSubjects.setValue('savedObjectTitle', vizName);
+      if (saveAsNew) {
+        log.debug('Check save as new visualization');
+        await testSubjects.click('saveAsNewCheckbox');
+      }
+      log.debug('Click Save Visualization button');
+
+      await testSubjects.click('confirmSaveSavedObjectButton');
+
+      // Confirm that the Visualization has actually been saved
+      await testSubjects.existOrFail('saveVisualizationSuccess');
+      const message = await common.closeToast();
+      await header.waitUntilLoadingHasFinished();
+      await common.waitForSaveModalToClose();
+
+      return message;
+    }
+
+    public async saveVisualizationExpectSuccess(vizName: string, { saveAsNew = false } = {}) {
+      const saveMessage = await this.saveVisualization(vizName, { saveAsNew });
+      if (!saveMessage) {
+        throw new Error(
+          `Expected saveVisualization to respond with the saveMessage from the toast, got ${saveMessage}`
+        );
+      }
+    }
+
+    public async saveVisualizationExpectSuccessAndBreadcrumb(
+      vizName: string,
+      { saveAsNew = false } = {}
+    ) {
+      await this.saveVisualizationExpectSuccess(vizName, { saveAsNew });
+      await retry.waitFor(
+        'last breadcrumb to have new vis name',
+        async () => (await globalNav.getLastBreadcrumb()) === vizName
+      );
+    }
+  }
+
+  return new VisualizePage();
+}
diff --git a/test/functional/services/dashboard/visualizations.js b/test/functional/services/dashboard/visualizations.js
index c4e7fe6ad3bd9..5e722ccce8970 100644
--- a/test/functional/services/dashboard/visualizations.js
+++ b/test/functional/services/dashboard/visualizations.js
@@ -24,7 +24,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) {
   const queryBar = getService('queryBar');
   const testSubjects = getService('testSubjects');
   const dashboardAddPanel = getService('dashboardAddPanel');
-  const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']);
+  const PageObjects = getPageObjects(['dashboard', 'visualize', 'visEditor', 'header', 'discover']);
 
   return new (class DashboardVisualizations {
     async createAndAddTSVBVisualization(name) {
@@ -107,8 +107,8 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) {
       }
       await this.ensureNewVisualizationDialogIsShowing();
       await PageObjects.visualize.clickMarkdownWidget();
-      await PageObjects.visualize.setMarkdownTxt(markdown);
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setMarkdownTxt(markdown);
+      await PageObjects.visEditor.clickGo();
       await PageObjects.visualize.saveVisualizationExpectSuccess(name);
     }
   })();
diff --git a/test/functional/services/index.ts b/test/functional/services/index.ts
index ea47ccf1d2704..a10bb013b3af4 100644
--- a/test/functional/services/index.ts
+++ b/test/functional/services/index.ts
@@ -49,7 +49,7 @@ import { TestSubjectsProvider } from './test_subjects';
 import { ToastsProvider } from './toasts';
 // @ts-ignore not TS yet
 import { PieChartProvider } from './visualizations';
-import { VisualizeListingTableProvider } from './visualize_listing_table';
+import { ListingTableProvider } from './listing_table';
 import { SavedQueryManagementComponentProvider } from './saved_query_management_component';
 
 export const services = {
@@ -66,7 +66,7 @@ export const services = {
   dashboardVisualizations: DashboardVisualizationProvider,
   dashboardExpect: DashboardExpectProvider,
   failureDebugging: FailureDebuggingProvider,
-  visualizeListingTable: VisualizeListingTableProvider,
+  listingTable: ListingTableProvider,
   dashboardAddPanel: DashboardAddPanelProvider,
   dashboardReplacePanel: DashboardReplacePanelProvider,
   dashboardPanelActions: DashboardPanelActionsProvider,
diff --git a/test/functional/services/visualize_listing_table.ts b/test/functional/services/listing_table.ts
similarity index 50%
rename from test/functional/services/visualize_listing_table.ts
rename to test/functional/services/listing_table.ts
index 8c4640ada1c05..ec886cf694f2e 100644
--- a/test/functional/services/visualize_listing_table.ts
+++ b/test/functional/services/listing_table.ts
@@ -19,13 +19,25 @@
 
 import { FtrProviderContext } from '../ftr_provider_context';
 
-export function VisualizeListingTableProvider({ getService, getPageObjects }: FtrProviderContext) {
+export function ListingTableProvider({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
   const log = getService('log');
-  const { header } = getPageObjects(['header']);
+  const retry = getService('retry');
+  const { common, header } = getPageObjects(['common', 'header']);
+
+  class ListingTable {
+    public async getSearchFilter() {
+      const searchFilter = await find.allByCssSelector('.euiFieldSearch');
+      return searchFilter[0];
+    }
+
+    public async clearFilter() {
+      const searchFilter = await this.getSearchFilter();
+      await searchFilter.clearValue();
+      await searchFilter.click();
+    }
 
-  class VisualizeListingTable {
     public async getAllVisualizationNamesOnCurrentPage(): Promise<string[]> {
       const visualizationNames = [];
       const links = await find.allByCssSelector('.kuiLink');
@@ -36,8 +48,44 @@ export function VisualizeListingTableProvider({ getService, getPageObjects }: Ft
       return visualizationNames;
     }
 
+    public async getItemsCount(appName: 'visualize' | 'dashboard'): Promise<number> {
+      const prefixMap = { visualize: 'vis', dashboard: 'dashboard' };
+      const elements = await find.allByCssSelector(
+        `[data-test-subj^="${prefixMap[appName]}ListingTitleLink"]`
+      );
+      return elements.length;
+    }
+
+    public async searchForItemWithName(name: string) {
+      log.debug(`searchForItemWithName: ${name}`);
+
+      await retry.try(async () => {
+        const searchFilter = await this.getSearchFilter();
+        await searchFilter.clearValue();
+        await searchFilter.click();
+        // Note: this replacement of - to space is to preserve original logic but I'm not sure why or if it's needed.
+        await searchFilter.type(name.replace('-', ' '));
+        await common.pressEnterKey();
+      });
+
+      await header.waitUntilLoadingHasFinished();
+    }
+
+    public async clickDeleteSelected() {
+      await testSubjects.click('deleteSelectedItems');
+    }
+
+    public async checkListingSelectAllCheckbox() {
+      const element = await testSubjects.find('checkboxSelectAll');
+      const isSelected = await element.isSelected();
+      if (!isSelected) {
+        log.debug(`checking checkbox "checkboxSelectAll"`);
+        await testSubjects.click('checkboxSelectAll');
+      }
+    }
+
     public async getAllVisualizationNames(): Promise<string[]> {
-      log.debug('VisualizeListingTable.getAllVisualizationNames');
+      log.debug('ListingTable.getAllVisualizationNames');
       let morePages = true;
       let visualizationNames: string[] = [];
       while (morePages) {
@@ -54,5 +102,5 @@ export function VisualizeListingTableProvider({ getService, getPageObjects }: Ft
     }
   }
 
-  return new VisualizeListingTable();
+  return new ListingTable();
 }
diff --git a/test/functional/services/screenshots.ts b/test/functional/services/screenshots.ts
index 9e673fe919a74..4c5728174cf99 100644
--- a/test/functional/services/screenshots.ts
+++ b/test/functional/services/screenshots.ts
@@ -51,7 +51,7 @@ export async function ScreenshotsProvider({ getService }: FtrProviderContext) {
      * @param updateBaselines {boolean} optional, pass true to update the baseline snapshot.
      * @return {Promise.<number>} Percentage difference between the baseline and the current snapshot.
      */
-    async compareAgainstBaseline(name: string, updateBaselines: boolean, el: WebElementWrapper) {
+    async compareAgainstBaseline(name: string, updateBaselines: boolean, el?: WebElementWrapper) {
       log.debug('compareAgainstBaseline');
       const sessionPath = resolve(SESSION_DIRECTORY, `${name}.png`);
       await this._take(sessionPath, el);
diff --git a/test/functional/services/test_subjects.ts b/test/functional/services/test_subjects.ts
index a3f64e6f96cc8..8ef008d5dee50 100644
--- a/test/functional/services/test_subjects.ts
+++ b/test/functional/services/test_subjects.ts
@@ -295,6 +295,25 @@ export function TestSubjectsProvider({ getService }: FtrProviderContext) {
     public getCssSelector(selector: string): string {
       return testSubjSelector(selector);
     }
+
+    public async scrollIntoView(selector: string) {
+      const element = await this.find(selector);
+      await element.scrollIntoViewIfNecessary();
+    }
+
+    public async isChecked(selector: string) {
+      const checkbox = await this.find(selector);
+      return await checkbox.isSelected();
+    }
+
+    public async setCheckbox(selector: string, state: 'check' | 'uncheck') {
+      const isChecked = await this.isChecked(selector);
+      const states = { check: true, uncheck: false };
+      if (isChecked !== states[state]) {
+        log.debug(`updating checkbox ${selector}`);
+        await this.click(selector);
+      }
+    }
   }
 
   return new TestSubjects();
diff --git a/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js b/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js
index 30b9dbe0fe80a..ef6f0a626bd15 100644
--- a/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js
+++ b/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js
@@ -22,7 +22,7 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const testSubjects = getService('testSubjects');
   const renderable = getService('renderable');
-  const PageObjects = getPageObjects(['common', 'visualize']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor']);
 
   async function getCounterValue() {
     return await testSubjects.getVisibleText('counter');
@@ -42,9 +42,9 @@ export default function({ getService, getPageObjects }) {
       const editor = await testSubjects.find('counterEditor');
       await editor.clearValue();
       await editor.type('10');
-      const isApplyEnabled = await PageObjects.visualize.isApplyEnabled();
+      const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled();
       expect(isApplyEnabled).to.be(true);
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
       const counter = await getCounterValue();
       expect(counter).to.be('10');
     });
@@ -57,7 +57,7 @@ export default function({ getService, getPageObjects }) {
       const editorValue = await getEditorValue();
       expect(editorValue).to.be('11');
       // If changing a param from within the vis it should immediately apply and not bring editor in an unchanged state
-      const isApplyEnabled = await PageObjects.visualize.isApplyEnabled();
+      const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled();
       expect(isApplyEnabled).to.be(false);
     });
   });
diff --git a/x-pack/test/functional/apps/security/rbac_phase1.js b/x-pack/test/functional/apps/security/rbac_phase1.js
index 361bb6dbbdae4..9309e23bdd762 100644
--- a/x-pack/test/functional/apps/security/rbac_phase1.js
+++ b/x-pack/test/functional/apps/security/rbac_phase1.js
@@ -7,7 +7,14 @@
 import expect from '@kbn/expect';
 import { indexBy } from 'lodash';
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['security', 'settings', 'common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects([
+    'security',
+    'settings',
+    'common',
+    'visualize',
+    'timePicker',
+    'visChart',
+  ]);
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
@@ -110,7 +117,7 @@ export default function({ getService, getPageObjects }) {
           '"'
       );
       await PageObjects.timePicker.setDefaultAbsoluteRange();
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
       await PageObjects.visualize.saveVisualizationExpectSuccess(vizName1);
       await PageObjects.security.forceLogout();
     });
diff --git a/x-pack/test/functional/apps/visualize/hybrid_visualization.ts b/x-pack/test/functional/apps/visualize/hybrid_visualization.ts
index 03b6ed8e8e7c5..5ec6bd275133a 100644
--- a/x-pack/test/functional/apps/visualize/hybrid_visualization.ts
+++ b/x-pack/test/functional/apps/visualize/hybrid_visualization.ts
@@ -7,7 +7,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function({ getPageObjects, getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
-  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'visChart']);
   const inspector = getService('inspector');
 
   describe('hybrid index pattern', () => {
@@ -81,7 +81,7 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
       await PageObjects.common.navigateToApp('visualize');
       await PageObjects.visualize.clickVisualizationByName('hybrid_histogram_line_chart');
       await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
-      await PageObjects.visualize.waitForVisualizationRenderingStabilized();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
       await inspector.open();
       await inspector.setTablePageSize(50);
       await inspector.expectTableData(expectedData);
diff --git a/x-pack/test/reporting/functional/reporting.js b/x-pack/test/reporting/functional/reporting.js
index 7d72db8c08e22..8458f4e537b70 100644
--- a/x-pack/test/reporting/functional/reporting.js
+++ b/x-pack/test/reporting/functional/reporting.js
@@ -25,6 +25,7 @@ export default function({ getService, getPageObjects }) {
     'header',
     'discover',
     'visualize',
+    'visEditor',
   ]);
   const log = getService('log');
 
@@ -298,9 +299,9 @@ export default function({ getService, getPageObjects }) {
 
         it('becomes available when saved', async () => {
           await PageObjects.reporting.setTimepickerInDataRange();
-          await PageObjects.visualize.clickBucket('X-axis');
-          await PageObjects.visualize.selectAggregation('Date Histogram');
-          await PageObjects.visualize.clickGo();
+          await PageObjects.visEditor.clickBucket('X-axis');
+          await PageObjects.visEditor.selectAggregation('Date Histogram');
+          await PageObjects.visEditor.clickGo();
           await PageObjects.visualize.saveVisualization('my viz');
           await PageObjects.reporting.openPdfReportingPanel();
           await expectEnabledGenerateReportButton();