Cypress前端E2E自动化测试记录
近期用Cypress作一个新项目的前端E2E自动化测试，对比TestCafe作前端E2E自动化测试，Cypress有一些不同之处，现记录下来。
所有Command都是异步的
Cypress中的所有Command都是异步的，所以编写自动化脚本时要时刻记住这点。比如：
不能从Command中直接返回，而要用 .then() 来处理。下面例子不工作：
const allProductes = cy.get('@allProductes')
正确的应当用
let allProductes = null;
cy.get('@allProductes').then((values) => {
allProductes = values;
}
还有一例，下面代码也不能正常工作，是因为在一个代码块中，所有command都是异步先入队列，只有代码块结束后才会依次执行：
it('is not using aliases correctly', function () {
cy.fixture('users.json').as('users')
// 此处as还没有执行呢，只是入了队列而已
const user = this.users[0]
})
正确的应当仍然是要用 .then() 范式：
cy.fixture('users.json').then((users) => {
const user = users[0]
// passes
cy.get('header').should('contain', user.name)
})
这样的结果就是，测试代码中难免出现很多的回调函数嵌套。
同样，因为Cypress命令是异步的，所以debugger也要在 then() 里调用，不能象下面这样：
it('let me debug like a fiend', function() {
cy.visit('/my/page/path')
cy.get('.selector-in-question')
debugger // Doesn't work
})
// cy.pause()
上下文中的this不能用在箭头函数中
当用Mocha的共享上下文对象机制时， this 不能用在箭头函数，要用传统的函数形式
beforeEach(function () {
cy.fixture('product').as('allProductes');
cy.gotoIndexPage();
})
...
phonePage.actRootSel.forEach((actSel, index) => {
cy.get(actSel + phonePage.btnExchangeSel, {timeout: Cypress.env('timeoutLevel1')}).click();
cy.get(rechargePage.sidebarSel).should('exist');
cy.get(rechargePage.sidebarSel).within(function ($sidebar) {
productName = this.allProductes[index].product;
cy.get(rechargePage.productNameSel).should('have.text', productName);
gameCount = UTILS.randomPhoneNo('1323434');
cy.get(rechargePage.gameCountSel).type(gameCount);
cy.get(rechargePage.btnRechargeSel).should('have.text', '支付 ' + this.allProductes[index].jfValue + ' 积分');
cy.get(rechargePage.btnRechargeSel).click();
});
...
如上所示，在within的回调函数中用了 function ($sidebar) { 这样形式，而不能用箭头函数。为了避免这样的麻烦，可以考虑用 cy.get('@*') 来获取上下文中变量。但那样又要面对异步的问题（注： cy.get 是异步的，而 this.* 是同步的），还得用 then() 来解决问题，有些两难。
Mocha的共享上下文对象会在所有可用的hook和test之间共享。而且每个测试结束后，会自动全部清除。正是因为有这样的上下文共享机制，可以在test和hook之间共享变量或别名，要么用闭包 this.* 形式，要么用 .as(*) 这样的形式，实际上cy.get(@*) 相当于 cy.wrap(this.*)。而且还可以在多层级中共享：
describe('parent', function () {
beforeEach(function () {
cy.wrap('one').as('a')
})
context('child', function () {
beforeEach(function () {
cy.wrap('two').as('b')
})
describe('grandchild', function () {
beforeEach(function () {
cy.wrap('three').as('c')
})
it('can access all aliases as properties', function () {
expect(this.a).to.eq('one') // true
expect(this.b).to.eq('two') // true
expect(this.c).to.eq('three') // true
})
})
})
})
强大的重试机制
Cypress有缺省的重试（re-try）机制，会在执行时进行一些内置的assertion，然后才超时，两种超时缺省值都是4秒：
command操作的timeout
assertion的timeout
Cypress一般只在几个查找DOM元素的命令如 cy.get() 、 find() 、 contains() 上重试，但决不会在一些可能改变应用程序状态的command上重试（比如 click() 等）。但是有些command，比如 eq 就算后面没有紧跟assertion，它也会重试。
你可以修改每个command的timeout值，这个timeout时间会影响到本command和其下联接的所有assertion的超时时间，所以不要在command后面的assertion上人工指定timeout。
cy.get(actSel + phonePage.btnExchangeSel, { timeout: Cypress.env('timeoutLevel1') }).click();
...
cy.location({ timeout: Cypress.env('timeoutLevel2') }).should((loc) => {
expect(loc.toString()).to.eq(Cypress.env('gatewayUrl'));
});
紧接着command的assertion失败后，重试时会重新运行command去查询dom元素然后再次assert，直到超时或成功。多个assertion也一样，每次重试时本次失败的assertion都会把之前成功的assertion顺便再次assert。
.and() 实际上是 .should() 的别名，同样可用于传入callback的方式。
cy.get('.todo-list li') // command
.should('have.length', 2) // assertion
.and(($li) => {
// 2 more assertions
expect($li.get(0).textContent, 'first item').to.equal('todo a')
expect($li.get(1).textContent, 'second item').to.equal('todo B')
})
注意：重试机制只会作用在最后一个command上，解决方法一般有下面两种。
解决方法一 ：仅用一个命令来选择元素
// not recommended
// only the last "its" will be retried
cy.window()
.its('app') // runs once
.its('model') // runs once
.its('todos') // retried
.should('have.length', 2)
// recommended
cy.window()
.its('app.model.todos') // retried
.should('have.length', 2)
顺便提一下，assertion都最好用最长最准确的定位元素方式，要不然偶尔会出现"detached from the DOM"这样的错误，比如：
cy.get('.list')
.contains('li', 'Hello')
.should('be.visible')
这是因为在 cy.get('.list') 时， .list 被当作了subject存了起来，如果中途DOM发生了变化，就会出现上面的错误了。改为：
cy.contains('.list li', 'Hello')
.should('be.visible')
所以，最好用最精确的定位方式，而不要用方法链的形式。cypress定位元素时不但可以用CSS选择器，还可以用JQuery的方式，比如：
// get first element
cy.get('.something').first()
cy.get('.something:first-child')
// get last element
cy.get('.something').last()
cy.get('.something:last-child')
// get second element
cy.get('.something').eq(1)
cy.get('.something:nth-child(2)')
解决方法二 ：在命令后及时再加一个合适的assertion，导致它及时自动重试掉当前元素（即“过程中”元素）
cy
.get('.mobile-nav', { timeout: 10000 })
.should('be.visible')
.and('contain', 'Home')
这样处理后，在判断 .mobile-nav 存在于DOM中、可见、包括Home子串这三种情况下，都会等待最大10秒。
强大的别名机制
用于Fixture
这是最常用的用途，比如：
beforeEach(function () {
// alias the users fixtures
cy.fixture('users.json').as('users')
})
it('utilize users in some way', function () {
// access the users property
const user = this.users[0]
// make sure the header contains the first
// user's name
cy.get('header').should('contain', user.name)
})
数据驱动的自动化测试，就可以考虑用这样的方式读取数据文件。
用于查找DOM
个人很少用这个方式，因为没有带来什么的好处。
// alias all of the tr's found in the table as 'rows'
cy.get('table').find('tr').as('rows')
// Cypress returns the reference to the 's
// which allows us to continue to chain commands
// finding the 1st row.
cy.get('@rows').first().click()
注意：用alias定议dom时，最好一次精确倒位而不要用命令链的方式，当cy.get参照别名元素时，当参照的元素不存在时，Cypress也会再用生成别名的命令再查询一次。但正如所知的，cypress的re-try机制只会在最近yield的subject上才起作用，所以一定要用一次精确倒位的选择元素方式。
cy.get('#nav header .user').as('user') (good)
cy.get('#nav').find('header').find('.user').as('user') (bad)
用于Router
用来设置桩
cy.server()
// we set the response to be the activites.json fixture
cy.route('GET', 'activities/*', 'fixture:activities.json')
cy.server()
cy.fixture('activities.json').as('activitiesJSON')
cy.route('GET', 'activities/*', '@activitiesJSON')
等待xhr的回应
cy.server()
cy.route('activities/*', 'fixture:activities').as('getActivities')
cy.route('messages/*', 'fixture:messages').as('getMessages')
// visit the dashboard, which should make requests that match
// the two routes above
cy.visit('http://localhost:8888/dashboard')
// pass an array of Route Aliases that forces Cypress to wait
// until it sees a response for each request that matches
// each of these aliases
cy.wait(['@getActivities', '@getMessages'])
cy.server()
cy.route({
method: 'POST',
url: '/myApi',
}).as('apiCheck')
cy.visit('/')
cy.wait('@apiCheck').then((xhr) => {
assert.isNotNull(xhr.response.body.data, '1st API call has data')
})
cy.wait('@apiCheck').then((xhr) => {
assert.isNotNull(xhr.response.body.data, '2nd API call has data')
})
断言HXR的回应内容
// 先侦听topay请求
cy.server();
cy.route({
method: 'POST',
url: Cypress.env('prePaymentURI'),
}).as('toPay');
...
// 从topay请求中获取网关单
cy.wait('@toPay').then((xhr) => {
expect(xhr.responseBody).to.have.property('data');
cy.log(xhr.responseBody.data);
let reg = /name="orderno" value="(.*?)"/;
kpoOrderId = xhr.responseBody.data.match(reg)[1];
cy.log(kpoOrderId);
// 自定义命令去成功支付
cy.paySuccess(kpoOrderId);
// 校验订单情况
validateOrderItem(productName, gameCount);
});
...
环境
Cypress的环境相关机制是分层级、优先级的，后面的会覆盖前面的方式。
如果在cypress.json中有一个 env key后，它的值可以用 Cypress.env()获取出来：
// cypress.json
{
"projectId": "128076ed-9868-4e98-9cef-98dd8b705d75",
"env": {
"foo": "bar",
"some": "value"
}
}
Cypress.env() // {foo: 'bar', some: 'value'}
Cypress.env('foo') // 'bar'
如果直接放在cypress.env.json后，会覆盖掉cypress.json中的值。这样可以把cypress.env.json放到 .gitignore 文件中，每个环境都将隔离：
// cypress.env.json
{
"host": "veronica.dev.local",
"api_server": "http://localhost:8888/api/v1/"
}
Cypress.env() // {host: 'veronica.dev.local', api_server: 'http://localhost:8888/api/v1'}
Cypress.env('host') // 'veronica.dev.local'
以 CYPRESS_ 或 cypress_ 打头的环境变量，Cypress会自动处理：
export CYPRESS_HOST=laura.dev.local
export cypress_api_server=http://localhost:8888/api/v1/
Cypress.env() // {HOST: 'laura.dev.local', api_server: 'http://localhost:8888/api/v1'}
Cypress.env('HOST') // 'laura.dev.local'
Cypress.env('api_server') // 'http://localhost:8888/api/v1/'
最后，还是要以用 --env 环境变量来指定环境变量：
cypress run --env host=kevin.dev.local,api_server=http://localhost:8888/api/v1
Cypress.env() // {host: 'kevin.dev.local', api_server: 'http://localhost:8888/api/v1'}
Cypress.env('host') // 'kevin.dev.local'
Cypress.env('api_server') // 'http://localhost:8888/api/v1/'
环境还能在在 plugins/index.js 中处理：
module.exports = (on, config) => {
// we can grab some process environment variables
// and stick it into config.env before returning the updated config
config.env = config.env || {}
// you could extract only specific variables
// and rename them if necessary
config.env.FOO = process.env.FOO
config.env.BAR = process.env.BAR
console.log('extended config.env with process.env.{FOO, BAR}')
return config
}
// 在spec文件中，都用Cypress.env()来获取
it('has variables FOO and BAR from process.env', () => {
// FOO=42 BAR=baz cypress open
// see how FOO and BAR were copied in "cypress/plugins/index.js"
expect(Cypress.env()).to.contain({
FOO: '42',
BAR: 'baz'
})
})
自定义Command
自定义一些命令可以简化测试脚本，以下举两个例子。
简化选择元素
Cypress.Commands.add('dataCy', (value) => cy.get(`[data-cy=${value}]`))
...
it('finds element using data-cy custom command', () => {
cy.visit('index.html')
// use custom command we have defined above
cy.dataCy('greeting').should('be.visible')
})
模拟登录
Cypress.addParentCommand("login", function(email, password){
var email = email || "[email protected]"
var password = password || "foobar"
var log = Cypress.Log.command({
name: "login",
message: [email, password],
consoleProps: function(){
return {
email: email,
password: password
}
}
})
cy
.visit("/login", {log: false})
.contains("Log In", {log: false})
.get("#email", {log: false}).type(email, {log: false})
.get("#password", {log: false}).type(password, {log: false})
.get("button", {log: false}).click({log: false}) //this should submit the form
.get("h1", {log: false}).contains("Dashboard", {log: false}) //we should be on the dashboard now
.url({log: false}).should("match", /dashboard/, {log: false})
.then(function(){
log.snapshot().end()
})
})
模拟支付请求
Cypress.Commands.add("paySuccess", (kpoOrderId, overrides = {}) => {
const log = overrides.log || true;
const timeout = overrides.timeout || Cypress.config('defaultCommandTimeout');
Cypress.log({
name: 'paySuccess',
message: 'KPO order id: ' + kpoOrderId
});
const options = {
log: log,
timeout: timeout,
method: 'POST',
url: Cypress.env('paymentUrl'),
form: true,
qs: {
orderNo: kpoOrderId,
notifyUrl: Cypress.env('notifyUrl'),
returnUrl: Cypress.env('returnUrl') + kpoOrderId,
},
};
Cypress._.extend(options, overrides);
cy.request(options);
});
...
// 在spec文件中
// 从页面获取网关单
cy.get('input[name="orderNo"]').then(($id) => {
kpoOrderId = $id.val();
cy.log(kpoOrderId);
// 自定义命令去成功支付
cy.paySuccess(kpoOrderId);
// 校验订单情况
// 因为cypress所有命令都是异步的，所以只能放在这，不能放到then之外！
validateOrderItem(productName, gameCount);
});
Cookie处理
Cookies.debug() 允许在cookie被改变时，会记录日志在console上：
Cypress.Cookies.debug(true)
Cypress会在每个test运行前自动的清掉所有的cookie。但可以用 preserveOnce() 来在多个test之间保留cookie，这在有登录要求的自动化测试方面很方便。
describe('Dashboard', function () {
before(function () {
cy.login()
})
beforeEach(function () {
// before each test, we can automatically preserve the
// 'session_id' and 'remember_token' cookies. this means they
// will not be cleared before the NEXT test starts.
Cypress.Cookies.preserveOnce('session_id', 'remember_token')
})
it('displays stats', function () {
})
it('can do something', function () {
})
})
最后，也可以用全局白名单来让Cypress不在每个test前清cookie。
登录的几种方法
Cypress可以直接处理cookie，所以直接表单登录和模拟POST请求就可以登录了。如果是cookie/session方式，还要留意要在test之间手工保留cookie，请见Cookie处理部分。
// 直接提交表单，凭证入cookie中，登录成功
it('redirects to /dashboard on success', function () {
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(password)
cy.get('form').submit()
// we should be redirected to /dashboard
cy.url().should('include', '/dashboard')
cy.get('h1').should('contain', 'jane.lane')
// and our cookie should be set to 'cypress-session-cookie'
cy.getCookie('cypress-session-cookie').should('exist')
})
// 自定义命令发请求，但还有csrf隐藏域
Cypress.Commands.add('loginByCSRF', (csrfToken) => {
cy.request({
method: 'POST',
url: '/login',
failOnStatusCode: false, // dont fail so we can make assertions
form: true, // we are submitting a regular form body
body: {
username,
password,
_csrf: csrfToken // insert this as part of form body
}
})
})
// csrf在返回的html中
it('strategy #1: parse token from HTML', function(){
// if we cannot change our server code to make it easier
// to parse out the CSRF token, we can simply use cy.request
// to fetch the login page, and then parse the HTML contents
// to find the CSRF token embedded in the page
cy.request('/login')
.its('body')
.then((body) => {
// we can use Cypress.$ to parse the string body
// thus enabling us to query into it easily
const $html = Cypress.$(body)
const csrf = $html.find("input[name=_csrf]").val()
cy.loginByCSRF(csrf)
.then((resp) => {
expect(resp.status).to.eq(200)
expect(resp.body).to.include("dashboard.html
")
})
})
...
})
// 如果csrf在响应头中
it('strategy #2: parse token from response headers', function(){
// if we embed our csrf-token in response headers
// it makes it much easier for us to pluck it out
// without having to dig into the resulting HTML
cy.request('/login')
.its('headers')
.then((headers) => {
const csrf = headers['x-csrf-token']
cy.loginByCSRF(csrf)
.then((resp) => {
expect(resp.status).to.eq(200)
expect(resp.body).to.include("dashboard.html
")
})
})
...
})
// 登录凭证不自动存入cookie，需手工操作
describe('Logging in when XHR is slow', function(){
const username = 'jane.lane'
const password = 'password123'
const sessionCookieName = 'cypress-session-cookie'
// the XHR endpoint /slow-login takes a couple of seconds
// we so don't want to login before each test
// instead we want to get the session cookie just ONCE before the tests
before(function () {
cy.request({
method: 'POST',
url: '/slow-login',
body: {
username,
password
}
})
// cy.getCookie automatically waits for the previous
// command cy.request to finish
// we ensure we have a valid cookie value and
// save it in the test context object "this.sessionCookie"
// that's why we use "function () { ... }" callback form
cy.getCookie(sessionCookieName)
.should('exist')
.its('value')
.should('be.a', 'string')
.as('sessionCookie')
})
beforeEach(function () {
// before each test we just set the cookie value
// making the login instant. Since we want to access
// the test context "this.sessionCookie" property
// we need to use "function () { ... }" callback form
cy.setCookie(sessionCookieName, this.sessionCookie)
})
it('loads the dashboard as an authenticated user', function(){
cy.visit('/dashboard')
cy.contains('h1', 'jane.lane')
})
it('loads the admin view as an authenticated user', function(){
cy.visit('/admin')
cy.contains('h1', 'Admin')
})
})
如果是jwt，可以手工设置jwt
// login just once using API
let user
before(function fetchUser () {
cy.request('POST', 'http://localhost:4000/users/authenticate', {
username: Cypress.env('username'),
password: Cypress.env('password'),
})
.its('body')
.then((res) => {
user = res
})
})
// but set the user before visiting the page
// so the app thinks it is already authenticated
beforeEach(function setUser () {
cy.visit('/', {
onBeforeLoad (win) {
// and before the page finishes loading
// set the user object in local storage
win.localStorage.setItem('user', JSON.stringify(user))
},
})
// the page should be opened and the user should be logged in
})
...
// use token
it('makes authenticated request', () => {
// we can make authenticated request ourselves
// since we know the token
cy.request({
url: 'http://localhost:4000/users',
auth: {
bearer: user.token,
},
})
.its('body')
.should('deep.equal', [
{
id: 1,
username: 'test',
firstName: 'Test',
lastName: 'User',
},
])
})
拖放处理
Cyprss中处理拖放很容易，在test runner中调试也很方便。
用mouse事件
// A drag and drop action is made up of a mousedown event,
// multiple mousemove events, and a mouseup event
// (we can get by with just one mousemove event for our test,
// even though there would be dozens in a normal interaction)
//
// For the mousedown, we specify { which: 1 } because dragula will
// ignore a mousedown if it's not a left click
//
// On mousemove, we need to specify where we're moving
// with clientX and clientY
function movePiece (number, x, y) {
cy.get(`.piece-${number}`)
.trigger('mousedown', { which: 1 })
.trigger('mousemove', { clientX: x, clientY: y })
.trigger('mouseup', {force: true})
}
用拖放事件
// 定义拖放方法
function dropBallInHoop (index) {
cy.get('.balls img').first()
.trigger('dragstart')
cy.get('.hoop')
.trigger('drop')
}
// 或手工处理
it('highlights hoop when ball is dragged over it', function(){
cy.get('.hoop')
.trigger('dragenter')
.should('have.class', 'over')
})
it('unhighlights hoop when ball is dragged out of it', function(){
cy.get('.hoop')
.trigger('dragenter')
.should('have.class', 'over')
.trigger('dragleave')
.should('not.have.class', 'over')
})
动态生成test
动态生成test，经常出现在数据驱动的场合下
用不同的屏幕测试
// run the same test against different viewport resolution
const sizes = ['iphone-6', 'ipad-2', [1024, 768]]
sizes.forEach((size) => {
it(`displays logo on ${size} screen`, () => {
if (Cypress._.isArray(size)) {
cy.viewport(size[0], size[1])
} else {
cy.viewport(size)
}
cy.visit('https://www.cypress.io')
cy.get(logoSelector).should('be.visible')
})
})
})
数据驱动，数据可以来源于fixture，也可以来源于实时请求或task！
context('dynamic users', () => {
// invoke：Invoke a function on the previously yielded subject.
before(() => {
cy.request('https://jsonplaceholder.cypress.io/users?limit=3')
.its('body')
.should('have.length', 10)
.invoke('slice', 0, 3)
.as('users')
// the above lines "invoke" + "as" are equivalent to
// .then((list) => {
// this.users = list.slice(0, 3)
// })
})
describe('fetched users', () => {
Cypress._.range(0, 3).forEach((k) => {
it(`# ${k}`, function () {
const user = this.users[k]
cy.log(`user ${user.name} ${user.email}`)
cy.wrap(user).should('have.property', 'name')
})
})
})
})
// plugins/index.js中
module.exports = (on, config) => {
on('task', {
getData () {
return ['a', 'b', 'c']
},
})
}
...
context('generated using cy.task', () => {
before(() => {
cy.task('getData').as('letters')
})
describe('dynamic letters', () => {
it('has fetched letters', function () {
expect(this.letters).to.be.an('array')
})
Cypress._.range(0, 3).forEach((k) => {
it(`tests letter #${k}`, function () {
const letter = this.letters[k]
cy.wrap(letter).should('match', /a|b|c/)
})
})
})
})
杂项
- fixture文件不会被test runner 的"live mode" watched到，修改它后，只能手工重新跑测试。
- Cypress只能检查到Ajax请求，不能检查到Fetch和其它比如
你可能感兴趣的:(Cypress前端E2E自动化测试记录)