【Cypress】尝试写第一个demo来入门

1. 创建一个demo_spec.js文件

在Cypress/cypress/integration目录下创建一个新文件demo_spec.js。

touch ../cypress/integration/demo_spec.js

创建完，我们可以看到在Cypress Test Runner的Integration Tests列表显示了该文件。

2. 单击demo_spec.js文件执行

点击上面的demo_spec.js文件试一下，可以看到cypress帮我们启动了浏览器。
左边“找不到任何测试”的报错信息可以忽略，因为我们确实还没有添加任何测试用例进去。

3. 写一条case看看效果

在上面的demo_spec.js中添加以下代码来体验一下（内容是抄官网的）。

describe('My First Test', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(true)
  })
})

执行一下，在浏览器左侧可以直观的看到测试套件，测试case和一条通过的断言。

cypress是实时执行test case的，我们把expect(true).to.equal(true)改成expect(true).to.equal(false)试试，可以看到浏览器里的测试结果马上变成了false。

4. 写一个真实的测试

1. 使用**cy.visit()**来访问一个网页

   describe('My First Test', function() {
   	it('visit ke.youdao.com', function() {
   	  cy.visit('https://ke.youdao.com')
     })
   })
   

可以看到我们想要访问的页面已经加载到了浏览器右侧的预览部分。

2. 使用**cy.contains()**根据内容查找元素

   describe('My First Test', function() {
    it('找到 "同意"', function() {
      cy.visit('https://ke.youdao.com')
      cy.contains('同意')
      cy.contains('拒绝')
    })
   })
   

cy.contains()是根据内容去查找的，找不到的会报错

3. 使用**.click()**点击一个元素

   describe('测试有道精品课', function() {
     it('找到 "APP下载"', function() {
       cy.visit('https://ke.youdao.com')
       cy.contains('APP下载').click()
     })
   })
   

4. 使用**.should()**进行断言

   describe('测试有道精品课', function() {
     it('找到 "APP下载"点击，跳转到新的页面', function() {
       cy.visit('https://ke.youdao.com')
       cy.contains('APP下载').click()
       cy.url().should('include','/download')
     })
   })
   

5. 使用cy.get()选择基于CSS类的元素，使用.type()在选中的输入框中输入文本

   //测试套件
   describe('测试有道精品课', function() {
     //细化的case
     it('找到 "APP下载"点击，跳转到新的页面', function() {
       //访问指定url
       cy.visit('https://ke.youdao.com')
       //通过内容找到元素并点击
       cy.contains('APP下载').click()
       //添加断言
       cy.url().should('include','/download')
       //通过css定位到元素输入内容并验证输入的内容无误
       cy.get('._3l-Kp').type('英语').should('have.value','英语')
     })
   })