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

Vue 表单

以下是一个通过直接设置表单元素的

value

属性来填写 Vue 表单并提交的示例代码。

importorg.openqa.selenium.By;importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.WebElement;importorg.openqa.selenium.chrome.ChromeDriver;publicclassFillVueForm{publicstaticvoidmain(String[] args){// 设置 Chrome 浏览器驱动路径System.setProperty("webdriver.chrome.driver","/path/to/chromedriver");// 创建 Chrome 浏览器实例WebDriver driver =newChromeDriver();// 打开 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("[email protected]");((JavascriptExecutor) driver).executeScript("arguments[0].value = '[email protected]'; 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

属性来填写并提交表单的示例代码：

importorg.openqa.selenium.By;importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.WebElement;importorg.openqa.selenium.chrome.ChromeDriver;importorg.openqa.selenium.JavascriptExecutor;publicclassFillReactForm{publicstaticvoidmain(String[] args){// 设置 Chrome 浏览器驱动路径System.setProperty("webdriver.chrome.driver","/path/to/chromedriver");// 创建 Chrome 浏览器实例WebDriver driver =newChromeDriver();// 打开 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 =newWebDriverWait(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 表单并提交的示例代码：

importorg.openqa.selenium.By;importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.WebElement;importorg.openqa.selenium.chrome.ChromeDriver;importorg.openqa.selenium.JavascriptExecutor;publicclassFillReactForm{publicstaticvoidmain(String[] args){// 设置 Chrome 浏览器驱动路径System.setProperty("webdriver.chrome.driver","/path/to/chromedriver");// 创建 Chrome 浏览器实例WebDriver driver =newChromeDriver();// 打开 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 =newWebDriverWait(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 官方文档或者向在线社区求助。