13 ActionChains.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a3cd8a36",
   "metadata": {},
   "source": [
    "# ActionChains\n",
    "行為鍊\n",
    "\n",
    "## 匯入工具\n",
    "加入行為鍊 ActionChains (在 WebDriver 中模擬滑鼠移動、點擊、拖曳、按右鍵出現選單，以及鍵盤輸入文字、按下鍵盤上的按鈕等)\n",
    "\n",
    "```from selenium.webdriver.common.action_chains import ActionChains```\n",
    "\n",
    "## 基本用法\n",
    "| 方法               | 說明                |\n",
    "| :------------------ | :------------------ |\n",
    "| click(on_element=None) | 單擊滑鼠左鍵 |\n",
    "| click_and_hold(on_element=None) | 點選滑鼠左鍵，不鬆開 |\n",
    "| context_click(on_element=None) | 點選滑鼠右鍵 |\n",
    "| double_click(on_element=None) | 雙擊滑鼠左鍵 |\n",
    "| drag_and_drop(source, target) | 拖拽到某個「元素」然後鬆開 |\n",
    "| drag_and_drop_by_offset(source, xoffset, yoffset) | 拖拽到某個「座標」然後鬆開 |\n",
    "| key_down(value, element=None) | 按下某個鍵盤上的鍵 |\n",
    "| key_up(value, element=None) | 鬆開某個鍵 |\n",
    "| move_by_offset(xoffset, yoffset) | 滑鼠從當前位置移動到某個座標 |\n",
    "| move_to_element(to_element) | 滑鼠移動到某個元素 |\n",
    "| move_to_element_with_offset(to_element, xoffset, yoffset) | 移動到距某個元素（左上角座標）多少距離的位置 |\n",
    "| pause(seconds) | 暫停動作一段時間 |\n",
    "| perform() | 執行鏈中的所有動作 |\n",
    "| release(on_element=None) | 在某個元素位置鬆開滑鼠左鍵 |\n",
    "| send_keys(keys_to_send) | 傳送某個鍵到當前焦點的元素 |\n",
    "| send_keys_to_element(element, keys_to_send) | 傳送某個鍵到指定元素 |\n",
    "\n",
    "## 寫法\n",
    "- 鍊式\n",
    "\n",
    "```Python\n",
    "ActionChains(driver).move_to_element( web_element ).click( web_element ).perform()\n",
    "```\n",
    "\n",
    "或是\n",
    "\n",
    "```Python\n",
    "action_chains = ActionChains(driver)\n",
    "action_chains.move_to_element( web_element ).click( web_element ).perform()\n",
    "```\n",
    "\n",
    "\n",
    "- 分步\n",
    "\n",
    "```Python\n",
    "action_chains = ActionChains(driver)\n",
    "action_chains.move_to_element( web_element )\n",
    "action_chains.click( web_element )\n",
    "action_chains.perform()\n",
    "```\n",
    "\n",
    "## 補充: 切換目前到 iframe 當中\n",
    "- 取得網頁上的 iframe\n",
    "\n",
    "`iframe = driver.find_element(By.CSS_SELECTOR, \"iframe#game-iframe\")`\n",
    "\n",
    "- 切換到 iframe 當中\n",
    "\n",
    "`driver.switch_to.frame(iframe)`\n",
    "\n",
    "- 回到主框架\n",
    "\n",
    "`driver.switch_to.default_content()`\n",
    "\n",
    "\n",
    "## 參考資料\n",
    "- [selenium.webdriver.common.action_chains](https://www.selenium.dev/selenium/docs/api/py/webdriver/selenium.webdriver.common.action_chains.html \"selenium.webdriver.common.action_chains\")\n",
    "- [Selenium的ActionChains Api介面詳解](https://www.796t.com/article.php?id=325399 \"Selenium的ActionChains Api介面詳解\")\n",
    "- [python selenium滑鼠鍵盤操作（ActionChains）](https://www.796t.com/article.php?id=94198 \"python selenium滑鼠鍵盤操作（ActionChains）\")\n",
    "- [行為鏈](https://python-selenium-zh.readthedocs.io/zh_CN/latest/7.2%20%E8%A1%8C%E4%B8%BA%E9%93%BE/ \"行為鏈\")\n",
    "- [ActionChains In Selenium](https://medium.com/@kavidhanda/actionchains-in-selenium-cde43dee0111 \"ActionChains In Selenium\")\n",
    "- [Selenium 4.1.0 documentation - selenium.webdriver.common.action_chains](https://www.selenium.dev/selenium/docs/api/py/webdriver/selenium.webdriver.common.action_chains.html \"Selenium 4.1.0 documentation - selenium.webdriver.common.action_chains\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "af0af52f",
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "匯入工具\n",
    "\n",
    "備註: 每次執行以下任一範例前，都要執行一次\"匯入工具\"的 cell\n",
    "'''\n",
    "\n",
    "# 操作 browser 的 API\n",
    "from selenium import webdriver\n",
    "from selenium.webdriver.chrome.service import Service\n",
    "from webdriver_manager.chrome import ChromeDriverManager\n",
    "\n",
    "# 期待元素出現要透過什麼方式指定，通常與 EC、WebDriverWait 一起使用\n",
    "from selenium.webdriver.common.by import By\n",
    "\n",
    "# 加入行為鍊 ActionChain (在 WebDriver 中模擬滑鼠移動、點擊、拖曳、按右鍵出現選單，以及鍵盤輸入文字、按下鍵盤上的按鈕等)\n",
    "from selenium.webdriver.common.action_chains import ActionChains\n",
    "\n",
    "# 加入鍵盤功能 (例如 Ctrl、Alt 等)\n",
    "from selenium.webdriver.common.keys import Keys\n",
    "\n",
    "# 強制等待 (執行期間休息一下)\n",
    "from time import sleep\n",
    "\n",
    "# 啟動瀏覽器工具的選項\n",
    "my_options = webdriver.ChromeOptions()\n",
    "# my_options.add_argument(\"--headless\")                #不開啟實體瀏覽器背景執行\n",
    "my_options.add_argument(\"--start-maximized\")         #最大化視窗\n",
    "my_options.add_argument(\"--incognito\")               #開啟無痕模式\n",
    "my_options.add_argument(\"--disable-popup-blocking\") #禁用彈出攔截\n",
    "my_options.add_argument(\"--disable-notifications\")  #取消通知"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "17e6e718",
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "範例 1: 對特定座標連續點擊\n",
    "\n",
    "來源連結\n",
    "https://cpstest.org/\n",
    "\n",
    "補充:\n",
    "先在 console 面板中，輸入下列程式碼，會在滑鼠一次移動後，顯示座標。\n",
    "需要先在 console 面板中輸入 allow pasting。\n",
    "\n",
    "document.onmousemove = function(e){\n",
    "    var x = e.pageX;\n",
    "    var y = e.pageY;\n",
    "    e.target.title = \"X is \" + x + \" and Y is \" + y;\n",
    "};\n",
    "\n",
    "參考連結:\n",
    "[1] Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates?\n",
    "https://stackoverflow.com/questions/12888584/is-there-a-way-to-tell-chrome-web-debugger-to-show-the-current-mouse-position-in\n",
    "'''\n",
    "\n",
    "# 使用 Chrome 的 WebDriver\n",
    "driver = webdriver.Chrome(\n",
    "    options = my_options\n",
    ")\n",
    "\n",
    "# 前往頁面\n",
    "driver.get('https://cpstest.org/10-seconds.php')\n",
    "\n",
    "# (Optional) 刪除不必要的網頁元素\n",
    "driver.execute_script(\"\"\"\n",
    "let element = document.querySelector('div.stdadd-class');\n",
    "if (element) {\n",
    "    element.parentNode.removeChild(element);\n",
    "}\n",
    "\"\"\")\n",
    "\n",
    "\n",
    "# 建立行為鍊\n",
    "ac = ActionChains(driver)\n",
    "\n",
    "# 移到指定座標 (視解析度與瀏覽器視窗大小而定) \n",
    "'''\n",
    "從 0,0 開始，若先前已移動，則進行相對位移，數值要用負號\n",
    "例如 ac.move_by_offset(-50, -80)\n",
    "'''\n",
    "ac.move_by_offset(652, 471)\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(3)\n",
    "\n",
    "# 點擊一下\n",
    "for i in range(10000):\n",
    "    ac.click()\n",
    "\n",
    "# 執行\n",
    "ac.perform()\n",
    "\n",
    "# 睡一下\n",
    "sleep(5)\n",
    "\n",
    "# 關閉 web driver\n",
    "driver.quit()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "978680d0",
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "範例 2: 拖曳網頁元素\n",
    "\n",
    "參考連結:\n",
    "[1] Mootools Drag and Drop example\n",
    "http://sahitest.com/demo/dragDropMooTools.htm\n",
    "'''\n",
    "# 使用 Chrome 的 WebDriver\n",
    "driver = webdriver.Chrome(\n",
    "    options = my_options\n",
    ")\n",
    "\n",
    "# 前往頁面\n",
    "driver.get('http://sahitest.com/demo/dragDropMooTools.htm')\n",
    "\n",
    "# 取得被拖曳的來源元素\n",
    "dragger = driver.find_element(By.CSS_SELECTOR, \"div#dragger\")\n",
    "\n",
    "# 目標元素 (放置的區域，共 4 個)\n",
    "items = driver.find_elements(By.CSS_SELECTOR, \"div.item\")\n",
    "\n",
    "# 建立行為鍊\n",
    "ac = ActionChains(driver)\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 放置第一個\n",
    "ac.drag_and_drop(dragger, items[0])\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 放置第二個\n",
    "ac.click_and_hold(dragger).release(items[1])\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 放置第三個\n",
    "ac.click_and_hold(dragger).move_to_element(items[2]).release()\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 放置第四個\n",
    "ac.click_and_hold(dragger).move_by_offset(400, 150).release()\n",
    "\n",
    "# 執行\n",
    "ac.perform()\n",
    "\n",
    "# 睡一下\n",
    "sleep(3)\n",
    "\n",
    "# 關閉 web driver\n",
    "driver.quit()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6fa6a791",
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "範例 3: 組合熱鍵 (全選 + 複製 + 貼上)\n",
    "\n",
    "參考連結:\n",
    "[1] Display Text Input Fields\n",
    "https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_text\n",
    "'''\n",
    "# 使用 Chrome 的 WebDriver\n",
    "driver = webdriver.Chrome(\n",
    "    options = my_options\n",
    ")\n",
    "\n",
    "# 前往頁面\n",
    "driver.get('https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_text')\n",
    "\n",
    "# 取得網頁上的 iframe\n",
    "iframe = driver.find_element(By.CSS_SELECTOR, \"iframe#iframeResult\")\n",
    "\n",
    "# 切換到 iframe 當中\n",
    "driver.switch_to.frame(iframe)\n",
    "\n",
    "# # 回到主框頁\n",
    "# driver.switch_to.default_content()\n",
    "\n",
    "# 取得第一個文字欄位\n",
    "inputText01 = driver.find_element(By.CSS_SELECTOR, \"input#fname\")\n",
    "\n",
    "# 取得第二個文字欄位\n",
    "inputText02 = driver.find_element(By.CSS_SELECTOR, \"input#lname\")\n",
    "\n",
    "# 建立行為鍊\n",
    "ac = ActionChains(driver)\n",
    "\n",
    "# 在第一個文字欄位當中輸入萬用字元\n",
    "ac.key_down(Keys.SHIFT, inputText01).send_keys('12345').key_up(Keys.SHIFT).send_keys('67890')\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 全選與複製第一個文字欄位當中的所有字元\n",
    "ac.key_down(Keys.CONTROL, inputText01).send_keys('ac').key_up(Keys.CONTROL)\n",
    "\n",
    "# 暫停一下\n",
    "ac.pause(1)\n",
    "\n",
    "# 在第二個文字欄位當中貼上文字\n",
    "ac.key_down(Keys.CONTROL, inputText02).send_keys('v').key_up(Keys.CONTROL)\n",
    "\n",
    "# 執行\n",
    "ac.perform()\n",
    "\n",
    "# 睡一下\n",
    "sleep(3)\n",
    "\n",
    "# 關閉 web driver\n",
    "driver.quit()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "90d4e43b",
   "metadata": {},
   "outputs": [],
   "source": [
    "'''\n",
    "範例 4: 移動 Slider (by a handle)\n",
    "\n",
    "參考連結:\n",
    "[1] jQuery UI - Slider\n",
    "https://jqueryui.com/slider/\n",
    "'''\n",
    "# 使用 Chrome 的 WebDriver\n",
    "driver = webdriver.Chrome(\n",
    "    options = my_options\n",
    ")\n",
    "\n",
    "# 前往頁面\n",
    "driver.get('https://jqueryui.com/slider/')\n",
    "\n",
    "# 取得網頁上的 iframe\n",
    "iframe = driver.find_element(By.CSS_SELECTOR, \"iframe.demo-frame\")\n",
    "\n",
    "# 切換到 iframe 當中\n",
    "driver.switch_to.frame(iframe)\n",
    "\n",
    "# 拿到把手元素\n",
    "span = driver.find_element(By.CSS_SELECTOR, 'span.ui-slider-handle.ui-corner-all.ui-state-default')\n",
    "\n",
    "# 建立行為鍊\n",
    "ac = ActionChains(driver)\n",
    "\n",
    "# 暫停\n",
    "ac.pause(1)\n",
    "\n",
    "# 點住不放，並向右移動，移到指定的座標 (註: 目前在 iframe 當中，使用的座標是 iframe 內部座標)\n",
    "# 註: 點住移動，只能在 iframe 範圍內，超出的話，span 會放不掉\n",
    "ac.click_and_hold(span).move_by_offset(577, 16).release()\n",
    "\n",
    "# 執行\n",
    "ac.perform()\n",
    "\n",
    "# 睡一下\n",
    "sleep(5)\n",
    "\n",
    "# 關閉 web driver\n",
    "driver.quit()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.14"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}