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

 - update tests with corrected selectors
 - remove duplicate selectors

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/BackgroundConfigurationActionGroup.xml

@@ -63,7 +63,7 @@
         <waitForElementVisible selector="{{section.backgroundRepeat(index, backgroundRepeat.styleValue)}}" stepKey="waitForBackgroundRepeat"/>
         <waitForElementVisible selector="{{section.backgroundAttachment(index, backgroundAttachment.value)}}" stepKey="waitForBackgroundAttachment"/>
     </actionGroup>
-    <actionGroup name="validateBackgroundAttributesWithImageAndColor">
+    <actionGroup name="validateBackgroundAttributes">
         <arguments>
             <argument name="section"/>
             <argument name="backgroundImage"/>

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

@@ -75,17 +75,14 @@
         <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}}][contains(@style, 'min-height: {{arg2}}px')]" parameterized="true"/>
-        <element name="tabContentBackgroundColor" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-color: {{arg2}}')]" 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="tabContentBackgroundAttachment" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-attachment: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundPosition" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-position: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundSize" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-size: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundRepeat" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-repeat: {{arg2}}')]" 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="tab1ContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[1][contains(@style, 'text-align: center') and 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') and contains(@style, 'margin: 5px') and contains(@style, 'padding: 5px')]"/>
-        <element name="tab2ContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[2][contains(@style, 'text-align: right') and 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') and contains(@style, 'margin: 1px 2px 3px 4px') and contains(@style, 'padding: 1px 2px 3px 4px')]"/>
+        <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="base" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>

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

@@ -504,7 +504,7 @@
             <argument name="from" value="1"/>
             <argument name="to" value="2"/>
         </actionGroup>
-        <waitForElementVisible selector="{{TabOnStorefront.tabContentBackgroundColor('2', 'rgb(204, 204, 204)')}}" stepKey="validateBackgroundColor"/>
+        <waitForElementVisible selector="{{TabOnStorefront.backgroundColor('2', 'rgb(204, 204, 204)')}}" stepKey="validateBackgroundColor"/>
         <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('2', '200')}}" stepKey="validateMinHeightInStorefront"/>
         <see userInput="{{PageBuilderTabNameRandom1.value}} copy" selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="validateCopiedTabInStorefront"/>
     </test>