Codecept實(shí)現(xiàn)前端自動(dòng)化測(cè)試與郵件告警

前言
　　CodeceptJS是一款UI測(cè)試自動(dòng)框架，它結(jié)合了很多市面常見(jiàn)的UI測(cè)試自動(dòng)化框架，
封裝了大量的API，使得我們編寫(xiě)自動(dòng)化腳本非常方便，而且相關(guān)文檔也非常齊全。


Codecept.js官網(wǎng)
https://codecept.io/

需要node環(huán)境支持，可以前往官網(wǎng)根據(jù)自己環(huán)境下載安裝node
https://nodejs.org/en/download/

1. 新建一個(gè)文件夾 node用來(lái)存放自動(dòng)化腳本

2. 初始化npm
npm init -y

3. 安裝環(huán)境
#先切換鏡像為淘寶鏡像
npm config set registry https://registry.npm.taobao.org

#然后安裝Codecept.js
npm install codeceptjs puppeteer --save-dev

4.在當(dāng)前目錄中初始化Codecept.js

npx codeceptjs init

#執(zhí)行初始化Codecept.js命令后，會(huì)出現(xiàn)如下圖一個(gè)提示，這個(gè)提示是設(shè)置名稱是以
#_test.js結(jié)尾的都會(huì)被當(dāng)成測(cè)試用例執(zhí)行，也可以自己定義成其他的。(操作完成直接
#回車)

#設(shè)置好測(cè)試用例后，選擇如下圖的一種腳本選擇作為自動(dòng)化腳本的工具，這里選擇
#Pupeteer、可以使用上下按鈕切換。(操作完成直接回車)

#緊接著會(huì)提示讓選擇日志、屏幕截圖和報(bào)告存放的目錄，這里選擇默認(rèn)，也可以根
#據(jù)需要自定義(操作完成直接回車)

#然后出現(xiàn)選擇執(zhí)行過(guò)程日志的語(yǔ)言類型、這里選擇zh-CN(中文簡(jiǎn)體)

#接下來(lái)輸入需要測(cè)試網(wǎng)址、輸入我們需要測(cè)試的網(wǎng)址https://***.com

#選擇是否打開(kāi)瀏覽器、這個(gè)是設(shè)置我們的瀏覽器是正常模式還是無(wú)頭模式

#然后設(shè)置瀏覽器大小、這個(gè)根據(jù)自己需要設(shè)置

#這個(gè)主要是用來(lái)說(shuō)明我們要測(cè)試的功能，也就是測(cè)試用例的標(biāo)題，可以隨便起個(gè)
#名字，我寫(xiě)的logintest

#最后新建測(cè)試用例,這里就是測(cè)試用例的文件名，默認(rèn)是Feature的名字加上之前
#設(shè)置的_test.js。然后新建就成功了

5. 編寫(xiě)自動(dòng)化腳本

Feature('logintest');
// 定義變量
const SELECTORS = {
   gotourl: 'https://gitee.com/login',
   account: '',
   pwds: '.',
   // 開(kāi)源軟件的selector
   kyrj: '#git-header-nav > div > div > a:nth-child(4)',
};
Scenario('test something', ({ I }) => {
   //在瀏覽器打開(kāi)頁(yè)面
   //對(duì)應(yīng)網(wǎng)址在Windows下可以不與codecept.conf.js中Puppeteer設(shè)定的url一致，mac下相反
    I.amOnPage(SELECTORS.gotourl);
   
   //打開(kāi)瀏覽器等到可以看到對(duì)應(yīng)文字再進(jìn)行登錄
   I.see('登錄');
   
    //輸入碼云賬號(hào)
    I.fillField('手機(jī)／郵箱／個(gè)人空間地址', SELECTORS.account);
   
   //輸入碼云密碼
    I.fillField('請(qǐng)輸入密碼', SELECTORS.pwds)
   
    //點(diǎn)擊登錄按鈕
    I.click({css:'button, [type="submit"]'})
   
   //跳轉(zhuǎn)碼云開(kāi)源軟件頁(yè)
   I.click(SELECTORS.kyrj);
   
   //能夠暫停執(zhí)行進(jìn)入交互模式 也就是執(zhí)行完成會(huì)停留當(dāng)前頁(yè)面
   pause();
});

 

6. 執(zhí)行腳本
#使用cmd命令提示符，進(jìn)入當(dāng)前目錄(即node文件夾下)輸入命令
npx codeceptjs run --steps

 

7. 在自動(dòng)彈出的瀏覽器中查看自動(dòng)化效果

8. 告警郵件
#下載依賴
npm install nodemailer --save

#編寫(xiě)郵件發(fā)送參數(shù)

// 引入依賴
var nodemailer = require("nodemailer")

// 定義發(fā)送郵件參數(shù)
var transport = nodemailer.createTransport({
  //主機(jī)
  host: "smtp.163.com",
  // 是否使用SSL
  secureConnection: true,
  // SMTP端口號(hào)
  port: 465,
  // 發(fā)件人
  auth: {
    // 發(fā)送郵箱
    user: "@163.com",
    // 授權(quán)碼
    pass: "",
  }
})
// 定義收件郵箱參數(shù)
var mailOptions = {
  // 郵件昵稱
  from: "",
  // 收件郵箱
  to: "",
  // 郵件標(biāo)題
  subject: "碼云自動(dòng)化測(cè)試告警郵件",
  // 郵件內(nèi)容
  text: "hello",

}

9. 執(zhí)行失敗進(jìn)行告警(手動(dòng))

#進(jìn)行判斷，如果失敗了就發(fā)送告警郵件

// 點(diǎn)擊登錄按鈕
//I.click({css:'button, [type="submit"]'})
let login = await tryTo(() => I.click({css: 'button, [type="submit"]'}));

//如果失敗
if (!login) {

    // 設(shè)置告警內(nèi)容
    mailOptions.text = "登錄失敗，詳細(xì)信息請(qǐng)查看";
    // 發(fā)送告警郵件
    transport.sendMail(mailOptions, function(err, response) {
        if (err) {
            console.log(err);
        } else {
            console.log(response);
        }
    })
}

// 跳轉(zhuǎn)碼云開(kāi)源軟件頁(yè)
//I.click(SELECTORS.kyrj);
let clickGoTo = await tryTo(() => I.click(SELECTORS.kyrj));
//如果失敗
if (!clickGoTo) {
    // 設(shè)置告警內(nèi)容
    mailOptions.text = "跳轉(zhuǎn)失敗，詳細(xì)信息請(qǐng)查看";
    // 發(fā)送告警郵件
    transport.sendMail(mailOptions, function(err, response) {
        if (err) {
            console.log(err);
        } else {
            console.log(response);
        }
    })

}

//截圖
I.saveScreenshot("logintest.jpg")

10. 執(zhí)行失敗進(jìn)行告警(自動(dòng))

#安裝測(cè)試報(bào)告生成依賴
npm i mocha -D

#安裝測(cè)試報(bào)告依賴
npm i mochawesome

#安裝壓縮依賴
npm install adm-zip

#在codecept.conf.js 主配置類中添加報(bào)告參數(shù)

mocha: {
 reporterOptions: {
   reportDir: "./output/report"
 }
},

#引入監(jiān)聽(tīng)器依賴與zip打包依賴

// 引入監(jiān)聽(tīng)器依賴
const { event } = require('codeceptjs');
// 引入zip打包依賴
var adm_zip = require('adm-zip');

#修改郵件配置支持附件

// 定義收件郵箱參數(shù)
var mailOptions = {
   // 郵件昵稱
   from: "@163.com",
   // 收件郵箱
   to: "@163.com",
   // 郵件標(biāo)題
   subject: "",
   // 郵件內(nèi)容
   text: "hello",
   attachments: [
      {
         filename: "測(cè)試報(bào)告.zip",
         path: "./output/report.zip"
      }
   ]  
}

#配置監(jiān)聽(tīng)器

//監(jiān)聽(tīng)一旦出錯(cuò)，執(zhí)行告警 測(cè)試失敗時(shí)同步
event.dispatcher.on(event.test.failed, (testOrSuite) => {
   //因?yàn)槭鞘⊥綀?zhí)行，所以有可能報(bào)告沒(méi)有生成好，所以睡5秒
   setTimeout(function() {
      //創(chuàng)建zip壓縮包
      var zip = new adm_zip();  
      zip.addLocalFolder('./output/report');  
      zip.writeZip('./output/report.zip');    
      console.log('--- I am before test --');
      console.log(testOrSuite);
      //測(cè)試發(fā)生錯(cuò)誤進(jìn)行郵件告警
      // 設(shè)置告警內(nèi)容
      mailOptions.text = "自動(dòng)執(zhí)行測(cè)試腳本時(shí)發(fā)生錯(cuò)誤，具體錯(cuò)誤報(bào)告請(qǐng)查看附件";
      // 設(shè)置告警標(biāo)題
      mailOptions.subject = testOrSuite.title;
      //發(fā)送郵件告警
      transport.sendMail(mailOptions, function(err, response){
      if(err){
         console.log(err);
      }else{
         console.log(response);
      }
      })
    }, 5000);
});

#輸入啟動(dòng)命令

npx codeceptjs run --reporter mochawesome

#如果執(zhí)行失敗就會(huì)收到對(duì)應(yīng)的告警郵件

#解壓測(cè)試報(bào)告.zip

#打開(kāi)html類型的報(bào)告即可查看詳細(xì)錯(cuò)誤信息

比較基本的前端自動(dòng)化就告一段落了， 后面可以根據(jù)需要深入學(xué)習(xí)下，另外Codecept.js是支持移動(dòng)端自動(dòng)化測(cè)試，與數(shù)據(jù)Moke測(cè)試的，有興趣的小伙伴可以深入了解下，不過(guò)國(guó)內(nèi)相關(guān)博客比較少，建議可以vpn看下墻外的。

本文源碼地址：
https://gitee.com/bigearchart_admin/codecept.git

如果對(duì)您有幫助 請(qǐng)點(diǎn)個(gè)關(guān)注，萬(wàn)分感謝
          

                                (QQ招聘群  710566091
                                 微信招聘群 請(qǐng)加圖圖微信)