技术分享 | web自动化测试-执行 JavaScript 脚本

简介: JavaScript 是一种脚本语言,有的场景需要使用 js 脚本注入辅助我们完成 Selenium 无法做到的事情。当 webdriver 遇到无法完成的操作时,可以使用 JavaScript 来完成,webdriver 提供了 execute_script() 方法来调用 js 代码。

JavaScript 是一种脚本语言,有的场景需要使用 js 脚本注入辅助我们完成 Selenium 无法做到的事情。

当 webdriver 遇到无法完成的操作时,可以使用 JavaScript 来完成,webdriver 提供了 execute_script() 方法来调用 js 代码。

执行 js 有两种场景:

在页面上直接执行 js

在某个已经定位的元素上执行 js

执行js

Selenium 可以通过 execute_script() 来执行 JavaScript 脚本。

driver.execute_script:同步执行 JavaScript 在当前的窗口框架下

js 脚本可以在浏览器的开发者工具 -> Console 中进行调试

js的返回结果

获取元素控件中的属性值

与 Selenium 结合,在代码中返回 js 结果

Python 版本

获取网页性能的响应时间,js脚本中使用return代表返回获取的结果

js = "return JSON.stringify(performance.timing);"
driver.execute_script(js)

Java 版本

// 获取网页性能的响应时间,js脚本中使用return代表返回获取的结果
String js = "return JSON.stringify(performance.timing);";
JavascriptExecutor j = (JavascriptExecutor) driver;
j.executeScript(js);

arguments传参

执行 JavaScript 也可以通过传参的方式传入元素信息,还可以通过下面的方法点击被遮挡的元素。

例如:某个元素在实际的操作过程中被其他的元素遮挡,就可以使用 js 点击的方式

Python 版本

element = driver.find_element(by, locator)

arguments[0]代表所传值element的第一个参数

click()代表js中的点击动作

driver.execute_script("arguments[0].click();",element)

Java 版本

WebElement element = driver.findElement(By);
// arguments[0]代表所传值element的第一个参数
// click()代表js中的点击动作
JavascriptExecutor j = (JavascriptExecutor) driver;
j.executeScript("arguments[0].click();", element);

自动化过程中的报错如下:

Other element would receive the click:

...

如果出现上面的错误,可以使用 js 的方式进行点击。

实战演示

以企业微信为例,使用 js 点击添加图片

Python 代码

导入依赖

from selenium import webdriver
from selenium.webdriver.common.by import By

class TestWework:

def setup(self):
    self.driver = webdriver.Chrome()
    #隐式等待
    self.driver.implicitly_wait(10)


def test_upload(self):
    #元素定位
    element_add = self.driver.find_element\
        (By.CSS_SELECTOR, ".js_upload_file_selector")
    #执行js代码
    self.driver.execute_script\
        ("arguments[0].click();", element_add)
    self.driver.find_element_by_id('js_upload_input').\
        send_keys('D:\project\demo1\demo.png')
    assert len(self.driver.find_elements(By.CSS_SELECTOR,\
        '.material_pic_list_item')) == 1


def teardown(self):
    self.driver.quit()
AI 代码解读

Java 代码

import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.concurrent.TimeUnit;

import static org.junit.jupiter.api.Assertions.assertEquals;

public class Web2Test {

private static ChromeDriver driver;


@BeforeAll
public static void setUp() {
    System.setProperty(
            "webdriver.chrome.driver",
            "/driver/chrome95/chromedriver"
    );
    driver = new ChromeDriver();
    driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
}


@AfterAll
public static void tearDown() {
    driver.quit();
}


@Test
public void uploadTest() {
    // 元素定位
    WebElement element_add = driver.findElement(\
        By.cssSelector(".js_upload_file_selector"));
    // 执行js代码
    JavascriptExecutor j = (JavascriptExecutor) driver;
    j.executeScript("arguments[0].click();", element_add);
    driver.findElement(By.id("js_upload_input"))\
        .sendKeys("D:\\project\\demo1\\demo.png");
    int num = driver.findElements(By.cssSelector\
        (".material_pic_list_item")).size();
    assertEquals(num, 1);
}
AI 代码解读

}

在测试工作中,JavaScript 也是经常会用到的,所以大家还是要多多练习,才能掌握的更扎实。

相关文章
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
61 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
174 31
Selenium IDE:Web自动化测试的得力助手
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
329 17
Selenium:强大的 Web 自动化测试工具
小团队 CI/CD 实践:无需运维,Java Web应用的自动化部署
本文介绍如何使用GitHub Actions和阿里云Kubernetes(ACK)实现Java Web应用的自动化部署。通过CI/CD流程,开发人员无需手动处理复杂的运维任务,从而提高效率并减少错误。文中详细讲解了Docker与Kubernetes的概念,并演示了从创建Kubernetes集群、配置容器镜像服务到设置GitHub仓库Secrets及编写GitHub Actions工作流的具体步骤。最终实现了代码提交后自动构建、推送镜像并部署到Kubernetes集群的功能。整个过程不仅简化了部署流程,还确保了应用在不同环境中的稳定运行。
130 9
如何编写API接口的自动化测试脚本
本文详细介绍了编写API自动化测试脚本的方法和最佳实践,涵盖确定测试需求、选择测试框架、编写测试脚本(如使用Postman和Python Requests库)、参数化和数据驱动测试、断言和验证、集成CI/CD、生成测试报告及维护更新等内容,旨在帮助开发者构建高效可靠的API测试体系。
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
163 4
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
91 2
自动化测试的魔法:使用Python进行Web应用测试
【10月更文挑战第32天】本文将带你走进自动化测试的世界,通过Python和Selenium库的力量,展示如何轻松对Web应用进行自动化测试。我们将一起探索编写简单而强大的测试脚本的秘诀,并理解如何利用这些脚本来确保我们的软件质量。无论你是测试新手还是希望提升自动化测试技能的开发者,这篇文章都将为你打开一扇门,让你看到自动化测试不仅可行,而且充满乐趣。
DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
  在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作。DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口。它能够同时运行测试一组流行的浏览器(Chrome,IE,Firefox 和 WebKit)。
831 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等