MC-3852: Update Background Image Implementation on Tabs

- Resolve further issues with tabs tests

Author: davemacaulay

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

@@ -90,13 +90,12 @@
         <element name="container" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
         <element name="containerStyle" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noMinHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'min-height:'))]" parameterized="true"/>
-        <element name="minHeight" 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="minHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
         <element name="verticalAlignContainer" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'justify-content: {{arg2}};')]" 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="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="tabContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][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"/>
         <!-- Background Configuration -->
         <element name="backgroundPosition" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>
@@ -105,15 +104,6 @@
         <element name="backgroundAttachment" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
         <element name="noBackgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
-        <element name="backgroundImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
-        <element name="backgroundMobileImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
-        <element name="mobileBackgroundPosition" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>
-        <element name="mobileBackgroundSize" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-size: {{arg2}};')]" parameterized="true"/>
-        <element name="mobileBackgroundRepeat" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
-        <element name="mobileBackgroundAttachment" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
-        <element name="mobileBackgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noMobileBackgroundColor" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][not(contains(@style,'background-color:'))]" parameterized="true"/>
-        <element name="noMobileBackgroundImage" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='mobile_image'][not(contains(@style,'background-image:'))]" parameterized="true"/>
     </section>
 </sections>

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

@@ -683,8 +683,7 @@
             <argument name="from" value="1"/>
             <argument name="to" value="2"/>
         </actionGroup>
-        <!-- Due to background images on tabs we must check the 3rd element for the second tab on desktop -->
-        <waitForElementVisible selector="{{TextOnStorefront.notHidden('3')}}" stepKey="waitForContentTypeShownStorefront2"/>
+        <waitForElementVisible selector="{{TextOnStorefront.notHidden('2')}}" stepKey="waitForContentTypeShownStorefront2"/>
         <seeElementInDOM selector="{{TabOnStorefront.tabContentText('2')}}" stepKey="seeTextElementInTabContent"/>
     </test>
     <test name="TabsCannotAddToStage">