Make WooCommerce E2E storefront inspectable

Author: Tsvetan Stoychev

AGENTS.md

@@ -34,6 +34,8 @@ namespace, PSR-4 Composer autoloading, PHP 7.4+, and WordPress 6.0+.
   `assets/js/loaders/`.
 - WooCommerce browser E2E tests are root-level test tooling. Keep the pinned
   WooCommerce version and checksum synchronized in `tools/setup-woocommerce-e2e.sh`.
+  The setup disables WooCommerce Coming soon mode so anonymous storefront tests
+  can see the seeded product.
   Review and update each Docker image tag and digest together in
   `docker/woocommerce-e2e.yml`.
 - Pin third-party GitHub Actions to full 40-character commit SHAs. Keep the
@@ -55,6 +57,8 @@ make conventions
 make unit
 make js-test
 make woocommerce-e2e
+make woocommerce-e2e-up
+make woocommerce-e2e-down
 make integration-setup
 make integration
 make translations

Makefile

@@ -13,7 +13,7 @@ TEST_DB_PASS = root
 TEST_DB_HOST = db
 WP_TEST_VERSION ?= latest
 
-.PHONY: help build up down restart logs shell composer-install wp-install lint lint-fix lint-php analyse composer-validate composer-audit conventions translations js-install js-test woocommerce-e2e integration-setup integration test package package-verify package-smoke clean
+.PHONY: help build up down restart logs shell composer-install wp-install lint lint-fix lint-php analyse composer-validate composer-audit conventions translations js-install js-test woocommerce-e2e woocommerce-e2e-up woocommerce-e2e-down integration-setup integration test package package-verify package-smoke clean
 
 help:
 	@echo "Targets:"
@@ -36,6 +36,8 @@ help:
 	@echo "  js-install         Install locked JavaScript test dependencies"
 	@echo "  js-test            Run loader behavior tests in Chromium"
 	@echo "  woocommerce-e2e    Run WooCommerce page-type browser tests"
+	@echo "  woocommerce-e2e-up Start the inspectable WooCommerce test stack on port 9081"
+	@echo "  woocommerce-e2e-down Stop and reset the inspectable WooCommerce test stack"
 	@echo "  unit               Run unit tests"
 	@echo "  integration-setup  Install WordPress test suite inside containers"
 	@echo "  integration        Run integration tests"
@@ -103,6 +105,12 @@ js-test: js-install
 woocommerce-e2e:
 	sh tools/run-woocommerce-e2e.sh
 
+woocommerce-e2e-up:
+	sh tools/up-woocommerce-e2e.sh
+
+woocommerce-e2e-down:
+	sh tools/down-woocommerce-e2e.sh
+
 unit:
 	$(COMPOSE) run --rm -w $(PLUGIN_WORKDIR) $(PHP_SERVICE) composer unit
 

README.md

@@ -29,6 +29,7 @@ make conventions
 make translations
 make js-test
 make woocommerce-e2e
+make woocommerce-e2e-up
 make package
 make package-smoke
 ```
@@ -126,11 +127,21 @@ behavior on HTTP, HTTPS, localhost, and subdomains.
 stack, seeds a product and completed order, then uses Playwright to visit the
 shop, product, cart, checkout, and order-received pages. It intercepts the
 synthetic collector and verifies the actual Basicrum beacon `p_type` values.
+WooCommerce Coming soon mode is disabled in this isolated stack, so the shop
+also proves that the seeded product is visible to anonymous visitors.
 The WooCommerce download is pinned and checksum-verified in
 `tools/setup-woocommerce-e2e.sh`; update its version and checksum together.
 The stack's Docker image tags and immutable digests are reviewed together in
 `docker/woocommerce-e2e.yml`.
 
+To inspect the same seeded WooCommerce storefront manually, run
+`make woocommerce-e2e-up`. It exposes an isolated stack at
+`http://localhost:9081/` with `admin` / `basicrum-e2e-password`; use
+`make woocommerce-e2e-down` to stop and reset it. Set
+`WOOCOMMERCE_E2E_PORT` to use a different host port. The inspectable stack
+keeps its own data and plugin copy, so run `make woocommerce-e2e-down` and then
+`make woocommerce-e2e-up` after changing plugin source.
+
 The JavaScript package, Playwright configuration, and browser tests live at the
 repository root. The release builder copies only `plugins/basicrum/`, and the
 release verifier also rejects Node or Playwright development files if they ever

docker/woocommerce-e2e.dev.yml

@@ -0,0 +1,10 @@
+services:
+  wordpress:
+    ports:
+      - "${WOOCOMMERCE_E2E_PORT:-9081}:80"
+
+  wpcli:
+    environment:
+      WP_URL: http://localhost:${WOOCOMMERCE_E2E_PORT:-9081}
+      WP_TITLE: Basicrum WooCommerce Local
+      HTTP_HOST: localhost:${WOOCOMMERCE_E2E_PORT:-9081}

tests/e2e/woocommerce-page-types.spec.js

@@ -47,6 +47,16 @@ async function visitAndCaptureBeacon( page, route, expectedPageType, prepare ) {
 	expect( response.ok() ).toBeTruthy();
 	await expect( page.locator( '#basicrum-loader-js' ) ).toHaveCount( 1 );
 
+	if ( 'shop' === expectedPageType ) {
+		const productLink = page.getByRole( 'link', {
+			name: 'Basicrum E2E Product',
+			exact: true,
+		} );
+
+		await expect( productLink ).toHaveCount( 1 );
+		await expect( productLink ).toBeVisible();
+	}
+
 	const inlineConfig = await page.locator( 'script' ).evaluateAll( ( scripts ) => {
 		return scripts
 			.map( ( script ) => script.textContent || '' )
@@ -79,6 +89,7 @@ test.beforeAll( async ( { request } ) => {
 
 	expect( response.ok() ).toBeTruthy();
 	fixture = await response.json();
+	expect( new URL( fixture.routes.product ).pathname ).toBe( '/product/basicrum-e2e-product/' );
 } );
 
 for ( const [ routeName, expectedPageType ] of expectedPageTypes ) {

tools/down-woocommerce-e2e.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -eu
+
+SCRIPT_DIR=$( CDPATH= cd -- "$(dirname -- "$0")" && pwd )
+REPOSITORY_ROOT=$( CDPATH= cd -- "$SCRIPT_DIR/.." && pwd )
+COMPOSE_FILE="$REPOSITORY_ROOT/docker/woocommerce-e2e.yml"
+COMPOSE_DEV_FILE="$REPOSITORY_ROOT/docker/woocommerce-e2e.dev.yml"
+
+if ! command -v docker >/dev/null 2>&1; then
+	printf '%s\n' 'Docker is required to stop the WooCommerce development stack.' >&2
+	exit 1
+fi
+
+COMPOSE_PROJECT_NAME=basicrum_woocommerce_dev
+export COMPOSE_PROJECT_NAME
+
+docker compose -f "$COMPOSE_FILE" -f "$COMPOSE_DEV_FILE" down --volumes --remove-orphans

tools/run-woocommerce-e2e.sh

@@ -51,7 +51,7 @@ while ! compose exec -T wordpress test -f /var/www/html/wp-includes/version.php;
 	sleep 2
 done
 
-compose run --rm --no-deps --user "$(id -u):$(id -g)" -e COMPOSER_HOME=/tmp/composer composer \
+compose run --rm --no-deps -e COMPOSER_HOME=/tmp/composer composer \
 	install --no-dev --no-interaction --prefer-dist
 
 compose run --rm wpcli sh /tools/setup-woocommerce-e2e.sh

tools/seed-woocommerce-e2e.php

@@ -10,9 +10,6 @@
 	exit( 1 );
 }
 
-update_option( 'permalink_structure', '/%postname%/' );
-flush_rewrite_rules();
-
 $product = new WC_Product_Simple();
 $product->set_name( 'Basicrum E2E Product' );
 $product->set_regular_price( '10.00' );

tools/setup-woocommerce-e2e.sh

@@ -58,7 +58,13 @@ if [ "$(wp plugin get woocommerce --field=version --path="${WP_PATH}")" != "$WOO
 fi
 
 wp wc tool run install_pages --user=1 --path="${WP_PATH}"
+
+# Fresh WooCommerce installs enable Coming soon mode for anonymous visitors.
+wp option update woocommerce_coming_soon no --path="${WP_PATH}"
+wp option update woocommerce_store_pages_only no --path="${WP_PATH}"
+
 wp plugin activate basicrum --path="${WP_PATH}"
+wp rewrite structure '/%postname%/' --hard --path="${WP_PATH}"
 
 wp option update basicrum_settings \
 	'{"enabled":"1","development_mode":"0","beacon_url":"https://collector.basicrum.test/beacon","brum_site_id":"550e8400-e29b-41d4-a716-446655440000","track_admins":"0","consent_enabled":"0","wait_after_onload":"0","delay_ms":0,"script_position":"footer","use_unminified_loaders":"0"}' \

tools/up-woocommerce-e2e.sh

@@ -0,0 +1,59 @@
+#!/bin/sh
+
+set -eu
+
+SCRIPT_DIR=$( CDPATH= cd -- "$(dirname -- "$0")" && pwd )
+REPOSITORY_ROOT=$( CDPATH= cd -- "$SCRIPT_DIR/.." && pwd )
+COMPOSE_FILE="$REPOSITORY_ROOT/docker/woocommerce-e2e.yml"
+COMPOSE_DEV_FILE="$REPOSITORY_ROOT/docker/woocommerce-e2e.dev.yml"
+PORT=${WOOCOMMERCE_E2E_PORT:-9081}
+
+if ! command -v docker >/dev/null 2>&1; then
+	printf '%s\n' 'Docker is required to run the WooCommerce development stack.' >&2
+	exit 1
+fi
+
+COMPOSE_PROJECT_NAME=basicrum_woocommerce_dev
+export COMPOSE_PROJECT_NAME
+
+compose() {
+	docker compose -f "$COMPOSE_FILE" -f "$COMPOSE_DEV_FILE" "$@"
+}
+
+print_access_details() {
+	printf '%s\n' "WooCommerce test stack is ready at http://localhost:${PORT}/"
+	printf '%s\n' "Admin: http://localhost:${PORT}/wp-admin/"
+	printf '%s\n' 'Login: admin / basicrum-e2e-password'
+	printf '%s\n' 'Run make woocommerce-e2e-down to stop and reset it.'
+}
+
+if [ -n "$(compose ps -aq wordpress)" ]; then
+	compose up -d db wordpress
+
+	if compose run --rm --no-deps wpcli core is-installed --path=/var/www/html >/dev/null 2>&1; then
+		print_access_details
+		exit 0
+	fi
+fi
+
+compose run --rm --no-deps plugin
+compose up -d db wordpress
+
+attempt=0
+while ! compose exec -T wordpress test -f /var/www/html/wp-includes/version.php; do
+	attempt=$((attempt + 1))
+
+	if [ "$attempt" -ge 30 ]; then
+		printf '%s\n' 'WordPress files were not initialized in time.' >&2
+		exit 1
+	fi
+
+	sleep 2
+done
+
+compose run --rm --no-deps -e COMPOSER_HOME=/tmp/composer composer \
+	install --no-dev --no-interaction --prefer-dist
+
+compose run --rm wpcli sh /tools/setup-woocommerce-e2e.sh
+
+print_access_details