E2E Playwright Migration: convert Order Manual Capture spec #10180
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: 0 B Total Size: 1.36 MB ℹ️ View Unchanged
|
ismaeldcom
reviewed
Jan 20, 2025
|
|
||
| test.afterEach( async ( { browser } ) => { | ||
| // Merchant go to settings, disable capture later, and then save. | ||
| const { merchantPage } = await getMerchant( browser ); |
There was a problem hiding this comment.
Every time we call getMerchant a new browser window is created, to avoid that, we can reuse the same page, doing something like:
test.describe( '...' , () => {
let merchantPage;
test.beforeAll( async ( { browser } => {
merchantPage = ( await getMerchant( browser ) ).merchantPage;
}); Also notice that we could use beforeAll instead of beforeEach to call the setup part only once.
| // Merchant go to settings, enable capture later, and then save. | ||
| const { merchantPage } = await getMerchant( browser ); | ||
| await goToWooPaymentsSettings( merchantPage ); | ||
| await merchantPage.getByTestId( 'capture-later-checkbox' ).click(); |
There was a problem hiding this comment.
This can lead to flaky tests because it just clicks the checkbox instead of unchecking it, which does the opposite of what we intend if it's already checked.
We are already following a good pattern to do it properly in the merchant utils.
Comment on lines
+42
to
+59
| await emptyCart( shopperPage ); | ||
| await goToShop( shopperPage, 1 ); | ||
| await setupProductCheckout( shopperPage ); | ||
| await fillCardDetails( shopperPage ); | ||
| await focusPlaceOrderButton( shopperPage ); | ||
| await placeOrder( shopperPage ); | ||
|
|
||
| // Confirm that the order was placed and get the order number. | ||
| await shopperPage.waitForURL( /\/order-received\//, { | ||
| waitUntil: 'load', | ||
| } ); | ||
| await expect( | ||
| shopperPage.getByRole( 'heading', { name: 'Order received' } ) | ||
| ).toBeVisible(); | ||
| const orderIdField = shopperPage.locator( | ||
| '.woocommerce-order-overview__order.order > strong' | ||
| ); | ||
| orderId = await orderIdField.innerText(); |
There was a problem hiding this comment.
This can be greatly simplified by using the placeOrderWithOptions helper 🙂
orderId = await placeOrderWithOptions( shopperPage );
Comment on lines
+78
to
+80
| await expect( merchantPage.getByTitle( 'On hold' ) ).toHaveText( | ||
| 'On hold' | ||
| ); |
There was a problem hiding this comment.
Instead of checking for the text twice, we can use toBeVisble or toBeAttached, being the former more commonly used.
| ); | ||
| await expect( | ||
| merchantPage.getByText( | ||
| /A payment of \$\d+\.\d{2}.* was authorized using WooPayments/ |
There was a problem hiding this comment.
This is a good way to handle unknown prices, although as we're under a controlled environment, it's okay just to use plain text and test for $18.00, you'll notice that almost every test does that.
Comment on lines
+88
to
+94
| merchantPage | ||
| .locator( '#woocommerce-order-actions select' ) | ||
| .selectOption( 'capture_charge' ); | ||
| // Using locator due to there are several buttons "named" Update. | ||
| merchantPage | ||
| .locator( '#woocommerce-order-actions li#actions button' ) | ||
| .click(); |
There was a problem hiding this comment.
We need to be very careful, it's easy to forget about adding await to every Playwright action and quite frustrating when you can't find why the test is failing 😅
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #9962
Changes proposed in this Pull Request
saveWooPaymentsSettingsfunction, it looked for any snackbar on the page, not just the success one.Testing instructions
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.