Playwright 1.33 and UI mode

[lanej0]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR updates Playwright to version 1.33 and introduces the UI mode command.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Confirm that tests pass on CI
2. Pull this branch
3. pnpm env:start
4. pnpm test:e2e-pw (you may have to run pnpx playwright install first -- you'll be prompted)
5. Confirm tests pass
6. pnpm test:e2e-pw-ui
7. Confirm that Playwright UI window is shown.

[github-actions]

Test Results Summary

Commit SHA: 31af82f

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	267	0	0	2	0	269	0m 54s
E2E Tests	188	0	0	10	0	198	22m 20s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[codecov]

Codecov Report

Merging #38100 (3eaa05f) into trunk (c4c517c) will decrease coverage by 0.0%.
The diff coverage is 7.7%.

❗ Current head 3eaa05f differs from pull request most recent head 31af82f. Consider uploading reports for the commit 31af82f to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             trunk   #38100     +/-   ##
==========================================
- Coverage     51.2%    51.2%   -0.0%     
  Complexity   17421    17421             
==========================================
  Files          440      440             
  Lines        80640    80640             
==========================================
- Hits         41312    41310      -2     
- Misses       39328    39330      +2     

Impacted Files	Coverage Δ
...ocommerce/includes/abstracts/abstract-wc-order.php	76.4% <ø> (ø)
...ommerce/includes/abstracts/abstract-wc-product.php	88.3% <ø> (ø)
...ocommerce/includes/admin/class-wc-admin-addons.php	0.0% <ø> (ø)
...ocommerce/includes/admin/class-wc-admin-status.php	14.5% <ø> (ø)
.../includes/admin/helper/class-wc-helper-updater.php	28.9% <ø> (ø)
...udes/admin/settings/class-wc-settings-products.php	98.6% <ø> (ø)
...lugins/woocommerce/includes/class-wc-countries.php	95.4% <ø> (ø)
plugins/woocommerce/includes/class-wc-coupon.php	73.9% <ø> (ø)
...woocommerce/includes/class-wc-frontend-scripts.php	0.0% <ø> (ø)
...ugins/woocommerce/includes/class-wc-post-types.php	0.9% <0.0%> (ø)
... and 11 more

... and 1 file with indirect coverage changes

[alopezari]

Finally the UI mode! I'm sure it will be very beneficial for folks contributing to E2E tests. Maybe we'd need to advocate this feature and let people know about it.

Thank you very much for bringing it to the project @lanej0!

[rodelgc]

Looks good to me. Tested using the pnpm test:e2e-pw-ui command, as well as with the pnpm test:e2e-pw --ui command in case we'll remove the first one from package.json. Playwright was launched in UI mode in both commands.

I also tested it with ENABLE_HPOS, ENABLE_NEW_PRODUCT_EDITOR, and ENABLE_TRACKING toggled on, and verified that UI mode was launched with these features enabled in the local environment.

I'm ok with approving the PR once p1683611925286349/1683578158.765189-slack-C01BWDDTGKX was resolved.

[rodelgc]

Seems like the "Changelogger use" check didn't complete. But looking at https://github.com/woocommerce/woocommerce/actions/runs/4896612868, it seems that it successfully ran.

I re-ran the changelogger check and it completed fine, but it still shows up as waiting for completion in the checks list.

[nigeljamesstevenson]

Looks good to me - great to get this one over the line - UI mode seems very useful indeed 😊

[nigeljamesstevenson]

I wonder would it be worthwhile pushing an empty commit to this branch to get the checks running again to see if the changelogger check issue would be resolved?.. @lanej0 @rodelgc

[rodelgc]

Thank you for resolving the earlier change requests @lanej0. I created the task #38196 to add a line in our E2E readme on how to run the E2E tests in UI mode. Approving the PR now.

Playwright UI mode was launched after running pnpm test:e2e-pw --ui

[rodelgc]

Good call commenting this out. I think we should remove the assertion, and clean up the response variable above it. I created a separate task for it in #38195.