1、Selenium WebDriver架构
Selenium WebDriver API提供编程语言和浏览器之间的通信工具。下图显示了Selenium WebDriver的体系结构表示。
WebDriver架构有四个基本组件:
Selenium语言绑定
JSON有线协议
浏览器驱动
真正的浏览器
1） Selenium语言绑定/Selenium客户端库
Selenium开发人员已经构建了语言绑定/Selenium客户端库以支持多种语言。 例如，如果要在java中使用浏览器驱动程序，请使用java绑定。 所有受支持的语言绑定都可以从Selenium的官方网站( https://www.seleniumhq.org/download/#client-drivers )下载。
2）JSON有线协议
JSON(JavaScript Object Notation)是一种用于在Web上交换数据的开放标准。 它支持对象和数组等数据结构。 因此，从JSON编写和读取数据很容易。 要了解有关JSON的更多信息，请访问 - https://www.yiibai.com/json/
JSON Wire Protocol提供了一种在服务器和客户端之间传输数据的传输机制。 JSON Wire Protocol是各种REST Web服务的行业标准。
3）浏览器驱动
Selenium使用特定于每个浏览器的驱动程序，以便与浏览器建立安全连接，而不会泄露浏览器功能的内部逻辑。 浏览器驱动程序也特定于用于自动化的语言，如Java，C#等。
当使用WebDriver执行测试脚本时，将在内部执行以下操作。
- 生成HTTP请求并将其发送到每个Selenium命令的浏览器驱动程序。
- 驱动程序通过HTTP服务器接收HTTP请求。
- HTTP Server决定执行在浏览器上执行的指令的所有步骤。
- 执行状态将发送回HTTP Server，随后将其发送回自动化脚本。
4）浏览器
Selenium WebDriver支持的浏览器： - Internet Explorer
- Mozilla Firefox
- Google Chrome
-
Safari
2、Selenium WebDriver功能
elenium WebDriver一些最重要的功能特性是:
1）多浏览器支持 :Selenium WebDriver支持各种Web浏览器，如Firefox，Chrome，Internet Explorer，Opera等等。它还支持一些非传统或罕见的浏览器，如HTMLUnit。
image.png
2）多编程语言支持:WebDriver还支持大多数常用的编程语言，如Java，C#，JavaScript，PHP，Ruby，Pearl和Python。 因此，用户可以基于自己的能力选择任何一种受支持的编程语言并开始构建测试脚本。
3）速度:与Selenium Suite的其他工具相比，WebDriver的执行速度更快。与RC不同，它不需要任何中间服务器与浏览器通信; 此工具直接与浏览器通信。
image.png
4）简单命令:Selenium WebDriver中使用的大多数命令都易于实现。 例如，要使用以下命令在WebDriver中启动浏览器:
java：
WebDriver driver = new FirefoxDriver(); //(Firefox浏览器)
WebDriver driver = new ChromeDriver(); //(Chrome浏览器)
WebDriver driver = new InternetExplorerDriver(); //(Internet Explorer浏览器)
python：
driver = webdriver.Chrome()
driver = webdriver.Firefox()
driver = webdriver.Ie()
5）WebDriver方法和类 :WebDriver提供多种解决方案来应对自动化测试中的一些潜在挑战。WebDriver还允许测试人员通过动态查找器处理复杂类型的Web元素，如复选框，下拉列表和警告框
image.png
3、简单测试页面
<html>
<head>
<title>简单测试页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style></style>
</head>
<body style="font-family: cursive;">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8" style="font-size: 30; margin-top: 40px; ">
用于自动化测试的Web页面示例
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:20px; margin-top:40px;">
This is sample webpage with dummy elements that will help you in learning selenium automation.
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<b>This is sample text.</b>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p> <b>Link : </b><a href="https://www.yiibai.com/">This is a link</a></p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>TextBox : </b><input id="fname_id" name="fname_name" class="fname_class" type="text" name="firstName" ></p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>Button : </b><button id="idOfButton" title="Click me!!" type="button" onclick="this.style.background='green';">Submit</button></p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>Radio button : </b>
<form action="#">
<input id="male" type="radio" name="gender" value="male"> Male
<input id="female" type="radio" name="gender" value="female"> Female
</form>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>Checkbox :</b>
<form action="#">
<input type="checkbox" class="Automation" value="Automation"> Automation Testing
<input type="checkbox" class="Performance" value="Performance"> Performance Testing
</form>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>Drop down :</b>
<select id="testingDropdown">
<option id="automation" value="Automation">Automation Testing</option>
<option id="performance" value="Performance">Performance Testing</option>
<option id="manual" value="Manual">Manual Testing</option>
<option id="database" value="Database">Database Testing</option>
</select>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><button id="dblClkBtn" ondblclick="alert('hi, Yiibai Testing');">Double-click to generate alert box</button></p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p><b>Click button to generate Alert box : </b>
<button onclick="alert('hi, Yiibai Testing');">Generate Alert Box</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p> <b> Click button to generate Confirm box : </b>
<button onclick="generateConfirmBox()">Generate Confirm Box</button>
</p>
<p id="demo"></p>
</div>
</div>
<div class="row">
<div class="col-md-12" style="font-size:15px;">
<p>Drag and drop example- drag the below image on the textbox</p>
<div id="targetDiv" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:400px;height:150px;padding:10px;border:1px solid #aaaaaa;"></div>
<img id="sourceImage" src="https://www.yiibai.com/static/img/logo.png" alt="yiibai" draggable="true" ondragstart="drag(event)" height="120px">
</div>
</div>
</div>
<script>
function generateConfirmBox()
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
