技术分享 | 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()

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);
}

}

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

相关文章
|
2月前
|
Java Shell
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
39 1
|
17天前
|
存储 监控 测试技术
测试脚本编写和维护的最佳实践有哪些?
测试脚本编写和维护的最佳实践有哪些?
|
26天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
17天前
|
存储 监控 前端开发
如何确保测试脚本的稳定性和可靠性?
确保测试脚本的稳定性和可靠性是保证性能测试结果准确有效的关键
|
17天前
|
监控 网络协议 Java
一些适合性能测试脚本编写和维护的工具
一些适合性能测试脚本编写和维护的工具
|
17天前
|
测试技术 数据库连接 数据库
测试脚本的编写和维护对性能测试结果有何影响?
测试脚本的编写和维护对性能测试结果有着至关重要的影响,
26 1
|
2月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
43 1
JavaScript控制台:提升Web开发技能的秘密武器
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
31 4
|
1月前
|
JSON 测试技术 持续交付
自动化测试与脚本编写:Python实践指南
自动化测试与脚本编写:Python实践指南
29 1
|
2月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
24 1