From 5a5b1f04785dd90df2cfc47b907f15b94bc17a11 Mon Sep 17 00:00:00 2001 From: Ivan Stojadinov Date: Thu, 5 Sep 2024 11:19:23 +0200 Subject: [PATCH] [e2e tests] External sites - update /merchant tests, part 3 (#51158) * Skip `Merchant can view a list of all customers, filter and download` * Skip `can receive new order email` * Expand Pressable run with new set of /merchant tests * Move `should filter by All` into for loop with existing tests * Wait between two actions with `networkidle` * Skip two tests on Pressable * Add changefile(s) from automation for the following project(s): woocommerce * Remove `networkidle` and use class `current` for the selected filter * Fix ESLint error --------- Co-authored-by: github-actions --- ...e-external-sites-update-merchant-tests-pt3 | 4 + .../default-pressable/playwright.config.js | 15 + .../create-woocommerce-blocks.spec.js | 2 +- .../create-woocommerce-patterns.spec.js | 2 +- .../tests/merchant/customer-list.spec.js | 257 +++++++++--------- .../tests/merchant/order-emails.spec.js | 98 ++++--- .../merchant/order-status-filter.spec.js | 17 +- 7 files changed, 214 insertions(+), 181 deletions(-) create mode 100644 plugins/woocommerce/changelog/51158-e2e-external-sites-update-merchant-tests-pt3 diff --git a/plugins/woocommerce/changelog/51158-e2e-external-sites-update-merchant-tests-pt3 b/plugins/woocommerce/changelog/51158-e2e-external-sites-update-merchant-tests-pt3 new file mode 100644 index 00000000000..c9c03552774 --- /dev/null +++ b/plugins/woocommerce/changelog/51158-e2e-external-sites-update-merchant-tests-pt3 @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update /merchant tests so they are passing against Pressable env. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js index 058ae9aef7f..1817c3097c6 100644 --- a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js +++ b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js @@ -26,6 +26,21 @@ config = { '**/merchant/create-checkout-block.spec.js', '**/merchant/create-coupon.spec.js', '**/merchant/create-order.spec.js', + '**/merchant/create-woocommerce-blocks.spec.js', + '**/merchant/create-woocommerce-patterns.spec.js', + '**/merchant/customer-list.spec.js', + '**/merchant/customer-payment-page.spec.js', + '**/merchant/launch-your-store.spec.js', + '**/merchant/lost-password.spec.js', + '**/merchant/order-bulk-edit.spec.js', + '**/merchant/order-coupon.spec.js', + '**/merchant/order-edit.spec.js', + '**/merchant/order-emails.spec.js', + '**/merchant/order-refund.spec.js', + '**/merchant/order-search.spec.js', + '**/merchant/order-status-filter.spec.js', + '**/merchant/page-loads.spec.js', + '**/merchant/product-create-simple.spec.js', '**/shopper/checkout-create-account.spec.js', '**/shopper/checkout-login.spec.js', '**/shopper/checkout.spec.js', diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js index ed5768ae08e..7ade737367f 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-blocks.spec.js @@ -52,7 +52,7 @@ const test = baseTest.extend( { test.describe( 'Add WooCommerce Blocks Into Page', - { tag: [ '@gutenberg', '@services' ] }, + { tag: [ '@gutenberg', '@services', '@skip-on-default-pressable' ] }, () => { test.beforeAll( async ( { api } ) => { // add product attribute diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js index 27071e6cb29..ee6d56b0d9c 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-woocommerce-patterns.spec.js @@ -28,7 +28,7 @@ const test = baseTest.extend( { test.describe( 'Add WooCommerce Patterns Into Page', - { tag: [ '@gutenberg', '@services' ] }, + { tag: [ '@gutenberg', '@services', '@skip-on-default-pressable' ] }, () => { test( 'can insert WooCommerce patterns into page', async ( { page, diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-list.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-list.spec.js index 68a029eb9a6..1b8cb58846a 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-list.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-list.spec.js @@ -83,144 +83,157 @@ test.describe( 'Merchant > Customer List', { tag: '@services' }, () => { await context.route( '**/users/**', ( route ) => route.abort() ); } ); - test( 'Merchant can view a list of all customers, filter and download', async ( { - page, - customers, - } ) => { - await test.step( 'Go to the customers reports page', async () => { - const responsePromise = page.waitForResponse( - '**/wp-json/wc-analytics/reports/customers?orderby**' - ); - await page.goto( - '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomers' - ); - await responsePromise; - } ); + test( + 'Merchant can view a list of all customers, filter and download', + { tag: '@skip-on-default-pressable' }, + async ( { page, customers } ) => { + await test.step( 'Go to the customers reports page', async () => { + const responsePromise = page.waitForResponse( + '**/wp-json/wc-analytics/reports/customers?orderby**' + ); + await page.goto( + '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomers' + ); + await responsePromise; + } ); - // may have more than 3 customers due to guest orders - // await test.step( 'Check that 3 customers are displayed', async () => { - // await expect( - // page.getByText( '3customers0Average orders$0.' ) - // ).toBeVisible(); - // } ); + // may have more than 3 customers due to guest orders + // await test.step( 'Check that 3 customers are displayed', async () => { + // await expect( + // page.getByText( '3customers0Average orders$0.' ) + // ).toBeVisible(); + // } ); - await test.step( 'Check that the customers are displayed in the list', async () => { - for ( const customer of customers ) { - await expect( - page.getByRole( 'link', { name: customer.email } ) - ).toBeVisible(); - } - } ); + await test.step( 'Check that the customers are displayed in the list', async () => { + for ( const customer of customers ) { + await expect( + page.getByRole( 'link', { name: customer.email } ) + ).toBeVisible(); + } + } ); - await test.step( 'Check that the customer list can be filtered by first name', async () => { - let x = 1; - for ( const customer of customers ) { + await test.step( 'Check that the customer list can be filtered by first name', async () => { + let x = 1; + for ( const customer of customers ) { + await page + .getByRole( 'combobox', { + expanded: false, + disabled: false, + } ) + .click(); + await page + .getByRole( 'combobox', { + expanded: false, + disabled: false, + } ) + .pressSequentially( + `${ customer.first_name } ${ customer.last_name }` + ); + await page + .getByRole( 'option', { + name: `All customers with names that include ${ customer.first_name } ${ customer.last_name }`, + exact: true, + } ) + .waitFor(); + await page + .getByRole( 'option', { + name: `${ customer.first_name } ${ customer.last_name }`, + exact: true, + } ) + .waitFor(); + await page + .getByRole( 'option', { + name: `All customers with names that include ${ customer.first_name } ${ customer.last_name }`, + exact: true, + } ) + .click( { delay: 300 } ); + await expect( + page.getByRole( 'link', { name: customer.email } ) + ).toBeVisible(); + await expect( + page.getByText( `${ x }customer` ) + ).toBeVisible(); + x++; + } + await page.getByRole( 'button', { name: 'Clear all' } ).click(); + } ); + + await test.step( 'Hide and display columns', async () => { await page - .getByRole( 'combobox', { - expanded: false, - disabled: false, + .getByRole( 'button', { + name: 'Choose which values to display', } ) .click(); + // hide a few columns + await page.getByRole( 'menu' ).getByText( 'Username' ).click(); await page - .getByRole( 'combobox', { - expanded: false, - disabled: false, - } ) - .pressSequentially( - `${ customer.first_name } ${ customer.last_name }` - ); + .getByRole( 'menu' ) + .getByText( 'Last active' ) + .click(); await page - .getByRole( 'option', { - name: `All customers with names that include ${ customer.first_name } ${ customer.last_name }`, - exact: true, - } ) - .waitFor(); - await page - .getByRole( 'option', { - name: `${ customer.first_name } ${ customer.last_name }`, - exact: true, - } ) - .waitFor(); - await page - .getByRole( 'option', { - name: `All customers with names that include ${ customer.first_name } ${ customer.last_name }`, - exact: true, - } ) - .click( { delay: 300 } ); + .getByRole( 'menu' ) + .getByText( 'Total spend' ) + .click(); + + // click to close the menu + await page.getByText( 'Show:' ).click(); + await expect( - page.getByRole( 'link', { name: customer.email } ) + page.getByRole( 'columnheader', { name: 'Username' } ) + ).toBeHidden(); + await expect( + page.getByRole( 'columnheader', { name: 'Last active' } ) + ).toBeHidden(); + await expect( + page.getByRole( 'columnheader', { name: 'Total spend' } ) + ).toBeHidden(); + + // show the columns again + await page + .getByRole( 'button', { + name: 'Choose which values to display', + } ) + .click(); + await page.getByRole( 'menu' ).getByText( 'Username' ).click(); + await page + .getByRole( 'menu' ) + .getByText( 'Last active' ) + .click(); + await page + .getByRole( 'menu' ) + .getByText( 'Total spend' ) + .click(); + + // click to close the menu + await page.getByText( 'Show:' ).click(); + + await expect( + page.getByRole( 'columnheader', { name: 'Username' } ) ).toBeVisible(); await expect( - page.getByText( `${ x }customer` ) + page.getByRole( 'columnheader', { name: 'Last active' } ) ).toBeVisible(); - x++; - } - await page.getByRole( 'button', { name: 'Clear all' } ).click(); - } ); + await expect( + page.getByRole( 'columnheader', { name: 'Total spend' } ) + ).toBeVisible(); + } ); - await test.step( 'Hide and display columns', async () => { - await page - .getByRole( 'button', { - name: 'Choose which values to display', - } ) - .click(); - // hide a few columns - await page.getByRole( 'menu' ).getByText( 'Username' ).click(); - await page.getByRole( 'menu' ).getByText( 'Last active' ).click(); - await page.getByRole( 'menu' ).getByText( 'Total spend' ).click(); + await test.step( 'Download the customer list', async () => { + const downloadPromise = page.waitForEvent( 'download' ); + await page.getByRole( 'button', { name: 'Download' } ).click(); + const download = await downloadPromise; - // click to close the menu - await page.getByText( 'Show:' ).click(); + const today = new Date(); + const year = today.getFullYear(); + const month = String( today.getMonth() + 1 ).padStart( 2, '0' ); + const day = String( today.getDate() ).padStart( 2, '0' ); - await expect( - page.getByRole( 'columnheader', { name: 'Username' } ) - ).toBeHidden(); - await expect( - page.getByRole( 'columnheader', { name: 'Last active' } ) - ).toBeHidden(); - await expect( - page.getByRole( 'columnheader', { name: 'Total spend' } ) - ).toBeHidden(); + const filename = `customers_${ year }-${ month }-${ day }_orderby-date-last-active_order-desc_page-wc-admin_path--customers.csv`; - // show the columns again - await page - .getByRole( 'button', { - name: 'Choose which values to display', - } ) - .click(); - await page.getByRole( 'menu' ).getByText( 'Username' ).click(); - await page.getByRole( 'menu' ).getByText( 'Last active' ).click(); - await page.getByRole( 'menu' ).getByText( 'Total spend' ).click(); - - // click to close the menu - await page.getByText( 'Show:' ).click(); - - await expect( - page.getByRole( 'columnheader', { name: 'Username' } ) - ).toBeVisible(); - await expect( - page.getByRole( 'columnheader', { name: 'Last active' } ) - ).toBeVisible(); - await expect( - page.getByRole( 'columnheader', { name: 'Total spend' } ) - ).toBeVisible(); - } ); - - await test.step( 'Download the customer list', async () => { - const downloadPromise = page.waitForEvent( 'download' ); - await page.getByRole( 'button', { name: 'Download' } ).click(); - const download = await downloadPromise; - - const today = new Date(); - const year = today.getFullYear(); - const month = String( today.getMonth() + 1 ).padStart( 2, '0' ); - const day = String( today.getDate() ).padStart( 2, '0' ); - - const filename = `customers_${ year }-${ month }-${ day }_orderby-date-last-active_order-desc_page-wc-admin_path--customers.csv`; - - await expect( download.suggestedFilename() ).toBe( filename ); - } ); - } ); + await expect( download.suggestedFilename() ).toBe( filename ); + } ); + } + ); test( 'Merchant can view a single customer', async ( { page, diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-emails.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-emails.spec.js index 27c6b7ea7cd..b5896e537b3 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-emails.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-emails.spec.js @@ -71,53 +71,63 @@ test.describe( } ); } ); - test( 'can receive new order email', async ( { page, baseURL } ) => { - // New order emails are sent automatically when we create a simple order. Verify that we get these. - // Need to create a new order for this test because we clear logs before each run. - const api = new wcApi( { - url: baseURL, - consumerKey: process.env.CONSUMER_KEY, - consumerSecret: process.env.CONSUMER_SECRET, - version: 'wc/v3', - } ); - await api - .post( 'orders', { - status: 'processing', - billing: customerBilling, - } ) - .then( ( response ) => { - newOrderId = response.data.id; + test( + 'can receive new order email', + { tag: '@skip-on-default-pressable' }, + async ( { page, baseURL } ) => { + // New order emails are sent automatically when we create a simple order. Verify that we get these. + // Need to create a new order for this test because we clear logs before each run. + const api = new wcApi( { + url: baseURL, + consumerKey: process.env.CONSUMER_KEY, + consumerSecret: process.env.CONSUMER_SECRET, + version: 'wc/v3', } ); - // search to narrow it down to just the messages we want - await page.goto( - `/wp-admin/tools.php?page=wpml_plugin_log&s=${ encodeURIComponent( - customerBilling.email - ) }` - ); - await expect( - page.locator( 'td.column-receiver >> nth=1' ) - ).toContainText( admin.email ); - await expect( - page.locator( 'td.column-subject >> nth=1' ) - ).toContainText( `[${ storeName }]: New order #${ newOrderId }` ); + await api + .post( 'orders', { + status: 'processing', + billing: customerBilling, + } ) + .then( ( response ) => { + newOrderId = response.data.id; + } ); + // search to narrow it down to just the messages we want + await page.goto( + `/wp-admin/tools.php?page=wpml_plugin_log&s=${ encodeURIComponent( + customerBilling.email + ) }` + ); + await expect( + page.locator( 'td.column-receiver >> nth=1' ) + ).toContainText( admin.email ); + await expect( + page.locator( 'td.column-subject >> nth=1' ) + ).toContainText( + `[${ storeName }]: New order #${ newOrderId }` + ); - // look at order email contents - await page - .getByRole( 'button', { name: 'View log' } ) - .last() - .click(); + // look at order email contents + await page + .getByRole( 'button', { name: 'View log' } ) + .last() + .click(); - await expect( - page.getByText( 'Receiver wordpress@example.com' ) - ).toBeVisible(); - await expect( - page.getByText( 'Subject [WooCommerce Core E2E' ) - ).toBeVisible(); - await page.getByRole( 'link', { name: 'json' } ).click(); - await expect( - page.locator( '#wp-mail-logging-modal-content-body-content' ) - ).toContainText( 'You’ve received the following order from :' ); - } ); + await expect( + page.getByText( 'Receiver wordpress@example.com' ) + ).toBeVisible(); + await expect( + page.getByText( 'Subject [WooCommerce Core E2E' ) + ).toBeVisible(); + await page.getByRole( 'link', { name: 'json' } ).click(); + await expect( + page.locator( + '#wp-mail-logging-modal-content-body-content' + ) + ).toContainText( + 'You’ve received the following order from :' + ); + } + ); test( 'can receive completed email', async ( { page, baseURL } ) => { // Completed order emails are sent automatically when an order's payment is completed. diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-status-filter.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-status-filter.spec.js index 31030d379ef..2ecf45d1c96 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-status-filter.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/order-status-filter.spec.js @@ -6,6 +6,7 @@ const statusColumnTextSelector = 'mark.order-status > span'; // Define order statuses to filter against const orderStatus = [ + [ 'All', 'all' ], [ 'Pending payment', 'wc-pending' ], [ 'Processing', 'wc-processing' ], [ 'On hold', 'wc-on-hold' ], @@ -55,19 +56,6 @@ test.describe( await api.post( 'orders/batch', { delete: [ ...orderBatchId ] } ); } ); - test( 'should filter by All', async ( { page } ) => { - await page.goto( '/wp-admin/admin.php?page=wc-orders' ); - - await page.locator( 'li.all > a' ).click(); - // because tests are running in parallel, we can't know how many orders there - // are beyond the ones we created here. - for ( let i = 0; i < orderStatus.length; i++ ) { - const statusTag = 'text=' + orderStatus[ i ][ 0 ]; - const countElements = await page.locator( statusTag ).count(); - await expect( countElements ).toBeGreaterThan( 0 ); - } - } ); - for ( let i = 0; i < orderStatus.length; i++ ) { test( `should filter by ${ orderStatus[ i ][ 0 ] }`, async ( { page, @@ -75,6 +63,9 @@ test.describe( await page.goto( '/wp-admin/admin.php?page=wc-orders' ); await page.locator( `li.${ orderStatus[ i ][ 1 ] }` ).click(); + await expect( + page.locator( `li.${ orderStatus[ i ][ 1 ] } > a.current` ) + ).toBeVisible(); const countElements = await page .locator( statusColumnTextSelector ) .count();