9M WebDriver – 定位元素:第 3b 部分(cssSelector续)
嗨,忍者! 这篇文章是我们先前文章“”的延续。 。 在继续进行操作之前,请确保对它进行了仔细的研究。
使用cssSelector
定位器的最后两种方法尚待讨论:
- 定位子元素
- 按子字符串匹配
事不宜迟,让我们开始行动吧!
也可以使用cssSelectors
来定位子元素。
让我们考虑一下 HTML 代码,
锚标记是“div
”的子元素。 要访问子元素,
使用 ID:
#
代表“ID”,子元素标签写在空格后面。
使用类别:
driver.findElement(By.cssSelector("div.bg_main a"));
.
代表“类”
示例:让我们在 Gmail 帐户注册页面上找到名字文本框。
右键点击“名字”文本框,然后选择检查元素,以获取相应的 HTML 代码,如下所示,
<label id="recovery-email-label">
<strong>Your current email address</strong>
spellcheck="false" type="text">
</label>
“标签”标签的子元素可以通过其input
标签和name
属性进行访问。
代码:
driver.findElement(By.cssSelector("label#recovery-email-label input[name='RecoveryEmailAddress']"));
如果父元素具有多个子元素(例如下拉列表),并且它们没有“id
”或“class
”或此类属性来标识,则“”用于定位特定的子元素。
要标识子元素“狗”,
代码:
driver.findElement(By.cssSelector("ul#pets li:nth-of-type(2)"));
cssSelectors
也帮助我们使用子字符串来定位元素。
为了匹配具有已知前缀的元素,
语法:driver.findElement(By.cssSelector(")tag_name[attribute^='prefix_value_of_attribute']"))
解释:找到以给定前缀开头的元素。 用“^
”符号表示。
考虑以下代码,
<input value="" name="LastName" id="LastName" spellcheck="false" type="text">
我们可以看到input
标签具有一个名为“LastName
”的“id
”属性。 要找到此元素,我们可以指定查找以“Last
”开头的“id
”属性值。
代码:
driver.findElement(By.cssSelector("input[id^='Last']"));
为了匹配具有已知后缀的元素,
语法:driver.findElement(By.cssSelector("tag_name[attribute$='suffix_value_of_attribute']"))
说明:找到以给定后缀结尾的元素。 用“$
”符号表示。
Considering the below code,
我们可以看到“input
”标签的“name
”属性为“PasswdAgain
”。 要找到此元素,我们可以指定查找以“”结尾的“name
”属性值。
代码:
driver.findElement(By.cssSelector("input[name$='Again']"));
语法:driver.findElement(By.cssSelector("tag_name[attribute*='substring_of_attribute_value']"))
说明:找到包含给定子字符串的元素。 用“*
”符号表示。
Considering the below code,
<input name="PasswdAgain" id="PasswdAgain" type="password">
我们可以看到“input
”标签的“name
”属性为“PasswdAgain
”。 要找到此元素,我们可以指定查找包含“wdAg
”的“name
”属性值。
代码:
driver.findElement(By.cssSelector("input[name*='wdAg']"));
让我们看一个测试用例,它实现了使用本方法和上一篇文章中介绍的cssSelector
定位器的不同方法,
场景
- 打开 Firefox 浏览器。
- 导航到 Google 帐户创建页面
- 输入“
testFirst
”作为名字 - 在“姓氏”文本框中找到一个以子字符串开头的值
- 输入“
testLast
”作为姓氏 - 找到带有 HTML 标签,类型和名称属性的“创建密码”文本框
- 输入“
Pass1234!
”作为密码 - 在“确认您的密码”文本框中找到包含子字符串的值
- 输入“
Pass1234!
”作为确认密码 - 找到带有 HTML 标签和类别属性的“手机”文本框
- 输入“”作为电话号码
- 使用子元素方法找到“当前电子邮件地址”文本框
- 输入“
...
”
此方案的 JUnit 代码是,
执行结果
注释清楚地提供给每行代码,因此是不言自明的。
在 JUnit 窗格中,绿色条显示测试用例已成功执行。 另外,控制台窗口中不会记录任何错误。
下图显示了在 Firefox 浏览器中执行的最终输出。
今天的忍者就这些了! 在另一篇文章中再见。