From 7d88f3eaea2a727b1edbaf8d191577d5eecae498 Mon Sep 17 00:00:00 2001
From: Veljko V <veljano@yahoo.com>
Date: Wed, 2 Dec 2020 17:19:15 +0100
Subject: [PATCH] Update form tests to have front end checks [MAILPOET-3334]

[MAILPOET-3334](https://mailpoet.atlassian.net/browse/MAILPOET-3334)
---
 lib/Form/Block/Date.php                       |  4 +-
 lib/Form/Block/Divider.php                    |  2 +-
 lib/Form/Block/Select.php                     |  1 +
 lib/Form/Block/Text.php                       |  2 +-
 lib/Form/Block/Textarea.php                   |  2 +-
 tests/acceptance/FormEditorAddDividerCest.php |  9 +-
 .../FormEditorAddListSelectionCest.php        | 20 ++--
 tests/acceptance/FormEditorAddNamesCest.php   | 18 +++-
 .../acceptance/FormEditorButtonStylesCest.php | 14 ++-
 .../FormEditorCreateCustomFieldCest.php       | 95 +++++++++++++------
 .../FormEditorTextInputStylesCest.php         |  2 +
 11 files changed, 118 insertions(+), 51 deletions(-)

diff --git a/lib/Form/Block/Date.php b/lib/Form/Block/Date.php
index 3fc9342aca..585ffa31b9 100644
--- a/lib/Form/Block/Date.php
+++ b/lib/Form/Block/Date.php
@@ -63,7 +63,7 @@ class Date {
         $html .= $this->getDays($block);
         $html .= '</select>';
       } else if ($dateSelector === 'MM') {
-        $html .= '<select class="mailpoet_select mailpoet_date_month" ';
+        $html .= '<select class="mailpoet_select mailpoet_date_month" data-automation-id="form_date_month" ';
         $html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a month', 'mailpoet'),
@@ -72,7 +72,7 @@ class Date {
         $html .= $this->getMonths($block);
         $html .= '</select>';
       } else if ($dateSelector === 'YYYY') {
-        $html .= '<select class="mailpoet_date_year" ';
+        $html .= '<select class="mailpoet_date_year" data-automation-id="form_date_year" ';
         $html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a year', 'mailpoet'),
diff --git a/lib/Form/Block/Divider.php b/lib/Form/Block/Divider.php
index 33b5ee27e5..1048335000 100644
--- a/lib/Form/Block/Divider.php
+++ b/lib/Form/Block/Divider.php
@@ -44,6 +44,6 @@ class Divider {
       "width: $width%",
     ];
     $style = implode(";", $dividerStyles);
-    return "<div class='mailpoet_divider' style='$style'></div>";
+    return "<div class='mailpoet_divider' data-automation-id='form_divider' style='$style'></div>";
   }
 }
diff --git a/lib/Form/Block/Select.php b/lib/Form/Block/Select.php
index ef4aea7ba3..b517a163fe 100644
--- a/lib/Form/Block/Select.php
+++ b/lib/Form/Block/Select.php
@@ -41,6 +41,7 @@ class Select {
     $html .= $this->rendererHelper->renderLabel($block, $formSettings);
     $html .= '<select
       class="mailpoet_select"
+      data-automation-id="form_custom_select"
       name="' . $fieldName . '" '
       . $automationId
       . 'style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"'
diff --git a/lib/Form/Block/Text.php b/lib/Form/Block/Text.php
index c9be89ae95..8e80058c60 100644
--- a/lib/Form/Block/Text.php
+++ b/lib/Form/Block/Text.php
@@ -48,7 +48,7 @@ class Text {
 
     $html .= $this->rendererHelper->renderLabel($block, $formSettings);
 
-    $html .= '<input type="' . $type . '" class="mailpoet_text" ';
+    $html .= '<input type="' . $type . '" class="mailpoet_text" data-automation-id="form_custom_text" ';
 
     $html .= 'name="data[' . $name . ']" ';
 
diff --git a/lib/Form/Block/Textarea.php b/lib/Form/Block/Textarea.php
index 0a1b4d2f60..182f3431b4 100644
--- a/lib/Form/Block/Textarea.php
+++ b/lib/Form/Block/Textarea.php
@@ -35,7 +35,7 @@ class Textarea {
     $lines = (isset($block['params']['lines']) ? (int)$block['params']['lines'] : 1);
     $html .= $this->inputStylesRenderer->renderPlaceholderStyles($block, 'textarea[name="data[' . $name . ']"]');
 
-    $html .= '<textarea class="mailpoet_textarea" rows="' . $lines . '" ';
+    $html .= '<textarea class="mailpoet_textarea" data-automation-id="form_custom_text_area" rows="' . $lines . '" ';
 
     $html .= 'name="data[' . $name . ']"';
 
diff --git a/tests/acceptance/FormEditorAddDividerCest.php b/tests/acceptance/FormEditorAddDividerCest.php
index 42bdb55b3c..965f28e115 100644
--- a/tests/acceptance/FormEditorAddDividerCest.php
+++ b/tests/acceptance/FormEditorAddDividerCest.php
@@ -13,7 +13,7 @@ class FormEditorAddDividerCest {
     $segment = $segmentFactory->withName($segmentName)->create();
     $formName = 'My fancy form';
     $form = new Form();
-    $form->withName($formName)->withSegments([$segment])->create();
+    $form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
 
     $i->login();
     $i->amOnMailPoetPage('Forms');
@@ -49,5 +49,12 @@ class FormEditorAddDividerCest {
     $i->seeInField('.mailpoet-automation-spacer-height-size input[type="number"]', 50);
     $i->seeInField('.mailpoet-automation-styles-divider-height input[type="number"]', 10);
     $i->seeInField('.mailpoet-automation-styles-divider-width input[type="number"]', 10);
+
+    $i->wantTo('Check divider on front end');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'height: 10px;');
+    $i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'width: 10%;');
+    $i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'border-top: 10px dotted black;');
   }
 }
diff --git a/tests/acceptance/FormEditorAddListSelectionCest.php b/tests/acceptance/FormEditorAddListSelectionCest.php
index e985f92ce9..2d9066ae83 100644
--- a/tests/acceptance/FormEditorAddListSelectionCest.php
+++ b/tests/acceptance/FormEditorAddListSelectionCest.php
@@ -13,7 +13,7 @@ class FormEditorAddListSelectionCest {
     $formSegment = $segmentFactory->withName($firstSegmentName)->create();
     $formName = 'My fancy form';
     $form = new Form();
-    $form->withName($formName)->withSegments([$formSegment])->create();
+    $form->withName($formName)->withSegments([$formSegment])->withDisplayBelowPosts()->create();
     $secondSegmentName = 'Second fancy list';
     $segmentFactory->withName($secondSegmentName)->create();
     
@@ -23,14 +23,14 @@ class FormEditorAddListSelectionCest {
     $i->clickItemRowActionByItemName($formName, 'Edit');
     $i->waitForElement('[data-automation-id="form_title_input"]');
 
-    // Insert list selection block
+    $i->wantTo('Insert list selection block');
     $i->addFromBlockInEditor('List selection');
 
-    // Verify that user must choose a list
+    $i->wantTo('Verify that user must choose a list');
     $i->click('[data-automation-id="form_save_button"]');
     $i->waitForText('Please select a list');
 
-    // Configure list selection block
+    $i->wantTo('Configure list selection block');
     $i->waitForElement('[data-automation-id="mailpoet_list_selection_block"]');
     $i->click('[data-automation-id="mailpoet_list_selection_block"]');
     $i->click('[data-automation-id="mailpoet_block_settings_tab"]');
@@ -38,20 +38,26 @@ class FormEditorAddListSelectionCest {
     $i->selectOption('[data-automation-id="select_list_selections_list"]', $secondSegmentName);
     $i->seeNoJSErrors();
 
-    // Save the form
+    $i->wantTo('Save the form');
     $i->saveFormInEditor();
 
-    // Reload the page and check that data were saved
+    $i->wantTo('Reload the page and check that data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="mailpoet_list_selection_block"]');
     $i->click('[data-automation-id="mailpoet_list_selection_block"]');
     $i->seeInField('[data-automation-id="settings_first_name_label_input"]', 'Choose your list:');
     $i->waitForText($secondSegmentName);
 
-    // Go back to the forms list and verify the attached list
+    $i->wantTo('Go back to the forms list and verify the attached list');
     $i->amOnMailpoetPage('Forms');
     $i->waitForText($formName);
     $i->waitForText('User choice:');
     $i->waitForText($secondSegmentName);
+
+    $i->wantTo('Check list selection on front end');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->waitForText('Choose your list:');
+    $i->waitForText($secondSegmentName);
   }
 }
diff --git a/tests/acceptance/FormEditorAddNamesCest.php b/tests/acceptance/FormEditorAddNamesCest.php
index 377333df1c..2c622d200a 100644
--- a/tests/acceptance/FormEditorAddNamesCest.php
+++ b/tests/acceptance/FormEditorAddNamesCest.php
@@ -12,30 +12,40 @@ class FormEditorAddNamesCest {
     $segment = $segmentFactory->withName($segmentName)->create();
     $formName = 'My fancy form';
     $form = new Form();
-    $form->withName($formName)->withSegments([$segment])->create();
+    $form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
     $firstNameLabelModified = 'Your First Name';
     $lastNameLabelModified = 'Your Last Name';
+    
     $i->wantTo('Add first and last name to the editor');
     $i->login();
     $i->amOnMailPoetPage('Forms');
     $i->waitForText($formName);
     $i->clickItemRowActionByItemName($formName, 'Edit');
     $i->waitForElement('[data-automation-id="form_title_input"]');
-    // Add First & Last name blocks
+    
+    $i->wantTo('Add First & Last name blocks');
     $i->addFromBlockInEditor('First name');
     $i->addFromBlockInEditor('Last name');
-    // Modify First & Last name blocks
+    
+    $i->wantTo('Modify First & Last name blocks');
     $i->click('[data-automation-id="editor_first_name_input"]');
     $i->fillField('[data-automation-id="settings_first_name_label_input"]', $firstNameLabelModified);
     $i->click('[data-automation-id="editor_last_name_input"]');
     $i->fillField('[data-automation-id="settings_last_name_label_input"]', $lastNameLabelModified);
     $i->saveFormInEditor();
-    // Reload page and check data were saved
+    
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="form_title_input"]');
     $i->click('[data-automation-id="editor_first_name_input"]');
     $i->seeInField('[data-automation-id="settings_first_name_label_input"]', $firstNameLabelModified);
     $i->click('[data-automation-id="editor_last_name_input"]');
     $i->seeInField('[data-automation-id="settings_last_name_label_input"]', $lastNameLabelModified);
+
+    $i->wantTo('Check first & last names on front end');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->assertAttributeContains('[data-automation-id="form_first_name"]', 'placeholder', $firstNameLabelModified);
+    $i->assertAttributeContains('[data-automation-id="form_last_name"]', 'placeholder', $lastNameLabelModified);
   }
 }
diff --git a/tests/acceptance/FormEditorButtonStylesCest.php b/tests/acceptance/FormEditorButtonStylesCest.php
index ffbf752cc0..0e2964566f 100644
--- a/tests/acceptance/FormEditorButtonStylesCest.php
+++ b/tests/acceptance/FormEditorButtonStylesCest.php
@@ -20,9 +20,10 @@ class FormEditorButtonStylesCest {
     $i->clickItemRowActionByItemName($formName, 'Edit');
     $i->waitForElement('[data-automation-id="form_title_input"]');
 
-    // Apply some styles to submit button
+    $i->wantTo('Apply some styles to submit button');
     $i->click('[data-automation-id="editor_submit_input"]');
     $i->waitForElement('.mailpoet-automation-input-styles-panel');
+    $i->fillField('[data-automation-id="settings_submit_label_input"]', 'Join Now');
     $i->click('.mailpoet-automation-input-styles-panel');
     $i->waitForElement('[data-automation-id="input_styles_settings"]');
     $i->click('.mailpoet-automation-inherit-theme-toggle input'); // Display custom settings
@@ -30,21 +31,24 @@ class FormEditorButtonStylesCest {
     $i->clearFormField('.mailpoet-automation-styles-border-size input[type="number"]');
     $i->fillField('.mailpoet-automation-styles-border-size input[type="number"]', 10); // Set border size
 
-    // Check element has styles
+    $i->wantTo('Check element has styles');
     $i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'border-width: 10px;');
     $i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'font-weight: bold;');
-    // Save form
+    
+    $i->wantTo('Save form');
     $i->saveFormInEditor();
-    // Reload page and check data were saved
+
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="form_title_input"]');
     $i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'border-width: 10px;');
     $i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'font-weight: bold;');
 
-    // Check styles are applied on frontend page
+    $i->wantTo('Check styles are applied on frontend page');
     $postUrl = $i->createPost('Title', 'Content');
     $i->amOnUrl($postUrl);
     $i->assertAttributeContains('[data-automation-id="subscribe-submit-button"]', 'style', 'border-width: 10px;');
     $i->assertAttributeContains('[data-automation-id="subscribe-submit-button"]', 'style', 'font-weight: bold;');
+    $i->seeInField('[data-automation-id="subscribe-submit-button"]', 'Join Now');
   }
 }
diff --git a/tests/acceptance/FormEditorCreateCustomFieldCest.php b/tests/acceptance/FormEditorCreateCustomFieldCest.php
index 77e16c2e79..e67e41736d 100644
--- a/tests/acceptance/FormEditorCreateCustomFieldCest.php
+++ b/tests/acceptance/FormEditorCreateCustomFieldCest.php
@@ -12,7 +12,7 @@ class FormEditorCreateCustomFieldCest {
     $segment = $segmentFactory->withName($segmentName)->create();
     $formName = 'My fancy form';
     $form = new Form();
-    $form->withName($formName)->withSegments([$segment])->create();
+    $form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
   }
 
   private function openFormInEditor($i) {
@@ -35,7 +35,7 @@ class FormEditorCreateCustomFieldCest {
 
   public function createCustomSelect(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: select');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Select');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom select');
@@ -45,78 +45,95 @@ class FormEditorCreateCustomFieldCest {
     $this->saveCustomFieldBlock($i);
     $this->checkCustomSelectInForm($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomSelectInForm($i);
+
+    $i->wantTo('Check custom select on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->selectOption('[data-automation-id="form_custom_select"]', 'First option');
+    $i->selectOption('[data-automation-id="form_custom_select"]', 'Option 2');
   }
 
   public function createCustomTextInput(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: text input');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Text Input');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom text input');
     $i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Numbers only');
     $this->saveCustomFieldBlock($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomTextInputInForm($i);
 
-    // Change text input validation
+    $i->wantTo('Change text input validation');
     $i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Alphanumerical');
     $i->click('Update custom field');
     $i->waitForText('Custom field saved.');
 
-    // Update label and save the form
+    $i->wantTo('Update label and save the form');
     $i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom text input');
     $i->saveFormInEditor();
     
-    // Reload page and check data were saved
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="editor_custom_text_input"]');
     $i->assertAttributeContains('[data-automation-id="editor_custom_text_input"]', 'placeholder', 'My updated custom text input');
+
+    $i->wantTo('Check custom text input on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->fillField('[data-automation-id="form_custom_text"]', 'Lorem ipsum dolor');
   }
 
   public function createCustomTextArea(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: text area');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Text Area');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom text area');
     $i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Numbers only');
     $this->saveCustomFieldBlock($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomTextAreaInForm($i);
 
-    // Change text input validation
+    $i->wantTo('Change text input validation');
     $i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Alphanumerical');
     $i->click('Update custom field');
     $i->waitForText('Custom field saved.');
 
-    // Change text area to 3 lines
+    $i->wantTo('Change text area to 3 lines');
     $i->selectOption('[data-automation-id="settings_custom_text_area_number_of_lines"]', '3 lines');
 
-    // Update label and save the form
+    $i->wantTo('Update label and save the form');
     $i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom text area');
     $i->saveFormInEditor();
     
-    // Reload page and check data were saved
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="editor_custom_textarea_input"]');
     $i->assertAttributeContains('[data-automation-id="editor_custom_textarea_input"]', 'placeholder', 'My updated custom text area');
     $i->click('[data-automation-id="editor_custom_textarea_input"]');
     $i->seeOptionIsSelected('[data-automation-id="settings_custom_text_area_number_of_lines"]', '3 lines');
+
+    $i->wantTo('Check custom text area on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->assertAttributeContains('[data-automation-id="form_custom_text_area"]', 'placeholder', 'My updated custom text area');
+    $i->fillField('[data-automation-id="form_custom_text_area"]', 'Lorem ipsum dolor sit amet');
   }
 
   public function createCustomRadioButtons(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: radio buttons');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Radio buttons');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom radio buttons');
@@ -124,56 +141,69 @@ class FormEditorCreateCustomFieldCest {
     $i->click('[data-automation-id="custom_field_values_add_item"]');
     $this->saveCustomFieldBlock($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomRadioButtonsInForm($i, 'Option 1');
 
-    // Change text input validation
+    $i->wantTo('Change text input validation');
     $i->fillField('[data-automation-id="custom_field_value_settings_value"][value="Option 1"]', 'New option');
     $i->click('Update custom field');
     $i->waitForText('Custom field saved.');
 
-    // Update label and save the form
+    $i->wantTo('Update label and save the form');
     $i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom radio buttons');
     $i->saveFormInEditor();
     
-    // Reload page and check data were saved
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $this->checkCustomRadioButtonsInForm($i, 'New option');
+
+    $i->wantTo('Check radio buttons on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->waitForText('My updated custom radio buttons');
+    $i->waitForText('New option');
+    $i->waitForText('Option 2');
   }
 
   public function createCustomCheckbox(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: checkbox');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Checkbox');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom checkbox');
     $i->fillField('[data-automation-id="settings_custom_checkbox_value"]', 'Option 1');
     $this->saveCustomFieldBlock($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomCheckboxInForm($i, 'Option 1');
 
-    // Change text input validation
+    $i->wantTo('Change text input validation');
     $i->fillField('[data-automation-id="settings_custom_checkbox_value"][value="Option 1"]', 'New option');
     $i->click('Update custom field');
     $i->waitForText('Custom field saved.');
 
-    // Update label and save the form
+    $i->wantTo('Update label and save the form');
     $i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom checkbox');
     $i->saveFormInEditor();
     
-    // Reload page and check data were saved
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $this->checkCustomCheckboxInForm($i, 'New option');
+
+    $i->wantTo('Check checkbox on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->waitForText('My updated custom checkbox');
+    $i->waitForText('New option');
   }
 
   public function createCustomDate(\AcceptanceTester $i) {
     $i->wantTo('Create custom field: date');
-    // Configure, check and save the custom field block
+    $i->wantTo('Configure, check and save the custom field block');
     $i->waitForElement('[data-automation-id="create_custom_field_form"]');
     $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Date');
     $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom date');
@@ -181,24 +211,31 @@ class FormEditorCreateCustomFieldCest {
     $i->selectOption('[data-automation-id="settings_custom_date_format"]', 'YYYY/MM');
     $this->saveCustomFieldBlock($i);
 
-    // Save, reload and check data were saved
+    $i->wantTo('Save, reload and check data were saved');
     $i->saveFormInEditor();
     $i->reloadPage();
     $this->checkCustomDateInForm($i);
 
-    // Change date type and verify you don't see format anymore
+    $i->wantTo('Change date type and verify you do not see format anymore');
     $i->selectOption('[data-automation-id="settings_custom_date_type"]', 'Year');
     $i->dontSee('[data-automation-id="settings_custom_date_format"]');
 
-    // Update label and save the form
+    $i->wantTo('Update label and save the form');
     $i->fillField('[data-automation-id="settings_custom_date_label_input"]', 'My updated custom date');
     $i->saveFormInEditor();
     
-    // Reload page and check data were saved
+    $i->wantTo('Reload page and check data were saved');
     $i->reloadPage();
     $i->waitForElement('[data-automation-id="editor_custom_date_label"]');
     $i->click('[data-automation-id="editor_custom_date_label"]');
     $i->seeInField('[data-automation-id="settings_custom_date_label_input"]', 'My updated custom date');
+
+    $i->wantTo('Check custom date on frontend page');
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->waitForText('My updated custom date');
+    $i->assertAttributeContains('[data-automation-id="form_date_year"]', 'placeholder', 'Year');
+    $i->assertAttributeContains('[data-automation-id="form_date_month"]', 'placeholder', 'Month');
   }
 
   private function checkCustomDateInForm($i) {
diff --git a/tests/acceptance/FormEditorTextInputStylesCest.php b/tests/acceptance/FormEditorTextInputStylesCest.php
index e117492818..d29e6e8395 100644
--- a/tests/acceptance/FormEditorTextInputStylesCest.php
+++ b/tests/acceptance/FormEditorTextInputStylesCest.php
@@ -68,5 +68,7 @@ class FormEditorTextInputStylesCest {
     $i->assertAttributeContains('[data-automation-id="form_first_name"]', 'style', 'border-width: 10px;');
     $i->assertAttributeContains('[data-automation-id="form_first_name_label"]', 'style', 'font-weight: bold;');
     $i->assertAttributeContains('[data-automation-id="form_email"]', 'style', 'border-width: 10px;');
+    $i->see('Heading Lorem');
+    $i->see('Paragraph ipsum dolor');
   }
 }