Selenium+JQuery定位方法及应用

简介: Selenium+JQuery定位方法及应用

1、关于Selenium提供了很多元素定位方法,这里不再赘述了。本文主要学习和了解JQuery的定位;
2、那为什么还要做JQuery进行定位呢?因为有的页面使用Selenium方法不能解决,所以可以尝试使用JQuery定位。

1 JQuery定位说明

1.1 JQuery定位方法

  • JQuery定位方法有两种:
# 1、使用JQuery选择器来完成元素操作(直接获取对应的元素);
# 2、使用JQuery遍历来选择元素(用于层级较为复杂的页面元素获取)。
  • JQuery语法:
$(selector).action()
  • JQuery通过$符号定义,selector主要用于获取基本的HTML元素,action()用于实现对获取元素的基本操作。

1.2 JQuery最常用的三个操作

  • $(selector).val("input_value")input_value为输入的文本信息;
  • $(selector).val(""):清空输入的内容;
  • $(selector).click():单击操作。

1.3 JQuery一个示例

  • 测试对象为禅道的登陆界面:
    在这里插入图片描述

    1.3.1 用户名输入框

  • 页面源码:
<input class="form-control" type="text" name="account" id="account" autocomplete="off" autofocus="">
  • 在控制台中输入$("input")可以看到有3个内容,鼠标放到第一个,我们发现是用户名的输入框,如下:
    在这里插入图片描述
  • 那么说明用户名的选择器为:$("input:first")
    在这里插入图片描述

    1.3.2 密码输入框

  • 页面源码:
<input class="form-control" type="password" name="password" autocomplete="off">
  • 同理可得密码的选择器为:$(":password");
    在这里插入图片描述

1.3.3 登陆按钮

  • 页面源码:
<button type="submit" id="submit" class="btn btn-primary" data-loading="稍候...">登录</button>
  • 选择器为:$(":button")时,显示两个按钮,其中第二个为登陆按钮:
    在这里插入图片描述
  • 那么登陆按钮的选择器为:$(":button")[1]:
    在这里插入图片描述

    1.3.4 完整代码

# -*- coding:utf-8 -*-
# 作者:虫无涯
# 日期:2023/11/13 
# 文件名称:test_zentao.py
# 作用:JQuery定位
# 联系:VX(NoamaNelson)
# 博客:https://blog.csdn.net/NoamaNelson

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://localhost/zentao/user-login.html")
driver.implicitly_wait(10)

user_name = "$('input:first').val('admin')"
driver.execute_script(user_name)
time.sleep(0.5)

pass_wd = "$(':password').val('ZenTao123456')"
driver.execute_script(pass_wd)
time.sleep(1)

login_but = "$(':button')[1].click()"
driver.execute_script(login_but)
time.sleep(2)

driver.quit()

2 JQuery选择器

2.1 常用选择器列表

选择器 示例 说明
* $("*") 所有元素
#id $("#name") id="name" 的元素
.class $(".xxxx") 所有 class="xxxx" 的元素
element $("p") 所有 <p> 元素
.class.class $(".name.zhang") 所有 class="name"class="zhang" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(2)") 列表中的第三个元素(index 从 0 开始)
:gt(no) $("ul li:gt(2)") 列出 index 大于 2 的元素
:lt(no) $("ul li:lt(2)") 列出 index 小于 2的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素
:animated 所有动画元素
:contains(text) $(":contains('xxxx')") 包含指定字符串xxxx的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text"<input> 元素
:password $(":password") 所有 type="password"<input> 元素
:radio $(":radio") 所有 type="radio"<input> 元素
:checkbox $(":checkbox") 所有 type="checkbox"<input> 元素
:submit $(":submit") 所有 type="submit"<input> 元素
:reset $(":reset") 所有 type="reset"<input> 元素
:button $(":button") 所有 type="button"<input> 元素
:image $(":image") 所有 type="image"<input> 元素
:file $(":file") 所有 type="file"<input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

2.2 思考

  • 接之前的实例,登陆到禅道系统后,点击左边的【项目】:$(a[data-app='project']).click()
    在这里插入图片描述
  • 点击右上角的【创建项目】:$([href='/zentao/project-createGuide-0.html']:first)
    在这里插入图片描述
  • 点击【瀑布】模式:
    在这里插入图片描述
  • 看不能进入创建项目的界面:
    在这里插入图片描述
  • 此处代码省略,可自行尝试。
目录
相关文章
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
37 5
|
2月前
|
数据采集 前端开发 测试技术
Selenium中定位元素的9种方法
在Selenium中,定位页面元素是自动化测试和网页爬虫的基础。常用的9种元素定位方法包括:ID、Name、Class Name、Tag Name、CSS Selector、XPath、Link Text、Partial Link Text,以及XPath和CSS选择器的组合使用。每种方法各有优劣,建议根据页面的具体情况和元素的属性选择最合适的方法,并使用显式等待确保元素可用。
437 5
|
2月前
|
Web App开发 前端开发 测试技术
Selenium 4新特性解析:关联定位器及其他创新功能
【10月更文挑战第6天】Selenium 是一个强大的自动化测试工具,广泛用于Web应用程序的测试。随着Selenium 4的发布,它引入了许多新特性和改进,使得编写和维护自动化脚本变得更加容易。本文将深入探讨Selenium 4的一些关键新特性,特别是关联定位器(Relative Locators),以及其他一些重要的创新功能。
215 2
|
2月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
29 1
|
2月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
53 6
|
3月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
35 2
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
36 1
|
2月前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
16 0
|
6天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
40 21
|
7天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
38 16
下一篇
DataWorks