[DOCS] Automate screenshot for case connectors (#149178)

docs/management/cases/add-connectors.asciidoc

@@ -26,8 +26,11 @@ as described in <<action-types>>. Alternatively, you can create them in
 
 . Click *Edit external connection*.
 +
+--
 [role="screenshot"]
 image::images/cases-connectors.png[]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+--
 
 . From the *Incident management system* list, select *Add new connector*.
 

docs/management/cases/cases.asciidoc

@@ -10,6 +10,7 @@ management systems by configuring connectors.
 
 [role="screenshot"]
 image::images/cases.png[Cases page]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 NOTE: If you create cases in the {observability} or {security-app}, they are not
 visible in *{stack-manage-app}*. Likewise, the cases you create in

docs/management/cases/manage-cases.asciidoc

@@ -32,6 +32,7 @@ example, you can portray event and alert data through charts and graphs.
 
 [role="screenshot"]
 image::images/cases-visualization.png[Cases page]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 To add a visualization to a comment within your case:
 

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_cases/details_view.ts

@@ -14,7 +14,7 @@ export default function ({ getService }: FtrProviderContext) {
   const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
   let CASE_ID: string;
 
-  describe('deatils view', function () {
+  describe('details view', function () {
     before(async () => {
       const { id: caseId } = await cases.api.createCase({
         title: 'Web transactions',

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_cases/external_connections.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 }: FtrProviderContext) {
+  const cases = getService('cases');
+  const commonScreenshots = getService('commonScreenshots');
+
+  const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
+
+  describe('edit external connections', function () {
+    it('cases configure screenshot', async () => {
+      await cases.navigation.navigateToApp();
+      await cases.navigation.navigateToConfigurationPage();
+      await commonScreenshots.takeScreenshot('cases-connectors', screenshotDirectories, 1400, 1024);
+    });
+  });
+}

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

@@ -11,5 +11,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
   describe('stack cases', function () {
     loadTestFile(require.resolve('./list_view'));
     loadTestFile(require.resolve('./details_view'));
+    loadTestFile(require.resolve('./external_connections'));
   });
 }