自动化测试,让你上班拥有一杯咖啡的时间 | Day 3 - 开始写第一个测试

此系列文章会同步发文到个人部落格,有兴趣的读者可以前往观看喔。

今天要带大家完成第一个测试脚本,这次要用铁人赛的网站测试登入。在开始写测试脚本前,先规划要测试的情境,情境建议设计简短,把每个情境都当成一个小小的测试用例去写,方便未来找 Bug。

测试用例

测试用例是依照需求去规划测试的情境,可以用以下表格辅助使用。将测试用例写好後,就能开始转成程序码,写成自动化测试脚本。

测试用例

范例一

以登入为例,以下为正确登入的步骤:

  1. 进到铁人赛的登入页
  2. 输入正确的帐号
  3. 输入正确的密码
  4. 点选登入按钮
  5. 成功登入後,可以看到帐号
  6. 点选登出按钮

在 cypress/integration 资料夹写测试脚本:

describe('测试铁人赛登入', function() {
  it('输入正确帐密後应该要可以登入', function() {
    cy.visit('https://member.ithome.com.tw/login') //到登入页
    cy.get('#account').type("account"); //输入帐号 
    cy.get('#password').type("password"); //输入密码
    cy.get('.btn-agree').click({force: true,}); //点选登入
    cy.get(".account-fontsize").contains("jennifershih").should("be.visible"); //要有帐号
    cy.get('li > a').contains("登出").click({force: true,}); //点选登出
  })
})

范例二

以登入为例,以下为错误登入的步骤:

  1. 进到铁人赛的登入页
  2. 输入错误的帐号和密码
  3. 点选登入按钮
  4. 应该要出现提示“登入失败!请检查帐号密码是否正确。”
  5. 应该不可以登入

在 cypress/integration 资料夹写测试脚本:

describe('测试铁人赛登入', function() {
  it('输入错误帐密後应该不可以登入', function() {
    cy.visit('https://member.ithome.com.tw/login') //到登入页
    cy.get('#account').type("account"); //输入帐号
    cy.get('#password').type("password"); //输入密码
    cy.get('.btn-agree').click({force: true,}); //点选登入
	cy.get(".bs-callout-danger").contains("登入失败!请检查帐号密码是否正确。").should("be.visible"); //要有错误讯息 
  })
})

写完测试脚本後,到 package.json 档设定脚本的指令。

Cypress 设置

打开脚本

  1. 在 package.json 档案定义打开脚本的方式

    "scripts": {
      "cypress:open": "cypress open"
    }
    
  2. 在命令列输入 npm run cypress:open 打开脚本,就可以启用 Cypress 介面了
    https://ithelp.ithome.com.tw/upload/images/20210916/20140883O2RslCdHfZ.png
    https://ithelp.ithome.com.tw/upload/images/20210916/20140883qv1L9mUSfZ.png

启动脚本

  1. 在 package.json 档案定义启动脚本的方式
    "scripts": {
      "cypress:run": "cypress run"
    },
    
  2. 在命令列输入 npm run cypress:run 就可以执行 Cypress 脚本了
    https://ithelp.ithome.com.tw/upload/images/20210916/20140883Do4eC21sNw.png

大家可以尝试写人生第一个测试,那我们下一篇见啦!


<<:  Golang快速入门(Day4)

>>:  Golang快速入门-2(Day5)

6. Prototypal inheritance 的运作原理

(这篇会延续Constructor Function的内容,来解释 Prototype 和 Prot...

新新新手阅读 Angular 文件 - Day04

学习目标 这篇内容是纪录阅读官方文件Display a selection list,文章主要内容是...

[C 语言笔记--Day20] 解题纪录 10190 Divide, But Not Quite Conquer!

题目连结 程序码: #include <iostream> using namespac...

[资料库] 学习笔记 - CTE 、时间函数 、 群组

这次解的题目是计算当月的每周平均工时,要以CTE的方式查询 详细的题目是从这篇文章延伸出来的,其他延...

javascript函式的变形1

我们稍微改写一下之前所写的加法函式 ...