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'))
994 ° 来自:PC 广东省深圳市
上一篇: 没有了
下一篇: zigbee 蓝牙 wifi三者有什么区别

亲,沙发正空着,还不快来抢?

Back to Top