Add acceptance test for creating a custom field

[MAILPOET-2463]

assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx

@@ -97,11 +97,12 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
   };
 
   return (
-    <div className="mailpoet_custom_field_add_form">
+    <div className="mailpoet_custom_field_add_form" data-automation-id="create_custom_field_form">
       <hr />
       <SelectControl
         label={MailPoet.I18n.t('selectCustomFieldType')}
         options={customFieldTypes}
+        data-automation-id="create_custom_field_type_select"
         onChange={(value) => {
           setFieldSettings(null);
           setFieldType(value);
@@ -110,6 +111,7 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
       <TextControl
         label={MailPoet.I18n.t('customFieldName')}
         onChange={setFieldName}
+        data-automation-id="create_custom_field_name_input"
       />
       <hr />
       {renderSettingsForType()}
@@ -117,6 +119,7 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
         isLarge
         isDefault
         disabled={!canSubmit()}
+        data-automation-id="create_custom_field_submit"
         onClick={() => {
           const data = {
             name: fieldName,

assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx

@@ -50,7 +50,7 @@ const CustomFieldSettings = ({
   }, [localData, onChange]);
 
   return (
-    <div className="custom-field-settings">
+    <div className="custom-field-settings" data-automation-id="custom_field_settings">
       {onSave ? (
         <Button
           isPrimary
@@ -101,6 +101,7 @@ const CustomFieldSettings = ({
           },
         ])}
         className="button-on-top"
+        data-automation-id="custom_field_values_add_item"
       >
         {MailPoet.I18n.t('customFieldAddItem')}
       </Button>

assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx

@@ -15,6 +15,7 @@ const PreviewItem = ({
 }) => (
   <div
     className="mailpoet-form-segments-settings-list"
+    data-automation-id="custom_field_value_settings"
     key={value.id}
   >
     <input
@@ -26,6 +27,7 @@ const PreviewItem = ({
     <input
       type="text"
       value={value.name}
+      data-automation-id="custom_field_value_settings_value"
       onChange={(event) => onUpdate(value.id, event.target.value)}
     />
     <Dashicon

assets/js/src/form_editor/blocks/custom_select/edit.jsx

@@ -105,7 +105,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
   return (
     <>
       {inspectorControls}
-      <div className="mailpoet_custom_select">
+      <div className="mailpoet_custom_select" data-automation-id="custom_select_block">
         {!attributes.labelWithinInput ? (
           <label className="mailpoet_select_label" htmlFor={clientId}>
             {formatLabel(attributes)}