Codecept實(shí)現(xiàn)前端自動(dòng)化測試
前言
CodeceptJS是一款UI測試自動(dòng)框架，它結(jié)合了很多市面常見的UI測試自動(dòng)化框架，
封裝了大量的API，使得我們編寫自動(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用來存放自動(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)成測試用例執(zhí)行，也可以自己定義成其他的。(操作完成直接
#回車)
#設(shè)置好測試用例后，選擇如下圖的一種腳本選擇作為自動(dòng)化腳本的工具，這里選擇
#Pupeteer、可以使用上下按鈕切換。(操作完成直接回車)
#緊接著會(huì)提示讓選擇日志、屏幕截圖和報(bào)告存放的目錄，這里選擇默認(rèn)，也可以根
#據(jù)需要自定義(操作完成直接回車)
#然后出現(xiàn)選擇執(zhí)行過程日志的語言類型、這里選擇zh-CN(中文簡體)
#接下來輸入需要測試網(wǎng)址、輸入我們需要測試的網(wǎng)址https://***.com
#選擇是否打開瀏覽器、這個(gè)是設(shè)置我們的瀏覽器是正常模式還是無頭模式
#然后設(shè)置瀏覽器大小、這個(gè)根據(jù)自己需要設(shè)置
#這個(gè)主要是用來說明我們要測試的功能，也就是測試用例的標(biāo)題，可以隨便起個(gè)
#名字，我寫的logintest
#最后新建測試用例,這里就是測試用例的文件名，默認(rèn)是Feature的名字加上之前
#設(shè)置的_test.js。然后新建就成功了
5. 編寫自動(dòng)化腳本
Feature('logintest');
// 定義變量
const SELECTORS = {
gotourl: 'https://gitee.com/login',
account: '',
pwds: '.',
// 開源軟件的selector
kyrj: '#git-header-nav > div > div > a:nth-child(4)',
};
Scenario('test something', ({ I }) => {
//在瀏覽器打開頁面
//對(duì)應(yīng)網(wǎng)址在Windows下可以不與codecept.conf.js中Puppeteer設(shè)定的url一致，mac下相反
I.amOnPage(SELECTORS.gotourl);
//打開瀏覽器等到可以看到對(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)碼云開源軟件頁
I.click(SELECTORS.kyrj);
//能夠暫停執(zhí)行進(jìn)入交互模式 也就是執(zhí)行完成會(huì)停留當(dāng)前頁面
pause();
});
6. 執(zhí)行腳本
#使用cmd命令提示符，進(jìn)入當(dāng)前目錄(即node文件夾下)輸入命令
npx codeceptjs run --steps
7. 在自動(dòng)彈出的瀏覽器中查看自動(dòng)化效果
本次的學(xué)習(xí)到這里就結(jié)束了，會(huì)根據(jù)實(shí)際使用更新文章。
如果對(duì)您有幫助 請(qǐng)點(diǎn)個(gè)關(guān)注，萬分感謝
(QQ招聘群 710566091
微信招聘群 請(qǐng)加圖圖微信)