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

简介: 技术分享 | web自动化测试-执行 JavaScript 脚本
  • 在页面上直接执行 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: 
<label class="custom-control-label" for="user_remember_me">...</label>

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

实战演示

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

#导入依赖
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()

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 也是经常会用到的,所以大家还是要多多练习,才能掌握的更扎实。

相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
42 5
|
10天前
|
Java Shell
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
27 1
|
6天前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
18 1
JavaScript控制台:提升Web开发技能的秘密武器
|
14天前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
26 12
|
10天前
|
人工智能 运维 Devops
自动化运维之路:从脚本到DevOps的转变
【10月更文挑战第7天】在这篇文章中,我们将一起探索自动化运维的演变历程,从最初的简单脚本到现代的DevOps实践。我们将深入理解自动化如何改变了运维工作的本质,并讨论实现这一转变的关键技术和策略。文章将不包含代码示例,而是聚焦于理念、工具和方法论的介绍,旨在为读者提供一个全面的自动化运维框架视图。
|
6天前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
10 1
|
8天前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
8天前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
9天前
|
人工智能 运维 监控
自动化运维:从脚本到工具的演变之路
【10月更文挑战第8天】在数字化时代的浪潮中,运维不再是简单的硬件维护,它已经演变成一场关于效率、稳定性和创新的技术革命。本文将带您领略自动化运维的魅力,从最初的脚本编写到现代复杂的自动化工具,我们将一探究竟,看看这些工具如何帮助运维人员简化日常任务,提升工作效率,并最终推动业务发展。
|
13天前
|
Web App开发 前端开发 JavaScript
JavaScript Web Full Stack 全栈开发者路线及内容推荐
本文详细介绍了一条全面的JavaScript全栈开发者学习路径,涵盖基础知识、前端和后端开发、数据库与API、MERN Stack与React Native、工程化与部署、安全与测试、未来趋势等方面。推荐了HTML5、CSS3、JavaScript(ES6+)、Node.js、React.js、Vue.js、Svelte、Tailwind CSS、Web Components等关键技术,并提供了丰富的书籍、博主和在线资源。此外,还回顾了JavaScript的历史,并推荐了多个活跃的社区和平台,帮助开发者紧跟技术前沿。