Add E2E testing to track events across all page types

[mikkamp]

Changes proposed in this Pull Request:

With the focus on shifting towards blocks yet still supporting classic pages, we have to cover the following types of pages to track their events:

1. Traditional pages using the classic shortcodes.
2. Default WooCommerce pages which are created during install, most have been switched to blocks when starting with a new site.
3. The "Products (Beta)" block.
4. The "Product Collection (Beta)" block. This one is intended to replace the Products block.

To test this manually is a large burden. This PR copies over the E2E we have for tracking in GLA and modifies them to work with the GA events we send. This makes it easier to test the events across several different page/block types.

The tests in this PR did highlight some inconsitencies, and events that aren't being tracked, so the following changes are needed to make these tests pass:

• PR #384
• PR #378
• Extra selector for Product Collection block mentioned in https://github.com/woocommerce/woocommerce-google-analytics-integration/pull/378#issuecomment-1987786319

Detailed test instructions:

1. Install any required patches as listed above
2. Install all npm dependencies nvm use && npm ci
3. Build assets either through npm start or npm run build
4. Ensure we don't have any conflicting E2E docker instances running (like the one from GLA)
5. Start the wp-env site npm run wp-env:up
6. Install browser (only needed once) npx playwright install chromium
7. Run tests npm run test:e2e
8. Confirm tests are successful

Note: workflow is included (direct copy from GLA). We can only trigger it once this PR is merged (unless you want to clone the repo to test it).

Additional details:

These test aim to cover the most common scenarios, but while testing I still came across the following inconsistencies/parts we aren't covering (these can be addressed in follow up PR's):

• [ ] Remove from cart with shortcode [woocommerce_cart] isn't always tracked because of immediate page redirect (not in E2E)
• [ ] Remove from cart / Begin checkout is not consistent between blocks and shortcode, category and variation data differ.
• [ ] Change cart quantity is not tracked with shortcode [woocommerce_cart] or with blocks (PR #375 removes it)
• [ ] Add shipping info doesn't seem to be used anywhere (mentioned in https://github.com/woocommerce/woocommerce-google-analytics-integration/pull/375#issuecomment-1987887419)
• [ ] Select content is difficult to test if it is followed up by a page redirect (no E2E tests written yet)
• [ ] begin_checkout logs total item price (including discounts and price * quantity), purchase logs product object price (not final price we paid in the order). Should these be consistent?
• [ ] When we hook into woocommerce_add_to_cart, should we get final price from cart_item_data? Otherwise we'll track product prices vs. discounted price.
• [ ] When we change the settings to redirect to cart page after add_to_cart, do we still capture all details?
• [ ] Testing with grouped / bundled products (grouped product seems to only track first product added to cart)

Changelog entry

• Dev - Add E2E testing to track events across all page types.

[mikkamp]

Run e2e tests again, all tests passed except:

[chromium] › gtag-events/blocks-pages.test.js:160:2 › GTag events on block pages › Add to cart event is sent from a product collection block shop page

Which is related to the code change from https://github.com/woocommerce/woocommerce-google-analytics-integration/pull/378#issuecomment-1987786319. Not sure if I change the code locally wrong?

The code you changed is right, did you rebuild the assets after that change? I'm not quite sure why it would be failing otherwise. Maybe you can check the site at http://localhost:8889 to see how it handles the "Product Collection Shop" page. Make sure to add some test settings to enable tracking, during E2E that's enabled and cleared.

[mikkamp]

@tomalec Thanks for the review. Since this is approved and working, I'm going to merge it so we can focus on the other issues and get them tested. We can always refactor / change any other details later if needed.