9M WebDriver – 定位元素：第 3b 部分（cssSelector续）

9M WebDriver – 定位元素：第 3b 部分（cssSelector续）

原文： https://javabeginnerstutorial.com/selenium/9m-webdriver-locating-elements-3b/

嗨，忍者！这篇文章是我们先前文章“9l WebDriver – 定位元素：第 3a 部分（由cssSelector提供）”的延续。。在继续进行操作之前，请确保对它进行了仔细的研究。

使用cssSelector定位器的最后两种方法尚待讨论：

定位子元素
按子字符串匹配

事不宜迟，让我们开始行动吧！

定位子元素

也可以使用cssSelectors来定位子元素。

让我们考虑一下 HTML 代码，

锚标记是“div”的子元素。要访问子元素，

使用 ID：

driver.findElement(By.cssSelector("div#child a"));

#代表“ID”，子元素标签写在空格后面。

使用类别：

driver.findElement(By.cssSelector("div.bg_main a"));

.代表“类”

示例：让我们在 Gmail 帐户注册页面上找到名字文本框。

右键点击“名字”文本框，然后选择检查元素，以获取相应的 HTML 代码，如下所示，

<label id="recovery-email-label">
    <strong>Your current email address</strong>
    <input name="RecoveryEmailAddress" id="RecoveryEmailAddress" value=""     
               spellcheck="false" type="text">
</label>

“标签”标签的子元素可以通过其input标签和name属性进行访问。

代码：

driver.findElement(By.cssSelector("label#recovery-email-label input[name='RecoveryEmailAddress']"));

如果父元素具有多个子元素（例如下拉列表），并且它们没有“id”或“class”或此类属性来标识，则“nth-of-type”用于定位特定的子元素。

考虑一下 HTML 代码，

   <li>Cat</li>
   <li>Dog</li>
   <li>Birds</li>

要标识子元素“狗”，

代码：

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" id="PasswdAgain" type="password">

我们可以看到“input”标签的“name”属性为“PasswdAgain”。要找到此元素，我们可以指定查找以“Again”结尾的“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 帐户创建页面
找到带有 HTML 标签和名称属性的“名字”文本框
输入“testFirst”作为名字
在“姓氏”文本框中找到一个以子字符串开头的值
输入“testLast”作为姓氏
找到带有 HTML 标签，类型和名称属性的“创建密码”文本框
输入“Pass1234!”作为密码
在“确认您的密码”文本框中找到包含子字符串的值
输入“Pass1234!”作为确认密码
找到带有 HTML 标签和类别属性的“手机”文本框
输入“9496543210”作为电话号码
使用子元素方法找到“当前电子邮件地址”文本框
输入“...”
验证“JUnit”窗格是否成功，并确认 Eclipse IDE 控制台输出屏幕

此方案的 JUnit 代码是，

package com.blog.junitTests;
import java.util.concurrent.TimeUnit;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ElementLocatorTest3 {
        //Declaring variables
        private WebDriver driver; 
        private String baseUrl;
        @Before
        public void setUp() throws Exception{
            // Selenium version 3 beta releases require system property set up
            System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\"
                    + "Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe");
            // Create a new instance for the class FirefoxDriver
            // that implements WebDriver interface
            driver = new FirefoxDriver();
            // Implicit wait for 5 seconds
            driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
            // Assign the URL to be invoked to a String variable
            baseUrl = "https://accounts.google.com/SignUp";
        }
        @Test
        public void testPageTitle() throws Exception{
            // Open baseUrl in Firefox browser window
            driver.get(baseUrl);
            // Locate 'First Name' text box by cssSelector: tag and name attribute
            // assign it to a variable of type WebElement
            WebElement firstName = driver.findElement(By.cssSelector("input[name='FirstName']"));
            // Clear the default placeholder or any value present
            firstName.clear();
            // Enter/type the value to the text box
            firstName.sendKeys("testFirst");
            //Locate 'Last Name' text box by cssSelector: begins with sub-string
            WebElement lastName = driver.findElement(By.cssSelector("input[id^='Last']"));
            lastName.clear();
            lastName.sendKeys("testLast");
            //Locate password text box by cssSelector: tag and type, name attributes
            WebElement pwd = driver.findElement(By.cssSelector("input[type='Password'][name='Passwd']"));
            pwd.clear();
            pwd.sendKeys("Pass1234!");
            //Locate 'Confirm your password' text box by cssSelector: contains sub-string
            WebElement confirmPwd = driver.findElement(By.cssSelector("input[name*='wdAg']"));
            confirmPwd.clear();
            confirmPwd.sendKeys("Pass1234!");
            // Locate Mobile phone text box by cssSelector: tag and class
            WebElement mobileNum = driver.findElement(By.cssSelector("input.i18n_phone_number_input-inner_input")); 
            mobileNum.clear();
            mobileNum.sendKeys("9496543210");
            //Locate "current email address" text box by cssSelector: child element method
            WebElement recoveryEmail = driver.findElement(By.cssSelector("label#recovery-email-label input[name='RecoveryEmailAddress']"));
            recoveryEmail.clear();
            recoveryEmail.sendKeys("[[email protected]](/cdn-cgi/l/email-protection)");
        }
         @After
          public void tearDown() throws Exception{
            // Close the Firefox browser
            driver.close();
        }
}

执行结果

注释清楚地提供给每行代码，因此是不言自明的。

在 JUnit 窗格中，绿色条显示测试用例已成功执行。另外，控制台窗口中不会记录任何错误。

下图显示了在 Firefox 浏览器中执行的最终输出。

今天的忍者就这些了！在另一篇文章中再见。

祝你有美好的一天！