When a test failure message shows An error occurred when attempting to interact with an element outside the viewport, please check if there are logs like this in the Test run log on the test result page.
[1] click([xxx], {})
[WARNING] As operation on the specified element failed, will retry by specifying coordinates. If the target element is covered by another element, the element above will be clicked.
the target position: (-2, -2)
Retry also failed. The error before the retry is as follows:
move target out of bounds: move target out of bounds
If such logs are recorded, it's likely failing because there are multiple elements that can be identified by the locator specified in the step, and the test is trying to interact with an element that is hidden.
This error frequently occurs, especially in SPAs (Single Page Applications) using React or Vue.js, as invisible elements may still exist in the UI tree even when not displayed on screen.
Solutions
Change to a stable locator
If the target element appears in the failure result capture, you can set a unique locator by registering the result capture of the failed step as UI and setting the locator from that UI.
If it's difficult to determine a stable locator, please contact MagicPod Support.
Add [last()] or [2] to the end of the locator
Though changing to a stable locator is recommended, if that's difficult, consider adding [last()] or [2] to the end of the locator. Refs: Add/Edit a locator
For example, if you set a locator like this and multiple elements can be identified by this locator, the first element identified by this locator becomes the operation target. If that element is hidden, the test will fail.
//button[text()='Cancel']
If the target element is not the first element that can be identified by the locator but the last element, you can identify the appropriate target element by adding [last()] as follows:
//button[text()='Cancel'][last()]
You can also make the locator unique by adding a number like [2]:
//button[text()='Cancel'][2]
-> This identifies the second element among the elements that can be identified by //button[text()='Cancel']