这篇文章主要介绍“cypress e2e测试编写要注意什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“cypress e2e测试编写要注意什么”文章能帮助大家解决问题。
不要认为cypress是同步的
不要认为cypress是以同步的方式执行，不要用const、let、var等去定义一个变量，随后调用它
const a = cy.get('a');
cy.visit('https://example.cypress.io');
// 在这里有可能拿不到a，因为cy.get是异步操作，应该在before（）钩子函数中定义变量。
a.first().click();
尽量避免直接访问第三方
尽量避免直接访问第三方，因为第三方提供的访问API，返回的数据不可控，可能会发生改变；如果有这个需求，要使用cy.request()来调用第三方库的API。
登录需要注意的地方
登录在cypress上有些困难： 许多OAuth服务商会运行A/B两套方案，导致登录屏幕动态更改，从而导致自动化测试变得困难。另外，OAuth服务商会根据你的访问次数和频率来判断是否是机器人访问，如果一旦被认定不是真人操作，就会导致不好的结果。
解决方案
token存根，并在测试前带上token返回第三方，从而达到欺骗第三方已经登录的目的
-
如果非要获取真实令牌，使用cy.request()并使用OAuth提供的API（这些API不常修改）
-
除了让测试代码绕过 OAuth 之外，您还可以向服务器寻求帮助。也许 OAuth 令牌所做的只是在数据库中生成一个用户。通常，OAuth仅在最初有用，并且您的服务器会与客户端建立自己的会话。如果是这种情况，请使用 cy.request（） 直接从服务器获取会话并完全绕过提供程序。
避免测试用例之间的相互依赖
现在的test依赖于之前的test创造的环境，这是错误的写法。正确的写法应该是将之前test需要生成的结果写在before() 钩子中，每次都可以共享。
使用官方更加推荐的写法
比较以下两段代码的差异：
// 不好的写法
describe('my form', () => {
beforeEach(() => {
cy.visit('/users/new')
cy.get('[data-testid="first-name"]').type('johnny')
})
it('has validation attr', () => {
cy.get('[data-testid="first-name"]').should('have.attr', 'data-validation', 'required')
})
it('has active class', () => {
cy.get('[data-testid="first-name"]').should('have.class', 'active')
})
it('has formatted first name', () => {
cy.get('[data-testid="first-name"]').should('have.value', 'Johnny')
})
})
// 推荐的写法
describe('my form', () => {
beforeEach(() => {
cy.visit('/users/new')
})
it('validates and formats first name', () => {
cy.get('[data-testid="first-name"]').type('johnny').should('have.attr', 'data-validation', 'required').and('have.value', 'Johnny')
})
})
为什么建议写成第二段代码那样？
集成测试和单元测试不同，你始终能知道失败的断言和位置在哪里。不用自己将其拆成一个个小的单元去测试哪段代码出问题。
-
另外，当写成一个个的测试用例时，在结束一个测试用例后，会重置测试条件，从而造成性能浪费。
避免写可能失败的代码
我们在做出数据请求后，希望等待数据响应后，再做接下来的操作。有可能会写成等待多少秒后再执行下一步的操作。但是，这里存在的问题是，
如果在既定的时间内并没有返回数据，就会导致测试失败。
正确的写法应该是给请求一个别名，并等待请求成功后，再做接下来的操作。
// 错误的写法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }])
cy.get('#fetch').click()
cy.wait(4000) // 不要自己预计写死等待时间
cy.get('table tr').should('have.length', 2)
// 正确的写法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }]).as('getUsers')
cy.get('#fetch').click()
cy.wait('@getUsers') // 正确等待数据请求回来
cy.get('table tr').should('have.length', 2)
关于“cypress e2e测试编写要注意什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注本站行业资讯频道，小编每天都会为大家更新不同的知识点。
