How to perform drag and drop elements that in overlay iframe pages.

Article Overview:

This article will cover how you can achieve the following:

a guide on how to handle drag-and-drop actions for elements located in overlay iframe pages, which can often present challenges due to their dynamic and layered structures. It covers the necessary steps to interact with draggable elements and ensure successful drop operations within the iframe.

Problem Statement:

When attempting to drag and drop an element within an overlay iframe, users may encounter issues such as:

1. Difficulty in interacting with elements due to iframe boundaries.
2. Misaligned targets caused by nested or improperly identified drop zones.
3. Incorrect drag operations resulting from referencing elements inside, rather than the container of, the drop zone.

Solution:

We can make the following changes in the journey to solve this issue:

1. Mouse Over the Draggable Element
   Start by using the mouse over action on the element to highlight and prepare it for dragging.
   
   

2. Switch to the Target iframe
   Switch to the iframe containing the drop zone. Ensure the correct iframe is identified using its unique XPath or ID.
   
   

3. Use mouse drag to with the Drop Zone ID
   Perform the mouse drag to action, using the ID of the drop zone container as the target. Avoid using variables like $destination if they point to an element nested inside the drop zone instead of the container itself.

   For example:

   • $destination might reference a child element inside the drop zone, causing the drop action to fail or be misaligned.
   • Instead, by using the ID of the entire drop zone (e.g., droppableNonBase), you ensure the drag operation targets the correct area, eliminating ambiguity and improving reliability.

Implementation Steps in Virtuoso

1. Mouse over "SUBA CON FAIRY CMPCTION 430-450ML BO L1"

2. Switch iframe to "/html/body/div[6]/div[1]/div[2]/div/div/div/div/div[2]/div[1]/div[2]/div/div/iframe"

3. Mouse drag to "droppableNonBase"