diff --git a/docs/management/connectors/action-types/email.asciidoc b/docs/management/connectors/action-types/email.asciidoc
index f04888a681b6ae..7d6cc75282a2f4 100644
--- a/docs/management/connectors/action-types/email.asciidoc
+++ b/docs/management/connectors/action-types/email.asciidoc
@@ -183,6 +183,7 @@ as you're creating or editing the connector in {kib}. For example:
 
 [role="screenshot"]
 image::management/connectors/images/email-params-test.png[Email params test]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 Email actions have the following configuration properties.
 
diff --git a/docs/management/connectors/images/email-params-test.png b/docs/management/connectors/images/email-params-test.png
index 3745bcd3235e93..bc2a9706e6396d 100644
Binary files a/docs/management/connectors/images/email-params-test.png and b/docs/management/connectors/images/email-params-test.png differ
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index a03c34c90962e9..9edde99574ca1f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -234,6 +234,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
           <>
             <EuiLink
               data-test-subj={`edit${item.id}`}
+              title={name}
               onClick={() => editItem(item, EditConnectorTabs.Configuration)}
               key={item.id}
               disabled={actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true}
diff --git a/x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts b/x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts
index 4eec4061347b9c..4da22a8e807a84 100644
--- a/x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts
+++ b/x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts
@@ -12,8 +12,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const screenshotDirectories = ['response_ops_docs', 'stack_connectors'];
   const pageObjects = getPageObjects(['common', 'header']);
   const actions = getService('actions');
-  const testSubjects = getService('testSubjects');
+  const browser = getService('browser');
   const comboBox = getService('comboBox');
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
   const testIndex = `test-index`;
   const indexDocument =
     `{\n` +
@@ -21,13 +23,36 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     `"rule_name": "{{rule.name}}",\n` +
     `"alert_id": "{{alert.id}}",\n` +
     `"context_message": "{{context.message}}"\n`;
+  const emailConnectorName = 'my-email-connector';
 
   describe('connector types', function () {
+    let emailConnectorId: string;
+    before(async () => {
+      ({ id: emailConnectorId } = await actions.api.createConnector({
+        name: emailConnectorName,
+        config: {
+          service: 'other',
+          from: 'bob@example.com',
+          host: 'some.non.existent.com',
+          port: 25,
+        },
+        secrets: {
+          user: 'bob',
+          password: 'supersecret',
+        },
+        connectorTypeId: '.email',
+      }));
+    });
+
     beforeEach(async () => {
       await pageObjects.common.navigateToApp('connectors');
       await pageObjects.header.waitUntilLoadingHasFinished();
     });
 
+    after(async () => {
+      await actions.api.deleteConnector(emailConnectorId);
+    });
+
     it('server log connector screenshots', async () => {
       await pageObjects.common.navigateToApp('connectors');
       await pageObjects.header.waitUntilLoadingHasFinished();
@@ -69,5 +94,31 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const flyOutCancelButton = await testSubjects.find('euiFlyoutCloseButton');
       await flyOutCancelButton.click();
     });
+
+    it('test email connector screenshots', async () => {
+      const searchBox = await find.byCssSelector('[data-test-subj="actionsList"] .euiFieldSearch');
+      await searchBox.click();
+      await searchBox.clearValue();
+      await searchBox.type('my actionTypeId:(.email)');
+      await searchBox.pressKeys(browser.keys.ENTER);
+      const connectorList = await testSubjects.find('actionsTable');
+      const emailConnector = await connectorList.findByCssSelector(
+        `[title="${emailConnectorName}"]`
+      );
+      await emailConnector.click();
+      const testButton = await testSubjects.find('testConnectorTab');
+      await testButton.click();
+      await testSubjects.setValue('comboBoxSearchInput', 'elastic@gmail.com');
+      await testSubjects.setValue('subjectInput', 'Test subject');
+      await testSubjects.setValue('messageTextArea', 'Enter message text');
+      /* timing issue sometimes happens with the combobox so we just try to set the subjectInput again */
+      await testSubjects.setValue('subjectInput', 'Test subject');
+      await commonScreenshots.takeScreenshot(
+        'email-params-test',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
   });
 }