Drag and drop in Selenium Python - Test Execution Trace

Test Overview

This test automates dragging an element from one place and dropping it onto another. It verifies that the drop action was successful by checking the target element's text.

Test Code - Selenium

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import unittest

class DragAndDropTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.driver.get('https://jqueryui.com/droppable/')
        self.wait = WebDriverWait(self.driver, 10)

    def test_drag_and_drop(self):
        self.wait.until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR, '.demo-frame')))
        source = self.wait.until(EC.presence_of_element_located((By.ID, 'draggable')))
        target = self.wait.until(EC.presence_of_element_located((By.ID, 'droppable')))

        actions = ActionChains(self.driver)
        actions.drag_and_drop(source, target).perform()

        self.assertEqual(target.text, 'Dropped!')

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Browser window is open, ready to load the test page	-	PASS
2	Navigates to 'https://jqueryui.com/droppable/'	Page with drag and drop demo loaded	-	PASS
3	Waits for iframe with class 'demo-frame' and switches to it	Inside iframe containing draggable and droppable elements	iframe is available and switched	PASS
4	Finds draggable element by ID 'draggable'	Draggable element located on the page	Element with ID 'draggable' is present	PASS
5	Finds droppable element by ID 'droppable'	Droppable element located on the page	Element with ID 'droppable' is present	PASS
6	Performs drag and drop from draggable to droppable	Draggable element moved and dropped onto droppable element	-	PASS
7	Checks that droppable element text changed to 'Dropped!'	Droppable element text is 'Dropped!' confirming drop success	target.text == 'Dropped!'	PASS
8	Test ends and browser closes	Browser window closed	-	PASS

Failure Scenario

Failing Condition: Draggable or droppable element not found or drag and drop action fails

Execution Trace Quiz - 3 Questions

What is the purpose of switching to the iframe in this test?

A To refresh the page

B To access elements inside the iframe for drag and drop

C To close the iframe before testing

D To open a new browser tab

Key Result

Always switch to the correct iframe before interacting with elements inside it to avoid element not found errors.