[8.10] [DOCS] Automates xMatters connector screenshots (#165922) (#166120)

# Backport

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

<!--- Backport version: 8.9.8 -->

### 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-08T18:47:13Z","message":"[DOCS]
Automates xMatters connector screenshots
(#165922)","sha":"c7ab78eeb8a571245c12d4e22b08a620e4ec99da","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":165922,"url":"https://github.com/elastic/kibana/pull/165922","mergeCommit":{"message":"[DOCS]
Automates xMatters connector screenshots
(#165922)","sha":"c7ab78eeb8a571245c12d4e22b08a620e4ec99da"}},"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/165922","number":165922,"mergeCommit":{"message":"[DOCS]
Automates xMatters connector screenshots
(#165922)","sha":"c7ab78eeb8a571245c12d4e22b08a620e4ec99da"}}]}]
BACKPORT-->

docs/management/connectors/action-types/xmatters.asciidoc

@@ -3,6 +3,10 @@
 ++++
 <titleabbrev>xMatters</titleabbrev>
 ++++
+:frontmatter-description: Add a connector that can send alerts to xMatters.
+:frontmatter-tags-products: [kibana] 
+:frontmatter-tags-content-type: [how-to] 
+:frontmatter-tags-user-goals: [configure]
 
 The xMatters connector uses the https://help.xmatters.com/integrations/#cshid=Elastic[xMatters Workflow for Elastic] to send actionable alerts to on-call xMatters resources.
 
@@ -15,9 +19,11 @@ or as needed when you're creating a rule. You must choose between basic and URL
 
 [role="screenshot"]
 image::management/connectors/images/xmatters-connector-basic.png[xMatters connector with basic authentication]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 [role="screenshot"]
 image::management/connectors/images/xmatters-connector-url.png[xMatters connector with url authentication]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 [float]
 [[xmatters-connector-configuration]]
@@ -90,6 +96,7 @@ as you're creating or editing the connector in {kib}. For example:
 
 [role="screenshot"]
 image::management/connectors/images/xmatters-params-test.png[xMatters params test]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 xMatters rules have the following properties:
 

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

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

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

@@ -0,0 +1,42 @@
+/*
+ * 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');
+
+  describe('xmatters connector', 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('xmatters');
+      await testSubjects.setValue('nameInput', 'xMatters test connector');
+      await commonScreenshots.takeScreenshot('xmatters-connector-basic', screenshotDirectories);
+      const authentication = await testSubjects.find('button-group');
+      // a radio button consists of a div tag that contains an input, a div, and a label
+      // we can't click the input directly, need to click the label
+      const label = await authentication.findByCssSelector('label[title="URL Authentication"]');
+      await label.click();
+      await commonScreenshots.takeScreenshot('xmatters-connector-url', screenshotDirectories);
+      await testSubjects.setValue('secrets.secretsUrl', 'https://example.com');
+      await testSubjects.click('create-connector-flyout-save-test-btn');
+      await testSubjects.click('toastCloseButton');
+      await commonScreenshots.takeScreenshot('xmatters-params-test', screenshotDirectories);
+      await testSubjects.click('euiFlyoutCloseButton');
+    });
+  });
+}