WebdriverIO - 拖放操作

WebdriverIO 可以使用 dragAndDrop 方法執行滑鼠操作，例如拖放。使用此方法，我們對當前物件（源）執行點選並按住事件，然後將物件傳遞到目標元素。最後，釋放滑鼠。

語法

語法如下：

let p = $('#loc')
let t = $('#target')
p.dragAndDrop(t)

這裡，p 是源定位器，t 是目標定位器。

讓我們對以下元素執行拖放功能：

在上圖中，名為“Drag me to my target”的元素必須拖放到名為“Dropped!”的元素上。

首先，請按照名為“使用 WebdriverIO 的成功路徑流程”章節中的步驟 1 到 5 操作，步驟如下：

步驟 1 - 安裝 NodeJS。有關如何執行此安裝的詳細資訊，請參閱名為“使用 NodeJS 入門”的章節。

步驟 2 - 安裝 NPM。有關如何執行此安裝的詳細資訊，請參閱名為“NPM 安裝”的章節。

步驟 3 - 安裝 VS Code。有關如何執行此安裝的詳細資訊，請參閱名為“VS Code 安裝”的章節。

步驟 4 - 建立配置檔案。有關如何執行此安裝的詳細資訊，請參閱名為“配置檔案生成”的章節。

步驟 5 - 建立一個規範檔案。有關如何執行此安裝的詳細資訊，請參閱名為“Mocha 安裝”的章節。

步驟 6 - 在建立的 Mocha 規範檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Drag and Drop', function(){    
      // launch url
      browser.url('https://jqueryui.com/droppable/')  
      //maximize browser
      browser.maximizeWindow()
      //switch to frame
      browser.switchToFrame($(".demo-frame"))
      //identify source element
      const src = $('#draggable')   
      //identify target element
      const trg = $('#droppable')  
      //drag and drop
      src.dragAndDrop(trg)
   });
});

執行配置檔案 - wdio.conf.js 檔案，使用以下命令：

npx wdio run wdio.conf.js

有關如何建立配置檔案的詳細資訊，請參閱名為“wdio.conf.js 檔案”和“配置檔案生成”的章節。

您的計算機上將顯示以下螢幕：

執行後，名為“Drag me to my target”的元素已拖放到名為“Dropped!”的元素上。