复选框也是Web页面常见的一种用户交互控件,可以允许用户一次选择多个选项。常见的多选按钮示例如下图所示:
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插件的自定义复选框:
以下为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种基本方法,在日常测试中灵活加以应用,可大大提高日常工作效率。