[Uptime] Fix Synthetics Integration flaky tests (#107323)

* focus flaky tests

* add test subjects for header field buttons

* remove focused tests

* adjust types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/fleet_package/header_field.tsx

@@ -15,9 +15,15 @@ interface Props {
   contentMode?: Mode;
   defaultValue: Record<string, string>;
   onChange: (value: Record<string, string>) => void;
+  'data-test-subj'?: string;
 }
 
-export const HeaderField = ({ contentMode, defaultValue, onChange }: Props) => {
+export const HeaderField = ({
+  contentMode,
+  defaultValue,
+  onChange,
+  'data-test-subj': dataTestSubj,
+}: Props) => {
   const defaultValueKeys = Object.keys(defaultValue).filter((key) => key !== 'Content-Type'); // Content-Type is a secret header we hide from the user
   const formattedDefaultValues: Pair[] = [
     ...defaultValueKeys.map<Pair>((key) => {
@@ -55,6 +61,7 @@ export const HeaderField = ({ contentMode, defaultValue, onChange }: Props) => {
       }
       defaultPairs={headers}
       onChange={setHeaders}
+      data-test-subj={dataTestSubj}
     />
   );
 };

x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.tsx

@@ -205,7 +205,6 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
               defaultMessage="A dictionary of additional HTTP headers to send. By default the client will set the User-Agent header to identify itself."
             />
           }
-          data-test-subj="syntheticsRequestHeaders"
         >
           <HeaderField
             contentMode={
@@ -222,6 +221,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsRequestHeaders"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -406,7 +406,6 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
               defaultMessage="A list of expected response headers."
             />
           }
-          data-test-subj="syntheticsResponseHeaders"
         >
           <HeaderField
             defaultValue={fields[ConfigKeys.RESPONSE_HEADERS_CHECK]}
@@ -418,6 +417,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsResponseHeaders"
           />
         </EuiFormRow>
         <EuiFormRow

x-pack/plugins/uptime/public/components/fleet_package/key_value_field.tsx

@@ -50,9 +50,15 @@ interface Props {
   addPairControlLabel: string | React.ReactElement;
   defaultPairs: Pair[];
   onChange: (pairs: Pair[]) => void;
+  'data-test-subj'?: string;
 }
 
-export const KeyValuePairsField = ({ addPairControlLabel, defaultPairs, onChange }: Props) => {
+export const KeyValuePairsField = ({
+  addPairControlLabel,
+  defaultPairs,
+  onChange,
+  'data-test-subj': dataTestSubj,
+}: Props) => {
   const [pairs, setPairs] = useState<Pair[]>(defaultPairs);
 
   const handleOnChange = useCallback(
@@ -89,11 +95,15 @@ export const KeyValuePairsField = ({ addPairControlLabel, defaultPairs, onChange
   }, [onChange, pairs]);
 
   return (
-    <>
+    <div data-test-subj={dataTestSubj}>
       <EuiSpacer size="s" />
       <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="plus" onClick={handleAddPair}>
+          <EuiButton
+            iconType="plus"
+            onClick={handleAddPair}
+            data-test-subj={`${dataTestSubj}__button`}
+          >
             {addPairControlLabel}
           </EuiButton>
         </EuiFlexItem>
@@ -176,6 +186,6 @@ export const KeyValuePairsField = ({ addPairControlLabel, defaultPairs, onChange
           );
         })}
       </StyledFieldset>
-    </>
+    </div>
   );
 };

x-pack/test/functional/page_objects/synthetics_integration_page.ts

@@ -178,7 +178,7 @@ export function SyntheticsIntegrationPageProvider({
      */
     async configureHeaders(testSubj: string, headers: Record<string, string>) {
       const headersContainer = await testSubjects.find(testSubj);
-      const addHeaderButton = await headersContainer.findByCssSelector('button');
+      const addHeaderButton = await testSubjects.find(`${testSubj}__button`);
       const keys = Object.keys(headers);
 
       await Promise.all(