Web控件的交互进阶

web 控件交互进阶

简介

用于向 Web 浏览器提供虚拟化设备输入操作的接口。

除了高级元素交互之外，Action 接口还提供了对指定输入设备可以执行的确切操作的精细控制。

Selenium 为 3 种输入源提供了接口：键盘设备的键输入，鼠标、笔或触摸设备的输入，以及滚轮设备的滚轮输入（在 Selenum4.2 中引入）。Selenium 允许构建分配给特定输入的独立操作命令，会将他们链接在一起，并调用关联的执行方法一次执行它们。

ActionChains 解析

Python 实现

# 引入依赖
from selenium.webdriver import ActionChains

Java 实现

import org.openqa.selenium.interactions.Actions;

ActionChains 是 Selenium Python 库中的一个类，用于执行一系列复杂的鼠标和键盘操作，例如鼠标移动，鼠标点击事件，键盘输入。这个类允许将多个操作链接在一起，以便执行多个步骤的操作序列。

ActionChains(driver).some_action().perform()

• driver：是一个 Selenium WebDriver 对象。
• some_action()：是指一系列操作，例如鼠标操作、键盘操作或其它页面交互的操作。
• perform()方法是 Selenium 中ActionChains类的一个方法，用于执行先前构建的一系列操作，如鼠标或键盘操作。

通常，需要创建一个ActionChains对象，然后使用它来定义一系列鼠标和键盘操作，最后使用perform方法来执行这些操作。

暂停

指针移动和滚轮滚动允许用户设置操作的持续时间，但有时只需要在操作之间等待一下，那可正常工作。

• 实现方式为：pause(1) 表示暂停 1s。

释放所有 Actions

需要重点注意的一点是，驱动程序会记住整个会话中所有输入项的状态。即使创建 actions 类的新实例，按下的键和指针的位置也将处于以前执行的操作离开它们的任何状态。

有一种特殊的方法来释放所有当前按下的键和指针按钮。此方法在每种语言中的实现方式不同，因为它不会使用 perform 方法执行。

Python 实现

ActionBuilder(driver).clear_actions()

Java 实现

ActionChains actions = new ActionChains(driver);
actions.release();

键盘操作

只有两个操作可以使用键盘完成：按下某个键，以及释放（松开）一个按下的键，除了支持 ASCII 字符外，每个键盘按键还具有可以按特定顺序按下或释放的表现形式。

按键

除了由常规 unicode 表示的按键，其他键盘按键被分配了一些 unicode 值以用于操作 Selenium 每种语言都有自己的方式来使用这些按键，以下是完整列表

其他按键请参考

github 参考地址

输入字符

ActionChains(driver).send_keys(keys_to_send).perform()

send_keys()是 Selenium 中ActionChains类的一个方法，用于模拟在浏览器中输入字符。这个方法通常用于填写表单字段或模拟键盘输入。

Python 实现

ActionChains(driver)\
    .send_keys("abc")\
    .perform()

Java 实现

//注册动作集对象，选择动作作用的浏览器驱动
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                 //往元素input对象输入abc字符
                .sendKeys(input,"abc")
                //往元素input对象输入回车
                .sendKeys(input,Keys.ENTER)
                .build()
                .perform();

在这个示例中，模拟了在浏览器中输入字符"abc"，并使用perform()方法来执行此操作。

指定元素输入字符

ActionChains(driver).send_keys_to_element(element，keys_to_send).perform()

• element：是要输入文本的目标元素，通常是通过find_elemnt()或其它方法获取的。

• send_keys_to_element()是 Selenium 中ActionChains类的一个方法，用于模拟在特定元素中输入文本。

Python 实现

text_input = driver.find_element(By.ID, "textInput")
ActionChains(driver)\
    .send_keys_to_element(text_input, "abc")\
    .perform()

Java 实现

 WebElement input = driver.findElement(By.id("textInput"));
 //注册动作集对象，选择动作作用的浏览器驱动
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                 //往元素input对象输入abc字符
                .sendKeys(input,"abc")
                //往元素input对象输入回车
                .sendKeys(input,Keys.ENTER)
                .build()
                .perform();

在这个示例中，先获取到了目标元素，然后将"abc"输入到该元素中。可以模拟在目标元素中输入字符的操作。

按下按键

ActionChains(driver).key_down(value,element).perform()

• value： 是要按下的键盘按键的键码或键名。例如，Keys.SHIFT表示按下 Shift 键。
• element：是要执行按键操作的 WebElement 对象。
• key_down()是 Selenium 中ActionChains类的一个方法，用于模拟按下键盘上的按键。

Python 实现

ActionChains(driver)\
    .key_down(Keys.SHIFT)\
    .send_keys("abc")\
    .perform()

Java 实现

 Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .sendKeys(input,"selenium")
                .sendKeys(input,Keys.ENTER)
                .keyDown(Keys.SHIFT)
                .build()
                .perform();

在这个示例中，模拟了按下 Shift 键，然后输入 abc，实际上会在文本字段输入"ABC"，因为 Shift 键被按下，所以输入的字符是大写的。可以模拟在输入大写字符时按下 Shift 键的效果。

释放按键

ActionChains(drive).key_up(value,element).perform()

• key_up()是 Selenium 中ActionChains类的一个方法，用于模拟释放（松开）键盘上的按键。

Python 实现

ActionChains(driver)\
    .key_down(Keys.SHIFT)\
    .send_keys("a")\
    .key_up(Keys.SHIFT)\
    .send_keys("b")\
    .perform()

Java 实现

        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .keyDown(Keys.SHIFT)
                .sendKeys(input,"a")
                .sendKeys(input,Keys.ENTER)
                .keyUp(Keys.SHIFT)
                .sendKeys(input,"b")
                .build()
                .perform();

在这个示例中，模拟了 Shift 键，然后输入一个小写字符"a"，接着释放（松开）Shift 键，最后再输入字符"b"。这可以模拟在输入时切换大写和小写字符的效果。

复制粘贴

下面是使用上述所有的方法执行复制/粘贴的操作。需要注意的一点是，用于此操作的键位会有所不同，具体取决于是 Windows 还是 Mac OS。

Python 实现

cmd_ctrl = Keys.COMMAND if sys.platform == 'darwin' else Keys.CONTROL

ActionChains(driver)\
    .send_keys("Selenium!")\
    .send_keys(Keys.ARROW_LEFT)\
    .key_down(Keys.SHIFT)\
    .send_keys(Keys.ARROW_UP)\
    .key_up(Keys.SHIFT)\
    .key_down(cmd_ctrl)\
    .send_keys("xvv")\
    .key_up(cmd_ctrl)\
    .perform()

Java 实现

        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com");

        // 找到要复制的文本元素
        WebElement copyText = driver.findElement(By.id("copy-text"));

        // 执行按住Shift键和按下C键的操作，实现复制操作
        Actions actions = new Actions(driver);
        actions.keyDown(Keys.SHIFT).sendKeys("c").keyUp(Keys.SHIFT).build().perform();

        // 找到要粘贴文本的元素
        WebElement pasteText = driver.findElement(By.id("paste-text"));

        // 执行按住Shift键和按下V键的操作，实现粘贴操作
        actions = new Actions(driver);
        actions.keyDown(Keys.SHIFT).sendKeys("v").keyUp(Keys.SHIFT).build().perform();

鼠标操作

只有 3 个操作可以使用鼠标完成：按下按钮，松开按下的按钮，然后移动鼠标。

单击并按住

ActionChains(driver).click_and_hold().perform()

click_and_hold()是 Selenium 中ActionChains类的一个方法，用于模拟鼠标点击并按住的操作。这个操作通常用于模拟拖拽操作或其它需要按住鼠标按钮的交互。

Python 实现

clickable = driver.find_element(By.ID, "clickable")
ActionChains(driver)\
    .click_and_hold(clickable)\
    .perform()

Java 实现

        clickable = driver.findElement(By.id("clickable"));
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions

                .clickAndHold(clickable)
                .perform();

在这个示例中，模拟了在目标元素上执行点击并按住的操作。执行点击并按住clickable元素，然后通过perform()方法来实际执行这些操作。

单击并释放

ActionChains(driver).click(WebElement).perform()

click()是 Selenium 中ActionChains类的一个方法，用于模拟鼠标单击的操作。例如单击按钮、链接或其它交互元素。

Python 实现

clickable = driver.find_element(By.ID, "click")
ActionChains(driver)\
    .click(clickable)\
    .perform()

Java 实现

        clickable = driver.findElement(By.id("clickable"));
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .click(clickable)
                .perform();

在这个示例中，模拟了在目标元素上执行单击的操作。执行单击clickable元素，然后通过perform()方法来实际执行这些操作。

备用按钮点击

鼠标总共定义了 5 个按钮：

• 0 —— 左按钮（默认值）
• 1 —— 中间按钮（当前不支持）
• 2 —— 右键
• 3 —— X1（后退）按钮
• 4 —— X2（前进）按钮

右键单击并释放

ActionChains(driver).context_click(WebElement).perform()

context_click()是 Selenium 中ActionChains类的一个方法，用于模拟鼠标右键单击的操作，触发上下文菜单或执行与右键单击相关的其它操作。

Python 实现

clickable = driver.find_element(By.ID, "click")
ActionChains(driver)\
    .context_click(clickable)\
    .perform()

Java 实现

        clickable = driver.findElement(By.id("clickable"));
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .contextClick(clickable)
                .perform();

在这个示例中，模拟了在目标元素上执行右键单击的操作。在clickable元素上执行右键单击的操作，然后通过perform()方法来实际执行这些操作。

后退点击

没有方便的方法，只需要按下并释放鼠标按钮 3

Python 实现

action = ActionBuilder(driver)
action.pointer_action.pointer_down(MouseButton.BACK)
action.pointer_action.pointer_up(MouseButton.BACK)
action.perform()

Java 实现

        Actions actions = new Actions(driver);
        Action action = actions.pointerAction()
                .click(MouseButton.BACK) // 按下并释放鼠标后退按钮
                .build();
        action.perform(); // 执行鼠标点击操作

转发点击

没有方便的方法，只需按下并释放鼠标按钮 4

Python 实现

action = ActionBuilder(driver)
action.pointer_action.pointer_down(MouseButton.FORWARD)
action.pointer_action.pointer_up(MouseButton.FORWARD)
action.perform()

Java 实现

        Actions actions = new Actions(driver);
        Action action = actions.pointerAction()
                .click(MouseButton.FORWARD) // 按下并释放鼠标后退按钮
                .build();
        action.perform(); // 执行鼠标点击操作

双击

ActionChains(driver).double_click(WebElement).perform()

context_click()是 Selenium 中ActionChains类的一个方法，用于模拟在指定的WebElement上执行双击操作。

Python 实现

clickable = driver.find_element(By.ID, "clickable")
ActionChains(driver)\
    .double_click(clickable)\
    .perform()

Java 实现

        clickable = driver.findElement(By.id("clickable"));
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .doubleClick(clickable)
                .perform();

在这个示例中，模拟了在目标元素上执行双击的操作。在clickable元素上执行双击的操作，然后通过perform()方法来实际执行这些操作。

移到到元素（悬浮操作）

ActionChains(driver).move_to_element(WebElement).perform()

move_to_element()是 Selenium 中ActionChains类的一个方法，用于模拟将鼠标光标移动到指定的WebElement元素上。通常用于触发浮动菜单、工具提示或执行与鼠标悬停相关的操作。

Python 实现

hoverable = driver.find_element(By.ID, "hover")
ActionChains(driver)\
    .move_to_element(hoverable)\
    .perform()

Java 实现

         hoverable = driver.findElement(By.id("hoverable"));
         Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行

         actions.moveToElement(hoverable).perform();

在这个示例中，模拟了鼠标光标移动到目标元素上的操作，将鼠标光标移动到hoverable元素上，从而触发浮动菜单或执行其它与鼠标悬停相关的操作。

拖放元素 1 到元素 2 上

ActionChains(driver).drag_and_drop(source，target).perform()

• source：代表源元素（要拖动的元素）
• target：代表目标元素（要将源元素拖动到的位置）
• drag_and_drop()是 Selenium 中ActionChains类的一个方法，用于模拟拖拽操作，此方法对源元素执行单击并按住，移动到目标元素的位置，然后释放鼠标。特别是在需要进行拖拽操作的自动化测试中非常有用。

Python 实现

draggable = driver.find_element(By.ID, "draggable")
droppable = driver.find_element(By.ID, "droppable")
ActionChains(driver)\
    .drag_and_drop(draggable, droppable)\
    .perform()

Java 实现

        draggable = driver.findElement(By.id("draggable"));
        droppable = driver.findElement(By.id("droppable"));
        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .dragAndDrop(draggable,droppable)
                .perform();

在这个示例中，模拟了通过鼠标拖动一个元素，将其移动到另一个位置。将draggable元素移动到droppable元素上。

滚动操作

滚轮/滚动操作-滚动到元素

ActionChains(driver).scroll_to_element(element).perform()

• element：一个 WebElement 对象，代表要滚动到的页面元素。

• scroll_to_element是 Selenium 中ActionChains类中的方法，用于执行页面滚动操作，将页面滚动到指定的元素（WebElement）可见位置。这个方法用于确保你可以与页面上的特定元素进行交互，尤其是当页面很长或需要滚动才能访问元素时。

Python 实现

iframe = driver.find_element(By.TAG_NAME, "iframe")
ActionChains(driver)\
    .scroll_to_element(iframe)\
    .perform()

Java 实现

        iframe = driver.findElement(By.id("iframe"));

        Actions actions = new Actions(driver);
        //编写动作集，然后构建，运行
        actions
                .scrollToElement(iframe)
                .perform();

在这段示例中，将页面滚动到iframe元素，以确保该iframe中的内容可见。这是一个常见的操作，因为在访问 iframe 内容之间，因为在访问 iframe 内容之前，需要切换到该 ifarme，并确保其可见性。如果要对 iframe 中的元素进行操作，需要切换到 iframe。

滚轮/滚动操作-根据坐标滚动

ActionChains(driver).scroll_by_amount(delta_x: int, delta_y: int).perform()

• delta_x：使用滚轮在 X 轴上滚动的距离。负值表示向左滚动。
• delta_y：使用滚轮在 Y 轴上滚动的距离。负值表示向上滚动。
• scroll_by_amount()是 Selenium 中ActionChains类中的方法，用于按照指定的距离流动页面。将页面滚动指定的距离，以将页面上的内容或元素带入视野。

Python 实现

footer = driver.find_element(By.TAG_NAME, "footer")
delta_y = footer.rect['y']
ActionChains(driver)\
    .scroll_by_amount(0, delta_y)\
    .perform()

Java 实现

        WebDriver driver = new ChromeDriver();
        driver.get("https://example.com"); // 替换为您要滚动的网址

        WebElement footer = driver.findElement(By.tagName("footer"));
        int delta_y = footer.getRect().y;

        // 创建ActionChains对象
        ActionChains actionChains = new ActionChains(driver);

        // 创建滚动操作
        actionChains.scrollByYOffset(delta_y);

        // 执行滚动操作
        actionChains.perform();

        driver.quit();

在这段示例中，将页面滚动到 footer 元素，将页面移到到 footer 元素，以便进行该元素相关的操作。

总结

web 控件交互多以动作集 action_chain 来实现，掌握 Actions 的用法，可以帮助我们在页面测试时更好地模拟用户操作。