Selenium与 JavaScript

2023/2/10 22:01:22 来源:生活奇事网
一.为什么学习JavaScript

进行web自动化测试也好还是移动端自动化测试也好，必须要对系统实现用到的技术有一定的了解，而JavaScript作为世界上最流行的脚本语言，在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑的实现上都是由JavaScript驱动的，在进行自动化测试的过程中需要读懂JavaScript代码的调用关系和实现功能，才能利用selenium采用相关的技术实现自动化脚本。并且在ajax技术中页面调用js代码，而selenium是无法通过定位元素操作元素完成相应的动作，这就需要在Selenium Webdriver中调用js代码，这都要求你对js要有一定的了解。

二.什么是JavaScript

19世纪，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是一位叫布兰登·艾克（Brendan Eich）的哥们在两周之内设计出了JavaScript语言。为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没关系。因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。所以ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，它是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

JavaScript ( JS ) 是基于对象和事件驱动的安全性的脚本语言，是轻量级解释或JIT编译型的编程语言。JavaScript ( JS )为 HTML 设计师提供了一种编程工具,HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。JavaScript 可以将动态的文本放入 HTML 页面,类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>").JavaScript 可以对事件作出响应,可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时.JavaScript 可以读写 HTML 元素,改变 HTML 元素的内容。javascript在数据被提交到服务器之前，可被用来验证这些数据。JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器，为这个浏览器载入相应的页面。JavaScript 可被用来创建 cookies,存储和取回位于访问者的计算机中的信息。javascript还可以实现ajax,还可以做后台，比如node.js等等，还有桌面引擎node-webkit可以将JavaScript渲染成桌面应用，在unity3d中使用JavaScript写游戏（unity3d使用的JavaScript的语法，特性等等）。

三.初识JavaScript

下面是Javascript的简单代码： 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function alert_hello()
        {
            alert("欢迎加入javascript");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alert_hello()" value='click it'/>
</body>
</html>

技术解释：JavaScript是由<script type="text/javascript">..<javascript>代码说明，javascript脚本在<script type="text/javascript">..<javascript>之间，alert_hello()功能是弹出对话框，内容是"欢迎加入javascript"每行代码结束之后加上分号。

1. HTML引用JavaScript，一般有三种：

A. 页面直接引用js 

<script type="text/javascript">
   document.write('JavaScript代码');
 </script>

B. 引用外部js 

<script>
  window.onload = function(){
  var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
  }
 </script>

C. 远程引用js

<script type="text/javascript" src="../common.js"></script>（相对路径）

或

<script src="xxx.com/script/ common.js" type="text/javascript"></script>（绝对路径）；

2. JavaScript书写位置，一般有三种：

A. Html中head头部： 

<head>
 <title>javascript引用</title>
 <script type="text/javascript" src=" http://xxx.com/script/ common.js ">
   window.onload = function(){
  var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
 }
 </script>
 </head>

A. HTMLl中body: 

<body>
 <p>javascript引用</p>
 <script type="text/javascript" src=" http://xxx.com/script/ common.js ">  
 window.onload = function(){
   var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
   }
 </script>
  </body>

把JavaScript放在HTML中的body部分最底部，是最好的编程习惯，因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。所以放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

B. HTML标签

<p onClick="javascript:alert('你是对的！')">请点击</p>

四.JavaScript语法

下面是简单的Javascript代码： 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function alert_hello()
        {
            alert("欢迎加入javascript");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alert_hello()" value='click it'/>
</body>
</html>

技术解释：JavaScript是由<script type="text/javascript">..<javascript>代码说明，javascript脚本在<script type="text/javascript">..<javascript>之间，alert_hello()功能是弹出对话框，内容是"欢迎加入javascript"每行代码结束之后加上分号。

1. HTML引用JavaScript，一般有三种：

A. 页面直接引用js 

<script type="text/javascript">
   document.write('JavaScript代码');
 </script>

B. 引用外部js 

<script>
  window.onload = function(){
  var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
  }
 </script>

C. 远程引用js

<script type="text/javascript" src="../common.js"></script>（相对路径）

或

<script src="xxx.com/script/ common.js" type="text/javascript"></script>（绝对路径）；

2. JavaScript书写位置，一般有三种：

A. Html中head头部： 

<head>
 <title>javascript引用</title>
 <script type="text/javascript" src=" http://xxx.com/script/ common.js ">
   window.onload = function(){
  var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
 }
 </script>
 </head>

B. HTMLl中body: 

<body>
 <p>javascript引用</p>
 <script type="text/javascript" src=" http://xxx.com/script/ common.js ">  
 window.onload = function(){
   var script = document.createElement("script");
  script.setAttribute("type","text/javascript");
  script.src = " http://xxx.com/script/ common.js ";
  document.getElementsByTagName("head")[0].appendChild(script); 
   }
 </script>
  </body>

把JavaScript放在HTML中的body部分最底部，是最好的编程习惯，因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。所以放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

C. HTML标签 

<p onClick="javascript:alert('你是对的！')">请点击</p>

四.JavaScript语法

1. 常量和变量

A. 常量：

JavaScript常量通常称为字面常量，它是不能改变的数据，在JavaScript中，常量有以下6种基本类型：

  • 1) 整型常量：可以使用十六进制、八进制和十进制表示其值。如正整数，如1，33，55，负整数，-22，-235
  • 2) 浮点型常量：浮点型常量又称为实数常量，是由整数部分加小数部分表示，如2.34，235.89。可以使用科学或标准方法表示，如3e8,9e5等。
  • 3) 布尔常量：又称为逻辑值，只有两种状态：True或False。它主要用来说明或代表一种状态或标志。
  • 4) 字符型常量：使用单引号(')或双引号(")括起来的一个或几个字符。如"I am a student","3245","ewrt234234"等。
  • 5) 空值：Null，表示什么也没有。如试图引用没有定义的变量，则返回一个Null值。
  • 6) 特殊字符：JavaScript中有以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。

B. 变量：

变量是计算机内存中的某个单元，为了方便计算机处理数据，应先把数据存入到内存中去，根据保存的变量类型，声明属于这种类型的变量，计算机会根据这种类型分配相应的内存单元，并将该内存单元与声明的变量对应上。通过该变量就可以把数据保存到内存或者从内存中读取出来。

1) 变量声明

这是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量（跟python的使用习惯不太相同），声明变量的格式：var myVariable;。

2) 变量命名规范

注意：变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；尽量避免使用没有意义的命名；禁止使用JavaScript关键词、保留字全名

3) 变量的作用域：

在JavaScript中有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见得。代码实例： 

<script language="javascript" type="text/javascript">
 <!--
 var a = "我是全局变量";
 function check()
 {
 var a = "我是局部变量";
 document.write(a);
 }
 check();
 //-->
 </script>

2. 表达式和运算符

A. 表达式

表达式是使用各种运算符把两个数据或者多个数据结合起来，生成一个新的值。如2+4=6，5%7=35，19<9=false,表达式是以运算符为基础的，而运算符有很多种。

3. 函数

函数对任何一门语言来说都是核心的概念。在JavaScript里，函数即对象，程序可以随意操控它们。函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量。

A. 函数定义 

function funcname([arg1 [,arg2 [...,argn]]]){
 statement;
}

funcname是要声明的函数名称的标识符。函数名之后的圆括号中是参数列表，参数之间使用逗号分隔。当调用函数时，这些标识符则指代传入函数的实参。function语句里的花括号是必需的，这和while循环和其他一些语句所使用的语句块是不同的，即使函数体内只包含一条语句，仍然必须使用花括号将其括起来。

实例：1!+2!+3!+4!+n!= 

<script language="javascript" type="text/javascript">
<!--
//定义函数计算阶乘
function factorial( n ){ 
    return ( n <= 1 ) ? 1 : n * factorial( n-1 );
}
//定义函数计算阶乘的和
function result(n)
{
iTem=0;
for(i=1;i<=n;i++){iTem+=factorial(i);}
return iTem;
}
//-->
</script>

1. 控制语句

A. 条件语句：通过判断表达式的值来决定执行还是跳过某些语句，包括if语句和switch语句。

1) If语句语法： 

if(expression)
 statement1
else
 statement2

if语句条件的求值结果永远是一个布尔值，即只能是true或false。花括号中的语句，只有在给定条件的求值结果是true的情况下才会执行。

2) switch语句语法： 

switch (expression){
 case value1: statement1;
 break;
 case value2: statement2;
 break;
 case value3: statement3;
 break;
 default: statement4;
}

switch语句执行一个多路分支，它会根据算expression的值，根据条件判断，查找case子句的表达式是否和expression的值相同。如果找到匹配的case，那么将会执行这个case对应的代码块。如果找不到匹配的case，那么将会执行default标签中的代码块。每一个case语句块的结尾处都使用了关键字break。break语句可以使解释器跳出switch语句或循环语句。

B. 循环语句

JavaScript有4种循环语句：while、do/while、for、for/in，它们的工作原理一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去。一旦给定条件的求值结果不再是true，循环也就到此为止。其中最常用的循环就是对数组元素的遍历

（1） While语法 

while(expression){
 statement
}

while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值，当表达式expression是真值时则循环执行statement，直到expression的值为假值为止；如果是假值，那么程序将跳过循环。

（2） do while语法： 

do{
 statement
}while(expression);

do while语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次。

（3） for语法： 

for(initialize;test;increment){
 statement; 
}

for语句提供了一种比while语句更加方便的循环控制结构，用for循环来重复执行一些代码的好处是循环控制结构更加清晰。

（4） for in语法： 

for(variable in object){
 statement
}

variable通常是一个变量名，也可以是一个可以产生左值的表达式或一个通过var语句声明的变量，总之必须是一个适用于赋值表达式左侧的值。object是一个表达式，这个表达式的计算结果是一个对象。同样，statement是一个语句或语句块，它构成了循环的主体。for/in循环可以用来更方便地遍历对象属性成员。　　在执行for/in语句的过程中，javascript解释器首先计算object表达式。如果表达式为null或undefined。javascript解释器将会跳过循环并执行后续的代码。如果表达式等于一个原始值，这个原始值将会转换为与之对应的包装对象(wrapper object)。否则，expression本身已经是对象了。javascript会依次枚举对象的属性来执行循环。然而，在每次循环前，javascript都会先计算variable表达式的值，并将属性名(一个字符串)赋值给它。

2. 对象

javascript 中的对象(物体)，和其它编程语言中的对象一样，一个对象可以是一个单独的拥有属性和类型的实体。可以比照现实生活中的对象(物体)来理解它，拿它和一个杯子做下类比。一个杯子是一个对象(物体)，有颜色，图案，重量等属性。对象的属性。Javascript在调用方法和属性如下：

  • objectName.method
  • objectName.propertyName

javascript提供了17个内置对象，如Array对象、Date对象、正则表达式对象、string对象、Global对象。

3. 事件

每个对象可以识别和相应某些系行为，这些操作行为称之为事件，事件是可以被 JavaScript 侦测到的行为， 常用的事件有click，dbclick,load,unload,change等。为了要使用这些事件，就需要在事件中使用这些处理程序，它的使用方法为制定HTML代码插入事件处理程序： on 事件名=””。引号内可以是任何javascript语句，方法或者函数等等，所谓的事件处理程序，指的是事件被激活的时候，要执行javascript程序代码。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

A. onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

B. onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。 

<input type="text" size="30" id="email" onchange="checkEmail()">

C. onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。 

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

D. onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框： 

<a href="http://www.w3school.com.cn" onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30"></a>

五.Python和JavaScript

在自动化测试过程中，经常会处理一些异步请求，这就需要Python能解析js的包了，调用JavaScript代码，或者客户端和服务器数据进行了加密，所以我们需要调用js开发加密或者解密函数来处理数据，这些都在用Selenium进行自动化测试过程中要用到。Python的第三方库execjs 实现了在 Python 环境中调用 Javascript 引擎，执行js代码的功能，它提供了简单易用的api。

首先把实现的Javascript语言开发求1!+2!+3!+4!....+n!的和函数保存到en.js文件中 

function factorial( n ){ 
    return ( n <= 1 ) ? 1 : n * factorial( n-1 );
}
function result(n)
{
iTem=0;
for(i=1;i<=n;i++){iTem+=factorial(i);}
return iTem;
}

在python开发代码调用en.js文件中的'result'函数，传入参数执行。 

import execjs 
#执行本地的js
def get_js():
    f = open(r"en.js", 'r', encoding='UTF-8')
    line = f.readline()
    htmlstr = ''
    while line:
        htmlstr = htmlstr + line
        line = f.readline()
    return htmlstr

jsstr = get_js()
ctx = execjs.compile(jsstr)
print(ctx.call('result','5'))
854 ° 来自：PC 广东省深圳市
上一篇： 没有了
下一篇： zigbee 蓝牙 wifi三者有什么区别

亲，沙发正空着，还不快来抢？

随机图文
互动信息
最近热门话题

    分享按钮
联系频道
    本博由 熊海博客 Version 1.5 驱动

任何意见或建议可以通过以下方式与我联系：
邮箱：105802486@qq.com QQ：105802486
电话：15766084378 本站内容均来自网络或网友投稿，如有侵权请联系管理员，我们会第一时间为您处理或者删除侵权内容！谢谢您的合作！
         
留言频道
文章频道
图文频道
© 2015 生活奇事网[ SHQSW V1.5 ]
百度地图 - 粤ICP备15065860号-1
Back to Top