From 1a1938a8f309126691450514d9e5847fdf60c65a Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 09:36:31 +0100 Subject: [PATCH 01/14] Install WC through CLI to allow updating --- .wp-env.json | 1 - tests/e2e/bin/test-env-setup.sh | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.wp-env.json b/.wp-env.json index cd5f56fc9f..9873c78ac5 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -1,7 +1,6 @@ { "phpVersion": "8.0", "plugins": [ - "https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip", "https://github.com/WP-API/Basic-Auth/archive/master.zip", "./tests/e2e/bin/test-data.php", "." diff --git a/tests/e2e/bin/test-env-setup.sh b/tests/e2e/bin/test-env-setup.sh index 6d5647dcbb..eece142dfe 100755 --- a/tests/e2e/bin/test-env-setup.sh +++ b/tests/e2e/bin/test-env-setup.sh @@ -3,6 +3,9 @@ echo -e 'Activate twentytwentytwo theme \n' wp-env run tests-cli wp theme activate twentytwentytwo +echo -e 'Install WooCommerce \n' +wp-env run tests-cli -- wp plugin install woocommerce --activate + echo -e 'Update URL structure \n' wp-env run tests-cli -- wp rewrite structure '/%postname%/' --hard From a5636dc473114f7713ad26a3995b5b43e2d4921b Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 09:39:06 +0100 Subject: [PATCH 02/14] Explain how to test with other WP/WC versions --- README.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8c0461fa40..ad455991d2 100644 --- a/README.md +++ b/README.md @@ -151,10 +151,32 @@ Run E2E testing: To remove the Docker container and images (this will **delete everything** in the WordPress Docker container): -`npm run docker:down` +`npm run wp-env destroy` :warning: Currently, the E2E testing on GitHub Actions is only run automatically after opening a PR with `release/*` branches or pushing changes to `release/*` branches. To run it manually, please visit [here](../../actions/workflows/e2e-tests.yml) and follow [this instruction](https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow?tool=webui) to do so. +### Test other WordPress versions +By default the latest version of WordPress will be installed. `WP_ENV_CORE` can be used to install a specific version. + +``` +WP_ENV_CORE=WordPress/WordPress#6.2.2 npm run wp-env:up +``` + +This does not work with Release Candidate versions as the tag is not available. Instead we can bring the `wp-env:up` with the latest version and then upgrade WordPress through WP CLI. + +``` +npm run wp-env -- run tests-cli -- wp core update --version=6.3-RC3 +npm run wp-env -- run tests-cli -- wp core update-db +``` + +### Test other WooCommerce versions +WooCommerce is installed through WP CLI so we can use this to update to a newer version like a release candidate. + +``` +npm run wp-env -- run tests-cli -- wp plugin update woocommerce --version=8.0.0-rc.1 +npm run wp-env -- run tests-cli -- wp wc update +``` + ## Docs - [Usage Tracking](./src/Tracking/README.md) From 9786aed0ff3240c6dbe1c747115c2ed2d35cdd22 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 09:39:31 +0100 Subject: [PATCH 03/14] Fix add to cart after block changes --- tests/e2e/utils/customer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index 759646975c..d55fc9258e 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -25,9 +25,9 @@ export async function singleProductAddToCart( page, productID ) { const addToCart = '.single_add_to_cart_button'; await page.locator( addToCart ).first().click(); - await expect( page.locator( '.woocommerce-message' ) ).toContainText( - 'been added to your cart' - ); + await expect( + page.getByText( 'has been added to your cart' ) + ).toBeVisible(); // Wait till all tracking event request have been sent after page reloaded. await page.waitForLoadState( 'networkidle' ); From b7bc009d26b514e1b12ce09afd4a0649b2a52dbe Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 11:47:40 +0100 Subject: [PATCH 04/14] Update checkout for blocks in WC 8.0 --- tests/e2e/config/default.json | 1 + tests/e2e/utils/customer.js | 36 ++++++++++++++++++++++++----------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/tests/e2e/config/default.json b/tests/e2e/config/default.json index 115ed4b3ec..be9f30094c 100644 --- a/tests/e2e/config/default.json +++ b/tests/e2e/config/default.json @@ -153,6 +153,7 @@ "addresssecondline": "addr 2", "city": "San Francisco", "state": "CA", + "statename": "California", "postcode": "94107", "phone": "123456789", "email": "john.doe@example.com" diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index d55fc9258e..d727660ac0 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -74,17 +74,31 @@ export async function checkout( page ) { await page.goto( 'checkout' ); - await page.locator( '#billing_first_name' ).fill( user.firstname ); - await page.locator( '#billing_last_name' ).fill( user.lastname ); - await page.locator( '#billing_address_1' ).fill( user.addressfirstline ); - await page.locator( '#billing_city' ).fill( user.city ); - await page.locator( '#billing_state' ).selectOption( user.state ); - await page.locator( '#billing_postcode' ).fill( user.postcode ); - await page.locator( '#billing_phone' ).fill( user.phone ); - await page.locator( '#billing_email' ).fill( user.email ); - - await page.locator( 'text=Cash on delivery' ).click(); - await expect( page.locator( 'div.payment_method_cod' ) ).toBeVisible(); + if ( await page.locator( '#billing_first_name' ).isVisible() ) { + await page.locator( '#billing_first_name' ).fill( user.firstname ); + await page.locator( '#billing_last_name' ).fill( user.lastname ); + await page + .locator( '#billing_address_1' ) + .fill( user.addressfirstline ); + await page.locator( '#billing_city' ).fill( user.city ); + await page.locator( '#billing_state' ).selectOption( user.state ); + await page.locator( '#billing_postcode' ).fill( user.postcode ); + await page.locator( '#billing_phone' ).fill( user.phone ); + await page.locator( '#billing_email' ).fill( user.email ); + + await page.locator( 'text=Cash on delivery' ).click(); + await expect( page.locator( 'div.payment_method_cod' ) ).toBeVisible(); + } else { + await page.getByLabel( 'Email address' ).fill( user.email ); + await page.getByLabel( 'First name' ).fill( user.firstname ); + await page.getByLabel( 'Last name' ).fill( user.lastname ); + await page + .getByLabel( 'Address', { exact: true } ) + .fill( user.addressfirstline ); + await page.getByLabel( 'City' ).fill( user.city ); + await page.getByLabel( 'ZIP Code' ).fill( user.postcode ); + await page.locator( '#billing-state input' ).fill( user.statename ); + } await page.locator( 'text=Place order' ).click(); From 072407eeb1c555ead12f3c9ef5b1a73a08487ea9 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 11:48:49 +0100 Subject: [PATCH 05/14] Conditional locator for related add to cart --- tests/e2e/utils/customer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index d727660ac0..85f63e1b55 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -40,8 +40,9 @@ export async function singleProductAddToCart( page, productID ) { * @return {number} Product ID of the added product. */ export async function relatedProductAddToCart( page ) { - const addToCart = - '.wp-block-woocommerce-related-products .add_to_cart_button'; + const addToCart = page.locator( '.related.products' ).isVisible() + ? '.related.products .add_to_cart_button' + : '.wp-block-woocommerce-related-products .add_to_cart_button'; await page.locator( addToCart ).first().click(); await expect( page.locator( addToCart ).first() ).toHaveClass( /added/ ); From 6b539b0395723c4dcb0ea4f045a928f14b9904e4 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 11:52:40 +0100 Subject: [PATCH 06/14] Tweak commands in readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ad455991d2..e30c95363b 100644 --- a/README.md +++ b/README.md @@ -165,16 +165,16 @@ WP_ENV_CORE=WordPress/WordPress#6.2.2 npm run wp-env:up This does not work with Release Candidate versions as the tag is not available. Instead we can bring the `wp-env:up` with the latest version and then upgrade WordPress through WP CLI. ``` -npm run wp-env -- run tests-cli -- wp core update --version=6.3-RC3 -npm run wp-env -- run tests-cli -- wp core update-db +npm run -- wp-env run tests-cli -- wp core update --version=6.3-RC3 +npm run -- wp-env run tests-cli -- wp core update-db ``` ### Test other WooCommerce versions WooCommerce is installed through WP CLI so we can use this to update to a newer version like a release candidate. ``` -npm run wp-env -- run tests-cli -- wp plugin update woocommerce --version=8.0.0-rc.1 -npm run wp-env -- run tests-cli -- wp wc update +npm run -- wp-env run tests-cli -- wp plugin update woocommerce --version=8.0.0-rc.1 +npm run -- wp-env run tests-cli -- wp wc update ``` ## Docs From a6f4920561db97d708f70eb381bfa154b072fb4f Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 12:06:04 +0100 Subject: [PATCH 07/14] Add RC input options to E2E workflow --- .github/workflows/e2e-tests.yml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index d34b9996e4..583b7c345e 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.github/workflows/e2e-tests.yml @@ -8,6 +8,11 @@ on: branches: - "release/**" workflow_dispatch: + inputs: + wp-rc-version: + description: 'WordPress version for Release Candidate (ex. 6.3-RC3)' + wc-rc-version: + description: 'WooCommerce version for Release Candidate (ex. 8.0.0-rc.1)' concurrency: group: ${{ github.workflow }}-${{ github.ref }} @@ -43,6 +48,18 @@ jobs: - name: Start wp-env container run: npm run wp-env:up + - name: Install WP release candidate (optional) + if: github.event.inputs.wp-rc-version != '' + run: | + npm run -- wp-env run tests-cli -- wp core update --version=${{ github.event.inputs.wp-rc-version }} + npm run -- wp-env run tests-cli -- wp core update-db + + - name: Install WC release candidate (optional) + if: github.event.inputs.wc-rc-version != '' + run: | + npm run -- wp-env run tests-cli -- wp plugin update woocommerce --version=${{ github.event.inputs.wc-rc-version }} + npm run -- wp-env run tests-cli -- wp wc update + - name: Download and install Chromium browser. run: npx playwright install chromium From 8da555561bdd131e3c6cac25585bdb6d5ce9a5e3 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 13:49:36 +0100 Subject: [PATCH 08/14] Wait for page to fully load before related --- tests/e2e/specs/gtag-events/gtag-events.test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/e2e/specs/gtag-events/gtag-events.test.js b/tests/e2e/specs/gtag-events/gtag-events.test.js index 300e90a083..64de81a44b 100644 --- a/tests/e2e/specs/gtag-events/gtag-events.test.js +++ b/tests/e2e/specs/gtag-events/gtag-events.test.js @@ -111,9 +111,11 @@ test.describe( 'GTag events', () => { page, } ) => { await createSimpleProduct(); // Create an additional product for related to show up. - const event = trackGtagEvent( page, 'add_to_cart' ); await page.goto( `?p=${ simpleProductID }` ); + await page.waitForLoadState( 'networkidle' ); + + const event = trackGtagEvent( page, 'add_to_cart' ); const relatedProductID = await relatedProductAddToCart( page ); await event.then( ( request ) => { From fc00b6b5d2c042a5c955a447ba637bd7ce6ce2f2 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 15:29:54 +0100 Subject: [PATCH 09/14] Wait for related products selector --- tests/e2e/utils/customer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index 85f63e1b55..9e2bb48d3e 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -40,7 +40,7 @@ export async function singleProductAddToCart( page, productID ) { * @return {number} Product ID of the added product. */ export async function relatedProductAddToCart( page ) { - const addToCart = page.locator( '.related.products' ).isVisible() + const addToCart = await page.locator( '.related.products' ).isVisible() ? '.related.products .add_to_cart_button' : '.wp-block-woocommerce-related-products .add_to_cart_button'; From 22c998a08d43ebfd2ed106e7bf350ee3f62f936b Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 15:44:28 +0100 Subject: [PATCH 10/14] Revert changing order of related product test --- tests/e2e/specs/gtag-events/gtag-events.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/e2e/specs/gtag-events/gtag-events.test.js b/tests/e2e/specs/gtag-events/gtag-events.test.js index 64de81a44b..300e90a083 100644 --- a/tests/e2e/specs/gtag-events/gtag-events.test.js +++ b/tests/e2e/specs/gtag-events/gtag-events.test.js @@ -111,11 +111,9 @@ test.describe( 'GTag events', () => { page, } ) => { await createSimpleProduct(); // Create an additional product for related to show up. + const event = trackGtagEvent( page, 'add_to_cart' ); await page.goto( `?p=${ simpleProductID }` ); - await page.waitForLoadState( 'networkidle' ); - - const event = trackGtagEvent( page, 'add_to_cart' ); const relatedProductID = await relatedProductAddToCart( page ); await event.then( ( request ) => { From 14f664756de28a86c442aeb85fc4e8e95c462c23 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 16:00:22 +0100 Subject: [PATCH 11/14] Change line to check page title --- tests/e2e/specs/get-started.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/specs/get-started.test.js b/tests/e2e/specs/get-started.test.js index 46902cac5e..f58f5c427b 100644 --- a/tests/e2e/specs/get-started.test.js +++ b/tests/e2e/specs/get-started.test.js @@ -24,7 +24,7 @@ test( 'Merchant who is getting started clicks on the Marketing > GLA link, click await page.getByRole( 'link', { name: 'Google Listings & Ads' } ).click(); await page.waitForLoadState( 'networkidle' ); - await expect( page.title() ).resolves.toContain( 'Google Listings & Ads' ); + await expect( page ).toHaveTitle( /Google Listings & Ads/ ); // click on the call-to-action button. await page.getByText( 'Start listing products →' ).first().click(); From 4bedd7f3e2a38481d412888b5862071084e80853 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Fri, 4 Aug 2023 16:18:34 +0100 Subject: [PATCH 12/14] Fix js linting error --- tests/e2e/utils/customer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index 9e2bb48d3e..6418f14e93 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -40,7 +40,7 @@ export async function singleProductAddToCart( page, productID ) { * @return {number} Product ID of the added product. */ export async function relatedProductAddToCart( page ) { - const addToCart = await page.locator( '.related.products' ).isVisible() + const addToCart = ( await page.locator( '.related.products' ).isVisible() ) ? '.related.products .add_to_cart_button' : '.wp-block-woocommerce-related-products .add_to_cart_button'; From 4aefded7d8d4fe53315d4af9d07ed331c3599de8 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Wed, 9 Aug 2023 14:34:57 +0100 Subject: [PATCH 13/14] Switch method to install test plugin --- .wp-env.json | 4 ++-- tests/e2e/bin/test-env-setup.sh | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.wp-env.json b/.wp-env.json index 9873c78ac5..1931f6caf1 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -2,11 +2,11 @@ "phpVersion": "8.0", "plugins": [ "https://github.com/WP-API/Basic-Auth/archive/master.zip", - "./tests/e2e/bin/test-data.php", "." ], "mappings": { - "wp-cli.yml": "./tests/e2e/config/wp-cli.yml" + "wp-cli.yml": "./tests/e2e/config/wp-cli.yml", + "wp-content/plugins/test-data.php": "./tests/e2e/bin/test-data.php" }, "lifecycleScripts": { "afterStart": "./tests/e2e/bin/test-env-setup.sh", diff --git a/tests/e2e/bin/test-env-setup.sh b/tests/e2e/bin/test-env-setup.sh index eece142dfe..72d085ebfb 100755 --- a/tests/e2e/bin/test-env-setup.sh +++ b/tests/e2e/bin/test-env-setup.sh @@ -6,6 +6,9 @@ wp-env run tests-cli wp theme activate twentytwentytwo echo -e 'Install WooCommerce \n' wp-env run tests-cli -- wp plugin install woocommerce --activate +echo -e 'Activate Test Data utility plugin \n' +wp-env run tests-cli -- wp plugin activate test-data + echo -e 'Update URL structure \n' wp-env run tests-cli -- wp rewrite structure '/%postname%/' --hard From 03c85cf6e74280bec67be29c2df4d7d4029d34e1 Mon Sep 17 00:00:00 2001 From: mikkamp Date: Wed, 9 Aug 2023 14:35:30 +0100 Subject: [PATCH 14/14] Pass update parameter to wp-env start --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52d24e2db6..4f9c32947f 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "test:js:watch": "npm run test:js -- --watch", "test-proxy": "node ./tests/proxy", "wp-env": "wp-env", - "wp-env:up": "npm run wp-env start --update", + "wp-env:up": "npm run -- wp-env start --update", "wp-env:down": "npm run wp-env stop" }, "config": {