Merge pull request #2043 from woocommerce/e2e/wp-env-versions

Allow E2E testing with Release Candidates

.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
 

.wp-env.json

@@ -1,13 +1,12 @@
 {
     "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",
         "."
     ],
     "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",

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)

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": {

tests/e2e/bin/test-env-setup.sh

@@ -3,6 +3,12 @@
 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 '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
 

tests/e2e/config/default.json

@@ -153,6 +153,7 @@
 				"addresssecondline": "addr 2",
 				"city": "San Francisco",
 				"state": "CA",
+				"statename": "California",
 				"postcode": "94107",
 				"phone": "123456789",
 				"email": "[email protected]"

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();

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' );
@@ -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 = ( await 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/ );
@@ -74,17 +75,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();