diff --git a/examples/index_pattern_field_editor_example/README.md b/examples/index_pattern_field_editor_example/README.md
index 95ec37a46a442..35ae814fc10e2 100644
--- a/examples/index_pattern_field_editor_example/README.md
+++ b/examples/index_pattern_field_editor_example/README.md
@@ -1,6 +1,7 @@
 ## index pattern field editor example
 
 This example index pattern field editor app shows how to:
- - TODO
+ - Edit index pattern fields via flyout
+ - Delete index pattern runtime fields with modal confirm prompt
 
 To run this example, use the command `yarn start --run-examples`.
\ No newline at end of file
diff --git a/examples/index_pattern_field_editor_example/public/app.tsx b/examples/index_pattern_field_editor_example/public/app.tsx
index 4a895de6b505f..bd725759380aa 100644
--- a/examples/index_pattern_field_editor_example/public/app.tsx
+++ b/examples/index_pattern_field_editor_example/public/app.tsx
@@ -46,10 +46,11 @@ const IndexPatternFieldEditorExample = ({ indexPattern, indexPatternFieldEditor
       name: 'Actions',
       actions: [
         {
-          name: 'Clone',
-          description: 'Clone this person',
-          icon: 'copy',
+          name: 'Edit',
+          description: 'Edit this field',
+          icon: 'pencil',
           type: 'icon',
+          'data-test-subj': 'editField',
           onClick: (fld: IndexPatternField) =>
             indexPatternFieldEditor.openEditor({
               ctx: { indexPattern: indexPattern! },
@@ -59,10 +60,10 @@ const IndexPatternFieldEditorExample = ({ indexPattern, indexPatternFieldEditor
         },
         {
           name: 'Delete',
-          description: 'Delete this person',
+          description: 'Delete this field',
           icon: 'trash',
           type: 'icon',
-          color: 'danger',
+          'data-test-subj': 'deleteField',
           available: (fld) => !!fld.runtimeField,
           onClick: (fld: IndexPatternField) =>
             indexPatternFieldEditor.openDeleteModal({
@@ -79,7 +80,7 @@ const IndexPatternFieldEditorExample = ({ indexPattern, indexPatternFieldEditor
 
   const content = indexPattern ? (
     <>
-      <EuiText>Index pattern: {indexPattern?.title}</EuiText>
+      <EuiText data-test-subj="indexPatternTitle">Index pattern: {indexPattern?.title}</EuiText>
       <div>
         <EuiButton
           onClick={() =>
@@ -88,6 +89,7 @@ const IndexPatternFieldEditorExample = ({ indexPattern, indexPatternFieldEditor
               onSave: refreshFields,
             })
           }
+          data-test-subj="addField"
         >
           Add field
         </EuiButton>
diff --git a/examples/index_pattern_field_editor_example/public/plugin.tsx b/examples/index_pattern_field_editor_example/public/plugin.tsx
index ebb6f729c48c8..ccbb93e3acf95 100644
--- a/examples/index_pattern_field_editor_example/public/plugin.tsx
+++ b/examples/index_pattern_field_editor_example/public/plugin.tsx
@@ -8,7 +8,6 @@
 
 import { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '../../../src/core/public';
 import { DeveloperExamplesSetup } from '../../developer_examples/public';
-// import { ExpressionsSetup, ExpressionsStart } from '../../../src/plugins/expressions/public';
 import { DataPublicPluginStart } from '../../../src/plugins/data/public';
 import { IndexPatternFieldEditorStart } from '../../../src/plugins/index_pattern_field_editor/public';
 
@@ -23,20 +22,6 @@ interface SetupDeps {
 
 export class IndexPatternFieldEditorPlugin implements Plugin<void, void, SetupDeps, StartDeps> {
   public setup(core: CoreSetup<StartDeps>, deps: SetupDeps) {
-    /*
-    // register custom inspector adapter & view
-    deps.inspector.registerView(getExpressionsInspectorViewDescription());
-
-    // register custom actions
-    deps.uiActions.registerTrigger(navigateTrigger);
-    deps.uiActions.registerAction(createNavigateAction());
-    deps.uiActions.attachAction(NAVIGATE_TRIGGER_ID, ACTION_NAVIGATE);
-
-    // register custom functions and renderers
-    deps.expressions.registerRenderer(buttonRenderer);
-    deps.expressions.registerFunction(buttonFn);
-    */
-
     core.application.register({
       id: 'indexPatternFieldEditorExample',
       title: 'Index pattern field editor example',
diff --git a/test/examples/config.js b/test/examples/config.js
index 1ee095fbdedeb..b5ebc07506736 100644
--- a/test/examples/config.js
+++ b/test/examples/config.js
@@ -28,6 +28,7 @@ export default async function ({ readConfigFile }) {
       require.resolve('./state_sync'),
       require.resolve('./routing'),
       require.resolve('./expressions_explorer'),
+      require.resolve('./index_pattern_field_editor_example'),
     ],
     services: {
       ...functionalConfig.get('services'),
@@ -48,7 +49,7 @@ export default async function ({ readConfigFile }) {
     },
     apps: functionalConfig.get('apps'),
     esArchiver: {
-      directory: path.resolve(__dirname, '../es_archives'),
+      directory: path.resolve(__dirname, '../functional/fixtures/es_archiver'),
     },
     screenshots: functionalConfig.get('screenshots'),
     junit: {
diff --git a/test/examples/index_pattern_field_editor_example/index.ts b/test/examples/index_pattern_field_editor_example/index.ts
new file mode 100644
index 0000000000000..0cd23a33c8476
--- /dev/null
+++ b/test/examples/index_pattern_field_editor_example/index.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({
+  getService,
+  getPageObjects,
+  loadTestFile,
+}: PluginFunctionalProviderContext) {
+  const browser = getService('browser');
+  const es = getService('es');
+  const PageObjects = getPageObjects(['common', 'header', 'settings']);
+
+  describe('index pattern field editor example', function () {
+    this.tags('ciGroup2');
+    before(async () => {
+      await browser.setWindowSize(1300, 900);
+      await es.transport.request({
+        path: '/blogs/_doc',
+        method: 'POST',
+        body: { user: 'matt', message: 20 },
+      });
+
+      await PageObjects.settings.navigateTo();
+      await PageObjects.settings.createIndexPattern('blogs', null);
+      await PageObjects.common.navigateToApp('indexPatternFieldEditorExample');
+    });
+
+    loadTestFile(require.resolve('./index_pattern_field_editor_example'));
+  });
+}
diff --git a/test/examples/index_pattern_field_editor_example/index_pattern_field_editor_example.ts b/test/examples/index_pattern_field_editor_example/index_pattern_field_editor_example.ts
new file mode 100644
index 0000000000000..7a94943ff1e08
--- /dev/null
+++ b/test/examples/index_pattern_field_editor_example/index_pattern_field_editor_example.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import expect from '@kbn/expect';
+
+import { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService }: PluginFunctionalProviderContext) {
+  const testSubjects = getService('testSubjects');
+
+  describe('', () => {
+    it('finds an index pattern', async () => {
+      await testSubjects.existOrFail('indexPatternTitle');
+    });
+    it('opens the field editor', async () => {
+      await testSubjects.click('addField');
+      await testSubjects.existOrFail('flyoutTitle');
+    });
+  });
+}