[e2e tests] Add new tests for up-sells and cross-sells

[adimoldovan]

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:

Closes https://github.com/woocommerce/woocommerce-quality/issues/604.
Closes https://github.com/woocommerce/woocommerce-quality/issues/605.

Added a new spec file with tests for linked products. It covers adding and removing up-sells and adding and removing cross-sells.

How to test the changes in this Pull Request:

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

Run the new spec file locally:

pnpm env:restart && pnpm test:e2e-pw ./tests/e2e-pw/tests/merchant/product-linked-producs.spec.js

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Test Results Summary

Commit SHA: fa6c18d

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	303	0	0	10	0	313	9m 19s

---

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.

[github-actions]

Hi @lanej0, @woocommerce/solaris

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[lanej0]

The viewport isn't an issue, more of a question. I'm curious about creating a function to replace page.goto though -- we're definitely trying to stay away from replacing built-in Playwright functions with custom ones.

[lanej0]

While I don't think there's an issue with this, what was the driver for increasing the viewport size so much? Seems like an unlikely resolution that a user might use, which could lead to some false-negative test results... but maybe I'm overthinking it.

[adimoldovan]

I reverted the height in fa6c18d.
It helped me when I ran tests locally to view all elements at once without needing to scroll. I should have reverted it before.
I'm curious though to know your thoughts on the possible false-negative that could result from that.

[lanej0]

I don't really think it's an issue, but e2e tests are meant to mimic real-world testing. Most people probably aren't browsing a site using a browser that's 1600 pixels tall. In an extreme edge case, if there was some CSS limiting scrolling/the content shown, and the button you're supposed to click is cropped off screen... there could be an issue. Not likely, scenario for sure.

[lanej0]

Why did you choose to abstract this into a separate function instead of just inlining page.goto in the test?

[adimoldovan]

There are two steps in that function, the goto and the click on the Linked Products, which are repeated in each test, so I extracted them into a function, the same way that I extracted the update product logic into updateProduct function.

[adimoldovan]

Thanks @lanej0 for reviewing.

I'm curious about creating a function to replace page.goto though -- we're definitely trying to stay away from replacing built-in Playwright functions with custom ones.

I think you misinterpreted this one. I did not replace Playwright's page.goto and I'm not trying to replace the build-in functions in any way. I was merely extracting some common code into a function. Those two steps are repeating in each of the 4 tests, it seems reasonable to me to extract it in a function.