Selenium经典教程 selenium教程.

Presentation on theme: "Selenium经典教程 selenium教程."— Presentation transcript:

1 Selenium经典教程 selenium教程

2 Selenium的简介 Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE、Mozilla Firefox、Mozilla Suite等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建衰退测试检验软件功能和用户需求。支持自动录制动作和自动生成。Net、Java、Perl等不同语言的测试脚本。Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。 2018/11/9 11/9/2018

3 selenium的优势 Selenium 测试直接在浏览器中运行，就像真实用户所做的一样。Selenium 测试可以在 Windows、Linux 和 Macintosh上的 Internet Explorer、Mozilla 和 Firefox 中运行。其他测试工具都不能覆盖如此多的平台。使用 Selenium 和在浏览器中运行测试还有很多其他好处。下面是主要的两大好处： 　　通过编写模仿用户操作的 Selenium 测试脚本，可以从终端用户的角度来测试应用程序。通过在不同浏览器中测试，更容易发现浏览器的不兼容性。Selenium 的核心，也称 browser bot，是用 JavaScript 编写的。这使得测试脚本可以在受支持的浏览器中运行。browser bot 负责执行从测试脚本接收到的命令，测试脚本要么是用 HTML 的表布局编写的，要么是使用一种受支持的编程语言编写的。 2018/11/9 11/9/2018

4 selenium支持的浏览器 2018/11/9 11/9/2018

5 selenium的组件 # Selenium IDE：一个Firefox插件，可以录制用户的基本操作，生成测试用例。随后可以运行这些测试用例在浏览器里回放，可将测试用例转换为其他语言的自动化脚本。 　　# Selenium Remote Control (RC) ：支持多种平台(Windows，Linux，Solaris)和多种浏览器(IE，Firefox，Opera，Safari)，可以用多种语言(Java，Ruby，Python，Perl，PHP，C#)编写测试用例。 　　 # Selenium Grid ：允许Selenium-RC 针对规模庞大的测试案例集或者需要在不同环境中运行的测试案例集进行扩展。 2018/11/9 11/9/2018

6 selenium1VSselenium2 Selenium1.0不能处理一下事件： 1) 本机键盘和鼠标事件
2) 同源策略XSS/HTTP（S） 3) 弹出框，对话框（基本身份认证，自签名的证书和文件上传/下载） 　　Selenium2.0有简洁的API，WebDriver和WebElement对象，更好的抽象。且支持多中操作系统，多语言，多浏览器。 　　同时Selenium2.0进行了架构的调整和升级： 　　Selenium2.0 = Selenium1.0 + WebDriver（也就是说Selenium2.0合并了这两个项目） 2018/11/9 11/9/2018

7 WebDriver的一个小例子 访问it168的一个例子： package webdriver;
import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class FirstCase { public static void main(String[] args) throws InterruptedException { WebDriver driver = new FirefoxDriver(); driver.get(" Thread.sleep(3000); driver.close(); } 2018/11/9 11/9/2018

8 定位元素 WebDriver可以通过WebDriver实例来定位元素，任何语言库都含有“Find Element”和“Find Elements”的方法。第一个方法返回一个WebElement或者抛出异常。后者返回所有WebElement的列表，或者空列表。 获取和定位元素我们调用“By”方法。下面具体解释下“By”方法： By ID 这是一个极为有效定位元素的方法。普遍的现状是UI工程师在实际编写页面时很少写id或者自动生产一个ID，这些都是需要避免的。对于一个页面Element来说，class比自动生产的id更好。 通过id定位元素的例子： <div id="coolestWidgetEvah">...</div> WebElement element = driver.findElement(By.id("coolestWidgetEvah")); 2018/11/9 11/9/2018

9 定位元素 By Class Name 这里的class指的是DOM中的元素，在实际使用过程中，我们也会发现很多DOM元素含有相同的class名。 通过class name定位元素例子： <div class="cheese"><span>Cheddar</span></div> <div class="cheese"><span>Gouda</span></div> List<WebElement> cheeses = driver.findElements(By.className("cheese")); 2018/11/9 11/9/2018

10 元素定位 By Tag Name DOM的Tag元素 用Tag name 定位元素的例子：
<iframe src="..."></iframe> WebElement frame = driver.findElement(By.tagName("iframe")); 2018/11/9 11/9/2018

11 元素定位 By Name 例子： <input name="cheese" type="text"/>
WebElement cheese = driver.findElement(By.name("cheese")); By Link Text <a href=" WebElement cheese = driver.findElement(By.linkText("cheese")); 2018/11/9 11/9/2018

12 元素定位 By CSS 从名字上看，这是根据CSS来定位元素。 例子： <div id="food">
<span class="dairy">milk</span> <span class="dairy aged">cheese</span> </div> WebElement cheese = driver.findElement(By.cssSelector("#food span.dairy aged")); 2018/11/9 11/9/2018

13 元素定位 By XPATH 在高级的水平下，WebDriver尽可能使用浏览器的原生的XPath能力。在那些没有原生的XPath支持的浏览器，我们提供自己的实现方式。但是三个Driver有一定的区别。 <input type="text" name="example" /> <INPUT type="text" name="other" /> List<WebElement> inputs = driver.findElements(By.xpath("//input")); 2018/11/9 11/9/2018

14 元素定位 使用javascript 您可以执行任意JavaScript找到一个元素，只要你返回一个DOM元素，它会自动转换到一个WebElement对象。 例子： jQuery的页面加载一个简单的例子： WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return $('.cheese')[0]"); 寻求所有的页面上的input元素： List<WebElement> labels = driver.findElements(By.tagName("label"))；List<WebElement> inputs = (List<WebElement>) ((JavascriptExecutor)driver).executeScript( "var labels = arguments[0], inputs = []; for (var i=0; i < labels.length; i++){" +"inputs.push(document.getElementById(labels[i].getAttribute('for'))); } return inputs;", labels); 2018/11/9 11/9/2018

15 select标签操作 遍历select标签
WebElement select = driver.findElement(By.tagName("select")); List<WebElement> allOptions = select.findElements(By.tagName("option")); for (WebElement option : allOptions) { System.out.println(String.format("Value is: %s", option.getAttribute("value"))); option.click();} 选择某一个选项： Select select = new Select(driver.findElement(By.tagName("select"))); select.deselectAll(); select.selectByVisibleText("Edam"); 2018/11/9 11/9/2018

16 上传文件 WebElement FileUpload =driver.findElement(By.id("upload"));
String filePath = "C:\test\\uploadfile\\media_ads\\test.jpg"; FileUpload.sendKeys(filePath); 2018/11/9 11/9/2018

17 提交 Submit在form中 driver.findElement(By.id("submit")).click();
WebElement.submit(); 建议使用第一种方式，出错的几率比较小，并且比较直观 2018/11/9 11/9/2018

18 拖拽操作 WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target")); (new Actions(driver)).dragAndDrop(element, target).perform(); 2018/11/9 11/9/2018

19 window和frame的切换 Windows和Frames之间的切换
一些web应用程序有许多Frames或多个Windows。 WebDriver支持使用“switchTo”的方法实现的窗口之间切换。 driver.switchTo().window("windowName"); 所有对driver的调用都会指向特定的窗口，但是我们怎么知道窗口的名字呢？我们可以查看javascript代码和打开他的链接： <a href="somewhere.html" target="windowName">Click here to open a new window</a> 另外，还可以通过“window handle”去调用“switchTo().window()”， 通过这个，我们就遍历来找到所有打开的窗口： for (String handle : driver.getWindowHandles()) { driver.switchTo().window(handle); } 2018/11/9 11/9/2018

20 frame和window的切换 Switch同样支持frame：
driver.switchTo().frame("frameName");同样可以使用他访问subframe，找frameName的第一个subframe中叫做child的frame： driver.switchTo().frame("frameName.0.child"); 2018/11/9 11/9/2018

21 弹出框 从selenium2.0开始，已经支持对弹出框的获取
Alert alert = driver.switchTo().alert(); 这个方法会返回当前被打开打警告框，你可以进行统一，取消，读取提示内容，后则进入到提示，这个同样使用alerts，confirms，prompts。 2018/11/9 11/9/2018

22 一些浏览器的自身操作 Navigation：History and Location
之前我们就可以通过get方法来打开一个网页，像我们所看到的，WebDriver同样还有许多小接口，Navigation就是其中一个小接口： driver.navigate().to(" navigate().to和get()其实作用是一样的，但是navigate还可以进行浏览器的前进后退操作： driver.navigate().forward(); driver.navigate().back(); 2018/11/9 11/9/2018

23 Webdriver鼠标动作的操作 在前面的例子中已经出现过鼠标的操作了，就是拖拽，但是鼠标动作有很多，比如双击，单击右键等。操作类在API中是Actions的类，具体的实现见例子： WedDriver driver = new FirefoxDriver(); Actions action = new Actions(driver); 这个时候可以调用action来进行各种操作。 Action.doubleClick();//双击左键 具体的例子可以参考selenium的API 2018/11/9 11/9/2018

24 WebDriver中调用javascript
有一些在页面的东西可能运用webdriver的API不好解决，这个时候我们可以调用javascript来解析DOM。所有的webdriver的实现类都继承了JavascriptExecutor的接口。 下面一个运行javascript的例子： WebDriver driver = new FirefoxDriver(); String js=“alert('Hello')”; (javascriptExecutor)driver.executeScript(js); 这个例子就会执行alert。 因为针对前端，jquery比较流行，所以我们希望能够使用jquery，下面介绍一下使用jquery的例子。 2018/11/9 11/9/2018

25 WebDriver中使用jquery 假如设定jquery包的路径为path，则程序如下： String jquery=null;
FileInputStream input = new FileInputStream(new File(path)); While((context=input.readlines())!=null){ Jquery=jquery+context; } FirefoxDriver driver =new FirefoxDriver(); String js=“”//此处输入你要查找的jquery的代码 //这种方式其实就是读取jquery库的内容，然后全部加载执行 Driver.executeScript(jquery+js); 2018/11/9 11/9/2018

26 WebDriver的设计模式 针对小型的页面来做自动化的话，可以很简单的去编写测试用例，但是当涉及的页面比较多的话就会有很多的代码要写，如果找个一元素无限制的被复用，对于程序员来讲是一件很恼火的事情，所以在编写测试脚本的时候我们一般会借助一些设计模式。Webdriver自身带有一个pageobject的模式，下面看一个163发邮件的例子，可以算是一个比较简单的pageObject的例子。 2018/11/9 11/9/2018

27 WebDriver的实例1： 2018/11/9 11/9/2018

28 WebDriver实例1： 2018/11/9 11/9/2018

29 WebDriver实例1： 2018/11/9 11/9/2018

30 WebDriver基于IT168的例子 2018/11/9 11/9/2018

31 WebDriver实例2： 2018/11/9 11/9/2018