软件测试-web自动化测试教程

selenium的官网:Selenium

selenium的API文档:Generated Documentation (Untitled)

selenium的中文文档:介绍 | Selenium 中文文档

selenium中文网:selenium中文网 | selenium安装、selenium使用、selenium中文、selenium下载

遇到异常的一些处理步骤

1.优先考略chrome浏览器的版本与chromedriver的版本是否一致

目录

1.课程导读

2和3.HTML元素和标签

4.HTML标签-01

5. HTML标签-02

6.HTML标签-03

7.HTML标签及CSS

8.JavaScript&DOM介绍

9.DOM相关概念及操作

10. Selenium IDE的安装

11. Selenium IDE的录制和回放

12. Selenium IDE的选项说明

13.Selenium家族的介绍,及seleniumWebDriver的安装

14.Maven的介绍及安装

15.Maven的全局配置及eclipse关联

16.Maven构建说明

17.第一个Web自动化脚本

18.Chrome浏览器环境问题点

19.Firefox浏览器环境搭建的问题

20.IE自动化测试环境问题点

21.基本的元素定位,id和name

22.元素的基本定位 linkText

23.基本元素定位cssSelector

  23.1-就是根据css选择器样式来定位一般来说cssSelector定位有三种方式,分别是:

23.2 具体例子

23.3 css的精确定位

23.4 CssSelect的路径定位

24.基本元素定位className定位

  24.1普通className的定位

  24.2复合className的定位

25.基本元素定位xpath定位

             25.1什么是xpath

           25.2xpath的定位方式                     

                 25.3xpath的文本定位

26.元素操作常用API

27.driver对象常用API-01

28.driver对象常用API-02 和 03

29.硬性等待

30.隐式等待

31.显式等待

32.特殊元素定位与操作-模态框,alert弹框

33. 模态框,confirm弹框

34. 特殊元素操作-iframe

35.特殊元素操作-Window切换

37.特殊元素操作-select下拉框,根据父元素找到子元素

38.特殊元素操作-时间日期控件


1.课程导读

web自动化测试基础
        web自动化测试的概述
        前端基础知识
            HTML, CSS, JavaScript, DOM编程
SeleniumIDE录制 
        工具的介绍和安装             
        脚本的录制和回复
        常用命令
        编辑操作
Maven项目的管理
        Maven工具的介绍和项目的创建
        Maven构建项目
        POM管理依赖
Selenium WebDriver基础
        Selenium家族的介绍
        Selenium Webdriver的介绍
        Selenium Webdriver的工作原理
        Web自动化测试环境的搭建
Selenium WebDriver进阶
        八大元素定位
        WebDriver常用API
        三大等待
        特殊元素定位与操作
            alert弹框
            iframe切换
            window切换
            select下拉框
            时间日期控件的处理
            鼠标操作
            文件上传
            验证码

2和3.HTML元素和标签

HTML也叫超文本标记语言,是标记语言,不是编程语言。标记语言的作用,可以让浏览器识别到url地址,例如再浏览器输入“http://www.baidu.com”的时候,服务器就会把百度首页的源代码返回给客户端。可以通过F12开发者工具查看

而这些其实就是超文本标记语言,然后浏览器就可以根据它们的便签进行渲染,这样子就可以得到一个美观的页面了。

编写html的工具可以选择subline Text,当然其他的工具也可以,例如vscode。

<!DOCTYPE html>                      表示为html文档
<html>                               页面根元素,html可以理解为一个树形的结果,<html>就是根节点
    <head>                           html的头部信息,可以放元数据,如是否包含js,css等等
        <meta charset="utf-8">       声明编码,这是设置了utf-8
        <title>测试test</title>      文档标题,可以在浏览器的窗口看到标题
    </head>
    <body>                           body里面包含的是页面的主体可见内容
        <h1>Hello World</h1>         声明标题,标签成对存在
    </body>
</html>    

什么是HTML标签?

      1.HTML标签是有尖括号括住,并且是成对出现如<html></html>,  <head></head>,  其中,第一个<html>是开始标签, 第二个</html> 是结束标签

什么是HTML元素?

      1.HTML文档是由HTML元素定义的。HTML元素是指开始标签和结束标签之间的所有代码,通常和HTML标签表达的是一个意思

                例如<title>测试页面</title> 这里<title>是开始标签</title>是结束标签,而这一个部分的代码 "<title>测试页面</title>"就是元素      

      2.HTML的语法

               HTML元素包含了开始标签和结束标签

               元素的内容是指开始标签和结束标签之间的内容

               某些HTML元素具有空内容

               关于空元素,是指在开始标签中进行关闭,以开始标签来结束

               大多数HTML可以拥有属性

 关于元素和标签的区别:元素包含了标签之间的所有代码

4.HTML标签-01

文本输入框标签,会有一个默认值,"测试数据"
<input type="text" value="测试数据"/>

选择框标签,可以同时勾选语文和数学
语文<input type="checkbox"/>
数学<input type="checkbox"/>

复选按钮,可以同时勾选男生和女生
男生<input type="radio"/>
女生<input type="radio"/>


单选框按钮,通过name属性,都设置成sex,把这两个框标记为同一类,这样它们两个就只能单选
男生<input type="radio" name="sex">
女生<input type="radio" name="sex">

按钮标签
<input type="button" value="登录">

可以看到文本输入框,选择框,单项/复选框,按钮。这四个都是input标签,只是属性值,type不一样

5. HTML标签-02

文件上传
<input type="file">

密码
<input type="password">

下拉框,标签名为select,其中option为子元素,也就是下拉框的可选项
<select>
    <option>语文</option>
    <option>数学</option>
    <option>英语</option>
</select>

超链接,这时点击超链接的文本 “点一下按钮”,就会跳转到百度的页面中
<a href="http://www.baidu.com">点一下按钮</a>

6.HTML标签-03

一.表格<table>,行<tr>,列<td>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

二.图片
<img src="">  , 其中src属性里面放的是图片的源地址,可以是本地的原地址,也可以是网页的图片地址,通过http协议去访问

下面的代码,图片源地址为本地d盘路径下的一张png图片,宽度400,高度200
<img src="D:\program\BaiduNetdiskDownload\123.png" width="400" height="200">

下面的代码,图片是来源与网络的图片地址,宽度400,高度200
<img src="https://img-bss.csdnimg.cn/1609752698551.jpg" width="400" height="200">

三. 文本域
其中<textarea>为文本域标签
rows表示行,cols表示列
<textarea rows="10" cols="5"></textarea>

7.HTML标签及CSS

常见的HTML标签有如下
--1.加粗标签
<b>这段文字会被加粗</b>

--2.换行标签
<br>,例如下面所示,两行代码的内容就会有一个换行,也就是两行
<input type="text" name="" value="test"><br>
语文<input type="checkbox" name="">

--3.段落标签
<p>This is a paragraph</p>

--4.注释标签
<!--这里是注释的内容-->
<!--<input type="text" name="" value="test"><br>
语文<input type="checkbox" name="">-->

--5.iframe标签
这里表示的是内嵌一个百度的网页,width表示打开后窗口宽度200,heigh表示高度200
<iframe src="http://www.baidu.com" width="200" heigh="200"></iframe>

--6.div标签,主要是管理元素的,控制元素摆放到某个位置,或者显示的区域。,但是一般会和css连用,css就是层叠样式,主要是用来美化修饰页面
<!--一般来说css样式是放在head中,或者放在css文件,注意css样式是在<style>标签里面的-->
<head>
    <style>
        .head{
            background-colour:blue;
            color:white;
            text-align:center;
            padding:5px;
        }
    </style>
</head>

<!--然后div就是放在body中-->
<body>
    <div class="head">
        <h1>页面的顶部区域</h1>
    </div>
</body>

------最后我们就可以看的.head的css层叠样式,作用到下面这段div中
    <div class="head">
        <h1>页面的顶部区域</h1>
    </div>

看看iframe标签的表示形式,如下图箭头所示

8.JavaScript&DOM介绍

  8.1 什么是javascipti

        javascript是可以插入到HTML页面的编程代码语言,用来改进设计,验证表单,检测浏览器,创建cookie,以及更多其他应用。当javascirpt插入HTML页面后,由浏览器执行代码。

       应用的例子,例如登录百度的操作,点击登录按钮后,其实就是执行了javascript脚本,发送请求。前段同时可以对帐号密码进行加密处理,再发送给服务器

8.2 javascirpt的例子

      脚本的位置,一般放在<script>和</script>之间

      可以放到body或者head中,但是推荐放到head中

      例如下面javascript代码就会弹出一个警告框,因为这个警告框是由javascirpt通过操控浏览器弹出来的原生控件,不是html的元素,所以通过传统的方式是定位不到的

<head>
    <script>
        alert("测试")
    </script>
</head>

  

8.3 HTML DOM的结构模型,一般访问浏览器页面,都是从文档开始,然后到根元素<html>, 再到例如元素<body> ,  再到元素<a>, 或者元素<h1>

  

9.DOM相关概念及操作

DOM的作用(就是DOM和HTML可以做什么样的交互)
通过可编程的对象模型,JavaScript获得了足够的能力来改变HTML
1.改变页面的HTML元素
2.改变页面的HTML属性
3.改变页面的CSS样式,对页面中的所有事件做出反应

Javascript中的两个概念

window 和 document

window
表示浏览器中打开的窗口
Javascript层级中的顶层对象(要访问对象模型的其他下层节点,必须要先访问window节点)
window是document的父节点(所以说要访问document节点,必须先访问window节点)

document
代表窗口中显示的当前文档(页面)
通过document节点可以遍历到文档里的所有子节点

关于DOM的操作(就是DOM具体与HTML做什么样的交互)

查找HTML元素
var element = document.getElementById("test");
var element = document.getElementsByClassName("test");
var element = document.getElementsByTagName("p");

具体例子
1.javascript脚本必须要等到HTML(文档模型)页面加载结束之后才显示出来
所以要用到一个事件window.onload表示文档已经加载完成,窗口已经加载出来。

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                var element = document.getElementById("userName");
                alert(element.getAttribute("type")); 
            }
        </script>
    </head>

    <body>
        <input type="text" name="cwj" id="userName"><br>
        <input type="password" name="gord" id="passWord"><br>
        <input type="button" name="jjj" id="登录"><br>
    </body>
</html>

操作HTML元素
var value = document.getElementById("test").value;
document.getElementById("test").value = "测试";

这里如果要先操作元素,一般来说,必须要先找到元素,找到后再操作

当然上面那种JavaScript不适合我们调试,所以下面还会讲到通过在浏览器F12开发者工具中,运行JavaScript脚本来调试

通过在浏览器F12开发者工具中,运行JavaScript脚本来调试

如下图所示,Elements是页面的源代码

但我们这里用到的是Console,这个Console就是我们的终端,我们可以在这个终端做调试,因为这个终端有比较方便的提示功能,如下图所示,可以对我们输入的脚本进行提示

然后我们通过id来查找元素,如下图所,就会把id是username的元素的相关信息显示出来

然后第三步,通过id定位把对象保存到element中,然后通过getAttribute找到id属性的值

通过setAttribute改变属性的值。如下图所示,登录按钮的value值就被改变成 “111” 了

10. Selenium IDE的安装

Selenium IDE是一个Firefox/Chrome插件,用来录制和回放用户与浏览器的交互。使用它来创建简单的脚本或者协助进行探索性测试

Selenium IDE的安装方式有以下两种

关于Firefox浏览器安装selenium IDE,首先在右上角,点击选项,然后再选择 附加组件

接着,在【寻找更多附加组件】搜索 "Selenium IDE"

最后就会搜索出来

还有另外一种方法,依次点击【扩展】,【寻找更多附加组件】

然后就会进入Firefox的官网,接着在官网中搜索 "Selenium IDE"

回车搜索 或者 点击搜索按钮 搜索一下即可, 搜索到之后,点击“Selenium IDE”

点击选择【添加到Firefox】按钮即可

一般来说,selenium IDE添加到Firefox浏览器后,都会在浏览器右上角有一个图标

Chrmoe浏览器安装selenium IDE需要解决科学上网的问题

同样到selenium官网下载selenium IDE也是需要科学上网,打开官网后,点击download

然后找到selenium IDE相关的下载信息,如下图所示,选择【for Chrome】

点开后,进入Chrome的应用商店,然后点击【添加至Chrome】即可

11. Selenium IDE的录制和回放

使用方法,第一种,依次点击工具栏->Selenium IDE 。 第二种,则是点击浏览器菜单栏Selenium图标,我们启动selenium IDE。

然后我们可以看到下图的欢迎界面。有几个选项

第一个: Record a new test in a new project  录制一个新的测试在一个新的工程中

第二个:Open an existing project   打开一个存在的工程

第三个:Create a new project  创建一个新的工程

第三个: Close Selenium IDE  关闭selenium IDE

选择第一个和第三个都行

这里需要输入录制的url地址,点击START RECORDING,开始录制

可以看的右下角有selenium IDE录制的提示,然后就可以操作需要录制的步骤

当所有步骤都操作完了,就可以停止录制,点击selenium IDE的这个红色按钮,就可以停止录制

然后这个就是停止录制后,得到的页面

然后录制完成了,我们可以进行一下回放,看看录制的脚本有没有问题。 看下图,回放的时候,有红色字体出现,表明回放出了问题,看一下报了什么错

Failed:Exceeded waiting time for new window to appear 2000ms   意思就是说,当脚本执行到这一步的是很好,click打开窗口,窗口等待的时间超过了2000毫秒

问题也找到了, Firefox阻止了窗口的弹出,导致等待时间超过了2000ms

对于Firefox浏览器来说,这个问题也好解决。打开选项,然后就是隐私与安全,最后就是将拦截弹出式窗口的勾选去掉,谷歌浏览器也是类似的操作

然后再运行一次,可以看的脚本就通过了

这个selenium IDE,可以用来录制一些,较难定位的位置,然后改入到我们的脚本中

12. Selenium IDE的选项说明

xxxxxxx

13.Selenium家族的介绍,及seleniumWebDriver的安装

       10.1-selenium家族的介绍:

             seleniumIDE: Firefox浏览器的插件,支持用户录制和回放测试

             seleniumWebDriver: 提供各种语言环境的API来支持更多的控制权和编写符合标准软件开发实践的应用程序

             seleniumGird:分布式的自动化工具,可以在多个测试环境中以并发的方式执行测试脚本,实现测试脚本的并发执行,缩短了大量测试脚本的执行时间

        10.2-seleniumWebdriver:

                 用与web应用程序的测试工具。selenium是开源并且免费的,selenium中的测试直接在浏览器中运行,支持多种浏览器,如Google,Firefox ,IE等等,就像真实用户所执行操作一样。支持java,python, .Net , perl等编程语言进行自动化测试脚本的编写。

                同时支持多种操作系统,如window,linux,安卓,IOS。

14.Maven的介绍及安装

      Maven项目构建

          Maven对与Java开发程序来说,是一个不错的项目构建,管理工具,也有一部分人用Ant

          可以使用Maven来编译你的代码

          项目打包也可以用Maven来完成

          Maven可以实现项目模块化管理

          Maven可以在线管理依赖,项目依赖也很方便获取

          Maven还提供了丰富的插件,方便项目持续集成

      Maven的安装

          eclipse自带了Maven插件,如下图所示,ecplise,MARS.1这个版本就会自带了Maven插件,建议安装较高版本的eclipse

          

         通过eclipse安装Maven,如下图所示,依次点击Window->Preferences

         

        然后进入Preferences界面,搜索Maven,如果可以搜索出来,就表明eclipse自带了Maven插件

                     

      Maven的安装及其环境变量的配置(Maven不在eclipse中时,用这种方法)

      官网下载:http://maven.apache.org/download.cgi  , 建议选择这些带bin字样的安装包进行下载,方便配置环境变量

      

      配置环境变量

           1.解压到本地文件夹

           2.配置MAVEN_HOME环境变量,指向Maven的文件夹

           3.将Maven bin目录更新到PATH:%MAVEN_HOME%\bin;

           4.通过cmd,验证mvn -version

     然后进入官网,可以选择下载最新版本,也可以选择下载历史版本,下图所示Previous Releases为Maven的历史版本

        

 关于配置环境变量,在系统变量新建一个MAVEN_HOME,变量值为bin文件夹所在的路径

再找到系统变量中的Path变量,配置%MAVEN_HOME%\bin

最后再cmd窗口中验证maven是否安装成功,输入mvn -version,看到如下结果,就说明安装成功了

15.Maven的全局配置及eclipse关联

     15.1 首先找到Maven的settings.xml文件

     

15.2设置localRepository,这里是具体是设置本地Maven仓库所在的路径,以后下载的依赖,如selenium依赖,jar包依赖,等等各种依赖,全部都保存在这个目录下

如果没有设置,就保存至localRepository上面的Default指定的路径中,具体就是用户目录下.m2文件夹下的repository文件夹中

15.3 配置镜像,指定下载jar包的地址,Maven仓库会统一在一个资源仓库里面下载jar包,但是这个资源仓库的下载速度会比较慢。所以就配置一个镜像地址,提高访问速度

下面配置一个阿里云的镜像地址,下图所示,找到mirrors的位置,配置镜像

         

<mirrors>
    <mirror>
        <id>nexus-aliyun</id>
        <name>central</name>
        <mirrorOf>Nexus aliyun</mirrorOf>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
    </mirror>
</mirrors>

        

    15.4 ,Eclipse指定Maven配置文件

     

          依次打开Window->Preferences

           

         然后找到Maven里面的User Settings, 然后,点击User Setting的Browse按钮,把Maven的setting.xml文件添加进来,最后,Local Repository这个输入框就会自动把settings.xml文件中的Local Repository字段设置的Maven仓库的路径读取过来,操作的顺序如下图1234所示

         

15.5设置Installations,添加指向本地Maven目录的路径,首先,找到Maven下的Installations,然后点击Add

        

        然后,点击Installation home输入框的Directory按钮,选择Maven的根目录,根目录是只包含bin文件夹的目录,点击Finish按钮

        

       接着勾选maven的Installations,点击Apply按钮,再点击OK按钮,至此Eclipse和Maven就关联上了,关联上后要重启一下Eclipse

       

16.Maven构建说明

          16.1 创建一个Maven项目,首先new一个project

                  

              然后在项目向导哪里搜索关键字maven,再选择maven project ,然后点击Next按钮,进入下一步        

              

             勾选Create a simple project(skip archetype selection),表示创建一个简单的项目。接着再点击Next按钮

              

             进入New Maven Project的步骤,我们需要填写四个位置,Group Id , Artifact Id ,Version ,Packaging。各个字段的意义,如下所示,最后填写完,点击Finish按钮

             Group Id, 分组,一般填写组织机构,如com.lemon , 这里可以跟着实际情况,自行输入。
             Artifact Id 项目包名(项目打包成jar包的ID ,或者说jar包的名字),根据实际情况,自行输入
             Version 版本,默认即可
             Packaging 打包方式,没什么特殊要求,选择jar即可

             

            16.2,点击Finish后,项目就新建完成,且出现在Project Explorer区域中。下面对这个项目讲解一下

             src/main/java : 一般是开发人员写代码的目录

             src/main/resources :  开发人员放项目资源文件的目录

             src/test/java  :  放单元测试(或测试人员)代码的目录

             src/test/resources: 放测试资源文件的目录

             Maven Dependencies : 通过maven拿下来的项目依赖包存放目录

             target :存放构建后文件的目录

             

17.第一个Web自动化脚本

            17.1创建Maven项目,关于这一步在【16.Maven构建说明】已经描述了

            17.2引入selenium框架,以及相关的依赖。首先我们进入Maven资源仓库,https://mvnrepository.com/  ,这个Maven资源仓库存放所有依赖包的地址,进入后,搜索selenium,搜索结果第一个selenium java

             

             接着点击selenium java,进入下载页面,一般来说选择版本要比较高,而且热度最大的。所有下图中,就可以选择3.141.59这个版本

             

          接着点击进去这个3.141.59的版本,然后就可以看到里面有相关的配置信息,下图为selenium依赖的坐标配置信息,把这些信息复制出来

          

       接着,回到ecplise,打开Maven项目的pom.xml文件,先添加dependencies标签,再把selenium坐标复制出来,把注释修改成“selenium依赖”,当然该注释修改成其他的内容也行

       

       保存文件的内容,保存后,ecplise就会自动从Maven的资源仓库自动下载selenium的依赖包,下载好之后,就可以看到相关的selenium文件,如下图所示,就可以看到selenium-java的jar包了

       

       17.3编写脚本,首先再src/test/java项目下新建一个包(package),包名根据实际来取,我这里取了"com.test", 然后就是新建一个class文件,名称也是根据实际来取,我这里取了FirstWebTest.java

       

     然后就可以在这个java类中编写selenium脚本了,一般来说,最简单的脚本如下

     ChromeDriver driver = new ChromeDriver();    //加载chrome浏览器的对象

     driver.get("https://xxxxxxxxx.com")     //通过get方法打开url链接,打开网页

18.Chrome浏览器环境问题点

          18.1 例如提示以下这类报错:The path to the driver executable must be set by the webdriver.chrome.driver system properity等等,还有其他的报错,有“driver”字样的,就应该是和driver驱动有关了

           对于这类问题,首先想到的就是加载chrome浏览器的驱动,方法有两个,一个是代码层面设置。System.setProperty("webdriver.chrome.driver","xxxx");     //xxxx就是指driver驱动所在的文件夹路径

                首先要,把chromedriver.exe驱动文件复制到src/test/resources中,如下图所示

                 

                然后,在代码中设置 如下代码

                  System.setProperty("webdriver.chrome.driver","/src/test/resources/chromedriver.exe");    注意以下这段代码,我已经把driver.exe放入到src/test/resources中,直接把路径复制过来即可。

                 但是,如果把driver.exe放到其他文件夹中例如放到了D:\Program Files (x86)的路径中,那么代码就可以改成这样

                  System.setProperty("webdriver.chrome.driver","D:\Program Files (x86)"); 

                  而且要做打开浏览器之前加载driver.exe驱动,代码如下所示

                  

                     另外还有第二种方法,就是把driver.exe驱动放入到环境变量中,具体可以参考这篇博客https://blog.csdn.net/qq_30583611/article/details/108932842                   

19.Firefox浏览器环境搭建的问题

            19.1 提示报错Cannot find firefox binary in PATH.mark firefox is installed,  这个提示是说,firefox安装在其他路径,不是默认路径。

                   这个问题,通过设置firefox的路径即可解决,可通过webdriver.firefox.bin设置firefox的路径

                   System.setProperty("webdriver.firefox.bin","D:\\Program Files (x86)\\Free Download Manager\\firefox.exe");  //不过这里要注意以下  \  斜杆符合的转义。路径都用双斜杠转义了

           19.2 还有就是firefox的驱动问题的报错, The path to the driver executable must  be set  by the webdriver.gecko.driver system properity

                   出现了这些报错信息,那应该就是,firefox的webdriver出了问题,如果没有下载可以参考【18.Chrome浏览器环境问题点】和这篇博客https://blog.csdn.net/qq_30583611/article/details/108932842  ,进行安装配置

           最后,加载firefox.exe的路径,gecko.exe的路径,以及定义浏览器对象的代码,如下所示,注意所有加载的动作都要放在打开浏览器之前

          System.setProperty("webdriver.firefox.bin","D:\\Program Files (x86)\\Free Download Manager\\firefox.exe");

          System.setProperty("webdriver.gecko.driver","/src/test/resources/geckodriver.exe");

         //设置浏览器对象,打开浏览器      

          FirefoxDriver fdri = new FirefoxDriver();

20.IE自动化测试环境问题点

20.1 如下图所示,通过InternetExplorerDriver对象打开一个IE浏览器是,系统报错提示,webdriver.ie.driver的错误,说明,还没有配置IE浏览器的driver驱动。对于这类问题,下载驱动并配置即可

如下图所示,下载驱动后,放到src/test/resources路径中,然后再用System.setProperty("xxxxx","yyyy") 方法设置路径,当然不用System.setProperty方法也可以,把driver路径添加到环境变量中即可

20.2. IE浏览器的保护模式,所引起的不可以预知的错误。有两个解决方案

方法一:在浏览器里面设置,但是换了一台电脑后,就不适用了,首先进入[Internet选项]

然后,在[安全] tiem中,把红圈这四个的保护模式全部启用(依次点击红圈的四个区域,然后点上[启用保护模式])

20.3 报错提示,Browser zoom level was set to 125% ,这个提示是因为浏览器缩放引起的,缩放125%,超过了100%,就显得大了,对于缩放的问题,也有两个解决方案

其中之一,手动设置缩放的比例,如下图所示,依次点击设置,缩放 ,然后点击选择100%

以上就是一些IE浏览器常见的环境配置问题,设置完之后,就可以编写一个openIE()的函数,用来打开IE浏览器

public static void openIE(){

            System.setProperty("webdriver.ie.driver","src/test/resources/IEDriverServer.exe");

            InternetExplorerDriver ieDriver = new InternetExplorerDriver();

            ieDriver.get("https://www.baidu.com");

}

20.4,对于上面的浏览器设置,无论是保护模式的设置,还是缩放比例的设置都是手动设置的,如果更换了其他电脑,那这个脚本就不能用了,还得再设置一次。对于这种情况可以在脚本中设置忽略保护模式,忽略缩放比例。如下图所示的代码,注意desiredCapabilities对象必须要传入到ieDriver对象中。否则还是会报错

但是可以看到,InternetExplorerDriver有横线划过了,这表明这个方式是不推荐使用。但是还是可以用,所以不是特殊情况,也不推荐使用。

21.基本的元素定位,id和name

        21.1基本的元素定位可以分层6个大类。分别是:

            1.通过id定位 ,根据id属性的值定位到指定的节点,一般都是返回单个元素,id一般来说是唯一的

            2.通过name定位,根据name属性的值定位到指定的节点,可能会返回一个节点元素的集合,因为name属性的值可能会重复

            3.通过tagName定位,根据标签名tagName的值定位到指定节点,可能会返回一个节点的集合,因为tagName的值可能会重复

           4.通过className定位,根据元素样式class的值定位到指定的节点,可能会返回一个节点的集合,因为className的值可能会重复

           5. 通过linkText定位,根据linkText超链接的文本值定位到指定的节点, 可能会返回一个节点的集合,因为linkText的值可能会重复

          6.通过partialLink Text定位,根据超链接部分的文本值定位到指定的节点

22.2,使用id定位的简单例子

首先,对百度一下输入框,右键,再点击选择检查

然后找到id属性的值,我们可以通过这个id属性来定位到百度一下的输入框,脚本如下所示:

.

ChromeDrvier cd = new ChromeDriver();

cd.get("https://www.baidu.com");

cd.findElement(By.id("kw")).sendkeys("腾讯课堂");

通过这部分脚本就可以打开百度,然后定位到百度一下输入框,最后输入腾讯课堂

22.3通过name属性定位百度一下输入框,可以看到这个百度一下输入框的name属性是wd,如下图所示

然后通过如下脚本即可定位并操作百度一下输入框,打开百度页面,在百度以上输入框输入[广州]

ChromeDrvier cd = new ChromeDriver();

cd.get("https://www.baidu.com");

cd.findElement(By.name("wd")).sendkeys("广州")

而且这里要注意一下,因为,通过name定位,有可能会出现name的值重复,如果name重复,那么就会返回一个集合,所以这时候要先用一个列表或者数组接收这个集合,然后才可以通过遍历找到目标节点,再去操作。那怎么知道name是否会重复,在开发者工具中,按下ctrl+f,就可以打开搜索框,

然后在搜索框里面输入wd,就可以找到有多少个wd的元素,如下图所示,输入了wd后,可以看到1 of 31 ,这里的意思是一个有31个,当前看的是第1个。虽然这里有31个name相关的值,但是其实都不是name属性的值,也不是其他属性的值。所以这里,name=‘wd’,其实是唯一的。

22.元素的基本定位 linkText

首先说明一下,关于这个文本定位有两个方法,分别是linkText() 和partialLinkText()。其中linkText()定位全部文本, 而partialLinkText()定位部分文本

             首先找到一些超链接的文本,如下图所示,选择【新闻】,然后右键,再点击检查

             

            然后,我们可以看到,下面所示,文本值是【新闻】,是一个a标签,href表示跳转的超链接

           

            最后我们可以用以下的代码定位到这个新闻的超链接,并点击一下

           ChromeDriver ch = new ChromeDriver();

          ch.findElement(By.linkText("新闻")).click    //定位全部文本

          ch.findElement(By.partialLinkText("闻")).click   //定位部分文本,但是定位部分文本的时候,可能会返回多个结果,也就是返回了一个集合

23.基本元素定位cssSelector

  23.1-就是根据css选择器样式来定位一般来说cssSelector定位有三种方式,分别是:

         

根据tagName定位:By.cssSelector("input");

根据ID定位:  By.cssSelector("input#id");

             By.cssSelector("#id");

根据className(样式名)定位: By.cssSelector(".className");
                          By.cssSelector("input.className");

23.2 具体例子

     

ChromeDriver cd = new ChromeDriver();

     cd.findElement(By.cssSeletor("input")); //这句代码,根据tagName定位会返回多个值,所以最好用一个集合来接收,然后遍历这个集合找到想要得元素

     cd.findElement(By.cssSeletor("#kw")).sendKeys("腾讯课堂");  //这句代码,根据id定位则不会返回多个值,一般都是返回一个值,同时在cssSelector定位中,id前面要加一个”#“

     cd.findElement(By.cssSeletor(".s_ipt")).sendKeys("腾讯课堂"); //这句代码,根据className定位,在className前面一般加一个 ”.“ 点号

    关于复合类名的问题,首先在百度搜索框输入,然后检查百度一下按钮的元素

   

接着就可以找到复合类了

     

cd.findElement(By.cssSelector(".s_ipt")).sendKeys("腾讯课堂");

cd.findElement(By.cssSeletor(".bg.s_btn")).click;   //注意这类classname是[bg s_btn],然后再脚本中,复合类名要转换成[.bg.s_btn],可以看到bg前面有一个”.“点号,然后bg和s之间的空格也是换成了"."点号

23.3 css的精确定位

根据元素属性,属性名=属性值, 其中id,class,都可以写成这种形式,By.cssSelector("标签名[属性名=‘属性值’]"); 例如,这段代码 By.cssSelector("input[name='xxx']");

例如现在要通过maxlength属性的值,定位到百度搜索框。这时候,传统的id,class,等等的基本元素定位方式是不行的,这时候就可以用cssSelector定位的精确定位方式来解决这个问题。

首先,我们可以在开发者工具中寻找input标签中maxlength的值是255,如下图所示,在开发者工具按下ctrl+f,就可以搜索了

最后写成脚本,cd.findElement(By.cssSelector("input[maxlength='255']")).sendKeys("腾讯课堂");    

关于多属性定位,因为一个属性无法精确定位到一个标签,所以需要多个属性组合定位。

By.cssSelector("标签名[属性名1='属性值'][属性名2='属性值']");  ,例如现在想通过[maxlength]和[autocomplete]这两个属性定位到百度搜索框

cd.findElement(By.cssSelector("input[maxlength='255'][autocomplete='off']")).sendKeys("腾讯课堂");

23.4 CssSelect的路径定位

如下面所示,By.cssSelector("#logingServiceClinicGp_site_select_control>div>div>div>input[id='react-select-3-input']")这一段就是通过父级元素,一路往下子级定位

cdr.findElement(By.cssSelector("#logingServiceClinicGp_site_select_control>div>div>div>input[id='react-select-3-input']")).sendKeys("Anne Black Maternal and Child Health Centre");

24.基本元素定位className定位

  24.1普通className的定位

      xxxxxxxxxxxxxxxx

  

  24.2复合className的定位

           复合className

          class标签,有多个值。其中之一的做法是,选择其中一个值进行定位。当然也可能会定位到其他标签。此时可以再选择一个值定位。例如单独选择btn,或者单独选择btn-green,或者其他

            

26.元素操作常用API

       26.1,常用的三个API

        click():触发当前元素的点击操作

       clear():触发当前元素的清空内容操作

       sendKeys("xxxx"):往文本框一类元素写入内容

            另外,sendKeys()还可以模拟按键操作

            element.sendKeys(Keys.CONTROL,"a");  //ctrl+a 全选

            element.sendKeys(Keys.CONTROL,"x");  //ctrl+x 剪切

            element.sendKeys(Keys.CONTROL,"c");  //ctrl+c 复制

            element.sendKeys(Keys.CONTROL,"v");  //ctrl+v 粘贴

            element.sendKeys(Keys.ENTER);  //回车

            element.sendKeys(Keys.BACK_SPACE); //删除

            element.sendKeys(Keys.SPACE); //空格键

       26.2,元素操作的其他API

          getTagName() : 获取元素的标签名

                           WebElement  wel = chromeDriver.findElement(By.id("kw"));         //先接收返回值

                           System.out.println("输出标签名:"+wel.getTagName());     //这里我输出了这个标签名,当然也可以用一个string类型变量存储起来做其他用途

          getAttribute(属性名)  :  根据属性名获取元素属性值

                          WebElement  wel = chromeDriver.findElement(By.id("kw"));         //先接收返回值

                          System.out.println("输出maxlength属性的属性值:"+wel.getAttribute("maxlength"));    //这里我输出了这个属性值,当然也可以用一个string类型变量存储起来做其他用途

          getText()  :  获取当前元素的文本值

                     例如现在要获取这个叫 “学术” 的文本值

                    

                   WebElement wel2 = chromeDriver.findElement(By.xpath("//a[text()='学术']")); //先接收WebElement类型的返回值

                  System.out.println("输出文本值:"+wel.getText());                                               //这里我输出了这个文本值,当然也可以用一个string类型变量存储起来做其他用途

       isDisplayed()   :   查看当前元素是否显示

                   WebElement wel2 = chromeDriver.findElement(By.xpath("//a[text()='学术']")); //先接收WebElement类型的返回值

                   System.out.println("元素是否显示:"+wel2.isDisplayed());       //这里我进行了输出的操作,isDisplayed的返回值还可以进行逻辑判断,如用于if,while ,for中。

27.driver对象常用API-01

             请注意 了,27,28这两节讲的都是Driver对象,所以调用方法也是类似,直接用driver对象调用

             ChromeDriver dcc = new ChromeDriver();

             dcc.xxx();  //xxx表示的就是这些driver对象的API

             本节常用的driver对象有:

             get(String url)  : 访问指定的url地址 

             getCurrentUrl()  :  取得当前页面的url地址,可用于断言

             getTitle() : 取得当前页面的标题,可用于断言

            getPageSource() : 取得当前页面的源代码,可用于断言,如判断当前页面是否包含某个元素

            quit() : 关闭驱动对象及所有相关的窗口

    上述方法调用如下所示:

   
           

28.driver对象常用API-02 和 03

              28.1,close() : 关闭当前窗口,注意与quit()方法的区别,close()方法只关闭当前的窗口,不会关闭驱动对象和所有窗口,调用方法,chromedriver.close();

              28.2,getWindowHandle(): 返回当前页面的句柄, String scc = chromedriver.getWindowHandle();

              但是,这里有一个问题,当打开了多个窗口时,要进行窗口的切换,才可以反对指定窗口的句柄,否则就是打开了多个窗口,但是默认还是返回第一个窗口的句柄。

              28.3,getWindowHandles(): 返回由驱动对象打开的所有页面的句柄,页面不同,句柄不一样 ,  System.out.println(Chromedriver.getWindowHandles());   。 如果要用一个变量来接收getWindowHandles() , 那么必须要用一个列表或数组类型的变量

              28.4,manage(): 此方法可以获取Options(浏览器菜单操作对象),然后可以使用driver.manage().window()

             另外还有一个方法,通过把鼠标移动到对应方法上,就可以找到这个方法的返回值类型了

             例如下图所示

             

       然后关于manage()对象,还有以下操作浏览器的方法,返回窗口的高度,窗口的x坐标,y坐标

      

  webdriver常用API 03节

       

Navigate对象,可以理解为导航对象,通过这个导航对象可以完成浏览器得刷新,浏览器得回退,浏览器得前进,访问指定得url地址

使用方法如下:

                       ChromeDriver dcc = new ChromeDriver();

                       Navigation nav = dcc.Navigate();

                       通过对象nav点出来就可以看到如下方法

                       nav.to("www.jd.com");
                       nav.refresh();           //访问京东,然后刷新页面

                      nav.back();              //回退页面
                      nav.refresh();          //前进页面

29.硬性等待

xxxxxx

30.隐式等待

在设置的超时时间范围内不停的查找元素,直到找到元素或者超时:

隐式等待最好是放在脚本前面,如,ChromeDriver对象初始化之后,然后就设置隐式等待,设置后,往后的脚本逻辑,凡是要寻找元素的,都会触发这个隐式等待

设置语法

ChromeDriver driver = new ChromeDriver();

driver.manage().timeouts().implicitlyWait(5,Timeout.SECONDS);

//这里在ChromeDriver对象初始化后,设置隐式等待,等待时间为5秒,并不是说每次寻找元素都要等5秒,而是说,在5秒内能找元素就可以了

//例如,设置了5秒等待时间,但是它在第1秒就找到了,那么它就会马上进行后续逻辑,不会再等待,所以实际等待时间是1秒

上述的两个参数的意思是,设置超时时间5秒

5,设置超时时间长度为 5(这个时间长度还得配合单位才有意义)

Timeout.SECONDS,设置时间的单位为秒

优点:相对灵活

缺点:设置是针对全局的,在webdriver实例整个生命周期有效,但并不是所有元素都需要等待

31.显式等待

用来等待某个条件发送后再继续执行后续代码(如找到元素,元素可点击,元素已显示等等)

设置语法

WebDriverWait wewait = new WebDriverWait(driver,5)

//driver是webdriver的对象  ,  5代表的是等待超时时间5秒

wewait.until(ExpectedConditions.visibilityOfElementLocated(By.id("kw")));

/*

  注意until里面的参数

参数等待条件
visibilityOfElementLocated(By locator)页面元素在页面存在并且可见
elementToBeClickable(By locator)页面元素是否在页面上可用和可被点击
elementToBeSelected(WebElement element)页面元素处于被选中的状态
textToBePresentInElement(By locator)在页面元素中是否包含特定的文本
presenceOfElementLocated(By locator)页面元素在页面中存在

*/

//上一句代码的意思是等待定位到By.id("kw")后,才会执行下面的代码

//通过id定位
 driver.findElement(By.id("kw")).sendKeys("三星");
 driver.findElement(By.id("su")).click();

32.特殊元素定位与操作-模态框,alert弹框

Modal Dialogue Box, 或者叫 模式对话框,是指用户在想要对这个模态框以外的应用程序进行操作时,必须要先对该对话框进行响应,例如单机,  [确定] 或者 [取消]按钮,把该对话框先关闭掉

主要有两个类型,alert和comfirm。  alert是警告弹框,comfirm是确认弹框。下图所示,为alter弹框,注意alert弹框是浏览器的一个控件,并非是html的元素。通过selenium传统的方法是不能定位到alert弹框的

通过代码定位alert弹框的例子

 //首先打开浏览器

System.setProperty("xxxxxx");

ChromeDriver cdriver = new ChromeDriver();

//通过url地址打开网页

cdriver.get("url的地址");

//定位弹出alter弹框的按钮,只有点击后(click()方法),才会弹出alert的弹框,如上图所示

cdriver.findElement(By.id("abtn")).click();

Thread.sleep(2000)

//点击按钮后,弹出alert弹框,这是传统的定位方法无法定位到alter弹框,这是可以用ChromeDriver的 "switchTo().alter()"来找

//到alter的弹框, 返回值类型是Alert类型的,注意还要导入selenium的相关包。

Alert alt = cdriver.switchTo().alert()

//alert的常用方法

alt.accept(); //这个方法表示点击alert弹框的确认按钮

alt.dismiss(); //这个方法表示点击alert弹框的取消按钮

alt.getText(); //这个方法是返回alert上面的文本信息,并返回一个String的字符串

System.out.println(alt.getText());

SwitchTo().alter()方法,可以同时定位到alter弹框,confirm弹框,prompt窗口

33. 模态框,confirm弹框

首先还是一样,打开url链接

ChromeDriver dr = new ChromeDriver();

dr.get("urlxxxxxxxxxxx");

然后点击confirm弹框的按钮

dr.findElement(By.id("abtn")).click();

Thread.sleep(2000);

接着找到confirm弹框

Alter altcon = dr.switchTo().alter();

altcon.accept();   //点击confirm弹框的确认按钮

altcon.dismiss();  //点击confirm弹框的取消按钮

altcon.getText();  //获取confirm弹框的文本信息

System.out.println(altcon.getText());

34. 特殊元素操作-iframe

ifram相当于一个内联框架,一个内嵌的页面。之所以要进行ifrmame的切换,是因为如果要定位到内嵌页面的元素,就必须要切换到相应的iframe页面中。

iframe切换
四种切换方式:
driver.switchTo().frame(index);
driver.switchTo().frame(id);
driver.switchTo().frame(name);
driver.switchTo().frame(WebElement);

切换之后,回到默认页面(否则会找不到默认页面的元素)
driver.switchTo().defaultContent();

如下图所示,a.html,内嵌了b.html, 然后b.html又内嵌了c.html

然后第一步,我们从a.html, 切换到b.html

//第一步打开url地址,这里我随意填了一个url地址
ChromeDriver.get("https://www.bbbbbccccccqqqqq.com/");

//第二步切换到b.html, 然后输入数据
ChromeDriver.switchTo().frame("biframe");
ChromeDriver.findElement(By.id("bbb")).sendKeys("hello");

//第三步切换到c.html, 然后输入数据,但是要进入c.html中,前提是必须要先进入b.html
ChromeDriver.switchTo().frame("cifram");
ChroemDriver.findElement(By.id("ccc")).sendKeys("world");

//最后,如果需要定位默认页面的元素,则必须切换回到默认页面中,否则不能定位到默认页面的元素
//有两个方法可以切换回到默认页面中,第一个是:
ChromeDriver.switchTo().defaultContent();

//第二个方法是:
ChromeDriver.switchTo().frame("aiframe");

//然后回到了默认页面后,进行输入的操作
ChromeDriver.findElement(By.id("aaa")).sendKeys("hhhhh");

上述方法方式通过,id元素来操作,也可以通过其他方式来操作如xpath,index等等其他方式

35.特殊元素操作-Window切换

1.所谓的window其实就是当前的一个窗口,如果你打开了一个窗口,如果需要切换到另外一个窗口进行操作,一定要先切换窗口。

2.切换方式:传入要切换的窗口的name或者句柄handle

chromeDriver.switchTo().window(name);

chromeDriver.switchTo().window(handle);

3.如何获得句柄

chromeDriver.getWindowHandle(); //获取当前操作窗口的句柄
chroemDriver.getWindowHandles(); //获取测试时,打开所有窗口的句柄

4.例如下图所示,当前有两个窗口

//首先打开url
chromeDriver.get("https://www.shilideyemian.com");

//然后通过点击的操作,打开b窗口
chromeDriver.findElement(By.id("bbb")).click();

//打开了b窗口后,获取所有window的句柄
Set<String> hlds = chromeDriver.getWindowHandles();

//然后对窗口进行遍历,然后用if语句判断窗口的title,是不是我想要的那个窗口的title
for(String handle : hlds){

    //通过句柄,切换window
    chromeDriver.switchTo().window(handle);

    //通过每个window的标题title进行判断,是否切换对了window
    //如果切换window后,window的title是b.html,那么就说明切换对了window,b通过reak跳出循序
    if(chromeDriver.getTitle().equals("b.html")){
        break;
    }
}

//对b窗口的元素继续操作
chromeDriver.findElement(By.id("bbb")).sendKeys("这是第二个窗口");

但是通过上面的方法也是会有错误的发生,例如for走完后,其实还是没有找到b.html, 然后,因为set列表遍历完了,就会退出for循环,接着他又执行了对b窗口的操作。但我们是因为没有找到b窗口,并且循环结束退出了循环,再执行对b窗口的操作是错的,最好的方法,这里使用try catch方式来编写

37.特殊元素操作-select下拉框,根据父元素找到子元素

如果页面中的某个元素是下拉框的话,我们可以将此web元素封装成Select对象
下面通过new Select(), 对元素进行封装
Select se = new Select(WebElement element)

其中Select对象常用的API
Select.getOptions(); //获取所有选项
Select.selectByIndex(index);  //根据索引选中对应元素
Select.selectByValue(value);  //选择指定value值对应的选项
Select.selectByVisibleText(text);  //选中文本值对应的选项  

这里还有一个定位上的技巧:根据父元素找到子元素,如下图所示,要找到  “a标签设置选项”  这个元素,可以根据父元素<div id=u1>,来定位

具体定位方法见下图所示://div[@id='u1']/a[text()='设置']

//第一个id='u1',找到父元素,第二个text()='设置'找到子元素
ChromeDriver.findElement(By.xpath("//div[@id='u1']/a[text()='设置']")).click();

然后接着看下有select下拉框的元素样式,是一个<select>标签

接下来我们进行操作
//第一步,定位到select下拉框元素,通过一个WebElement对象来接收返回值
WebElement weble = ChromeDriver.findElement(By.name("gpc"));

//第二步,把weble对象,封装成一个Select对象
Select sels = new Select(weble);

//通过索引值去选择元素,这里选择第1个索引值,这里要注意一下,索引值是从0开始,还是从1开始
sels.selectByIndex(1)

//根据可见文本来选择
sels.selectByVisibleText("最近一个月")

注意这里还有一个根据value值先选择的方法,seles.selectByValue(value)  , 这里value的取值就是下图中的红色圈中的value属性的值。但是需要注意,value的值可能会变化的,对于这类可变的value是不太适合用于定位的。

38.特殊元素操作-时间日期控件

第一种情况,如果时间控件没有现在输入的话,就可以直接使用sendKey方法写入时间数据

第二种情况,如果时间控件有现限制输入,那么我们可以执行一段js脚本来改变元素value的属性值,然后再通过sendKeys输入时间数据

对于第一种情况,我们可以拿 "飞猪" 这个网站来做试验, 可以看到这个日期空间是可以手动输入的。然后我们检查一下这个日期控件里面的标签,发现这个日期控件其实是一个input的标签,正常定位并使用sendKeys方法输入即可。

不过在这个定位的时候,则发现了比较有趣的事情,input标签有好多属性值都是重复的,这时我们可以采用多个元素同时定位的方法,但是也不排除多个元素定位了,还是重复的现象,那么这里我们采用另外一种是否,找到input标签的父元素,可以看到用 id属性 来定位,是可以唯一定位到这个input标签的父元素,并且发现这个父元素其实是一个form表单

最后我们可以看到,通过这种方法成功唯一的定位到了这个input标签

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值