[Selenium With C#学习笔记] Lesson-06 单选按钮

作者：Surpassme

来源：http://www.jianshu.com/p/08ee1929875f

声明：本文为原创文章,如需转载请在文章页面明显位置给出原文链接，谢谢。

单选按钮通常用在需要与用户进行交互且只能选一个选项的情况。下面即是一个典型的单选按钮示例：

 请选择您的性别：
 <input type="radio" name="gender" value="male" id="male" checked="checked">男
 <input type="radio" name="gender" value="female" id="female" />女<br />

选中单选按钮

通常情况下，在一个单选按钮组里面，它们的名字是一样的。所以我们使用定位的时候，不建议使用Name属性进行定位，建议使用Id、XPath和CssSelector进行定位，如下所示：

driver.FindElement(By.XPath("//input[@name='gender' and @value='male']")).Click();
Thread.Sleep(1000);
driver.FindElement(By.Id("female")).Click();

清除单选按钮的选中状态

对于一个已经选中的单选按钮进行多次点击，是不会带来任何影响的，下面的示例代码在测试过程中依然可以正常通过。

driver.FindElement(By.Id("female")).Click();
driver.FindElement(By.Id("female")).Click(); //已经选中，多次点击没有任何影响

如果一个单选按钮被选中，在Selenium中清除选中状态的常用方法是点击另一个单选按钮。下面的示例使用Clear()方法清除单选按钮的选中状态将会抛出异常Invalid Element State:Element Must Be User-Editable in Order to Clear It.

            driver.FindElement(By.Id("female")).Click();
            try
            {
                driver.FindElement(By.Id("female")).Clear();
            }
            catch (Exception ex)
            {
                throw ex;
            }

报错截图如下所示：

下面的示例演示了既抛出了异常也按预期的目标实现了点击，示例如下：

      driver.FindElement(By.Id("female")).Click();
      try
      {
          driver.FindElement(By.Id("female")).Clear();
      }
      catch (Exception ex)
      {
          Console.WriteLine("不能清除单选状态，报错信息为：\n"+ex.ToString());

      }
      finally
      {
          driver.FindElement(By.Id("male")).Click();
      }

判断单选按钮状态

    IWebElement femaleEle = driver.FindElement(By.Id("female"));
    IWebElement maleEle = driver.FindElement(By.Id("male"));
    bool flag = femaleEle.Selected;
    if (flag)
    {
        maleEle.Click();
        Assert.IsTrue(maleEle.Selected);
    }
    else
    {
        femaleEle.Click();
        Assert.IsTrue(femaleEle.Selected);
        Assert.IsFalse(maleEle.Selected);
    }

通过循环点击单选按钮

在这之前我基本上仅使用方法FindElement()来查找定位元素，而在Selenium中还有另外一种方法FindElements()，示例如下：

    ReadOnlyCollection<IWebElement> elements = driver.FindElements(By.Name("gender"));
    Assert.AreEqual<int>(2,elements.Count);
    foreach (IWebElement item in elements)
    {
        if (item.GetAttribute("value")=="female")
        {
            item.Click();
        }
    }

与方法FindElement()不一样的是，方法FindElements()会返回能匹配到条件的集合，这对一些比较难定位的元素是非常有用的一个方法。

选中第N个单选按钮

在Name属性值相同且单选按钮也比较多的情况下，除了上面的方法循环判断来点击外，也可以通过XPath和以下方法来点击单选按钮，示例如下：

    driver.FindElements(By.Name("gender"))[1].Click();
    Assert.IsTrue(driver.FindElements(By.Name("gender"))[1].Selected);

    driver.FindElement(By.XPath("//input[1]")).Click();
    Assert.IsTrue(driver.FindElement(By.XPath("//input[1]")).Selected);

请注意里面的下标，C#下标默认是从0开始，而XPath里面下标默认是从1开始。

一些特殊的单选按钮:iCheck

针对一些默认的控件界面存在不好看的情况，一些大牛会自定义一些控件，比如下面这种单选按钮：

<ul>
 <li>
	<div class="iradio_square-blue checked hover">
		<input id="input-3" tabindex="3" name="demo-radio" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" type="radio"/>
		<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"/>
	</div>
	<label class="hover" for="input-3">	Radio button,
		<span>#input-3</span>
	</label>
 <li>
 <li>
	<div class="iradio_square-blue">
		<input id="input-4" tabindex="4" name="demo-radio" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" type="radio"/>
		<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"/>
	</div>
	<label class="" for="input-4">	Radio button,
		<span>#input-4</span>
    </label>
 </li>
</ul>

以下这段代码如果按之前的方法进行定位，将出错：

        driver.FindElement(By.Id("input-3")).Click();
        driver.FindElements(By.ClassName("iCheck-helper"))[0].Click();
        driver.FindElements(By.ClassName("iCheck-helper"))[1].Click();

正确的代码如下：

public void TestRadioButton()
{
    IWebDriver driver = new ChromeDriver();
	string url = "http://www.51xuediannao.com/js/jquery/icheck.html";
	driver.Navigate().GoToUrl(url);
	driver.Manage().Window.Maximize();
	driver.FindElement(By.Id("demolink")).Click();
	driver.SwitchTo().Window(driver.WindowHandles[1]);
	Thread.Sleep(1000);
	driver.SwitchTo().Frame(0);
	IWebElement ele = driver.FindElement(By.XPath("//div[contains(@class,'demo-list')]/ul[2]/li[1]/label"));
	ele.Click();
}

个人理解，特别是基于UI层面的自动化测试，对象查找定位是特别重要的，需要我们结合多种方法进行。常见的Id、XPath、CssSelector等定位方法，有时候甚至用JavaScript知识，需要了解和掌握的知识太多，另外还需要多看看Selenium API等。在自动化这条路上还任重道远了。