Java selenium 通过直接设置表单元素的 value 属性来填写 Vue / React 表单

Vue 表单

以下是一个通过直接设置表单元素的 value 属性来填写 Vue 表单并提交的示例代码。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class FillVueForm {

    public static void main(String[] args) {
        // 设置 Chrome 浏览器驱动路径
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // 创建 Chrome 浏览器实例
        WebDriver driver = new ChromeDriver();

        // 打开 Vue 表单页面
        driver.get("http://example.com/vue/form");

        // 直接设置表单元素的 value 属性
        WebElement nameInput = driver.findElement(By.name("name"));
        nameInput.sendKeys("");
        nameInput.clear(); // 清空输入框内容，确保下面的设置生效
        nameInput.sendKeys("John Doe");
        ((JavascriptExecutor) driver).executeScript("arguments[0].value = 'John Doe'; arguments[0].dispatchEvent(new Event('input'))", nameInput);

        WebElement emailInput = driver.findElement(By.name("email"));
        emailInput.sendKeys("");
        emailInput.clear(); // 清空输入框内容，确保下面的设置生效
        emailInput.sendKeys("johndoe@example.com");
        ((JavascriptExecutor) driver).executeScript("arguments[0].value = 'johndoe@example.com'; arguments[0].dispatchEvent(new Event('input'))", emailInput);

        WebElement submitButton = driver.findElement(By.cssSelector("button[type='submit']"));

        // 提交表单
        submitButton.click();

        // 关闭浏览器实例
        driver.quit();
    }
}

这段代码会通过直接设置表单元素的 value 属性来填写 name 和 email 字段，然后点击提交按钮。需要注意的是，在设置 value 属性后还需要手动触发相应的事件（如 input 事件），以确保表单数据被正确地提交。

再次强调，使用这种方式可能有风险，因为不同浏览器可能对于事件的实现机制有所不同，而且这种做法也会绕过浏览器内置的事件机制，增加了代码的复杂性和难度，同时也可能存在一些潜在的风险。因此建议仍然采用 Selenium 提供的 API 来填写表单。

React 表单

Recat 方法一

如果您想使用直接设置表单元素的 value 属性来填写 React 表单，可以参考下面的示例代码。

假设在 React 应用中有一个名为 LoginForm 的表单组件，包含了用户名、密码等元素。下面是使用 Selenium 直接设置表单元素 value 属性来填写并提交表单的示例代码：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;

public class FillReactForm {

    public static void main(String[] args) {
        // 设置 Chrome 浏览器驱动路径
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // 创建 Chrome 浏览器实例
        WebDriver driver = new ChromeDriver();

        // 打开 React 表单页面
        driver.get("http://example.com/react/form");

        // 直接设置表单元素的 value 属性
        WebElement usernameInput = driver.findElement(By.id("login-form-username"));
        usernameInput.sendKeys("");
        usernameInput.clear();
        usernameInput.sendKeys("john.doe");
        ((JavascriptExecutor) driver).executeScript("arguments[0].value = 'john.doe'; arguments[0].dispatchEvent(new Event('input'))", usernameInput);

        WebElement passwordInput = driver.findElement(By.id("login-form-password"));
        passwordInput.sendKeys("");
        passwordInput.clear();
        passwordInput.sendKeys("password123");
        ((JavascriptExecutor) driver).executeScript("arguments[0].value = 'password123'; arguments[0].dispatchEvent(new Event('input'))", passwordInput);

        WebElement loginButton = driver.findElement(By.xpath("//button[text()='Login']"));

        // 提交表单
        loginButton.click();

        // 等待表单提交完成，页面跳转到下一个页面
        WebDriverWait wait = new WebDriverWait(driver, 10);
        wait.until(ExpectedConditions.urlContains("/dashboard"));

        // 判断是否登录成功
        String pageTitle = driver.getTitle();
        if (pageTitle.equals("Dashboard")) {
            System.out.println("Login succeeded.");
        } else {
            System.out.println("Failed to login.");
        }

        // 关闭浏览器实例
        driver.quit();
    }
}

Recat 方法二

需要注意的是，使用这种方式填写 React 表单也存在风险，因为不同浏览器可能对于事件的实现机制有所不同，而且这种做法也会绕过浏览器内置的事件机制，增加了代码的复杂性和难度，同时也可能存在一些潜在的风险。因此建议仍然采用 Selenium 提供的 API 来填写表单。

如果您使用直接设置表单元素的 value 属性来填写 React 表单没有生效，可以尝试使用 React 的 ReactDOM 库来模拟用户输入。具体做法是：首先找到表单组件的根节点，然后根据表单元素的 name 属性以及 ReactDOM.findDOMNode() 方法获取对应的 DOM 元素，最后再调用 ReactDOM.Simulate.change() 或 ReactDOM.Simulate.input()（视情况而定）模拟用户输入。

下面是一个使用 ReactDOM 库来填写 React 表单并提交的示例代码：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;

public class FillReactForm {

    public static void main(String[] args) {
        // 设置 Chrome 浏览器驱动路径
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // 创建 Chrome 浏览器实例
        WebDriver driver = new ChromeDriver();

        // 打开 React 表单页面
        driver.get("http://example.com/react/form");

        // 找到表单组件的根节点
        WebElement formRoot = driver.findElement(By.id("login-form-root"));

        // 根据表单元素的 name 属性获取对应的 DOM 元素，并模拟用户输入
        WebElement usernameInput = (WebElement) ((JavascriptExecutor) driver).executeScript("return ReactDOM.findDOMNode(arguments[0]).querySelector('[name=\"username\"]')", formRoot);
        usernameInput.sendKeys("john.doe");
        ((JavascriptExecutor) driver).executeScript("return ReactDOM.findDOMNode(arguments[0]).querySelector('[name=\"username\"]').dispatchEvent(new Event('change', {bubbles: true}))", formRoot);

        WebElement passwordInput = (WebElement) ((JavascriptExecutor) driver).executeScript("return ReactDOM.findDOMNode(arguments[0]).querySelector('[name=\"password\"]')", formRoot);
        passwordInput.sendKeys("password123");
        ((JavascriptExecutor) driver).executeScript("return ReactDOM.findDOMNode(arguments[0]).querySelector('[name=\"password\"]').dispatchEvent(new Event('change', {bubbles: true}))", formRoot);

        WebElement loginButton = driver.findElement(By.xpath("//button[text()='Login']"));

        // 提交表单
        loginButton.click();

        // 等待表单提交完成，页面跳转到下一个页面
        WebDriverWait wait = new WebDriverWait(driver, 10);
        wait.until(ExpectedConditions.urlContains("/dashboard"));

        // 判断是否登录成功
        String pageTitle = driver.getTitle();
        if (pageTitle.equals("Dashboard")) {
            System.out.println("Login succeeded.");
        } else {
            System.out.println("Failed to login.");
        }

        // 关闭浏览器实例
        driver.quit();
    }
}

需要注意的是，由于 React 的异步机制和组件化开发方式，该方法仍然存在一些潜在的风险。如果您遇到了相关问题，可以尝试查阅 React 官方文档或者向在线社区求助。