基于cypress框架跨操作系统实现自动化网页模拟操作的
方法
技术领域
背景技术
[0002] JavaScript是一种动态、基于
原型的软件开发语言。JavaScript的解释器引擎，是所有浏览器中必备的一部分。JavaScript在互联网时代，是一种B/S结构软件的必备语言。一个没有JavaScript的Web应用开发是不完整的。掌握JavaScript是每一个前端开发人员的必备技能。因此，JavaScript有广大的群众
基础。
[0003] Node.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言等同级别的技术栈。
[0004] 自动化网页模拟操作：在现在的Web应用中，从研发或者测试实际工作来说，总会出现一些让工程师重复性完成操作。人工操作重复次数多，会有操作失误的
风险。
[0005] 自动化网页模拟操作要解决两大问题：
定位网页元素、模拟
键盘鼠标操作。以往的技术解决方案，需要使用Selenium工具框架。Selenium存在以下问题：
[0006] ①、Selenium存在自身新老版本不兼容，的问题：Selenium2与Selenium3存在不兼容情况；
[0007] ②、Selenium必须搭配开发语言，如：JAVA、Python、C#等，导致代码通用性差；
[0008] ③、Selenium版本与浏览器版本紧耦合，经常会有浏览器自动升级，但是Selenium没有升级，导致原有自动化方案无法执行的窘境。
[0009] 综上所述，如何实现一个通用性强，不依赖额外框架及语言，前端技术人员不需要额外学习就可以掌握的网页元素定位及模拟键盘鼠标操作方法是目前
现有技术继续解决的问题。
发明内容
[0010] 本发明的技术任务是提供一种基于cypress框架跨操作系统实现自动化网页模拟操作的方法，来解决如何实现一个通用性强，不依赖额外框架及语言，前端技术人员不需要额外学习就可以掌握的网页元素定位及模拟键盘鼠标操作方法的问题。
[0011] 本发明的技术任务是按以下方式实现的，基于cypress框架跨操作系统实现自动化网页模拟操作的方法，该方法步骤如下：
[0012] S1、判断是否有Node.js：
[0013] 若是，则执行步骤S2；
[0014] S2、安装cypress；
[0015] S3、判断cypress是否安装成功：
[0016] ①、若是，则执行步骤S3；
[0017] ②、若否，则跳转至步骤S2；
[0018] S3、创建项目目录；
[0019] S4、创建.spec.js程序；
[0020] S5、根据cypress编写JavaScript程序；
[0022] S7、模拟鼠标事件；
[0023] S8、实现键盘事件模拟；
[0024] S9、判断定位网页元素及模拟鼠标键盘事件是否符合预期：
[0025] ①、若是，则执行步骤S10；
[0026] ②、若否，则跳转至步骤S6；
[0027] S10、结束。
[0028] 作为优选，所述步骤S2中安装cypress直接执行npm install cypress–save-dev命令自动完成。
[0029] 更优地，所述步骤S2中安装cypress的环境包括Windows操作环境和非Windows操作系统；
[0030] 当安装cypress的环境为Windows操作环境时，默认会在Windows用户主目录下的node_modules目录的.bin目录下创建cypress命令；
[0031] 当安装cypress的环境为非Windows操作系统，则会在用户主目录下生成node_modulee/bin目录，并创建cypress可执行文件。
[0032] 作为优选，所述步骤S3中创建项目目录的具体步骤如下：
[0033] S301、创建一个新目录；
[0034] S302、切换到该新目录，并执行npx cypress open的命令；
[0035] S303、Cypress会打开一个对话框，该对话框是一个使用范例，教用户如何编写测试
用例的；
[0036] S304、选好浏览器，点击“run all”，一系列示例测试用例开始执行了；其中，每个.js文件就是一个测试用例；
[0037] S305、执行过程，看到具体动作和对应的测试用例代码；
[0038] S306、运行正常，说明cypress安装并且自动配置成功。
[0039] 作为优选，所述步骤S6中模拟访问网址时cypress定位DOM元素处理并使用cypress的contains()、get()函数去进行网页上文字定位和CSS定位。
[0040] 作为优选，所述步骤S7中模拟鼠标事件时cypress执行鼠标操作并使用cypress的click()、dbclick()；鼠标事件包括鼠标单击和双击事件。
[0041] 更优地，所述步骤S7中模拟鼠标事件的具体步骤如下：
[0042] S701、在项目目录中创建一个新目录，并在新目录中新建一个js文件；
[0043] S702、第一个自动化模拟脚本命名为“My First Test”，具体编写cypress的JavaScript文件内容；
[0044] S703、鼠标点击超链接，跳转到新网页，并验证是否是目标网页；
[0045] S704、启动cypress，能够看到刚创建的文件sample.spec.js；
[0046] S705、点击“run all specs”，cypress启动模拟事件。
[0047] 更优地，所述步骤S703中验证是否是目标网页具体如下：
[0048] Visit(“https://example.cypress.io”)，打开浏览器，访问“https://example.cypress.io”这个网址；
[0049] cy.contains('type')，浏览器打开网页后，定位到页面上的“type”这个超文本链接；
[0050] cy.contains('type').click()，点击刚才定位到的超链接；
[0051] cy.url().should('include','/commands/actions')，点击了超文本链接，浏览器会跳转到新网页，判断目标网页是否有包含“/commands/actions”元素，如果如预期所料，则是本次模拟成功。
[0052] 作为优选，所述步骤S8中实现键盘事件模拟时cypress执行
键盘输入操作，并使用type()函数。
[0053] 本发明的基于cypress框架跨操作系统实现自动化网页模拟操作的方法具有以下优点：
[0054] (一)本发明采取Cypress框架，使用单一的JavaScript语言实现近似人类语言对网页进行自动化键盘、鼠标操作的过程，符合国际惯例和IT业界一贯标准；
[0055] (二)Cypress描述网页自动化执行时，不论是定位DOM元素或者模拟键盘、鼠标操作，均使用类似人类自然语言的形式，有高中英语
水平的人，均可以轻松掌握，不需要特别学习语法，易被接受；
[0056] (三)Cypress框架不会出现前后不兼容问题，并且编写的自动化操作方案可以不用任何
修改，就可以跨平台应用到Windows、Linux、MacOS操作系统上，减少了维护成本；
[0057] (四)本发明使用Cypress框架，可以有效避免Selenium自动化框架的技术垄断；
[0058] (五)本发明使用开源的Cypress框架，用户可以自行修改、封装；
[0059] (六)Cypress是一个完全开放源代码的JavaScript框架。使用纯JavaScript语言，用类似自然语言的方式描述需要完成的业务逻辑。可以100％完成定位网页元素以及模拟键盘鼠标事件的；Cypress基于Node.JS，可以在Windows、Linux、MacOS等常见操作系统上直接运行；基于Cypress的自动化模拟方案，可以不修改代码直接切换操作系统平台运行；使用者只需要掌握JavaScript，就可以完成，而JavaScript拥有众多的使用者，因而，具有很好的推广使用价值；
[0060] (七)本发明实现一个通用性强，不依赖额外框架、语言，前端技术人员不需要额外学习就可以掌握的方法；不论网页元素定位抑或模拟键盘鼠标操作，编写代码过程更贴近人类自然语言；使用本发明的人员可以把精
力更多地放在业务实现上，而不必关注琐碎技术细节，编写完成的代码可以不经修改直接运行在Windows、Linux、MacOS操作系统上。
附图说明
[0061] 下面结合附图对本发明进一步说明。
[0062] 附图1为基于cypress框架跨操作系统实现自动化网页模拟操作的方法的流程
框图；
[0063] 附图2为Windows操作系统安装Cypress过程的截屏示意图；
[0064] 附图3为Cypress打开的对话框的截屏示意图；
[0065] 附图4为示例测试用例开始执行的截屏示意图；
[0066] 附图5为启动cypress的截屏示意图；
[0067] 附图6为cypress启动模拟事件的截屏示意图；
[0068] 附图7为Cypress直接运行结果的截屏示意图；
[0069] 附图8为Cypress自动化操作网页，并执行鼠标事件效果的截屏示意图；
[0070] 附图9为Cypress自动化操作网页，并执行键盘事件效果的截屏示意图。
具体实施方式
[0071] 参照
说明书附图和具体
实施例对本发明的基于cypress框架跨操作系统实现自动化网页模拟操作的方法作以下详细地说明。
[0072] 实施例1：
[0073] 如附图1所示，本发明的基于cypress框架跨操作系统实现自动化网页模拟操作的方法,基于cypress框架跨操作系统实现自动化网页模拟操作的方法，其特征在于，该方法步骤如下：
[0074] S1、判断是否有Node.js：
[0075] 若是，则执行步骤S2；
[0076] S2、安装cypress；安装cypress直接执行npm install cypress–save-dev命令自动完成。安装cypress的环境包括Windows操作环境和非Windows操作系统；
[0077] 当安装cypress的环境为Windows操作环境时，默认会在Windows用户主目录下的node_modules目录的.bin目录下创建cypress命令；
[0078] 当安装cypress的环境为非Windows操作系统，则会在用户主目录下生成node_modulee/bin目录，并创建cypress可执行文件。
[0079] S3、判断cypress是否安装成功：
[0080] ①、若是，则执行步骤S3；
[0081] ②、若否，则跳转至步骤S2；
[0082] S3、创建项目目录；具体步骤如下：
[0083] S301、创建一个新目录；
[0084] S302、切换到该新目录，并执行npx cypress open的命令；
[0085] S303、Cypress会打开一个对话框，该对话框是一个使用范例，教用户如何编写测试用例的；
[0086] S304、选好浏览器，点击“run all”，一系列示例测试用例开始执行了；其中，每个.js文件就是一个测试用例；
[0087] S305、执行过程，看到具体动作和对应的测试用例代码；
[0088] S306、运行正常，说明cypress安装并且自动配置成功。
[0089] S4、创建.spec.js程序；
[0090] S5、根据cypress编写JavaScript程序；
[0091] S6、模拟访问网址；模拟访问网址时cypress定位DOM元素处理并使用cypress的contains()、get()函数去进行网页上文字定位和CSS定位。
[0092] S7、模拟鼠标事件；模拟鼠标事件时cypress执行鼠标操作并使用cypress的click()、dbclick()；鼠标事件包括鼠标单击和双击事件。具体步骤如下：
[0093] S701、在项目目录中创建一个新目录，并在新目录中新建一个js文件；
[0094] S702、第一个自动化模拟脚本命名为“My First Test”，具体编写cypress的JavaScript文件内容；
[0095] S703、鼠标点击超链接，跳转到新网页，并验证是否是目标网页；验证是否是目标网页具体如下：
[0096] Visit(“https://example.cypress.io”)，打开浏览器，访问“https://example.cypress.io”这个网址；
[0097] cy.contains('type')，浏览器打开网页后，定位到页面上的“type”这个超文本链接；
[0098] cy.contains('type').click()，点击刚才定位到的超链接；
[0099] cy.url().should('include','/commands/actions')，点击了超文本链接，浏览器会跳转到新网页，判断目标网页是否有包含“/commands/actions”元素，如果如预期所料，则是本次模拟成功。
[0100] S704、启动cypress，能够看到刚创建的文件sample.spec.js；
[0101] S705、点击“run all specs”，cypress启动模拟事件。
[0102] S8、实现键盘事件模拟；实现键盘事件模拟时cypress执行键盘输入操作，并使用type()函数。
[0103] S9、判断定位网页元素及模拟鼠标键盘事件是否符合预期：
[0104] ①、若是，则执行步骤S10；
[0105] ②、若否，则跳转至步骤S6；
[0106] S10、结束。
[0107] 实施例2：
[0108] (1)、环境准备：
[0109] 首先，配置好Node.JS环境，并确认计算机里安装了Chrome浏览器。
[0110] 其次，安装Cypress。直接运行如下命令，一切依赖关系将会自动完成：
[0111] npm install cypress–save-dev。
[0112] Windows操作系统安装过程如附图2所示，出现类似上面的内容，如：“+cypress@X.X.X”以及后面的added XXX packages from YY contributors…found 0vulnerabilities；说明安装成功。
[0113] 其它操作系统也需要在命令行模式中运行命令，执行安装。过程与上面一致。
[0114] (2)、环境检查：
[0115] 创建一个新目录，例如：c:\workspaces\webproject\。
[0116] 切换到该目录，运行如下命令：npx cypress open
[0117] Cypress会打开一个对话框，如附图3所示，这个对话框是一个使用范例，教用户如何编写测试用例的。
[0118] 选好浏览器，点击“run all”，一系列示例测试用例开始执行了。每个.js文件就是一个测试用例，如附图4所示；
[0119] 执行过程，可以看到具体动作和对应的测试用例代码。
[0120] 运行正常，说明cypress安装并且自动配置成功。
[0121] 不论Windows、Linux或MacOS，验证方式和效果无差别。
[0122] (3)、模拟鼠标事件
[0123] 网页鼠标事件，通常是鼠标单击和双击事件。
[0124] 使用cypress框架，用接近人类语言去自动化操作网页，模拟鼠标事件的具体过程，如下：
[0125] 在项目目录中创建一个新目录，例如：cypress\integration，在此目录中新建一个js文件，比如：sample.spec.js。
[0126] 第一个自动化模拟脚本命名为“My First Test”，具体编写cypress的JavaScript文件内容，如下：
[0127]
[0128] 以上操作需要模拟网页端鼠标事件的是：
[0129] 鼠标点击超链接，跳转到新网页，验证是否是目标网页的一系列动作[0130] 具体解释如下：
[0131] Visit(“https://example.cypress.io”)，打开浏览器，访问“https://example.cypress.io”这个网址；
[0132] cy.contains('type')，浏览器打开网页后，定位到页面上的“type”这个超文本链接；
[0133] cy.contains('type').click()，点击刚才定位到的超链接；
[0134] cy.url().should('include','/commands/actions')，点击了超文本链接，浏览器会跳转到新网页，判断目标网页是否有包含“/commands/actions”元素，如果如预期所料，则是本次模拟成功。
[0135] 以上操作，基本都是自然语言描述，高中学历水平可以无障碍阅读并参考操作。
[0136] 启动cypress，可以看到多了一行，就是我们刚创建的文件sample.spec.js，如附图5所示；
[0137] 点击“run all specs”，cypress启动模拟事件，如附图6所示，附图6中左侧显示的是实际模拟浏览器访问和鼠标单击操作的各个步骤，右侧则显示出了供参考的代码。
[0138] 因为Cypress本身是跨平台的，因此编写的JavaScript代码，不论Windows、Linux或MacOS均可以无需修改执行。
[0139] (4)、实现键盘事件模拟：
[0140] 网页端键盘事件一般是输入一系列文字、数字等字符串，或者删除之前写入的文字、字符串。
[0141] 使用cypress，类似自然语言的方式模拟键盘事件，如下：
[0142] 在上面例子里，输入一个Email地址的cypress操作代码如下：
[0143]
[0144] 其中，cy.get('.action-email')，另一种定位方式，使用W3C组织定义的CSS定位方式，找到DOM元素里包含“.action-email”的CSS属性的那个元素；
[0145] .type('fake@email.com')，直接输入(type)一个Email地址：fake@email.com；
[0146] .should('have.value','fake@email.com')，判断输入的Email地址是否是fake@email.com。
[0147] Cypress直接运行，结果如附图7所示。
[0148] (5)、结果展示：
[0149] Cypress自动化操作网页，并执行鼠标事件效果如附图8所示。
[0150] Cypress自动化操作网页，并执行键盘事件效果如附图9所示。
[0151] (5)、完整的近似自然语言自动化操作网页源代码如下：
[0152] 完整的近似自然语言自动化操作网页，以example.cypress.io为例：
[0153]
[0154] 最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
