[8.10] [DOCS] Automate generative AI connector screenshots (#165420) (#165891)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[DOCS] Automate generative AI connector screenshots
(#165420)](https://github.com/elastic/kibana/pull/165420)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Lisa
Cawley","email":"lcawley@elastic.co"},"sourceCommit":{"committedDate":"2023-09-06T17:51:13Z","message":"[DOCS]
Automate generative AI connector screenshots
(#165420)","sha":"633aebe5fc46bc031358212a8015cfcea2cd9047","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Actions/ConnectorTypes","backport:prev-minor","v8.11.0"],"number":165420,"url":"https://github.com/elastic/kibana/pull/165420","mergeCommit":{"message":"[DOCS]
Automate generative AI connector screenshots
(#165420)","sha":"633aebe5fc46bc031358212a8015cfcea2cd9047"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/165420","number":165420,"mergeCommit":{"message":"[DOCS]
Automate generative AI connector screenshots
(#165420)","sha":"633aebe5fc46bc031358212a8015cfcea2cd9047"}}]}]
BACKPORT-->

Co-authored-by: Lisa Cawley <lcawley@elastic.co>

docs/management/connectors/action-types/gen-ai.asciidoc

@@ -14,6 +14,7 @@ You can create connectors in *{stack-manage-app} > {connectors-ui}*.  For exampl
 
 [role="screenshot"]
 image::management/connectors/images/gen-ai-connector.png[Generative AI connector]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 [float]
 [[gen-ai-connector-configuration]]
@@ -65,6 +66,7 @@ as you're creating or editing the connector in {kib}. For example:
 
 [role="screenshot"]
 image::management/connectors/images/gen-ai-params-test.png[Generative AI params test]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 The Generative AI actions have the following configuration properties.
 

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/generative_ai_connector.ts

@@ -0,0 +1,48 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const commonScreenshots = getService('commonScreenshots');
+  const screenshotDirectories = ['response_ops_docs', 'stack_connectors'];
+  const pageObjects = getPageObjects(['common', 'header']);
+  const actions = getService('actions');
+  const testSubjects = getService('testSubjects');
+  const actionBody =
+    `{\n` +
+    `"model": "gpt-3.5-turbo",\n` +
+    `"messages": [{\n` +
+    `"role": "user",\n` +
+    `"content": "You are a cyber security analyst using Elastic Security. I would like you to evaluate the event below and format your output neatly in markdown syntax. Add your description, an accuracy rating, and a threat rating."\n` +
+    `}]`;
+
+  describe('connector types', function () {
+    beforeEach(async () => {
+      await pageObjects.common.navigateToApp('connectors');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+    });
+
+    it('generative ai connector screenshots', async () => {
+      await pageObjects.common.navigateToApp('connectors');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await actions.common.openNewConnectorForm('gen-ai');
+      await testSubjects.setValue('nameInput', 'OpenAI test connector');
+      await testSubjects.setValue('secrets.apiKey-input', 'testkey');
+      await commonScreenshots.takeScreenshot('gen-ai-connector', screenshotDirectories, 1920, 1200);
+      await testSubjects.click('create-connector-flyout-save-test-btn');
+      await testSubjects.click('toastCloseButton');
+      const editor = await testSubjects.find('kibanaCodeEditor');
+      await editor.clearValue();
+      await testSubjects.setValue('kibanaCodeEditor', actionBody, {
+        clearWithKeyboard: true,
+      });
+      await commonScreenshots.takeScreenshot('gen-ai-params-test', screenshotDirectories);
+      await testSubjects.click('euiFlyoutCloseButton');
+    });
+  });
+}

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/index.ts

@@ -55,5 +55,6 @@ export default function ({ loadTestFile, getService }: FtrProviderContext) {
 
     loadTestFile(require.resolve('./connectors'));
     loadTestFile(require.resolve('./connector_types'));
+    loadTestFile(require.resolve('./generative_ai_connector'));
   });
 }