cypress初识--看完就可以写一个简单web自动化脚本了！

一、运行cypress
1、如果你还没有安装cypress的运行环境，请参考另一篇文章
《cypress环境安装及过程问题总结》
https://blog.csdn.net/summer_learn/article/details/104207462?spm=1001.2014.3001.5501
2、打开cmd,进入cypress的安装目录后，运行npx cypress open

c:\Users\admin>cd c:\Users\admin\cypress

c:\Users\admin\cypress>npx cypress open

3、运行pycharm编辑器，加载cypress的脚本目录
因为cypress中的脚本是js语言，我们可以使用pycharm编辑器，或者visiual studio code编辑器。根据自己情况选择，下面是以pycharm为例进行步骤讲解。

这时打开cypress的运行界面，就可以看到在cypress下面新建的目录文件已经同步到cypress上，也就是说，我们新建的脚本保存后，就可以实时同步到cypress上，在cypress中双击脚本，就可以自动运行。

二、了解cypress常用的语法
1、在cypress的图形界面Help-Documentation打开帮助文档
或者直接浏览器输入地址打开帮助文档https://on.cypress.io/

2、我们在编辑器的cy_test文件夹下，创建一个baidu_test的js文件

3、打开cypress图形界面，看到新建的文件已经被检测到了，只是文件内容还是空的。
这时可以尝试点击cypress脚本，就可以看到自动运行并打开了浏览器！
这也是比selenium好的一点，就是cypress不用添加任何webdriver驱动器，就可以打开浏览器，而selenium则需要先添加驱动器，并在对应浏览器安装插件后才可以使用selenium打开对应浏览器。


Cypress 会自动检测你可用的浏览器，建议把 Chrome 设置为默认浏览器，或者你也可以运行 Cypress 的时候手动指定cypress run --browser chrome。

4、基本命令介绍
.get()-找到元素
.clear()-清除输入或文本区域的值。
.type()-输入文本内容
.contains()-按文本内容查询
// eg:Find an element within ‘.main’ containing the text ‘New Post’
cy.get(’.main’).contains(‘New Post’)

.click()-默认左键单击按钮
.should-断言
.check()-勾选复选框
.uncheck()-取消复选框
.blur()-使重点突出的DOM元素变得模糊。
.focus()-专注于DOM元素。
.select()-选择一个在.
.dblclick()-双击DOM元素。
.rightclick()-右击DOM元素。

更多命令可以在cypress的官网API内容中进行学习

5、脚本结构介绍
cypress给我们提供了很多样例脚本，大家可以多看一下样例脚本学习里面命令的使用方法。
下面是一个网上其他大佬分享的百度访问的脚本和脚本结构解释。

/// <reference types="Cypress" />

describe('百毒网站首页测试用例集', function() {
    beforeEach(() => {
          cy.visit('https://www.baidu.com')
        })
      it('百度一下按钮文本检查', function() {
        cy.get("#su").then($button_start_search=>{
            expect($button_start_search.attr("value")).to.eq("百度一下");
        })
      })
    })

代码解释：

reference表示告诉 VSCode 要去Cypress package 里找相关的语义解析，这样一来 Cypress 相关的语法和函数等就可以尽情地使用了；
describe声明了一个测试用例集；
beforeEach相当于单元测试的setup，即在每个测试用例运行前需要做的事；
it声明了一个测试用例；
cy.get接受一个 js selector， 就是元素定位字符串，当然 Cypress 也支持 xpath 定位；
通过then或should，我们可以把get到的元素对象传递到下一步，以便做进一步处理，这里通过then把找到的button_start_search传递到下一步，并最终通过expect函数来判断button_start_search的value属性是否跟预期一致。
所以，去除一些我们预期想要写的内容，一个完整的cypress的脚本可以简化成以下结构：

/// <reference types="Cypress" />

describe('tests name', function() {
    beforeEach(() => {
          cy.visit('web address')
        })
      it('一个用例名称', function() {
        cy.get("定位元素").then()
      })
    })

备注：查看定位元素的方法，是通过手动打开网站后，F12->点击工具栏的鼠标->移动到你需要定位的地方->找到它对应的元素

三、编写一个简单的cypress脚本
我们尝试编写一个脚本，即通过百度网站搜索关于cypress的内容并断言网址中包含所查询的内容，根据上面的脚本结构以及基本命令介绍，可以自己动手尝试一下编写。

/// <reference types="Cypress" />

describe('通过百度查找网页内容', function() {
    beforeEach(() => {
          cy.visit('www.baidu.com')
        })
      it('百度cypress的内容', function() {
          cy.get("#kw").type('cypress')
          cy.get("#su").click()
          //断言网页地址内容包含cypress
          cy.url().should("include",'cypress')
      })
    })

保存后执行结果如下

可以看到执行结果通过，总用时5.51秒。执行过程中有一些红色的执行过程记录可以不用管，只要最终结果是执行通过的就可以了。这个红色的并不是报错，而是在执行过程中的一些未完成动作的快照记录，可以鼠标悬停到执行过程的每一步去观察一下。

如果这个内容对你有用，记得关注我哦，互相分享学习测试技能。