Skip to content

Commit d9ed8a9

Browse files
rafaelzaleskirafaelzaleski
authored
Add E2E smoke tests for WooCommerce Blocks (#2517)
* Add cart and checkout blocks setup * Add helper functions for the blocks checkout * Add assertion to detect the user is logged in * Add normal CC checkout test case for blocks * Add sca card test case for blocks checkout * Add card-failures spec * Add saved card spec * Fix fs import * Improve SSH command output on CLI * Fix invalid cards test for blocks * Fix function call on saved card spec * Add fail() annotation for expected failure on blocks * Add spaces for readability
1 parent 1f17f80 commit d9ed8a9

File tree

12 files changed

+555
-27
lines changed

12 files changed

+555
-27
lines changed

‎tests/e2e/test-data/cart-block-content.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!-- wp:woocommerce/cart -->
2+
<div class="wp-block-woocommerce-cart is-loading"><!-- wp:woocommerce/filled-cart-block -->
3+
<div class="wp-block-woocommerce-filled-cart-block"><!-- wp:woocommerce/cart-items-block -->
4+
<div class="wp-block-woocommerce-cart-items-block"><!-- wp:woocommerce/cart-line-items-block -->
5+
<div class="wp-block-woocommerce-cart-line-items-block"></div>
6+
<!-- /wp:woocommerce/cart-line-items-block -->
7+
8+
<!-- wp:woocommerce/cart-cross-sells-block -->
9+
<div class="wp-block-woocommerce-cart-cross-sells-block"><!-- wp:heading {"level":3} -->
10+
<h3>You may be interested in…</h3>
11+
<!-- /wp:heading -->
12+
13+
<!-- wp:woocommerce/cart-cross-sells-products-block -->
14+
<div class="wp-block-woocommerce-cart-cross-sells-products-block"></div>
15+
<!-- /wp:woocommerce/cart-cross-sells-products-block --></div>
16+
<!-- /wp:woocommerce/cart-cross-sells-block --></div>
17+
<!-- /wp:woocommerce/cart-items-block -->
18+
19+
<!-- wp:woocommerce/cart-totals-block -->
20+
<div class="wp-block-woocommerce-cart-totals-block"><!-- wp:woocommerce/cart-order-summary-block -->
21+
<div class="wp-block-woocommerce-cart-order-summary-block"><!-- wp:woocommerce/cart-order-summary-heading-block -->
22+
<div class="wp-block-woocommerce-cart-order-summary-heading-block"></div>
23+
<!-- /wp:woocommerce/cart-order-summary-heading-block -->
24+
25+
<!-- wp:woocommerce/cart-order-summary-subtotal-block -->
26+
<div class="wp-block-woocommerce-cart-order-summary-subtotal-block"></div>
27+
<!-- /wp:woocommerce/cart-order-summary-subtotal-block -->
28+
29+
<!-- wp:woocommerce/cart-order-summary-fee-block -->
30+
<div class="wp-block-woocommerce-cart-order-summary-fee-block"></div>
31+
<!-- /wp:woocommerce/cart-order-summary-fee-block -->
32+
33+
<!-- wp:woocommerce/cart-order-summary-discount-block -->
34+
<div class="wp-block-woocommerce-cart-order-summary-discount-block"></div>
35+
<!-- /wp:woocommerce/cart-order-summary-discount-block -->
36+
37+
<!-- wp:woocommerce/cart-order-summary-coupon-form-block -->
38+
<div class="wp-block-woocommerce-cart-order-summary-coupon-form-block"></div>
39+
<!-- /wp:woocommerce/cart-order-summary-coupon-form-block -->
40+
41+
<!-- wp:woocommerce/cart-order-summary-shipping-block -->
42+
<div class="wp-block-woocommerce-cart-order-summary-shipping-block"></div>
43+
<!-- /wp:woocommerce/cart-order-summary-shipping-block -->
44+
45+
<!-- wp:woocommerce/cart-order-summary-taxes-block -->
46+
<div class="wp-block-woocommerce-cart-order-summary-taxes-block"></div>
47+
<!-- /wp:woocommerce/cart-order-summary-taxes-block --></div>
48+
<!-- /wp:woocommerce/cart-order-summary-block -->
49+
50+
<!-- wp:woocommerce/cart-express-payment-block -->
51+
<div class="wp-block-woocommerce-cart-express-payment-block"></div>
52+
<!-- /wp:woocommerce/cart-express-payment-block -->
53+
54+
<!-- wp:woocommerce/proceed-to-checkout-block -->
55+
<div class="wp-block-woocommerce-proceed-to-checkout-block"></div>
56+
<!-- /wp:woocommerce/proceed-to-checkout-block -->
57+
58+
<!-- wp:woocommerce/cart-accepted-payment-methods-block -->
59+
<div class="wp-block-woocommerce-cart-accepted-payment-methods-block"></div>
60+
<!-- /wp:woocommerce/cart-accepted-payment-methods-block --></div>
61+
<!-- /wp:woocommerce/cart-totals-block --></div>
62+
<!-- /wp:woocommerce/filled-cart-block -->
63+
64+
<!-- wp:woocommerce/empty-cart-block -->
65+
<div class="wp-block-woocommerce-empty-cart-block"><!-- wp:image {"align":"center","sizeSlug":"small"} -->
66+
<figure class="wp-block-image aligncenter size-small"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDBDOC41MDQwMyAwIDAgOC41MDQwMyAwIDE5QzAgMjkuNDk2IDguNTA0MDMgMzggMTkgMzhDMjkuNDk2IDM4IDM4IDI5LjQ5NiAzOCAxOUMzOCA4LjUwNDAzIDI5LjQ5NiAwIDE5IDBaTTI1LjEyOSAxMi44NzFDMjYuNDg1MSAxMi44NzEgMjcuNTgwNiAxMy45NjY1IDI3LjU4MDYgMTUuMzIyNkMyNy41ODA2IDE2LjY3ODYgMjYuNDg1MSAxNy43NzQyIDI1LjEyOSAxNy43NzQyQzIzLjc3MyAxNy43NzQyIDIyLjY3NzQgMTYuNjc4NiAyMi42Nzc0IDE1LjMyMjZDMjIuNjc3NCAxMy45NjY1IDIzLjc3MyAxMi44NzEgMjUuMTI5IDEyLjg3MVpNMTEuNjQ1MiAzMS4yNTgxQzkuNjE0OTIgMzEuMjU4MSA3Ljk2Nzc0IDI5LjY0OTIgNy45Njc3NCAyNy42NTczQzcuOTY3NzQgMjYuMTI1IDEwLjE1MTIgMjMuMDI5OCAxMS4xNTQ4IDIxLjY5NjhDMTEuNCAyMS4zNjczIDExLjg5MDMgMjEuMzY3MyAxMi4xMzU1IDIxLjY5NjhDMTMuMTM5MSAyMy4wMjk4IDE1LjMyMjYgMjYuMTI1IDE1LjMyMjYgMjcuNjU3M0MxNS4zMjI2IDI5LjY0OTIgMTMuNjc1NCAzMS4yNTgxIDExLjY0NTIgMzEuMjU4MVpNMTIuODcxIDE3Ljc3NDJDMTEuNTE0OSAxNy43NzQyIDEwLjQxOTQgMTYuNjc4NiAxMC40MTk0IDE1LjMyMjZDMTAuNDE5NCAxMy45NjY1IDExLjUxNDkgMTIuODcxIDEyLjg3MSAxMi44NzFDMTQuMjI3IDEyLjg3MSAxNS4zMjI2IDEzLjk2NjUgMTUuMzIyNiAxNS4zMjI2QzE1LjMyMjYgMTYuNjc4NiAxNC4yMjcgMTcuNzc0MiAxMi44NzEgMTcuNzc0MlpNMjUuOTEwNSAyOS41ODc5QzI0LjE5NDQgMjcuNTM0NyAyMS42NzM4IDI2LjM1NDggMTkgMjYuMzU0OEMxNy4zNzU4IDI2LjM1NDggMTcuMzc1OCAyMy45MDMyIDE5IDIzLjkwMzJDMjIuNDAxNiAyMy45MDMyIDI1LjYxMTcgMjUuNDA0OCAyNy43ODc1IDI4LjAyNUMyOC44NDQ4IDI5LjI4MTUgMjYuOTI5NCAzMC44MjE0IDI1LjkxMDUgMjkuNTg3OVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=" alt=""/></figure>
67+
<!-- /wp:image -->
68+
69+
<!-- wp:heading {"textAlign":"center","className":"wc-block-cart__empty-cart__title"} -->
70+
<h2 class="has-text-align-center wc-block-cart__empty-cart__title">Your cart is currently empty!</h2>
71+
<!-- /wp:heading -->
72+
73+
<!-- wp:paragraph {"align":"center"} -->
74+
<p class="has-text-align-center"><a href="https://standard-palm.jurassic.ninja/shop/">Browse store</a>.</p>
75+
<!-- /wp:paragraph -->
76+
77+
<!-- wp:separator {"className":"is-style-dots"} -->
78+
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dots"/>
79+
<!-- /wp:separator -->
80+
81+
<!-- wp:heading {"textAlign":"center"} -->
82+
<h2 class="has-text-align-center">New in store</h2>
83+
<!-- /wp:heading -->
84+
85+
<!-- wp:woocommerce/product-new {"rows":1} /--></div>
86+
<!-- /wp:woocommerce/empty-cart-block --></div>
87+
<!-- /wp:woocommerce/cart -->

‎tests/e2e/test-data/checkout-block-content.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!-- wp:woocommerce/checkout -->
2+
<div class="wp-block-woocommerce-checkout wc-block-checkout is-loading"><!-- wp:woocommerce/checkout-fields-block -->
3+
<div class="wp-block-woocommerce-checkout-fields-block"><!-- wp:woocommerce/checkout-express-payment-block -->
4+
<div class="wp-block-woocommerce-checkout-express-payment-block"></div>
5+
<!-- /wp:woocommerce/checkout-express-payment-block -->
6+
7+
<!-- wp:woocommerce/checkout-contact-information-block -->
8+
<div class="wp-block-woocommerce-checkout-contact-information-block"></div>
9+
<!-- /wp:woocommerce/checkout-contact-information-block -->
10+
11+
<!-- wp:woocommerce/checkout-shipping-address-block -->
12+
<div class="wp-block-woocommerce-checkout-shipping-address-block"></div>
13+
<!-- /wp:woocommerce/checkout-shipping-address-block -->
14+
15+
<!-- wp:woocommerce/checkout-billing-address-block -->
16+
<div class="wp-block-woocommerce-checkout-billing-address-block"></div>
17+
<!-- /wp:woocommerce/checkout-billing-address-block -->
18+
19+
<!-- wp:woocommerce/checkout-shipping-methods-block -->
20+
<div class="wp-block-woocommerce-checkout-shipping-methods-block"></div>
21+
<!-- /wp:woocommerce/checkout-shipping-methods-block -->
22+
23+
<!-- wp:woocommerce/checkout-payment-block -->
24+
<div class="wp-block-woocommerce-checkout-payment-block"></div>
25+
<!-- /wp:woocommerce/checkout-payment-block -->
26+
27+
<!-- wp:woocommerce/checkout-order-note-block -->
28+
<div class="wp-block-woocommerce-checkout-order-note-block"></div>
29+
<!-- /wp:woocommerce/checkout-order-note-block -->
30+
31+
<!-- wp:woocommerce/checkout-terms-block -->
32+
<div class="wp-block-woocommerce-checkout-terms-block"></div>
33+
<!-- /wp:woocommerce/checkout-terms-block -->
34+
35+
<!-- wp:woocommerce/checkout-actions-block -->
36+
<div class="wp-block-woocommerce-checkout-actions-block"></div>
37+
<!-- /wp:woocommerce/checkout-actions-block --></div>
38+
<!-- /wp:woocommerce/checkout-fields-block -->
39+
40+
<!-- wp:woocommerce/checkout-totals-block -->
41+
<div class="wp-block-woocommerce-checkout-totals-block"><!-- wp:woocommerce/checkout-order-summary-block -->
42+
<div class="wp-block-woocommerce-checkout-order-summary-block"><!-- wp:woocommerce/checkout-order-summary-cart-items-block -->
43+
<div class="wp-block-woocommerce-checkout-order-summary-cart-items-block"></div>
44+
<!-- /wp:woocommerce/checkout-order-summary-cart-items-block -->
45+
46+
<!-- wp:woocommerce/checkout-order-summary-subtotal-block -->
47+
<div class="wp-block-woocommerce-checkout-order-summary-subtotal-block"></div>
48+
<!-- /wp:woocommerce/checkout-order-summary-subtotal-block -->
49+
50+
<!-- wp:woocommerce/checkout-order-summary-fee-block -->
51+
<div class="wp-block-woocommerce-checkout-order-summary-fee-block"></div>
52+
<!-- /wp:woocommerce/checkout-order-summary-fee-block -->
53+
54+
<!-- wp:woocommerce/checkout-order-summary-discount-block -->
55+
<div class="wp-block-woocommerce-checkout-order-summary-discount-block"></div>
56+
<!-- /wp:woocommerce/checkout-order-summary-discount-block -->
57+
58+
<!-- wp:woocommerce/checkout-order-summary-coupon-form-block -->
59+
<div class="wp-block-woocommerce-checkout-order-summary-coupon-form-block"></div>
60+
<!-- /wp:woocommerce/checkout-order-summary-coupon-form-block -->
61+
62+
<!-- wp:woocommerce/checkout-order-summary-shipping-block -->
63+
<div class="wp-block-woocommerce-checkout-order-summary-shipping-block"></div>
64+
<!-- /wp:woocommerce/checkout-order-summary-shipping-block -->
65+
66+
<!-- wp:woocommerce/checkout-order-summary-taxes-block -->
67+
<div class="wp-block-woocommerce-checkout-order-summary-taxes-block"></div>
68+
<!-- /wp:woocommerce/checkout-order-summary-taxes-block --></div>
69+
<!-- /wp:woocommerce/checkout-order-summary-block --></div>
70+
<!-- /wp:woocommerce/checkout-totals-block --></div>
71+
<!-- /wp:woocommerce/checkout -->

‎tests/e2e/test-data/default.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,13 @@
4545
"first_name": "Customer",
4646
"last_name": "Customerson",
4747
"company": "",
48-
"country": "US",
48+
"country": "United States (US)",
49+
"country_iso": "US",
4950
"address_1": "60 29th Street #343",
5051
"address_2": "billing",
5152
"city": "San Francisco",
52-
"state": "CA",
53+
"state": "California",
54+
"state_iso": "CA",
5355
"postcode": "94110",
5456
"phone": "2025550104",
5557
"email": "[email protected]"
@@ -58,11 +60,13 @@
5860
"first_name": "Recipient",
5961
"last_name": "Recipientson",
6062
"company": "",
61-
"country": "US",
63+
"country": "United States (US)",
64+
"country_iso": "US",
6265
"address_1": "166 Crosby Street",
6366
"address_2": "shipping",
6467
"city": "New York",
6568
"state": "New York",
69+
"state_iso": "NY",
6670
"postcode": "10012"
6771
}
6872
}
@@ -228,4 +232,4 @@
228232
"label": "Visa ending in 4242"
229233
}
230234
}
231-
}
235+
}

‎tests/e2e/tests/checkout/card-failures.spec.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,23 @@ test.describe( 'customer cannot checkout with invalid cards', () => {
3131
test( `a declined card shows the correct error message @smoke`, async ( {
3232
page,
3333
} ) => testCard( page, 'cards.declined' ) );
34+
3435
test( `a card with insufficient funds shows the correct error message`, async ( {
3536
page,
3637
} ) => testCard( page, 'cards.declined-funds' ) );
38+
3739
test( `a card with invalid number shows the correct error message`, async ( {
3840
page,
3941
} ) => testCard( page, 'cards.declined-incorrect' ) );
42+
4043
test( `an expired card shows the correct error message`, async ( {
4144
page,
4245
} ) => testCard( page, 'cards.declined-expired' ) );
46+
4347
test( `a card with incorrect CVC shows the correct error message @smoke`, async ( {
4448
page,
4549
} ) => testCard( page, 'cards.declined-cvc' ) );
50+
4651
test( `an error processing the card shows the correct error message`, async ( {
4752
page,
4853
} ) => testCard( page, 'cards.declined-processing' ) );

‎tests/e2e/tests/checkout/saved-card.spec.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,15 @@ test( 'customer can checkout with a saved card @smoke', async ( { page } ) => {
3636
config.get( 'users.customer.password' )
3737
);
3838
await page.click( 'text=Log In' );
39+
40+
await expect( page.locator( 'body' ) ).toHaveClass( /logged-in/ );
3941
} );
4042

4143
await test.step( 'checkout and choose to save the card', async () => {
4244
await emptyCart( page );
4345

4446
await setupProductCheckout( page );
45-
await setupCheckout( page, null, true );
47+
await setupCheckout( page );
4648
await fillCardDetails( page, config.get( 'cards.basic' ) );
4749

4850
// check box to save payment method.

‎tests/e2e/tests/woocommerce-blocks/card-failures.spec.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { test, expect } from '@playwright/test';
2+
import config from 'config';
3+
import { payments } from '../../utils';
4+
5+
const {
6+
emptyCart,
7+
setupProductCheckout,
8+
setupBlocksCheckout,
9+
fillCardDetails,
10+
} = payments;
11+
12+
test.beforeEach( async ( { page } ) => {
13+
await emptyCart( page );
14+
await setupProductCheckout( page );
15+
await setupBlocksCheckout(
16+
page,
17+
config.get( 'addresses.customer.billing' )
18+
);
19+
} );
20+
21+
const testCard = async ( page, cardKey ) => {
22+
const card = config.get( cardKey );
23+
24+
await fillCardDetails( page, card );
25+
await page.locator( 'text=Place order' ).click();
26+
27+
/**
28+
* The invalid card error message is shown in the input field validation.
29+
* The customer isn't allowed to place the order for this type of card failure.
30+
*/
31+
expect
32+
.soft(
33+
await page.innerText(
34+
cardKey === 'cards.declined-incorrect'
35+
? '.wc-card-number-element .wc-block-components-validation-error'
36+
: '.wc-block-checkout__payment-method .woocommerce-error'
37+
)
38+
)
39+
.toBe( card.error );
40+
};
41+
42+
test.describe.configure( { mode: 'parallel' } );
43+
test.describe( 'customer cannot checkout with invalid cards @blocks', () => {
44+
test( `a declined card shows the correct error message @smoke`, async ( {
45+
page,
46+
} ) => testCard( page, 'cards.declined' ) );
47+
48+
test( `a card with insufficient funds shows the correct error message`, async ( {
49+
page,
50+
} ) => testCard( page, 'cards.declined-funds' ) );
51+
52+
test( `a card with invalid number shows the correct error message`, async ( {
53+
page,
54+
} ) => {
55+
test.fail();
56+
testCard( page, 'cards.declined-incorrect' );
57+
} );
58+
59+
test( `an expired card shows the correct error message`, async ( {
60+
page,
61+
} ) => testCard( page, 'cards.declined-expired' ) );
62+
63+
test( `a card with incorrect CVC shows the correct error message @smoke`, async ( {
64+
page,
65+
} ) => testCard( page, 'cards.declined-cvc' ) );
66+
67+
test( `an error processing the card shows the correct error message`, async ( {
68+
page,
69+
} ) => testCard( page, 'cards.declined-processing' ) );
70+
} );

‎tests/e2e/tests/woocommerce-blocks/normal-card.spec.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { test, expect } from '@playwright/test';
2+
import config from 'config';
3+
import { payments } from '../../utils';
4+
5+
const {
6+
emptyCart,
7+
setupProductCheckout,
8+
fillCardDetails,
9+
setupBlocksCheckout,
10+
} = payments;
11+
12+
test( 'customer can checkout with a normal credit card @smoke @blocks', async ( {
13+
page,
14+
} ) => {
15+
await emptyCart( page );
16+
17+
await setupProductCheckout( page );
18+
await setupBlocksCheckout(
19+
page,
20+
config.get( 'addresses.customer.billing' )
21+
);
22+
23+
await fillCardDetails( page, config.get( 'cards.basic' ) );
24+
await page.locator( 'text=Place order' ).click();
25+
await page.waitForNavigation();
26+
27+
await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
28+
'Order received'
29+
);
30+
} );

0 commit comments

Comments
 (0)