为了这口醋,包的这饺子。为了Selenium,学有限的CSS,逐步替换XPATH

这篇具有很好参考价值的文章主要介绍了为了这口醋,包的这饺子。为了Selenium,学有限的CSS,逐步替换XPATH。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


In order for Selenium to click on an element, type into it, or mouse in or out, the tool first needs to find the element.
The WebDriver code library provides methods to do just that, such as
  • findelement()
  • findelements().

These usually take a locator, which can be created by ID, XPATH Code, or Cascading Style Sheets (CSS). Getting the XPATH code can be as easy as selecting the element in developer tools or using something like Chropath.

XPath简单,但不可靠。任何软件升级都有可能造成Path的变化。更不用说反扒技术的存在了。
ID最好,但不常有。
颠来倒去,还是CSS靠谱些。但学起来费劲。

不过,为了Selenium的目的,CSS还是有限费劲,可整。

A CSS Selector is a combination of an element selector and a value which identifies the web element within a web page. They are string representations of HTML tags, attributes, Id and Class. As such they are patterns that match against elements in a tree and are one of several technologies that can be used to select nodes in an XML document.

1. 最基本

Id

An element’s id in XPATH is defined using: [@id='example']and in CSS using: # - ID’s must be unique within the DOM.

XPath: //div[@id='exampleid']
CSS: #exampleid
Element Type

The previous example showed //div in the xpath. That is the element type, which could be input for a text box or button, img for an image, or a for a link.

Xpath: //input or
Css: =input
Direct Child

HTML pages are structured like XML, with children nested inside of parents. If you can locate, for example, the first link within a div, you can construct a string to reach it. A direct child in XPATH is defined by the use of a /, while on CSS, it’s defined using >.

XPath: //div/a
CSS: div > a
Child or Sub-Child

Writing nested divs can get tiring - and result in code that is brittle. Sometimes you expect the code to change, or want to skip layers. If an element could be inside another or one of its children, it’s defined in XPATH using // and in CSS just by a whitespace.

XPath: //div//a
CSS: div a
Class

For classes, things are pretty similar in XPATH: [@class='example'] while in CSS it’s just .


XPath: //div[@class='example']
CSS: .example

2. 深入一点

Next Sibling

This is useful for navigating lists of elements, such as forms or ul items. The next sibling will tell selenium to find the next adjacent element on the page that’s inside the same parent. Let’s show an example using a form to select the field after username.

<form class = "form-signin" role = "form" action = "/index.php" method = "post">
<h4 class = "form-signin-heading"></h4> 
<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br> 
<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required> 
<p> 
<button class = "btn btn-lg btn-primary btn-block radius" type = "submit" name = "login">Login</button> 
</form> 

Let’s write an XPath and css selector that will choose the input field after “username”. This will select the “alias” input, or will select a different element if the form is reordered.

XPATH: //input[@id='username']/following-sibling:input[1]
CSS: #username + input
Attribute Values

If you don’t care about the ordering of child elements, you can use an attribute selector in selenium to choose elements based on any attribute value. A good example would be choosing the ‘username’ element of the form above without adding a class.

We can easily select the username element without adding a class or an id to the element.

XPATH: //input[@name='username']
CSS: input[name='username']

We can even chain filters to be more specific with our selectors.

XPATH: //input[@name='login'and @type='submit']
CSS: input[name='login'][type='submit']

Here Selenium will act on the input field with name=“login” and type=“submit”

Choosing a Specific Match

CSS selectors in Selenium allow us to navigate lists with more finesse than the above methods. If we have a ul and we want to select its fourth li element without regard to any other elements, we should use nth-child or nth-of-type. Nth-child is a pseudo-class. In straight CSS, that allows you to override behavior of certain elements; we can also use it to select those elements.

<ul id = "recordlist">
	<li>Cat</li>
	<li>Dog</li>
	<li>Car</li>
	<li>Goat</li>
</ul>

If we want to select the fourth li element (Goat) in this list, we can use the nth-of-type, which will find the fourth li in the list. Notice the two colons, a recent change to how CSS identifies pseudo-classes.

CSS: #recordlist li::nth-of-type(4)

On the other hand, if we want to get the fourth element only if it is a li element, we can use a filtered nth-child which will select (Car) in this case.

CSS: #recordlist li::nth-child(4)

Note, if you don’t specify a child type for nth-child it will allow you to select the fourth child without regard to type. This may be useful in testing css layout in selenium.

CSS: #recordlist *::nth-child(4)

In XPATH this would be similar to using [4].

Sub-String Matches

CSS in Selenium has an interesting feature of allowing partial string matches using ^=, $=, or *=. I’ll define them, then show an example of each:

^= Match a prefix
CSS: a[id^='id_prefix_']

A link with an “id” that starts with the text “id_prefix_”

$= Match a suffix
CSS: a[id$='_id_sufix']

A link with an “id” that ends with the text “_id_sufix”

*= Match a substring
CSS: a[id*='id_pattern']

A link with an “id” that contains the text “id_pattern”

为了这口醋,包的这饺子。为了Selenium,学有限的CSS,逐步替换XPATH,selenium,css,tensorflow文章来源地址https://www.toymoban.com/news/detail-812068.html

3 参考资料

  1. Locating Elements
  2. SauceLabs

到了这里,关于为了这口醋,包的这饺子。为了Selenium,学有限的CSS,逐步替换XPATH的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Selenium基础 — CSS选择器定位大全

    css选择器策略 示例 说明 #id #telA 选择id=\\\"telA\\\"的所有元素。 .class .telA 选择 class=\\\"telA”的所有元素。 [属性名=属性值] [name=telA] 除了id和class属性,其他属性的定位格式 [attribute] [target] 选择带有target 属性所有元素。 * * 选择所有元素。 css选择器策略 示例 说明 [attribute^=value] a[s

    2023年04月10日
    浏览(47)
  • selenium中元素定位——css高级用法

    css(Cascading style sheets)层叠样式表。是一种用来表现HTML或者XML文档样式的计算机语言。 css的规则主要由两部分构成:选择器以及一条以及多条的声明。 css选择器是浏览器用来选择元素的,selenium也要选择元素,所以就使用了它。 定位元素的注意事项: ①找到等待定位的元

    2024年02月09日
    浏览(59)
  • Selenium之css怎么实现元素定位?

    世界上最远的距离大概就是明明看到一个页面元素站在那里,但是我却定位不到!! Selenium定位元素的方法有很多种,像是通过id、name、class_name、tag_name、link_text等等,但是这些方法局限性太大, 随着自动化测试的深入,和不同框架要求,会发现上面的定位方式无法解决一些

    2024年02月12日
    浏览(65)
  • Python Selenium CSS 定位方法详解

    目录 CSS 介绍 CSS定位常见符号 通过id, class, 标签 三个常规属性定位元素 1、通过id选择器查找 2、通过class选择器查找 3、通过标签定位元素 单属性选择器定位 组合属性定位: 层级选择器: CSS(Cascading Style Sheets)层叠样式表是一种用来表现HTML或XM等文件样式的计算机语言 CSS 使

    2024年02月08日
    浏览(57)
  • Selenium之css如何实现元素定位,你了解多少?

    前言 世界上最远的距离大概就是明明看到一个页面元素站在那里,但是我却定位不到!! Selenium定位元素的方法有很多种,像是通过id、name、class_name、tag_name、link_text等等,但是这些方法局限性太大, 随着自动化测试的深入,和不同框架要求,会发现上面的定位方式无法解

    2024年02月16日
    浏览(58)
  • Selenium元素定位方法:css_selector定位

    认识CSS定位 CSS: 概念:(Cascading Style Sheets)是一种语言,用来描述HTML元素的显示样式。 选择器:一种表达式,可以找到HTML中的标签元素。 css定位 概念:selenium利用选择器定位元素的定位方式。 方法:driver.find_element_by_css_selector(选择器表达式) 1、id选择器 语法: #id属性值 前

    2024年02月13日
    浏览(48)
  • Python-selenium学习笔记-css选择元素

    方法名:find_element(By.CSS_SELECTOR, \\\"元素名\\\") find_elements找所有 示例: 执行结果:  代表寻找第一个类名为plant的元素, 等效于根据CLASS寻找元素 若要 根据tag名 寻找,不用加“.”, 直接写tag名称即可,如下: 结果:   根据id寻找用“#”+id名, 中间不能有空格 结果: 子元素是

    2024年03月23日
    浏览(45)
  • 我准备蓝桥杯的这一年

    我将我这段 流水账 分为四个阶段。谨以此文,祭奠我这一年来的焦虑、白发~ ,最终也取得了预期的成绩。不知未来再看此章会作何感想,但我现在的感觉是 摆脱 大二上学期 转到信息安全专业的时候,一切如此新奇,关于本专业的比赛最先了解的就是蓝桥杯了,当时也在刷

    2024年02月09日
    浏览(38)
  • Selenium定位元素的方法css和xpath的区别!

    selenium是一种自动化测试工具,它可以通过不同的定位方式来识别网页上的元素,如id、name、class、tag、link text、partial link text、css和xpath。 css和xpath是两种常用的定位方式,它们都可以通过元素的属性或者层级关系来定位元素,但是它们也有一些区别: css: css是级联样式表,

    2024年02月04日
    浏览(60)
  • Selenium操作网页时,如何获取元素的CSS选择器?

    输入文本操作的元素的CSS选择器怎么获取,用https://passport.baidu.com/v2/?login演示 要获取元素的CSS选择器,可以使用浏览器的开发者工具来查看页面的HTML结构和元素属性。以下是在Chrome浏览器中获取元素CSS选择器的步骤: 打开Chrome浏览器,并访问目标网站(例如:https://passpor

    2024年01月16日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包