// requireやbefore/after部分は前出のテストコードと共通it('react-sortable',async()=>{// react-sortablejsの公式デモページにアクセスawaitdriver.get('http://sortablejs.github.io/react-sortablejs/#container')letelements,sourceElementIndex,targetElementIndex// ドラッグ＆ドロップの対象を含むli要素のリストを取得elements=awaitdriver.findElements(By.css('ul.block-list > li'))// ドラッグ元（List Item 1）とドロップ先（List Item 2）のli要素の、リスト内でのindexを定義sourceElementIndex=0targetElementIndex=1// ドラッグ＆ドロップを実行する関数の呼び出しawaitsimulateDragAndDropForReact(elements,sourceElementIndex,targetElementIndex)// List Item 1 と List Item 2 が入れ替わったことを確認elements=awaitdriver.findElements(By.css('ul.block-list > li'))assert.strictEqual(awaitelements[0].getText(),'List Item 2')assert.strictEqual(awaitelements[1].getText(),'List Item 1')})/**
   * ドラッグ＆ドロップを実行する関数
   */asyncfunctionsimulateDragAndDropForReact(elements,sourceElementIndex,targetElementIndex){awaitdriver.executeScript(asyncargs=>{// dragoverイベントの発火位置を計算consttargetRect=args.elements[args.targetElementIndex].getBoundingClientRect()consttargetPositionX=(targetRect.left+targetRect.right)/2consttargetPositionY=(targetRect.top+targetRect.bottom)/2// ドラッグ＆ドロップに必要な各イベントのインスタンスオブジェクトを作成constpointerDownEvent=newPointerEvent('pointerdown',{bubbles:true,cancelable:true,})constdragStartEvent=newMouseEvent('dragstart',{bubbles:true,})constdragOverEvent=newMouseEvent('dragover',{bubbles:true,clientX:targetPositionX,clientY:targetPositionY,})constdropEvent=newMouseEvent('drop',{bubbles:true,})// sleep処理用の関数を定義constsleep=msec=>newPromise(resolve=>setTimeout(resolve,msec))// ドラッグ元の要素よりもドロップ先の要素が要素リストの後ろにある場合、// dragover発火時にイベントターゲットとなるドロップ先要素のindexを+1するconstadjustIndex=args.sourceElementIndex<args.targetElementIndex?1:0// イベントの発火args.elements[args.sourceElementIndex].dispatchEvent(pointerDownEvent)args.elements[args.sourceElementIndex].dispatchEvent(dragStartEvent)awaitsleep(1)args.elements[args.targetElementIndex+adjustIndex].dispatchEvent(dragOverEvent)args.elements[args.targetElementIndex].dispatchEvent(dropEvent)},{elements,sourceElementIndex,targetElementIndex})}

require'selenium-webdriver'require'minitest/autorun'describe'Drag and Drop test'dodriver=nilbeforedodriver=Selenium::WebDriver.for:chrome# Chromeを使う場合# driver = Selenium::WebDriver.for :firefox # Firefoxを使う場合# driver = Selenium::WebDriver.for :safari  # Safariを使う場合endafterdodriver.quitendit'SortableJS'do# SortableJSの公式デモページにアクセスdriver.get'https://sortablejs.github.io/Sortable/#simple-list'# ドラッグ＆ドロップの対象を含むdiv要素のリストを取得elements=driver.find_elements(:css,'div#example1 > div.list-group-item')# ドラッグ元（Item 1）とドロップ先（Item 2）のdiv要素を取得sourceElement=elements[0]targetElement=elements[1]# ドラッグ＆ドロップを実行するメソッドの呼び出しsimulateDragAndDrop(sourceElement,targetElement,driver)# Item 1 と Item 2 が入れ替わったことを確認elements=driver.find_elements(:css,'div#example1 > div.list-group-item')assert_equal(elements[0].text,'Item 2')assert_equal(elements[1].text,'Item 1')endend## ドラッグ＆ドロップを実行するメソッド#defsimulateDragAndDrop(sourceElement,targetElement,driver)driver.execute_script(<<-EOL,sourceElement,targetElement)
    (async (sourceElement, targetElement) => {
      // dragoverイベントの発火位置を計算
      const targetRect = targetElement.getBoundingClientRect()
      const targetPositionX = (targetRect.left + targetRect.right) / 2
      const targetPositionY = (targetRect.top + targetRect.bottom) / 2

      // ドラッグ＆ドロップに必要な各イベントのインスタンスオブジェクトを作成
      const pointerDownEvent = new PointerEvent('pointerdown', {
        bubbles: true,
        cancelable: true,
      })

      const dragStartEvent = new MouseEvent('dragstart', {
        bubbles: true,
      })

      const dragOverEvent = new MouseEvent('dragover', {
        bubbles: true,
        clientX: targetPositionX,
        clientY: targetPositionY,
      })

      const dropEvent = new MouseEvent('drop', {
        bubbles: true,
      })

      // sleep処理用の関数を定義
      const sleep = msec => new Promise(resolve => setTimeout(resolve, msec))

      // イベントの発火
      sourceElement.dispatchEvent(pointerDownEvent)
      sourceElement.dispatchEvent(dragStartEvent)
      await sleep(1)
      targetElement.dispatchEvent(dragOverEvent)
      targetElement.dispatchEvent(dropEvent)

    })(arguments[0], arguments[1])
  EOLend