[Selenium With C#基础教程] Lesson-07 复选框

复选框也是Web页面常见的一种用户交互控件，可以允许用户一次选择多个选项。常见的多选按钮示例如下图所示：

7-1 复选框示例_c2i.jpg

HTML源码如下：

请选择你常用的交通出行方式:<br /><br />
    <input type="checkbox" name="metro" checked="checked" id="metro" />地铁
    <input type="checkbox" name="bus" id="bus" />公交
    <input type="checkbox" name="bike" id="bike" />自行车
    <input type="checkbox" name="walk" id="walk" />步行
    <input type="checkbox" name="driving" id="driving" />自驾

通过Name选中复选框

  driver.FindElement(By.Name("metro")).Click();

通过ID选中复选框

对于复选框的点击而言实际第一次点击将选中，再次点击将清除选中状态（针对第一次状态是未选中状态而言），下面将演示在测试脚本中如何确认复选框是否为选中状态。

   IWebElement metroCheckbox = driver.FindElement(By.Id("metro"));
   if (!metroCheckbox.Selected)
   {
       metroCheckbox.Click();
   }

通过连续调用FindElement方法选中复选框

针对要定位的复选框具有多个相同的属性时，我们可以使用XPath定位，也可以使用连续调用FindElement方法。HTML源码如下：

<div id="div1">
  <input type="checkbox" name="test" checked="checked" value="on" />复选框位于第一个div里面
</div>
<div id="div2">
  <input type="checkbox" name="test" checked="checked" value="on" />复选框位于第二个div里面
  </div>

定位的脚本代码如下所示：

 driver.FindElement(By.Id("div2")).FindElement(By.Name("test")).Click();

清除复选框选中状态

对于清除复选框的状态，我们只需要再次点击复选框即可，与单选按钮一样，不能使用Clear()方法。因为复选框的状态而言总共就两种状态，选中和未选中状态。

  IWebElement drivingCheckbox = driver.FindElement(By.Id("driving"));
  if (drivingCheckbox.Selected)
  {
      drivingCheckbox.Click();
  }
  else
  {
      drivingCheckbox.Click();
  }

断言复选框的状态

判断复选框的方法比较简单，只需要使用Assert类中的方法即可。

   IWebElement bikeCheckbox = driver.FindElement(By.Id("bike"));
   Assert.IsFalse(bikeCheckbox.Selected);
   bikeCheckbox.Click();
   Assert.IsTrue(bikeCheckbox.Selected);

使用用户自定义插件的筛选框，如iCheck

在Web页面中开发人员经常会使用一些插件自定义的控件，如下图即是采用iCheck插件的自定义复选框：

7-2 iCheck复选框_c2i.jpg

以下为HTML部分源码：

<ul class="list">
    <li>
      <div class="icheckbox_flat-red checked"><input tabindex="13" id="flat-checkbox-1" style="position: absolute; opacity: 0;" type="checkbox">
        <ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none;
        opacity: 0;"></ins>
      </div>
       <label for="flat-checkbox-1" class="">Checkbox 1</label>
    </li>
    <li>
      <div class="icheckbox_flat-red checked"><input tabindex="14" id="flat-checkbox-2" checked="" style="position: absolute; opacity: 0;" type="checkbox">
        <ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; 
        opacity: 0;"></ins>
       </div>
     <label for="flat-checkbox-2" class="">Checkbox 2</label>
    </li>
</ul>

完整代码如下：

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.IE;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Firefox;
using System.Collections.ObjectModel;
using System.Threading;
using System.Drawing;

namespace SeleniumDemo
{
    [TestClass]
    public class Lesson07
    {
        IWebDriver driver = null;
        [ClassInitialize]
        public static void TestInitialize(TestContext context)
        {
            Console.WriteLine("初始化TestInitialize");
        }
        [TestInitialize]
        public void TestInitialize()
        {
            driver = new ChromeDriver();
            Console.WriteLine("开始进行测试");
        }

        [TestMethod]
        public void TestCheckbox()
        {
            Console.WriteLine("调用测试方法");
            string url = "http://www.bootcss.com/p/icheck/";
            driver.Navigate().GoToUrl(url);
            driver.Manage().Window.Maximize();
            IWebElement checkBox1Ele = driver.FindElement(By.XPath("//ul[@class='list']/li[1]/div[contains(@class,'icheckbox_flat-red')]"));
            IWebElement checkBox2Ele = driver.FindElement(By.XPath("//ul[@class='list']/li[2]/div[contains(@class,'icheckbox_flat-red')]"));
            int position = checkBox1Ele.Location.Y;
            ((IJavaScriptExecutor)driver).ExecuteScript("$(window.scrollTo(0," + position + "));");
            checkBox1Ele.Click();
            checkBox2Ele.Click();
            Assert.IsTrue((driver.FindElement(By.XPath("//ul[@class='list']/li[1]/div[contains(@class,'icheckbox_flat-red')]/input"))).Selected);
            Assert.IsFalse((driver.FindElement(By.XPath("//ul[@class='list']/li[2]/div[contains(@class,'icheckbox_flat-red')]/input"))).Selected);
        }
        [TestCleanup]
        public void TestCleanup()
        {
            Console.WriteLine("结束测试");
            driver.Quit();
        }
        [ClassCleanup]
        public static void ClassCleanup()
        {
            Console.WriteLine("清理ClassCleanup");
        }
    }
}

在上面完整的代码中，点击Checkbox按钮和判断Checkbox的状态，所使使用的元素不一样，不知各位大神能否帮忙解释一下原因？其实不管是什么类型的Web控件，定位的基本方法都是Webdriver API提供的8种基本方法，在日常测试中灵活加以应用，可大大提高日常工作效率。