MC-3407: Create/update MFTF tests for background attributes for tab

 - refactor selectors

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml

@@ -74,17 +74,13 @@
         <element name="tabHeaderItemActive" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'])/li[{{arg1}}][contains(@class, 'ui-state-active')]" parameterized="true"/>
         <element name="tabPanel" type="button" selector="(//div[@class='tabs-content']//div[@role='tabpanel'])[{{arg1}}]" parameterized="true"/>
         <element name="tabContent" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
-        <element name="tabContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][@style='border-radius: 0px 12px 12px; border: 10px solid rgb(0, 0, 0);']" parameterized="true"/>
         <element name="tabContentMinimumHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'min-height: {{arg2}}px')]" parameterized="true"/>
         <element name="tabContentBackgroundImage" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-image: url') and contains(@style, '{{arg2}}') and contains(@style, '{{arg3}}')]" parameterized="true"/>
         <element name="tabContentType" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]/div[1]/hr" parameterized="true"/>
         <element name="tabContentText" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[contains(@data-role, 'text')][1]" parameterized="true"/>
-        <element name="tab1ContentAdvancedStylesBorder" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[1][contains(@style, 'border-style: solid') and contains(@style, 'border-color: rgb(0, 0, 0)') and contains(@style, 'border-width: 10px') and contains(@style, 'border-radius: 12px')]"/>
-        <element name="tab1ContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[1]//div[@data-element='desktop_image'][contains(@style, 'text-align: center') and contains(@style, 'margin: 5px') and contains(@style, 'padding: 5px')]"/>
-        <element name="tab2ContentAdvancedStylesBorder" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[2][contains(@style, 'border-style: dotted') and contains(@style, 'border-color: rgb(255, 0, 0)') and contains(@style, 'border-width: 500px') and contains(@style, 'border-radius: 500px')]"/>
-        <element name="tab2ContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[2]//div[@data-element='desktop_image'][contains(@style, 'text-align: right') and contains(@style, 'margin: 1px 2px 3px 4px') and contains(@style, 'padding: 1px 2px 3px 4px')]"/>
-        <element name="tab1ContentAdvancedClass" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[1][contains(@class, 'first-class second-class third-class')]"/>
-        <element name="tab2ContentAdvancedClass" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[2][contains(@class, 'first-class')]"/>
+        <element name="tabContentAdvancedStylesBorder" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'border-style: {{arg2}}') and contains(@style, 'border-color: {{arg3}}') and contains(@style, 'border-width: {{arg4}}px') and contains(@style, 'border-radius: {{arg5}}px')]" parameterized="true"/>
+        <element name="tabContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'text-align: {{arg2}}') and contains(@style, 'margin: {{arg3}}px') and contains(@style, 'padding: {{arg4}}px')]" parameterized="true"/>
+        <element name="tabContentAdvancedClass" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@class, '{{arg2}}')]" parameterized="true"/>
         <element name="base" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
         <!-- Background Configuration -->
         <element name="backgroundPosition" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabItemConfigurationTests.xml

@@ -355,7 +355,7 @@
         </actionGroup>
         <!-- Fill All Advanced Fields -->
         <actionGroup ref="expandConfigurationSection" stepKey="expandConfigurationSection"/>
-        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentLeft1">
+        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentCenter">
             <argument name="property" value="PageBuilderAdvancedAlignmentPropertyCenter"/>
         </actionGroup>
         <actionGroup ref="selectSlideOutPanelFieldGeneral" stepKey="enterBorder">
@@ -388,7 +388,7 @@
             <argument name="to" value="2"/>
         </actionGroup>
         <actionGroup ref="expandConfigurationSection" stepKey="expandConfigurationSection2"/>
-        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentLeft2">
+        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentRight">
             <argument name="property" value="PageBuilderAdvancedAlignmentPropertyRight"/>
         </actionGroup>
         <actionGroup ref="selectSlideOutPanelFieldGeneral" stepKey="enterBorder2">
@@ -431,17 +431,17 @@
         <amOnPage url="{{PageBuilderTabsContentType.name}}{{PageBuilderPageTitle.pageName}}" stepKey="amOnPageBuilderPage"/>
         <waitForPageLoad stepKey="waitForPageLoadStoreFront" time="30"/>
         <comment userInput="Verify tab 1 on storefront" stepKey="AC5"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab1ContentAdvancedStyles}}" stepKey="seeTabContentAdvancedStylesInStorefront1"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab1ContentAdvancedStylesBorder}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront1"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab1ContentAdvancedClass}}" stepKey="seeTabContentClassInStorefront1"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('1', PageBuilderAdvancedAlignmentPropertyCenter.value, PageBuilderAdvancedMarginsAndPaddingProperty.marginLeft, PageBuilderAdvancedMarginsAndPaddingProperty.paddingLeft)}}" stepKey="seeTabContentAdvancedStylesInStorefront1"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorder('1', PageBuilderAdvancedBorderPropertySolid.value, PageBuilderAdvancedBorderColorProperty.rbg, PageBuilderAdvancedBorderWidthProperty10.value, PageBuilderAdvancedBorderRadiusProperty12.value)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront1"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedClass('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeTabContentClassInStorefront1"/>
         <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="switchToTab"/>
         <waitForPageLoad stepKey="waitForTabChangeAnimationStorefront" time="30"/>
         <scrollToTopOfPage stepKey="scrollToTopOfPage"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContent('2')}}" stepKey="seeNewTabContent"/>
         <comment userInput="Verify tab 2 on storefront" stepKey="AC6"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab2ContentAdvancedStyles}}" stepKey="seeTabHeaderItemAdvancedStylesInStorefront2"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab2ContentAdvancedStylesBorder}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront2"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tab2ContentAdvancedClass}}" stepKey="seeTabContentClassInStorefront2"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('2', PageBuilderAdvancedAlignmentPropertyRight.value, PageBuilderMarginsPropertyUnique.value, PageBuilderPaddingPropertyUnique.value)}}" stepKey="seeTabHeaderItemAdvancedStylesInStorefront2"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorder('2', PageBuilderAdvancedBorderPropertyDotted.value, PageBuilderAdvancedBorderColorProperty_FF0000.rbg, PageBuilderAdvancedBorderWidthProperty500.value, PageBuilderAdvancedBorderRadiusProperty500.value)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront2"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedClass('2', PageBuilderAdvancedCssClassesPropertyOneClass.value)}}" stepKey="seeTabContentClassInStorefront2"/>
     </test>
     <test name="EditTabNameByClickingOnHeaderInStage">
         <annotations>