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

这篇具有很好参考价值的文章主要介绍了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 属性来填写 nameemail 字段,然后点击提交按钮。需要注意的是,在设置 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 官方文档或者向在线社区求助。文章来源地址https://www.toymoban.com/news/detail-809147.html

到了这里,关于Java selenium 通过直接设置表单元素的 value 属性来填写 Vue / React 表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium之元素常用属性

    webElement常用属性与方法 定位到元素后,除了对元素进行操作,还可以获取元素的一些属性信息。常见的属性信息: 1、获取元素的尺寸:ele.size 2、获取元素的坐标:ele.location 3、获取元素的文本内容:ele.text text是存在在一对a标签、p标签或div标签中的文本内容,如果是标签中

    2024年01月18日
    浏览(40)
  • selenium不定位元素直接使用键盘操作(如弹框操作)

    今天在使用selenium进行定位时,发现直接定位不了chrome的弹框,如这种弹框: 使用的是下面这行代码 运行报错,说是没有 alert windown。。。。 啊?难道chrome的弹框不是用alert写的?emmm……还真是,现在很少使用alert这种原生弹框了,多多少少都会自己封装下,然后就……全网

    2024年02月08日
    浏览(45)
  • Selenium WebElement: Selenium 中的页面元素以及常用的属性和方法

    官方文档 本文是基于 Pytohn-3.7.4 以及 selenium-4.11.2 进行测试的,可以直接通过 pip 命令安装 selenium : 进入 python 交互界面,引入 selenium 包,检查安装结果: 在准备好 Python 环境之后,还需要安装浏览器程序, selenium 通过浏览器驱动的可执行文件对浏览器进行操作。 Windows 可以

    2024年02月10日
    浏览(47)
  • Selenium教程__获取元素文本、属性值、尺寸(8)

    本文将介绍如何使用Selenium来获取元素的文本内容、属性值和尺寸,并展示一些实际应用场景。 学习本文内容将能够轻松地获取并利用元素的相关信息,从而更好地进行元素的验证、操作和断言。  -事必有法,然后有成-  最后祝大家早日达到测试的天花板! 以下是我收集到

    2024年02月11日
    浏览(45)
  • Spring Boot项目怎么对System.setProperty(key, value)设置的属性进行读取加解密

    之前我写过一篇文章使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置(读取时自动解密),对Spring Boot项目的属性读取时进行加解密,但是没有说明对System.setProperty(key, value)设置的属性进行读取加解密,这个在开发过程中应该怎么实现呢

    2024年02月22日
    浏览(47)
  • 微信小程序 通过响应式数据控制元素class属性

    我想大家照这个和我最初的目的一样 希望有和vue中v-bind:class一样方便的指令 但答案不太尽人意 这里 我们只能采用 三元运算符的形式 参考代码如下 这里 我们判断 如果当前item中的userId如果和我们响应式数据中的userId相同 则给与isThisUser 否则 赋值为空字符串 也能实现效果

    2024年02月10日
    浏览(52)
  • selenium通过xpath定位元素报错?

    1.xpath介绍 XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。而html中也应用了这种语言 ,所以 ,我们定位html页面元素时也会用到xpath这种方法 。 2.xpath定位方式 xpath主要通过以下四种方法定位 : 路径定位 属性定位 多属性定位 路径

    2024年04月09日
    浏览(50)
  • css元素定位:通过元素的标签或者元素的id、class属性定位,还不明白的伙计,看这个就行了!

    大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好理解一些。 css元素定位方式往往被忽略掉了,其实css元素定位方式也有它的价值;相对于xpath元素定位方式来说,css元素定位方式更快

    2024年02月11日
    浏览(37)
  • Selenium3-当元素通过@FindBy获取时,返回元素为null

    报错:  在获取元素的js属性时一直获取不到,报空指针,定位到元素时,发现是@FindBy的元素没有找到 解决方法:  在page类的构造函数中加上了 界面初始化,让元素先隐式加载,这样就不会出现返回元素为空的情况辣 调整后的代码:

    2024年02月06日
    浏览(37)
  • 【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式

    attribute selector 属性选择器 可以设置带有特定属性或属性值的 HTML 元素的样式 [attribute] 选择器用于选取带有指定属性的元素 [attribute=“value”] 选择器用于选取带有指定属性和值的元素 [attribute~=“value”] 选择器选取属性值包含指定词的元素 [attribute|=“value”] 选择器用于选取

    2024年02月12日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包