Skip to content

Commit 9f948b0

Browse files
author
Hwashiang Yu
committed
MC-4096: Product Content Type doesn't wrapped inside tiny Column
- Added test coverage for MC-4096 - Added product section selectors
1 parent e074ae5 commit 9f948b0

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderProductsSection.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,14 @@
1414
<element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
1515
<element name="product" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}]//ol//li[contains(@class,'product-item')]" parameterized="true"/>
1616
<element name="productImage" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//img[@class='product-image-photo']" parameterized="true"/>
17+
<element name="productImageCSS" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item img.product-image-photo"/>
1718
<element name="productName" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//strong//a[@class='product-item-link' and @href and contains(.,'{{arg2}}')]" parameterized="true"/>
1819
<element name="productPrice" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//span[@class='price' and .='${{arg2}}']" parameterized="true"/>
20+
<element name="productPriceContainer" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.price-box "/>
1921
<element name="productAddToCart" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//button[contains(@class,'tocart') and @title='Add to Cart']" parameterized="true"/>
2022
<element name="productAddToWishList" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']" parameterized="true"/>
2123
<element name="productAddToCompare" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'tocompare') and @title='Add to Compare']" parameterized="true"/>
24+
<element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.product-item-actions"/>
2225
<!-- Advanced Configuration -->
2326
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
2427
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -48,11 +51,14 @@
4851
<element name="notHidden" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
4952
<element name="product" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}]//ol//li[contains(@class,'product-item')]" parameterized="true"/>
5053
<element name="productImage" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//img[@class='product-image-photo']" parameterized="true"/>
54+
<element name="productImageCSS" type="text" selector="div[data-role=products] ol li.product-item img.product-image-photo"/>
5155
<element name="productName" type="text" selector="(//div[contains(@data-role,'products')])//ol//li[contains(@class,'product-item')][{{arg1}}]//strong//a[@class='product-item-link' and @href and contains(.,'{{arg2}}')]" parameterized="true"/>
5256
<element name="productPrice" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//span[@class='price' and .='${{arg2}}']" parameterized="true"/>
57+
<element name="productPriceContainer" type="text" selector="div[data-role=products] ol li.product-item div.price-box"/>
5358
<element name="productAddToCart" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//button[contains(@class,'tocart') and @title='Add to Cart']" parameterized="true"/>
5459
<element name="productAddToWishList" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']" parameterized="true"/>
5560
<element name="productAddToCompare" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'tocompare') and @title='Add to Compare']" parameterized="true"/>
61+
<element name="productActions" type="text" selector="div[data-role=products] ol li.product-item div.product-item-actions"/>
5662
<!-- Advanced Configuration -->
5763
<element name="alignment" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
5864
<element name="noAlignment" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderProductsTest.xml

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1094,4 +1094,137 @@
10941094
<dontSeeElementInDOM selector="{{ProductsOnStorefront.hidden('1')}}" stepKey="dontSeeHiddenElement"/>
10951095
<seeElement selector="{{ProductsOnStorefront.base('1')}}" stepKey="waitForContentTypeVisible" />
10961096
</test>
1097+
1098+
<test name="ProductsWrapsInsideTinyColumn">
1099+
<annotations>
1100+
<features value="PageBuilder"/>
1101+
<stories value="Products"/>
1102+
<title value="Product Content Type wraps inside tiny column"/>
1103+
<description value="As a Content Manager I want products to be wrapped inside tiny column"/>
1104+
<severity value="CRITICAL"/>
1105+
<useCaseId value="MC-4096"/>
1106+
<testCaseId value="MC-4301"/>
1107+
<group value="pagebuilder"/>
1108+
<group value="pagebuilder-column"/>
1109+
<group value="pagebuilder-products"/>
1110+
<group value="pagebuilder-addToColumn"/>
1111+
</annotations>
1112+
<before>
1113+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1114+
<createData entity="PageBuilderProductsSubCategory" stepKey="createPreReqCategory"/>
1115+
<createData entity="_defaultProduct" stepKey="createPreReqProduct1">
1116+
<requiredEntity createDataKey="createPreReqCategory"/>
1117+
</createData>
1118+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1119+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1120+
</before>
1121+
<after>
1122+
<deleteData createDataKey="createPreReqProduct1" stepKey="deletePreReqProduct1"/>
1123+
<deleteData createDataKey="createPreReqCategory" stepKey="deletePreReqCategory"/>
1124+
<actionGroup ref="logout" stepKey="logout"/>
1125+
</after>
1126+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1127+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1128+
</actionGroup>
1129+
<actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
1130+
<argument name="contentType" value="PageBuilderColumnContentType"/>
1131+
</actionGroup>
1132+
<!-- Add Products to Stage -->
1133+
<comment userInput="Add Products to Stage" stepKey="addProductsToStage"/>
1134+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupAddContent">
1135+
<argument name="group" value="PageBuilderProductsContentType"/>
1136+
</actionGroup>
1137+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragProductsOntoColumn">
1138+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1139+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1140+
<argument name="containerTargetIndex" value="1" />
1141+
</actionGroup>
1142+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
1143+
<!-- Validate Stage -->
1144+
<comment userInput="User sees Products displayed in column on Stage" stepKey="confirmProductsOnStage"/>
1145+
<actionGroup ref="validateContentTypeInsideContainerStage" stepKey="checkContentTypeInContainerStage">
1146+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1147+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1148+
<argument name="contentTypeIndex" value="1"/>
1149+
<argument name="containerTargetIndex" value="1"/>
1150+
</actionGroup>
1151+
<!-- Resizing first column to 1/12 -->
1152+
<comment userInput="Resizing first column to 1/12" stepKey="commentInitialResize"/>
1153+
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
1154+
<dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumn1"/>
1155+
<waitForPageLoad stepKey="waitForPageLoad" />
1156+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth"/>
1157+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','11/12')}}" stepKey="validateSecondColumnWidth"/>
1158+
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="firstColumnWidth"/>
1159+
<executeJS function="return document.querySelector('{{ProductsOnStage.productImageCSS}}').clientWidth" stepKey="productImageWidth"/>
1160+
<executeJS function="return document.querySelector('{{ProductsOnStage.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidth"/>
1161+
<executeJS function="return document.querySelector('{{ProductsOnStage.productActions}}').clientWidth" stepKey="productActionsWidth"/>
1162+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImage">
1163+
<actualResult type="variable">firstColumnWidth</actualResult>
1164+
<expectedResult type="variable">productImageWidth</expectedResult>
1165+
</assertGreaterThan>
1166+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainer">
1167+
<actualResult type="variable">firstColumnWidth</actualResult>
1168+
<expectedResult type="variable">productPriceContainerWidth</expectedResult>
1169+
</assertGreaterThan>
1170+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActions">
1171+
<actualResult type="variable">firstColumnWidth</actualResult>
1172+
<expectedResult type="variable">productActionsWidth</expectedResult>
1173+
</assertGreaterThan>
1174+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1175+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
1176+
<!-- Validate Stage After Save -->
1177+
<comment userInput="Validate stage after save" stepKey="validateProductsOnStage"/>
1178+
<actionGroup ref="validateContentTypeInsideContainerStage" stepKey="checkContentTypeInContainerStage2">
1179+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1180+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1181+
<argument name="contentTypeIndex" value="1"/>
1182+
<argument name="containerTargetIndex" value="1"/>
1183+
</actionGroup>
1184+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidthAfterSave"/>
1185+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','11/12')}}" stepKey="validateSecondColumnWidthAfterSave"/>
1186+
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="firstColumnWidthAfterSave"/>
1187+
<executeJS function="return document.querySelector('{{ProductsOnStage.productImageCSS}}').clientWidth" stepKey="productImageWidthAfterSave"/>
1188+
<executeJS function="return document.querySelector('{{ProductsOnStage.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidthAfterSave"/>
1189+
<executeJS function="return document.querySelector('{{ProductsOnStage.productActions}}').clientWidth" stepKey="productActionsWidthAfterSave"/>
1190+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageAfterSave">
1191+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1192+
<expectedResult type="variable">productImageWidthAfterSave</expectedResult>
1193+
</assertGreaterThan>
1194+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainerAfterSave">
1195+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1196+
<expectedResult type="variable">productPriceContainerWidthAfterSave</expectedResult>
1197+
</assertGreaterThan>
1198+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActionsAfterSave">
1199+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1200+
<expectedResult type="variable">productActionsWidthAfterSave</expectedResult>
1201+
</assertGreaterThan>
1202+
<!-- Validate Storefront -->
1203+
<comment userInput="View Products inside column on storefront" stepKey="viewProductsOnStorefront"/>
1204+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
1205+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1206+
</actionGroup>
1207+
<actionGroup ref="validateContentTypeInsideContainerStorefrontInDOM" stepKey="checkContentTypeInContainerStorefront">
1208+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1209+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1210+
<argument name="contentTypeIndex" value="1"/>
1211+
<argument name="containerTargetIndex" value="1"/>
1212+
</actionGroup>
1213+
<executeJS function="return document.querySelector('{{ColumnOnFrontend.columnX('1')}}').clientWidth" stepKey="firstColumnWidthFrontend"/>
1214+
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productImageCSS}}').clientWidth" stepKey="productImageWidthFrontend"/>
1215+
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidthFrontend"/>
1216+
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productActions}}').clientWidth" stepKey="productActionsWidthFrontend"/>
1217+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageFrontend">
1218+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1219+
<expectedResult type="variable">productImageWidthFrontend</expectedResult>
1220+
</assertGreaterThan>
1221+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainerFrontend">
1222+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1223+
<expectedResult type="variable">productPriceContainerWidthFrontend</expectedResult>
1224+
</assertGreaterThan>
1225+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActionsFrontend">
1226+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1227+
<expectedResult type="variable">productActionsWidthFrontend</expectedResult>
1228+
</assertGreaterThan>
1229+
</test>
10971230
</tests>

0 commit comments

Comments
 (0)