参考ブログ： https://testerhome.com/articles/19035
最も最近の期間は、ヒノキのテストツールを研究し、彼女はウェブテストツールをエンドツーエンドです。
環境の準備
1.ツール：コード対;環境：node.js.
インストールするには、オンラインチュートリアルによります。
2.ヒノキをインストール
cd /your/project/path
npm install cypress --save-dev
3.プラグインをインストールします。
npm install eslint-plugin-cypress --save-dev
npm install --save-dev eslint-plugin-chai-friendly
## 4設定：
ルートディレクトリにpackage.jsonを作成します：
{
"scripts": {
"cypress:open": "cypress open"
},
"devDependencies": {
"eslint-plugin-chai-friendly": "^0.4.1",
"eslint-plugin-cypress": "^2.2.1"
}
}
//私のプロジェクト/ヒノキ/ディレクトリの下に.eslintrc.json作成：
{
"plugins": [
"cypress",
"chai-friendly"
],
"rules": {
"no-unused-expressions": 0,
"chai-friendly/no-unused-expressions": 2
},
"env": {
"cypress/globals": true
},
"extends": [
"plugin:cypress/recommended"
]
}
5.コマンドを起動します。
npm run cypress:open
こんにちは世界：
新しいあなたのプロジェクト/ヒノキ/ intgrationディレクトリをサンプルは、spec.js
describe('My first test case for cypress',function(){
it('Does not match!',function(){
expect(true).to.equal(true)
})
})
現在のユースケースを実行ヒノキウィンドウをクリックします：
ユースケースの作成には、あなたが保存するたびに自動的にデバッグ用のテストをトリガすることはより便利であることに注意してください。
最初のユースケース
ホームとアクセスBaiduの検索testerhome：
describe('My first test case for cypress',function(){
it('visit baidu home page and search for testerhome:',function(){
cy.visit('http://www.baidu.com') //访问url
cy.title().should('contain','百度一下，你就知道') //验证页面 title 是否正确
cy.get('#kw') //根据 css 定位搜索输入框
.type('testerhome') //输入关键字
.should('have.value','testerhome') //验证关键字自动是否展示正确
cy.get('#su').click() //根据 css 定位搜索按钮并点击
cy.url().should('include','wd=testerhome') //验证目标url 是否正确包含关键字
cy.title().should('contain','testerhome_百度搜索') //验证页面 title 是否正确
cy.get('[id="1"]')
.should('contain','TesterHome') // 验证第一个结果中是否包含TesterHome
cy.screenshot()
})
})
スクリーンショットは、生成されました：
あなたが実行中のプロセスの各ステップを記録することができ、その後、あなたはページ（実ページではなく、絵を）見ることができ、むしろ特殊なスナップショット機能があります
要素をターゲット
- 取得：CSS方式の属性または要素の特定の標的要素
- 含まれています。特定の文字列に要素を配置します
リクエスト要求のログインを使用します
ヒノキは直接ログインを要求し、UIを呼び出すことはありません、各ユースケースにログインするためのステップをお勧めします。次に例を示します。
describe('My first test case for cypress',function(){
it('login as admin without UI:',function(){
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes['admin'] // 使用 admin 账号登录（跳过 UI 的登录）
})
cy.visit('/profile')
cy.url().should('include','profile') //验证目标url 是否正确
cy.get('#headerTitle')
.should('have.text','个人信息') // 验证是否包含标题 个人信息，
})
})
パブリックメソッドとして抽出法をログに記録
Cypress.Commands.add('login', (userType, options = {}) => {
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes[userType] // 使用 admin 账号登录
})
})
describe('login with different account',function(){
beforeEach(function() {
cy.login('admin')
cy.visit('/')
})
it('进入商品列表页面',function(){
cy.contains('商品列表').click()
cy.get('#headerTitle')
.should('have.text','商品列表') // 验证是否包含标题 商品列表
})
it('进入订单列表页面',function(){
cy.contains('订单列表').click()
cy.get('#headerTitle')
.should('have.text','订单列表') // 验证是否包含标题 订单列表
})
})
すべてのユースケースコマンドライン
npm run cypress:run
特定の動作パラメータは、package.jsonに配置することができます。
"scripts": {
"cypress:run": "cypress run --browser chrome"
}
クロスドメインクロムの下での問題を解決します：
cypress.jsonに追加しました：
"chromeWebSecurity": false
レポートはJUnitの-魅力を生成しました
cypress.jsonに追加依存：
"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/my-test-output[hash].xml", // 通过hash 标签区分不同文件的用例结果
"toConsole": true
}
実行ヒノキの実行は、自動的にXMLファイルを生成すると
魅力を使用して対応するレポートを生成します。
// 生成allure 报告
allure generate results --clean
// 打开报告
allure open allure-report
かっこいいレポートモカを生成
安装对应模块：
注意： mocha 必须指定 5.2.0， 否则会报错
npm install --save-dev mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
配置cypress 对应报告信息 cypress.json：
"reporter": "mochawesome",
"reporterOptions": {
"overwrite": false,
"html": false,
"json": true
},
编写执行测试和生成报告的脚本：
scripts\cypress.js
const cypress = require('cypress')
const fse = require('fs-extra')
const { merge } = require('mochawesome-merge')
const generator = require('mochawesome-report-generator')
async function runTests() {
await fse.remove('mochawesome-report')
const { totalFailed } = await cypress.run()
const jsonReport = await merge()
await generator.create(jsonReport)
process.exit(totalFailed)
}
runTests()
在 package.json 文件添加对应启动脚本：
"scripts": {
"cypress:open": "cypress open",
"cy:run": "node scripts/cypress.js"
}
启动执行：
npm run cy:run
查看报告：
mochawesome-report\mochawesome.html
