[CYS] Stop relying on snapshot for footer and header tests (#46221)

* Stop relying on snapshot for footer and header tests

* Remove only

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alba Rincón 2024-04-04 17:13:06 +02:00 committed by GitHub
parent f06ef8d8e2
commit 0a0730bad7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 27 additions and 145 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
[CYS] Update footer and header test to not use snapshots.

View File

@ -109,12 +109,15 @@ test.describe( 'Assembler -> Footers', () => {
assemblerPage,
page,
baseURL,
}, testInfo ) => {
testInfo.snapshotSuffix = '';
} ) => {
const assembler = await assemblerPage.getAssembler();
const footer = assembler
.locator( '.block-editor-block-patterns-list__item' )
.nth( 2 );
.nth( 2 )
.frameLocator( 'iframe' )
.locator( '.wc-blocks-footer-pattern' );
const expectedFooterClass = extractFooterClass( await footer.getAttribute( 'class' ) );
await footer.click();
@ -131,17 +134,15 @@ test.describe( 'Assembler -> Footers', () => {
await waitResponse;
await page.goto( baseURL );
const footerHTML = await page.locator( 'footer' ).innerHTML();
// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
expect( footerHTML ).toMatchSnapshot( {
name: 'cys-selected-footer',
} );
const selectedFooterClasses = await page.locator( 'footer div.wc-blocks-footer-pattern' ).getAttribute( 'class' );
expect( selectedFooterClasses ).toContain( expectedFooterClass );
} );
test( 'Picking a footer should trigger an update on the site preview', async ( {
assemblerPage,
}, testInfo ) => {
} ) => {
const assembler = await assemblerPage.getAssembler();
const editor = await assemblerPage.getEditor();

View File

@ -1,47 +0,0 @@
<div class="wp-block-group alignfull wc-blocks-pattern-footer-large wc-blocks-footer-pattern is-layout-flow wp-container-core-group-is-layout-18 wp-block-group-is-layout-flow" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex" style="padding-right:0px;padding-left:0px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-right:50px;flex-basis:60%">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-16 wp-block-group-is-layout-flex">
<h5 class="wp-block-heading" style="margin-top:40px;text-transform:none">Join the community</h5>
<p style="margin-bottom:40px">Learn about new products and discounts</p>
<ul class="wp-block-social-links has-small-icon-size is-style-logos-only is-layout-flex wp-container-core-social-links-is-layout-2 wp-block-social-links-is-layout-flex"><li class="wp-social-link wp-social-link-facebook wp-block-social-link"><a href="https://www.facebook.com" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>
<li class="wp-social-link wp-social-link-x wp-block-social-link"><a href="https://www.x.com" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z"></path></svg><span class="wp-block-social-link-label screen-reader-text">X</span></a></li>
<li class="wp-social-link wp-social-link-instagram wp-block-social-link"><a href="https://www.instagram.com" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Instagram</span></a></li>
<li class="wp-social-link wp-social-link-twitch wp-block-social-link"><a href="https://www.twitch.com" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Twitch</span></a></li></ul>
</div>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:0px;flex-basis:20%"></div>
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-17 wp-block-column-is-layout-flow" style="flex-basis:20%"></div>
<div class="wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-18 wp-block-column-is-layout-flow" style="flex-basis:20%"><nav class=" is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-2 wp-block-navigation-is-layout-flex" aria-label="Navigation"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><ul class="wp-block-page-list"><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/cart/">Cart</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/checkout/">Checkout</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/my-account/">My account</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/sample-page/">Sample Page</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/shop/">Shop</a></li></ul></ul></nav></div>
</div>
<div class="wp-block-group alignfull is-content-justification-center is-layout-flex wp-container-core-group-is-layout-17 wp-block-group-is-layout-flex" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><h1 style="font-style:normal;font-weight:700;" class="wp-block-site-title"><a href="http://localhost:8086" target="_self" rel="home" aria-current="page">WooCommerce Core E2E Test Suite</a></h1>
<p class="has-text-align-center">
Powered by <a href="https://wordpress.org" target="_blank" rel="noreferrer nofollow noopener">WordPress</a> with <a href="https://woocommerce.com" target="_blank" rel="noreferrer nofollow noopener">WooCommerce</a> </p>
</div>
</div>

View File

@ -105,16 +105,19 @@ test.describe( 'Assembler -> headers', () => {
await expect( assembler.getByText( 'Done' ) ).toBeEnabled();
} );
test.skip( 'The selected header should be applied on the frontend', async ( {
test( 'The selected header should be applied on the frontend', async ( {
assemblerPage,
page,
baseURL,
}, testInfo ) => {
testInfo.snapshotSuffix = '';
} ) => {
const assembler = await assemblerPage.getAssembler();
const header = assembler
.locator( '.block-editor-block-patterns-list__item' )
.nth( 1 );
const header = await assembler
.locator( '.block-editor-block-patterns-list__list-item' )
.nth( 1 )
.frameLocator( 'iframe' )
.locator( '.wc-blocks-header-pattern' );
const expectedHeaderClass = extractHeaderClass( await header.getAttribute( 'class' ) );
await header.click();
@ -131,17 +134,14 @@ test.describe( 'Assembler -> headers', () => {
await waitResponse;
await page.goto( baseURL );
const headerHTML = await page.locator( 'header' ).innerHTML();
const selectedHeaderClasses = await page.locator( 'header div.wc-blocks-header-pattern' ).getAttribute( 'class' );
// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
expect( headerHTML ).toMatchSnapshot( {
name: 'cys-selected-header',
} );
expect( selectedHeaderClasses ).toContain( expectedHeaderClass );
} );
test( 'Picking a header should trigger an update on the site preview', async ( {
assemblerPage,
}, testInfo ) => {
} ) => {
const assembler = await assemblerPage.getAssembler();
const editor = await assemblerPage.getEditor();
@ -168,7 +168,7 @@ test.describe( 'Assembler -> headers', () => {
const expectedHeaderClass = extractHeaderClass( headerPickerClass );
const headerPattern = await editor.locator(
`header div.wc-blocks-header-pattern`
'header div.wc-blocks-header-pattern'
);
await expect(

View File

@ -1,76 +0,0 @@
<div class="wp-block-group alignfull wc-blocks-pattern-header-essential wc-blocks-header-pattern is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-4 wp-block-group-is-layout-flex" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex"></div>
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3 wp-block-group-is-layout-flex">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-2 wp-block-group-is-layout-flex"><div data-block-name="woocommerce/mini-cart" class="wc-block-mini-cart wp-block-woocommerce-mini-cart " style="" data-cart-totals="{&quot;total_items&quot;:&quot;0&quot;,&quot;total_items_tax&quot;:&quot;0&quot;,&quot;total_fees&quot;:&quot;0&quot;,&quot;total_fees_tax&quot;:&quot;0&quot;,&quot;total_discount&quot;:&quot;0&quot;,&quot;total_discount_tax&quot;:&quot;0&quot;,&quot;total_shipping&quot;:null,&quot;total_shipping_tax&quot;:null,&quot;total_price&quot;:&quot;0&quot;,&quot;total_tax&quot;:&quot;0&quot;,&quot;tax_lines&quot;:[],&quot;currency_code&quot;:&quot;USD&quot;,&quot;currency_symbol&quot;:&quot;$&quot;,&quot;currency_minor_unit&quot;:2,&quot;currency_decimal_separator&quot;:&quot;.&quot;,&quot;currency_thousand_separator&quot;:&quot;,&quot;,&quot;currency_prefix&quot;:&quot;$&quot;,&quot;currency_suffix&quot;:&quot;&quot;}" data-cart-items-count="0">
<button class="wc-block-mini-cart__button" aria-label="0 items in cart, total price of $0.00">
<span class="wc-block-mini-cart__quantity-badge">
<svg class="wc-block-mini-cart__icon" width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.6667" cy="24.6667" r="2" fill="currentColor"></circle>
<circle cx="23.3333" cy="24.6667" r="2" fill="currentColor"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.28491 10.0356C9.47481 9.80216 9.75971 9.66667 10.0606 9.66667H25.3333C25.6232 9.66667 25.8989 9.79247 26.0888 10.0115C26.2787 10.2305 26.3643 10.5211 26.3233 10.8081L24.99 20.1414C24.9196 20.6341 24.4977 21 24 21H12C11.5261 21 11.1173 20.6674 11.0209 20.2034L9.08153 10.8701C9.02031 10.5755 9.09501 10.269 9.28491 10.0356ZM11.2898 11.6667L12.8136 19H23.1327L24.1803 11.6667H11.2898Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66669 6.66667C5.66669 6.11438 6.1144 5.66667 6.66669 5.66667H9.33335C9.81664 5.66667 10.2308 6.01229 10.3172 6.48778L11.0445 10.4878C11.1433 11.0312 10.7829 11.5517 10.2395 11.6505C9.69614 11.7493 9.17555 11.3889 9.07676 10.8456L8.49878 7.66667H6.66669C6.1144 7.66667 5.66669 7.21895 5.66669 6.66667Z" fill="currentColor"></path>
</svg>
<span class="wc-block-mini-cart__badge" style="background:"></span>
</span></button>
<div class="is-loading wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
<div class="wc-block-mini-cart__drawer wc-block-components-drawer">
<div class="wc-block-components-drawer__content">
<div class="wc-block-mini-cart__template-part"><div data-block-name="woocommerce/mini-cart-contents" class="wp-block-woocommerce-mini-cart-contents">
<div data-block-name="woocommerce/filled-mini-cart-contents-block" class="wp-block-woocommerce-filled-mini-cart-contents-block">
<div data-block-name="woocommerce/mini-cart-title-block" class="wp-block-woocommerce-mini-cart-title-block">
<div data-block-name="woocommerce/mini-cart-title-label-block" class="wp-block-woocommerce-mini-cart-title-label-block">
</div>
<div data-block-name="woocommerce/mini-cart-title-items-counter-block" class="wp-block-woocommerce-mini-cart-title-items-counter-block">
</div>
</div>
<div data-block-name="woocommerce/mini-cart-items-block" class="wp-block-woocommerce-mini-cart-items-block">
<div data-block-name="woocommerce/mini-cart-products-table-block" class="wp-block-woocommerce-mini-cart-products-table-block">
</div>
</div>
<div data-block-name="woocommerce/mini-cart-footer-block" class="wp-block-woocommerce-mini-cart-footer-block">
<div data-block-name="woocommerce/mini-cart-cart-button-block" class="wp-block-woocommerce-mini-cart-cart-button-block"></div>
<div data-block-name="woocommerce/mini-cart-checkout-button-block" class="wp-block-woocommerce-mini-cart-checkout-button-block"></div>
</div>
</div>
<div data-block-name="woocommerce/empty-mini-cart-contents-block" class="wp-block-woocommerce-empty-mini-cart-contents-block">
<p class="has-text-align-center"><strong>Your cart is currently empty!</strong></p>
<div data-block-name="woocommerce/mini-cart-shopping-button-block" class="wp-block-woocommerce-mini-cart-shopping-button-block"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-block-name="woocommerce/customer-account" data-display-style="icon_only" data-icon-class="wc-block-customer-account__account-icon" class="wp-block-woocommerce-customer-account " style="">
<a href="http://localhost:8086/my-account/">
<svg class="wc-block-customer-account__account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path d="M8.00009 8.34785C10.3096 8.34785 12.1819 6.47909 12.1819 4.17393C12.1819 1.86876 10.3096 0 8.00009 0C5.69055
0 3.81824 1.86876 3.81824 4.17393C3.81824 6.47909 5.69055 8.34785 8.00009 8.34785ZM0.333496 15.6522C0.333496
15.8444 0.489412 16 0.681933 16H15.3184C15.5109 16 15.6668 15.8444 15.6668 15.6522V14.9565C15.6668 12.1428
13.7821 9.73911 10.0912 9.73911H5.90931C2.21828 9.73911 0.333645 12.1428 0.333645 14.9565L0.333496 15.6522Z" fill="currentColor"></path>
</svg>
</a>
</div></div>
<nav class="is-responsive wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation" data-wp-interactive="core/navigation" data-wp-context="{&quot;overlayOpenedBy&quot;:{&quot;click&quot;:false,&quot;hover&quot;:false,&quot;focus&quot;:false},&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}"><button aria-haspopup="dialog" aria-label="Open menu" class="wp-block-navigation__responsive-container-open " data-wp-on--click="actions.openMenuOnClick" data-wp-on--keydown="actions.handleMenuKeydown"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg></button>
<div class="wp-block-navigation__responsive-container" style="" id="modal-1" data-wp-class--has-modal-open="state.isMenuOpen" data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu" data-wp-on--keydown="actions.handleMenuKeydown" data-wp-on--focusout="actions.handleMenuFocusout" tabindex="-1">
<div class="wp-block-navigation__responsive-close" tabindex="-1">
<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="state.ariaModal" data-wp-bind--aria-label="state.ariaLabel" data-wp-bind--role="state.roleAttribute">
<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" data-wp-on--click="actions.closeMenuOnClick"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
<div class="wp-block-navigation__responsive-container-content" data-wp-watch="callbacks.focusFirstElement" id="modal-1-content">
<ul class="wp-block-navigation__container is-responsive wp-block-navigation"><ul class="wp-block-page-list"><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/cart/">Cart</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/checkout/">Checkout</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/my-account/">My account</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/sample-page/">Sample Page</a></li><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" href="http://localhost:8086/shop/">Shop</a></li></ul></ul>
</div>
</div>
</div>
</div></nav></div>
</div>