UI自动化需要了解的前端知识:jquery (1)

384 阅读2分钟

本章带你在UI自动化测试中, 初探jquery, 看完你将会了解jquery的基本使用

前言

了解了在UI自动化过程中,可以使用js来定位和操作页面元素外,也可以了解一下jquery, 这是我的领导推荐我学习的,他一般都是用jquery, jquery相比js直接去操作元素,它更加简单。

还是先通过一个例子看看,后续慢慢展开其详细内容

例子 百度一下掘金

我自己有个习惯,如果在自动化脚本里写js代码之前,会先在浏览器里进行验证,验证没有问题之后,再去写脚本

浏览器里验证

image.png 按照预期的执行,接着我们再脚本里编写执行

RF脚本

image.png

执行结果:

image.png

通过以上例子,就能了解jquery在自动化中是怎么使用的,对我们自动化化来说,我们优先选择使用它,是因为它的核心功能是根据选择器查找HTML元素,然后对这些元素执行相关的操作

jquery基本知识

好多资料都在说这句话,jquery---写更少的代码,做更多的事

jQuery​是一个​快速,小巧,功能丰富​的​JavaScript库​。\

jQuery​ 使HTML文档遍历和操作,事件处理和动画等​操作​变得更加​简单​。

 jQuery的所有功能都是通过​JavaScript访问​的

基础语法

通用语法

$("selector").action()
  • "$" ,美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作
  1. selector需是css选择器,如果元素定位,你不熟悉css选择器,要用jquery需要先熟悉这个,这个css选择器的知识,网上有很多资料,这里也老生常谈一下

image.png

  1. action对元素都支持什么样的操作,可以方便的通过在浏览器查看 还以百度页面为例,在浏览器自带的开发者工具console里,我以jquery先定位到这个百度输入框,然后就会显示该输入框的相关信息和操作

image.png

action有好多,感兴趣的可以自己点击展开,查看,我目前只对输入感兴趣,那我找到了它的val()方法

image.png

那我来使用它,给输入框赋值value="我真是个小傻瓜"

image.png